Depuis un certain temps, la plupart des navigateurs peuvent passer en mode plein écran ou en mode borne. En gros, l'interface utilisateur du navigateur Chrome se fait discrète, et le contenu prend le dessus. Pour les applications installées depuis le Chrome Web Store, les utilisateurs pouvaient même configurer manuellement une application pour qu'elle s'exécute en plein écran lorsqu'elle est ouverte depuis la page "Nouvel onglet". Le plein écran manuel est bien. L'affichage en plein écran programmatique est meilleur !
L'API Full Screen permet aux applications Web de demander de manière programmatique à tout contenu de la page d'entrer en mode plein écran du navigateur, à partir de JavaScript. Cela signifie que les jeux WebGL et <canvas> peuvent enfin devenir totalement immersifs, que les vidéos peuvent donner l'impression d'être sur grand écran et que les magazines en ligne peuvent donner l'impression d'être des magazines papier. J'adore le navigateur, mais nous ne devons pas nous laisser enfermer par lui.
Si vous souhaitez ignorer les détails, voici une démonstration:
Comment fonctionne l'API ? Par exemple, si vous souhaitez qu'un <div> passe en plein écran, dites-lui simplement:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Pour quitter le mode plein écran, document expose une méthode à cet effet:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Le contenu en mode plein écran est centré dans la fenêtre d'affichage du navigateur. C'est au développeur de styliser ce contenu de la manière la plus appropriée pour l'affichage. En règle générale, vous souhaitez que votre <div> occupe l'intégralité de l'espace de l'écran. La bonne nouvelle est que l'API inclut de nouveaux pseudo-sélecteurs CSS pour cela:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
Les pseudo-sélecteurs CSS permettent de styliser très facilement le contenu en plein écran comme vous le souhaitez.
L'API Full Screen est activée par défaut dans Chrome 15, Firefox 14, IE 11 et Opera 12.1. Pour en savoir plus sur le reste de l'API, consultez la spécification.
Mise à jour le 11/10/2012: mise en conformité avec les modifications apportées aux spécifications. L'apostrophe "S" de requestFullscreen() a été mis en minuscule, et document.webkitCancelFullScreen() a été remplacé par document.webkitExitFullscreen(). Mise à jour du commentaire sur la compatibilité des navigateurs.
Mise à jour le 11/02/2014: pour inclure des préfixes pour IE, ajouter la syntaxe CSS standard et mettre à jour le commentaire de compatibilité du navigateur. Merci @dstorey et @patrickkettner.