CSS псевдокласс :fullscreen

Псевдокласс :fullscreen применяет стиль к элементам, которые отображаются в полноэкранном режиме.

Селектор :fullscreen работает, когда включается полноэкранный режим.

Селектор :fullscreen работает со -webkit-, -moz-, -ms- префиксами для максимальной совместимости браузера.

Версия

Fullscreen API

Синтаксис

:fullscreen {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example {
      padding: 10px;
      height: 200px;
      width: 95%;
      background-color: #1c87c9;
      }
      .example p {
      visibility: hidden;
      text-align: center;
      color: #eeeeee;
      font-size: 3em;
      }
      .example:-webkit-full-screen {
      background-color: #8ebf42;
      width: 100vw;
      height: 100vh;
      }
      .example:-webkit-full-screen p {
      visibility: visible;
      }
      .example:-moz-full-screen {
      background-color: #8ebf42;
      width: 100vw;
      height: 100vh;
      }
      .example:-moz-full-screen p {
      visibility: visible;
      }
      .example:-ms-fullscreen {
      background-color: #8ebf42;
      width: 100vw;
      height: 100vh;
      }
      .example:-ms-fullscreen p {
      visibility: visible;
      }
      .example:fullscreen {
      background-color: #8ebf42;
      width: 100vw;
      height: 100vh;
      }
      .example:fullscreen p {
      visibility: visible;
      }
    </style>
  </head>
  <body>
    <h2>Пример псевдокласса :fullscreen</h2>
    <div class="container">
      <div class="example" id="example">
        <p>Fullscreen mode</p>
      </div>
      <br>
      <button onclick="var el = document.getElementById('example'); el.webkitRequestFullscreen();">Нажмите сюда</button>
    </div>
  </body>
</html>

В вышеприведенном примере нажмите на кнопку и увидите элемент в полноэкранном режиме.

Поддержка браузера

chrome edge firefox safari opera
15.0
-webkit-
12.0+ 64.0+ 6.0
-webkit-
15.0
-webkit-

Практикуйте свои знания

Как работает псевдокласс :fullscreen в CSS?
Считаете ли это полезным?