Stylisation d'éléments en plein écran avec CSS | Développement web

Introduction

Dans ce laboratoire, nous allons explorer comment utiliser le sélecteur de pseudo-élément CSS :fullscreen pour appliquer des styles à un élément lorsqu'il est en mode plein écran. Nous allons créer un bouton à l'aide de Element.requestFullscreen() pour mettre l'élément en plein écran dans le but de prévisualiser le style. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de créer des éléments en plein écran avec des styles personnalisés à l'aide de CSS.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Plein écran

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour styliser un élément en mode plein écran, vous pouvez utiliser le sélecteur de pseudo-élément CSS :fullscreen. Vous pouvez également créer un bouton qui met l'élément en plein écran à des fins de prévisualisation à l'aide d'un <button> et de Element.requestFullscreen(). Voici un exemple de code :

<div class="container">
  <p>
    <em
      >Cliquez sur le bouton ci-dessous pour mettre l'élément en mode plein
      écran.
    </em>
  </p>
  <div class="element" id="element">
    <p>Je change de couleur en mode plein écran!</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    Passer en plein écran!
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

/* Pour Internet Explorer */
.element:-ms-fullscreen p {
  visibility: visible;
}

/* Pour les navigateurs modernes */
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire Plein écran. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.