Псевдоклас :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.
Псевдокласи для кожного браузера слід писати окремо, а не перераховувати їх через кому.