HTML5 - Fonctionnalités évoluées suite

- Media queries -

1 - Mise en place des media queries

Les media queries font partie des nouveautés de CSS3. Il ne s'agit pas de nouvelles propriétés mais de règles que l'on peut appliquer dans certaines conditions. Concrètement, vous allez pouvoir dire « Si la résolution de l'écran du visiteur est inférieure à tant, alors applique les propriétés CSS suivantes ». Cela vous permet de changer l'apparence du site dans certaines conditions : vous pourrez augmenter la taille du texte, changer la couleur de fond, positionner différemment votre menu dans certaines résolutions, etc.
Contrairement à ce qu'on pourrait penser, les media queries ne concernent pas que les résolutions d'écran. Vous pouvez changer l'apparence de votre site en fonction d'autres critères comme le type d'écran (smartphone, télévision, projecteur…), le nombre de couleurs, l'orientation de l'écran (portrait ou paysage), etc. Les possibilités sont très nombreuses !

Les règles disponibles
Il existe de nombreuses règles permettant de construire des media queries. Je vous présente ici les principales :
• color : gestion de la couleur (en bits/pixel).
• height : hauteur de la zone d'affichage (fenêtre).
• width : largeur de la zone d'affichage (fenêtre).
• device-height : hauteur du périphérique.
• device-width : largeur du périphérique.
• orientation : orientation du périphérique (portrait ou paysage).
• media : type d'écran de sortie. Quelques-unes des valeurs possibles :
  ◦ screen : écran « classique » ;
  ◦ handheld : périphérique mobile ;
  ◦ print : impression ;
  ◦ tv : télévision ;
  ◦ projection : projecteur ;
  ◦ all : tous les types d'écran.

Les règles peuvent être combinées à l'aide des mots suivants :
• only : « uniquement » ;
• and : « et » ;
• not : « non ».

Quelques exemples pour la compréhension :
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px)
/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)
/* Sur les téléviseurs */
@media tv
/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)

2 - Modification de la largeur de page en fonction de la taille d'écran

@media all and (max-width: 1024px)   /* Si la largeur de la fenêtre ne dépasse pas 1024 px, alors exécuter les règles CSS suivantes */
{
  body
  {
  width: auto;
  }
}

3 - Modification du positionnement du menu en fonction de la taille d'écran

@media all and (max-width: 1024px)
{
  nav
  {
  width: auto;
  text-align: left;
  }
  nav li
  {
  display: block;   /* Chaque élément du menu s'écrira en dessous du précédent ( valeur block ) */
  padding-left: 4px;
  }
  nav a
  {
  font-size: 1.1em;   /* Taille du texte diminuée, valeur initiale 1.3em */
  }
  nav a:hover
  {
  border-bottom: 0;   /* Suppression de la barre de soulignement */
  }
}

4 - Suppression de la bannière en fonction de la taille d'écran

@media all and (max-width: 1024px)
{
  #bannière, h4
  {
  display: none;
  }
}

5 - Déplacement de l'élément aside sous l'élément article

@media all and (max-width: 1024px)
{
  article
  {
  width: auto;
  display: block;
  }
  aside, aside h4
  {
  width: auto;
  display: block;
  position: static;
  margin: 3px;
  }
}

... Voilà le cours se termine ...