:fullscreen - Sélecteur CSS

Pseudo-classe :fullscreen - Description

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.

Pseudo-classe :fullscreen - Exemples d'utilisation.

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.

Pseudo-classe :fullscreen - Compatibilité des navigateur.

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.

97%

2%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

2

Firefox

Firefox pour Androïd

Chrome

Edge

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Pseudo-classe :fullscreen - Historique.

• Sélecteurs - Niveau 4

  Concernant :fullscreen. Introduction de la pseudo-classe :fullscreen.
  

  29 Septembre 2011

  Document de travail.

  

  

  

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.