Стили в полноэкранном режиме
Описание
Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. При этом скрывается заголовок окна, адресная строка, вкладки, меню и другие стандартные элементы и браузер отображается на весь экран. Для перехода из стандартного режима в полноэкранный и обратно обычно применяется клавиша F11.
Чтобы псевдокласс работал, предварительно для отдельных элементов следует разрешить полноэкранный режим с помощью скриптов.
Синтаксис
Селектор:fullscreen { ... }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script>
function fullScreen() {
var el = document.getElementById('msg'); // Получаем элемент
if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); // Chrome, Opera, Safari
else if (el.mozRequestFullScreen) el.mozRequestFullScreen(); // Firefox
else if (el.msRequestFullscreen) el.msRequestFullscreen(); // Internet Explorer, Edge
else if (el.requestFullscreen) el.requestFullscreen(); // Стандарт
}
</script>
<style>
body { margin: 0; }
#msg {
padding: 10px;
background: #bc7062;
color: #fff;
}
#msg:-ms-fullscreen { background: #6088a5; }
#msg:-webkit-full-screen { background: #6088a5; }
#msg:-moz-full-screen { background: #6088a5; }
</style>
<div id='msg'>
Страница отображается в полноэкранном режиме.
</div>
<p>
<button onclick='fullScreen()'>Посмотреть на полном экране!</button>
</p>
</body>
</html>
Читайте также
Свойство grid-column
Сокращение для grid-column-start + grid-column-end <br>grid-column-start / grid-row-start —...
Свойство filter
Применяет художественные эффекты к элементам. Обычно используется для изображений.
Стиль для переключателей в неопределённом состоянии
Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для typ...
Функция attr()
Функция применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например,...
Свойство animation-duration
Устанавливает время длительности анимации.