:fullscreen - Sélecteur CSS
Résumé des caractéristiques du sélecteur :fullscreen
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 ::backdrop 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 ::backdrop 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.
:fullscreenNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
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.
:open::closed::modal::fullscreen::picture-in-picture:
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme un menu
Pseudo-classe désignant les éléments qui bloquent les interactions avec les autres éléments.
Pseudo-classe désignant les éléments affichés en plein écran.
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.