Intégrés à HTML5, les API étaient nombreuses et l'une des meilleures était l'API Fullscreen qui permet au navigateur de faire ce qui n'était possible qu'en flash depuis longtemps: afficher la page Web en mode plein écran pour l'utilisateur.
Cela est pratique si vous affichez des vidéos ou des images, ou si vous développez un jeu. En fait, tout contenu devant être ciblé peut bénéficier de l'API Fullscreen.
Mieux encore, l’API Fullscreen est très simple à utiliser ...
Un certain nombre de méthodes font partie de l'API Fullscreen:
element.requestFullScreen()Cette méthode permet à un seul élément d’aller en plein écran.
Document.getElementById(“myCanvas”).requestFullScreen()Cela entraînera le canevas avec l'ID «myCanvas» pour aller en plein écran.
document.cancelFullScreen()Cela quitte simplement le mode plein écran et retourne à la vue du document.
Document.fullScreenCela retournera vrai si l'utilisateur est en mode plein écran.
document.fullScreenElementRenvoie l'élément qui est actuellement en mode plein écran.
Notez que ce sont les méthodes standard, mais pour le moment vous aurez besoin de préfixes de fournisseurs pour que cela fonctionne dans Chrome, Firefox et Safari (Internet Explorer et Opera ne supportent pas cette API actuellement).
Puisque nous devons d'abord trouver quelle méthode le navigateur reconnaît, nous allons créer une fonction qui trouvera la bonne méthode pour le navigateur et l'appel:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Comme vous pouvez le voir, cette fonction permet de voir si l'une des méthodes requestFullScreen renvoie true et appelle ensuite la fonction du navigateur correct à l'aide de son préfixe fournisseur.
Après cela, il ne nous reste plus qu'à appeler la fonction fullScreen comme suit:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Cela enverra une invite à l'utilisateur demandant la permission d'aller en plein écran, s'il a accepté toutes les barres d'outils du navigateur disparaîtront et que la seule chose à l'écran sera la page Web souhaitée ou l'élément unique.
Cette méthode nécessite également des préfixes de fournisseurs, nous allons donc utiliser la même idée que ci-dessus et créer une fonction qui déterminera le préfixe à utiliser en fonction du navigateur de l'utilisateur.
Une chose que vous remarquerez est que cette méthode n'a besoin d'aucun élément passé, car contrairement à la méthode requestFullScreen, elle s'applique toujours à l'ensemble du document.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Livrée avec cette API JavaScript, vous trouverez une pseudo-classe CSS appelée: plein écran, qui peut être utilisée pour styliser tous les éléments de la page Web en mode plein écran, ce qui peut s'avérer utile car la taille du navigateur augmente un peu mode plein écran.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Sachez que vous ne pouvez pas séparer les préfixes du fournisseur par des virgules car le navigateur ne les lit pas:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Pour que les styles soient correctement appliqués, vous devez placer chaque préfixe de fournisseur dans son propre bloc.
Cette API JavaScript est l'une des moins connues et fournie avec HTML5, mais à mon avis, elle est à la fois efficace et simple à mettre en œuvre. L'expérience utilisateur améliorée de se concentrer sur un seul élément, en particulier pour la vidéo, les images et les jeux, vaut bien les quelques lignes de code impliquées.
Avez-vous implémenté l'API Fullscreen n'importe où? A quoi pouvez-vous penser pour cela? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de focus via Shutterstock.