CSS :fullscreen Pseudo Class

CSS :fullscreen Pseudo-Class 

The :fullscreen pseudo-class applies styles to an element when it is displayed in full-screen mode using the Fullscreen API. This is useful for styling videos, images, or any other elements that expand to full screen when triggered.

1. Syntax

selector:fullscreen {
  /* CSS styles here */
}

Example:

video:fullscreen {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

✅ When a <video> element enters fullscreen mode, it will cover the entire viewport with a black background.

2. Example – Styling an Image in Fullscreen Mode

<img src="example.jpg" alt="Fullscreen Image" id="myImage">
<button onclick="toggleFullScreen()">Go Fullscreen</button>

<script>
  function toggleFullScreen() {
    let elem = document.getElementById("myImage");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    }
  }
</script>

img:fullscreen {
  border: 5px solid red;
}

✅ When the image enters fullscreen mode, it will have a red border.

3. Example – Styling a Fullscreen <div>

<div id="fullscreenDiv">Click to Enter Fullscreen</div>

<script>
  document.getElementById("fullscreenDiv").addEventListener("click", function () {
    if (this.requestFullscreen) {
      this.requestFullscreen();
    }
  });
</script>

#fullscreenDiv:fullscreen {
  background: black;
  color: white;
  text-align: center;
  font-size: 2em;
}

✅ When the <div> enters fullscreen mode, its background will turn black, text white, and font larger.

4. Browser Support

✅ Supported in Chrome, Edge, Firefox, and Opera.
❌ Not supported in Safari (as of recent versions).

5. Best Practices

✔ Use :fullscreen to provide a better user experience for fullscreen elements.
✔ Always check for browser support when using fullscreen styles.
✔ Use JavaScript to trigger fullscreen mode since no pure CSS method exists.