User Tools

Site Tools


2016_2017:s1:webdoc:td6

This is an old revision of the document!


TD6 : Adaptation, du smartphone au mur d'écran

Le problème

Au cours du dernier mois j'ai utilisé plusieurs types d'écrans pour visiter des pages webs:

  1. mon smartphone ~5“
  2. une tablette en spare ~8”
  3. le mac book air d'un collègue 13“
  4. mon mac book pro 15”
  5. l'alienware d'un étudiant 17“
  6. mes écrans fixe 24”
  7. une table Surface SR40 40“

Pour ma seule utilisation, les concepteurs des sites que je dois utiliser quotidiennement pour le travail ou pour mes loisirs devraient déjà prendre en considération 7 formats d'affichage différents.

Mauvaise nouvelle : la plupart ne le font pas. Le résultat ?

  • Je me retrouver avec 80% de la surface inutilisée, présentant juste le background du site.
  • Je dois utiliser le scroll 4 ou 5 fois de suite pour trouver la moindre information sur une page, aller à droite, en bas, un peu à gauche, remonter… Je loupe de l'information.
  • Le site assez sympa que j'avais vu chez moi devient une galerie des horreurs en terme de layout quand je le montre à un collègue.

Fort heureusement, en bon étudiants modernes ravis de combler cette lacune, vous voilà avide de trouver une solution à ce problème intolérable !

Spoiler : la solution n'est pas de dire ”mon site n'est consultable que sur un écran de 27 pouces, va t'en acheter un.

Deux mots : media queries.

Le principe des media queries en CSS3

Les media queries ont été introduite par CSS3 et permettent de définir un ensemble de règles de style en fonction de la résolution de l'appareil.

En effet, pour rappel, le CSS est interprété par le navigateur, qui est un logiciel s'exécutant sur une machine cliente. Au moment de l'interprétation effective des règles CSS que vous concevez, la résolution de l'écran qui en affiche le résultat est fixée.

Dans la pratique, il s'agit d'ajouter une condition à un ensemble de règles CSS. Celles-ci ne seront alors prises en compte que si ces conditions sont respectées. Cela vous permet de changer l'apparence de votre site pour vous adapter au support :

  • augmenter la taille du texte,
  • changer la couleur de fond,
  • positionner différemment votre menu,
  • diminuer la taille des images,
  • etc.

Toutefois ces conditions ne portent pas seulement sur la résolution de l'écran, mais peuvent également interroger d'autres critères matériels comme le type d'écran (smartphone, télévision, projecteur…), le nombre de couleurs disponibles, l'orientation de l'écran (portrait ou paysage), etc.

Media queries : mode d'emploi

Il y a globalement deux façons d'utiliser les media queries:

  • en chargeant une feuille de style .css différente en fonction de la règle
    • (ex : « Si la résolution est inférieure à 1024px de large, charge le fichier minipouce.css ») ;
  • en écrivant la règle directement dans le fichier .css habituel
    • (ex : « Si la résolution est inférieure à 600px de large, exécute les propriétés CSS suivantes »).

Nous allons voir un peu mieux ces deux méthodes puis nous détaillerons leur syntaxe.

Méthode 1 : une feuille de style par résolution

Il suffit de préciser la condition dans la balise d'inclusion du CSS au sein de l'HTML. La balise <link> dispose en effet d'un attribut “media” qui peut prendre une media query comme valeur, incluant une condition sur le type d'écran et la résolution par exemple. L'exemple qui va bien :

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" />

Il est donc possible de jouer avec les priorités de chargement des fichiers CSS pour avoir un fichier de style par défaut et un style retravaillé pour certains écrans plus petits.

Méthode 2 : ajouter une garde à une règle CSS

@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Syntaxe

Ces conditions sont des expressions booléennes, elles tolèrent donc l'usage des opérateur et (and), non (not) et seulement (only). Pour obtenir l'équivalent du “ou”, il suffit d'énumérer différentes media queries à la suite, séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera appliquée.

Les différents types d'écrans définis sont :

  • screen Écrans
  • handheld Périphériques mobiles ou de petite taille
  • print Impression
  • aural (CSS 2.0) / speech (CSS 2.1) Synthèses vocales
  • braille Plages braille
  • embossed Imprimantes braille
  • projection Projecteurs (ou présentations avec slides)
  • tty Terminal/police à pas fixe
  • tv Téléviseur
  • all Tous les précédents
2016_2017/s1/webdoc/td6.1480941841.txt.gz · Last modified: 2016/12/05 13:44 by logre