Стили в полноэкранном режиме
Описание
Псевдокласс :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>
Читайте также
Свойство resize
Указывает, можно ли пользователю изменять размеры текстового поля.
Стиль последнего элемента
Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :last...
Свойство animation-fill-mode
Указывает, как нужно применять стили к объекту анимации до и после ее выполнения.
Стили к элементам на основе нумерации
Псевдокласс :nth-child задаёт правила стилей для элементов, которые не содержат указанный селектор.
Свойство word-wrap
Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.