:fullscreen CSS Pseudo Class

Description

The :fullscreen pseudo-class applies to elements when the browser is in full-screen mode. At the same time, the window title, address bar, tabs, menus and other standard elements are hidden and the browser is displayed in full screen. To switch from standard mode to full screen and vice versa, the F11 key is usually used.

Syntax

element:fullscreen { … }

Example

HTML

<div class="container">

  <p><em>Click the button below to enter the element into fullscreen mode.</em></p>

  <div class="element" id="element">

    <p>I'm in fullscreen mode!</p>

  </div>

  <br>

  <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>

</div>

CSS

em {

  font-size: 0.9em;

}

.container {

  width: 90%;

}

.element {

  padding: 20px;

  height: 100px;

  width: 100%;

  background-color: #7ef3d1;

}

.element p {

  visibility: hidden;

  text-align: center;

  color: white;

  font-size: 3em;

}

.element:-webkit-full-screen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:-webkit-full-screen p {

  visibility: visible;

}

.element:-moz-full-screen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:-moz-full-screen p {

  visibility: visible;

}

.element:-ms-fullscreen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:-ms-fullscreen p {

  visibility: visible;

}

.element:fullscreen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:fullscreen p {

  visibility: visible;

}

Result

Notes

Internet Explorer supports the pseudo -class: -ms-fullscreen.
Chrome, Opera, Safari support the pseudo -class: -webkit-full-screen.
Firefox supports the pseudo-class : -moz-full-screen.
Pseudo-classes for each browser should be written separately, but not separated by commas.