:fullscreen - Sélecteur CSS

Description de la pseudo-classe :fullscreen.

La pseudo-classe :fullscreen cible les éléments affichés en plein écran. Attention ! Il ne s'agit pas de l'affichage en plein écran de la page du navigateur (touche F11 sur Windows ou +F sur MacIntosh), mais de l'affichage en plein écran d'un ou plusieurs éléments de la page, comme une image, une vidéo, etc.

Cet affichage en plein écran est réalisé généralement par un peu de code Javascript (Fullscreen API) suivant l'exemple ci-dessous :

function pleinEcran(element) { element.requestFullscreen(); }

Reportez-vous aussi à la page sur le pseudo-élément qui cible l'arrière-plan des éléments affichés en plein écran.

Exemples d'utilisation de :fullscreen.

Un clic sur le tableau ou sur l'image ci-dessous les affiche en plein écran. La touche echap leur redonne leur taille originale. Dans le premier exemple (le tableau), le code CSS insère un arrière-plan avec les mots "Mode plein écran" derrière les éléments affichés en plein écran. Il change également la taille et la couleur des caractères.

Chrome	Edge	Firefox	Opera

L'image ci-dessous peut également être affichée en plein écran. On retrouve l'arrière-plan avec les mots "Mode plein écran", mais en plus, le pseudo-élément a été utilisé pour définir la couleur de l'arrière-plan. On aurait pu tout aussi bien définir cette couleur sur la pseudo-classe :fullscreen.

Compatibilité des navigateurs.

La pseudo-classe :fullscreen est maintenant correctement reconnue par les navigateurs.

Remarques :

(1) Avec le préfixe -ms- du navigateur.

(2) Uniquement disponible sur IPad (pas sur IPhone).
Utilise la propriété non standardisée -webkit-full-screen.

1

Pseudo-classe
:fullscreen

2

Cible tous les
éléments de la pile

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

2

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Voir aussi : pseudo-classes relatives à l'état d'affichage.

Les pseudo-classes ci-dessous permettent de désigner un élément en fonction de son mode d'affichage : plein-écran, dans une fenêtre séparée, etc.

::backdrop
Pseudo-élément ciblant l'élément ajouté par les navigateurs en arrière des boites de dialogue ou des éléments affichés en plein écran.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).
:modal
Pseudo-classe désignant les éléments affichés en modal : qui bloquent les interactions avec les autres éléments.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
⚠
:picture-in-picture
Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.