:fullscreen

par 3 contributeurs :

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

La pseudo-classe CSS :fullscreen s'applique à tout élément actuellement affiché dans un mode plein-écran. Voir Utiliser le mode plein écran pour plus d'informations.

La proposition du W3C utilise :fullscreen en un seul mot, sans tiret, mais les implémentations expérimentales de WebKit et Gecko utilisent une variante préfixée en deux mots liés par un tiret: respectivement :-webkit-full-screen et :-moz-full-screen.

Exemples

*:fullscreen {
  position:fixed;
  top:0; 
  right:0; 
  bottom:0; 
  left:0;
  margin:0;
  box-sizing:border-box;
  width:100%;
  height:100%;
  object-fit:contain;
}
h1:fullscreen {
  border:1px solid #f00;
}
p:fullscreen {
  font-size: 200%;
}

Spécifications

Spécification Statut Commentaire
Fullscreen API
La définition de ':fullscreen' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 15.0 -webkit[1] 9.0 (9.0)-moz[1] 11 -ms Pas de support 6.0 -webkit[1]
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? 9.0 (9.0) Pas de support Pas de support Pas de support

[1]Les versions préfixées de Gecko et Webkit ont un trait d'union entre full et screen, mais la proposition du W3C utilise un seul mot : fullscreen, :-webkit-full-screen, :-moz-full-screen.

Voir également

Étiquettes et contributeurs liés au document

Contributeurs à cette page : FredB, teoli, tregagnon
Dernière mise à jour par : FredB,