Псевдокласс :fullscreen
Обновлено: 11.01.2023
Псевдокласс :fullscreen
Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. При этом скрывается заголовок окна, адресная строка, вкладки, меню и другие стандартные элементы и браузер отображается на весь экран. Для перехода из стандартного режима в полноэкранный и обратно обычно применяется клавиша F11.
Чтобы псевдокласс работал, предварительно для отдельных элементов следует разрешить полноэкранный режим с помощью скриптов (см. пример).
Синтаксис
<i>Селектор</i>:fullscreen { ... }Значения
Нет.
Пример
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>:fullscreen</title>
<script>
function fullScreen() {
var el = document.getElementById('msg'); // Get the element
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(); // Standard
}
</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>
</head>
<body>
<div id="msg">
The page is displayed in full screen mode.
</div>
<p><button onclick="fullScreen()">View full screen!</button></p>
</body>
</html>Примечание
Internet Explorer поддерживает псевдокласс :-ms-fullscreen.
Chrome, Opera, Safari поддерживают псевдокласс :-webkit-full-screen.
Firefox поддерживает псевдокласс :-moz-full-screen.
Псевдоклассы для каждого браузера следует писать отдельно, а не перечислять их через запятую.