Comment tirer parti de l'API plein écran… et le coiffer

Regardons l'API plein écran en JavaScript. Il vous permet de faire une chose assez puissante: le dépistage complet exactement un élément particulier que vous voulez. Non seulement cela, mais CSS peut également aider avec un sélecteur spécial.

Chaque navigateur majeur a une fonctionnalité intégrée en plein écran sous la forme de maximisation de la fenêtre du navigateur lui-même. Vous appuyez sur F11 ou ⌃⌘F (Winkey ⬆ sur PC) et le navigateur remplira votre moniteur, allant jusqu'à supprimer les composants de l'interface utilisateur (comme les boutons de gestion de la fenêtre).

Lorsque vous passez en mode plein écran, il maximise l'espace pour qu'une page Web s'affiche, mais ce n'est pas toujours exactement ce que vous voulez. Plus souvent, vous souhaitez soit plein écran un élément particulier de la page, par exemple, une vidéo ou un jeu. C'est là que l'API plein écran est utile.

L'API plein écran aide à réaliser quelque chose que les modes plein écran du navigateur ne pourront pas, comme:

• Plein écran un élément spécifique de la page et non toute la page.
• Faites correspondre les éléments dans CSS avec le: Classe pseudo-écran complète, qui vérifie si l'indicateur plein écran d'un élément particulier est défini.
• Contrôle complet sur le moment de saisir plein écran.

Faisons-le

Tout d'abord, décidez quel élément doit être montré en mode plein écran. Après cela, la seule chose est de vérifier si cet élément dispose de la méthode requestfullScreen (), puis de l'appeler sur l'élément.

Commençons par un élément simple à plein écran:

 <div> </div>

Tout d'abord, nous le sélectionnerons et vérifierons s'il a la méthode. Si c'est le cas, alors nous appelons la méthode de demande. C'est aussi simple:

 Soit FullScreen = Document.QuerySelector ("# FullScreen");

if (fullScreen.requestfullScreen) {
  fullScreen.requestfullScreen ();
}

Mais, nous voulons exécuter ce code conditionnellement et pas dès que quelqu'un atterrit sur la page. Nous ferons un bouton qui bascule le mode plein écran.

 <div>
  <fontificateur> Bascule FullScreen Button>
</fontificateur>
</div>

 Soit FullScreen = Document.QuerySelector ("# FullScreen");
LET Button = Document.QuerySelector ("# Button");

Button.AdDeventListener ("Click", () => {
  if (! document.fullScreelement) {
    plein écran? .requestfullScreen ();
  } autre {
    document.exitfullScreen ();
  }
});

Remarquez comment nous utilisons Document.fullScreelement. S'il y a un élément qui a déjà été plein écran, il le rendra; Sinon, il reviendra null.

C'est également une bonne idée de vérifier si le mode plein écran a même été activé dans le navigateur de l'utilisateur. Pour cela, nous pouvons utiliser Document.FullScreenEnabled. Il renvoie un booléen disant si nous pouvons utiliser ou non l'API plein écran dans ce navigateur particulier. L'écran complet pourrait être désactivé par l'utilisateur, ou le navigateur peut ne pas le prendre en charge.

La dernière méthode que nous couvrirons est document.exitfullScreen (). Un utilisateur doit toujours avoir la possibilité de quitter le mode plein écran en appuyant sur ESC sur le clavier. Nous pourrions faire une sorte de façon personnalisée de quitter le mode plein écran à l'aide de l'ExitfullScreen. Peu importe quel élément était plein écran; Il reviendra en mode fenêtre après avoir appelé cette méthode.

Comme vous pouvez le voir dans le code de notre élément de bouton, nous vérifions d'abord si le plein écran a déjà été activé. Ensuite, en fonction de ces informations, nous passons en mode plein écran, soit nous revenons en mode fenêtre.

Styling plein écran

Ce qui est cool à propos de l'API plein écran est que nous pouvons correspondre à un élément plein écran dans CSS. C'est exactement ce que le pseudo-sélectionneur: plein écran est conçu pour faire!

 #fullScreen: plein écran {
  Color d'arrière-plan: jaune;
}

Comme vous pouvez le voir, le #fullscreen div est le seul élément qui obtient une couleur d'arrière-plan jaune lorsque l'élément est en mode plein écran, et uniquement en mode plein écran. La capture est que nous ne pouvons pas réellement sélectionner un élément comme celui-ci; Nous ne pouvons sélectionner que l'élément racine qui est en mode plein écran. Aucun des éléments enfants ne correspondra.

En d'autres termes, quelque chose comme #button: plein écran ne sélectionnera pas un bouton qui est contenu dans l'élément plein écran - c'est-à-dire, à moins que nous voulions que le bouton soit plein d'écran au lieu de la div.

Certains navigateurs nécessitent un préfixe pour que cela fonctionne. Firefox utilise -moz-full-écran et les navigateurs basés sur webkit utilisent -webkit-full-écran.

 #fullScreen: -webkit-full-écran {
  Color d'arrière-plan: jaune;
}

#fullScreen: -moz-full-écran {
  Color d'arrière-plan: jaune;
}

Saviez-vous que lorsque nous sommes en mode plein écran, il y a un pseudo-élément qui est rendu juste en dessous de votre élément plein écran? Par défaut, ce pseudo-élément est noir. Si vous voulez changer les styles de ce pseudo-élément, vous pouvez le faire comme ceci:

 #fullScreen :: Backdrop {
  Color d'arrière-plan: SkyBlue;
}

Voici le dernier exemple. Gardez à l'esprit que le mode plein écran peut ne pas fonctionner avec des stylos intégrés, vous devrez donc le voir en dehors de cet article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!