Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:fullscreen
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Lapseudo-classeCSS:fullscreen permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.
Syntaxe
:fullscreen { /* ... */}Notes d'utilisation
La pseudo-classe:fullscreen permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.
Exemples
Mise en forme d'un élément en plein écran
Cet exemple applique une couleur d'arrière-plan différente à un élément<div>, selon qu'il est ou non en mode plein écran. Il comprend un élément<button> permettant d'activer ou de désactiver le mode plein écran.
<div> <h1>Démonstration du MDN Web Docs : la pseudo-classe :fullscreen</h1> <p> Cette démonstration utilise la pseudo-classe <code>:fullscreen</code> pour changer automatiquement le style d'un bouton utilisé pour activer et désactiver le mode plein écran, entièrement en utilisant CSS. </p> <button>Activer/Désactiver le plein écran</button></div>La pseudo-classe:fullscreen est utilisée pour remplacer labackground-color de l'élément<div> lorsqu'il est en mode plein écran.
.element { background-color: lightyellow;}.element:fullscreen { background-color: lightpink;}Le JavaScript suivant fournit une fonction de gestion d'événement qui active ou désactive le mode plein écran lorsque l'utilisateur·ice clique sur le bouton<button>.
document.querySelector(".toggle").addEventListener("click", (event) => { if (document.fullscreenElement) { // Si un élément est en plein écran, quitter le plein écran. document.exitFullscreen(); return; } // Mettre l'élément .element en plein écran. document.querySelector(".element").requestFullscreen();});.element { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: sans-serif; padding: 1.2em;}Spécifications
| Specification |
|---|
| Selectors Level 4 # selectordef-fullscreen |
| Fullscreen API # css-pc-fullscreen |
Compatibilité des navigateurs
Voir aussi
La pseudo-classe
::backdropLes API DOM :
L'attribut
allowfullscreen