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:
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 {...}