Pseudoklasa CSS :fullscreen wybiera element, który jest w trybie pełnoekranowym. Należy jednak pamiętać, że to nie dotyczy sytuacji, gdy użytkownik włączy tryb pełnoekranowy w swojej przeglądarce (przez naciśnięcie klawisza F11), tylko przypadku, gdy element zostanie wprowadzony w tryb pełnoekranowy za pomocą API Fullscreen.
Przykład użycia :fullscreen
Aby pseudoklasa :fullscreen zadziałała, element musi zostać wprowadzony w tryb pełnoekranowy za pomocą API Fullscreen. W najprostszy sposób można to zrobić przy użyciu atrybutu onclick i funkcji tego API o nazwie requestFullscreen(). Spójrz na poniższy kod:
<style>
button:fullscreen {
color: green;
font-weight: bold;
}
</style>
...
<button onclick="requestFullscreen()">Kliknij mnie</button>Normalnie ten przycisk ma domyślne ustawienia, czyli czarne niepogrubione pismo, jak widać na poniższym zrzucie ekranu:
Kiedy użytkownik kliknie przycisk Kliknij mnie, nastąpi przełączenie przeglądarki w tryb pełnoekranowy i zadziała pseudoklasa :fullscreen, która zmieni ustawienia pisma na kolor zielony i pogrubienie. Spójrz na poniższy zrzut ekranu.
Możesz też to wypróbować samodzielnie. Kliknij poniższy przycisk, aby sprawdzić, co się stanie. Aby wyłączyć tryb pełnoekranowy, naciśnij klawisz Esc.
Składnia
Składnia pseudoklasy :fullscreen:
:fullscreen {...}