Media Queries

Il n’a pas été retenu par le CSS1 mais le CSS2 permettait déjà d’associer une feuille de style selon les différents types de médias. Par exemple : « screen » and « print ». Avec les « Media Queries », le CSS3 va bien au delà et permet des ajustement selon la grandeur maximale et minimum de l’écran par exemple avec les propriétés min-width ou max-width. Voir la Référence complète (device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid).

<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css" />

Ou directement dans la feuille de style :

<style>
@media (min-width: 992px) {...}
<style/>

Quand la résolution horizontale est égale à 800 pixels :

<style>
@media screen and (device-width: 800px) {...}
<style/>

On peut aussi les combiner :

<style>
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
 img {
  margin: 2em;
 }
 h1 {
  font-size: 1.2em;
 }
}
<style/>

Un bon exemple pour détecter les petits écrans 2x et donc Retina :

<style>
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {

  /* Petit écran Retina */
  .image {
    background: url(images/image-hd.png) no-repeat;
  }

}
<style/>

Il existe plus d’une solution par concepteur tant il y a de combinaisons possibles! Mais on utilise en général, pour éviter aux mobiles une charge inutile, le « mobile-first » ou le « mobile en premier ». C’est-à-dire basé sur le plus petit écran ou le min-width. L’idée est de placer au début les styles et classes génériques qui s’appliquent à tous les supports. Il faut donc cibler les écrans larges, par exemple @media (min-width: 1200px) {} pour construire le site principal (en principe).

Bureau HD

1200px

Bureau

1000px

Tablette

750px

Phablette

550px

Mobile

400px

Nouvelles valeurs

À noter les nouveaux types de valeur automatisée :

min-content

La largeur minimale. La mesure de min-contenu est défini à partir du plus petit élément, par exemple un mot ou une image... Petit truc, ajouter une balise <nobr>autour d’une phrase</nobr> pour la considérer comme un block.

max-content

La largeur maximale. La mesure de man-contenu est défini à partir du plus grand élément, par exemple un mot ou une image...

fill-available

La largeur disponible. La mesure de fill-available est défini à partir de l’espace disponible. Une dimension adaptative comme dirait l’académie.

fit-content

La largeur est définie par le contenu et il ne sera pas ajusté pour remplir l’espace disponible.

Des codes pour s’adapter mais incompatibles, c’est même devenu systématique! Faire d’un accommodement une norme! Comme à l’habitude donc, de haut en bas :

<style>
.exemple-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.exemple-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.exemple-fill {
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: fill-available;
}
.exemple-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
</style>

Unités de mesure

On ne traitera pas ici des mesures statiques, encore moins des centimètres, pouces, points, picas impossibles à distinguer sur un écran.

%

Pourcentage de l’espace disponible;

em

Relativement à la taille de la police de caractères. Par exemple une marge relativement à la grandeur de la police;

rem

Racine "em" est la taille de la police de l’élément racine du document. Le « rem » est constant dans tout le document;

vh, vw

« Viewport Sized » respectivement égal à 1/100^ème de la hauteur et de la largeur de la fenêtre. Ce dernier est compatible IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ mais avec plusieurs problèmes.

Exemple avec grille (grid)

La grille est toujours la seule façon d’organiser et d’aligner le contenu sur une page web. L’entête, le pied de page, colonne. Exploité au maximum depuis AltaVista, cet espace sollicite l’attention de l’internaute par bloc d’information. Il faut s’afficher le plus haut possible. 15 ans plus tard on en est toujours là avec la différence que c’est le CSS qui fait le travail! J’aurais d’ailleurs préféré une nouvelle balise HTML5 <grid> au lieu d’un <figcaption> inutile que le CSS aurait très bien pu gérer! Et c’est ici que nos fameuses librairies comme « Bootstrap » ou « Foundation » son devenu quasi indispensables. D’une part pour aligner plusieurs colonnes mais aussi pour changer le nombre de celle-ci quand la largeur ne le permet plus. C’est bien beau le pourcentage mais 12 colonnes sur un ipod, « ça fit pas pen toute! »

L’idée est toute simple, pas besoin d’une librairie à 100k pour deux petite classes, « col-1 » et « col-2 » à 50%.

<style>
.col-1, .col-2 {
  width: 50%;
  float: left;
  text-align:right;
}
.col-1 {
  text-align:right;
}
</style>

<div class="col-1">Colone 1 (50%)</div>
<div class="col-2">Colone 2 (50%)</div>

La méthode du cet étalement d’espace ne convient pas au petit écran. Il suffit donc de tester le max-width, par exemple à 400px, et de changer la largeur des colonnes pour 100% si t’elle est le cas.

<style>
@media (max-width: 400px) {
  .col-1, .col-2 {
    width: 100%;
    text-align:left;
  }
}
</style>

Exemple complet, avec une marge de 1% entre les deux colonnes :

<html>
  <style>
.col-1 {
  width: 49%;
  float: left;
  text-align:right;
  background-color:#ccc;
}
.col-2 {
  width: 49%;
  float: right;
}
 
@media (max-width: 400px) {
  .col-1, .col-2 {
    width: 100%;
    text-align:left;
  }
}
</style>
  <body>
    <div class="col-1">Colone 1</div>
    <div class="col-2">Colone 2</div>
  </body>
</html>

Exemple avec une image

<style>
.vignette {
	width:100%;
	max-width:250px;
  background: #EFEFEF;
  border: 1px solid rgba(0,0,0,.1);
  padding: 1em;
  overflow:auto;
  margin-bottom:20px;
}

.vignette > img {
  display: block;
}

.vignette figcaption {
  padding: .2em 0;
  font-size: .8em;
  font-color:#999999;
}
.gauche {float:left;margin-right:2em;margin-right:2sv;}
.droite {float:right;margin-left:2em;margin-left:2sv;}
.img-sensible {width:100%;max-width:250px;}
@media all and (max-width: 699px) and (min-width: 451px) {
  .vignette {
  	width:100%;
    background: #EFEFEF;
    border: 1px solid rgba(0,0,0,.1);
    padding: .5em;
    margin:0;
    margin-right:1em;
    margin-left:1em;
  }	
}
@media all and (max-width: 450px) {
  .vignette {
  	width:100%;
  	max-width:100%;
    background: #EFEFEF;
    border: 1px solid rgba(0,0,0,.1);
    padding: .5em;
    margin:0 0 10px 0;
    float:none;
  }
  .vignette img {
    width:100%;
    max-width:100%;
    min-width:100%;
  }
}
</style>

<figure class="vignette droite">
<h5 style="text-align:center;">La fluidité du contenu</h5>
  <img src="http://www.trucsweb.com/documents/images/2014/content-is-like-water-1980.jpg" alt="Image" class="img-sensible">
  <figcaption>Stéphanie Walter (Source : Wikipedia)</figcaption>
</figure>