Стили в полноэкранном режиме
Описание
Псевдокласс :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>Читайте также
currentColor
Ключевое слово color для текущего элемента. Это позвол...
Функция repeating-linear-gradient()
Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gra...
Обращение к самому главному родительскому элементу
Псевдокласс :root определяет корневой элемент документа.
В HTML этот селектор всегда соответствует элементу html, но в стилях приоритет :root в...
Свойство transition-timing-function
Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.
transition-timing-funct...