Pseudoklasa CSS :fullscreen

> Dodaj do ulubionych

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:

Pseudoklasa CSS :fullscreen - Przycisk z domyślnymi ustawieniami stylów

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.

Efekt działania pseudoklasy :fullscreen

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

Zobacz również