Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td6 [2016/12/05 12:11] – created logre
+++ 2016_2017:s1:webdoc:td6 [2016/12/09 08:18] (current) – [Et en pratique ?] logre
@@ Line 26: / Line 26: @@
 Deux mots : //media queries//.
-===== Les media queries en CSS3 =====
+===== 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.
@@ Line 32: / Line 32: @@
 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 minimal :
+<code html>
+<link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" />
+</code>
+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.
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde -->
+        <link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px -->
+        <title>Media queries</title>
+    </head>
+...
+</code>
+===== Méthode 2 : ajouter une garde à une règle CSS =====
+L'autre solution est de préciser directement dans votre feuille de style quelles règles sont spécifique à l'adaptation.
+L'exemple suivant cible les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px.
+<code css>
+@media screen and (max-width: 640px) {
+  .bloc {
+    display:block;
+    clear:both;
+  }
+}
+</code>
+Pour d'autres exemples au besoin : [[https://course.oc-static.com/ftp-tutos/cours/html-css/p4/ch5/media_query_base/index.html|Un ici]], [[http://www.alsacreations.com/article/lire/930-css3-media-queries.html|quelques uns là]], [[http://dailygeekshow.com/wp-content/uploads/2014/11/mouton.jpg|et pourquoi pas ?]]
+===== Un pas de recul =====
+<box round rgb(185,211,238) 95%|**A Faire** :  >
+  * Comparez les avantages et les inconvénients des deux méthodes.
+  * Y a-t-il des cas où l'une est impossible à appliquer ?
+  * Sont-elles incompatibles ?
+</box>
+===== 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.
+Il existe de nombreuses règles permettant de construire des media queries et qui peuvent être composable.
+Voici quelques exemples :
+  * 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.
+<note tip>On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.</note>
+<box round rgb(185,211,238) 95%|**A Faire** :  >
+Ecrire les //media queries// et les règles CSS permettant de cibler :
+  * les écrans, quand la largeur de la fenêtre fait au maximum 1280px, pour mettre le fond en noir.
+  * tous types de supports, quand la largeur de la fenêtre est comprise entre 1024px et 1280px, pour mettre le texte en rouge.
+  * tous types d'écrans orientés verticalement, pour mettre les titres en gras.
+</box>
+===== Les navigateurs mobiles =====
+Afin d'optimiser l'affichage sur les plus petits écrans, les navigateurs mobiles utilisent un affichage dézoomé qui simule une meilleure résolution.
+Cela s'appelle le **viewport**.
+Une //media query// qui cible le support mobile avec un ''max-width'' sur un mobile va donc utiliser la longueur du viewport.
+Or, celle-ci est inhérente au navigateur lui-même ! Puisque chacun implémente cette simulation par zoom à sa façon.
+Quelques exemples :
+  * **Opera Mobile** 850 pixels
+  * **iPhone Safari** 980 pixels
+  * **Android** 800 pixels
+  * **Windows Phone** 1024 pixels
+Ainsi, un Android se comporte comme si la fenêtre faisait 800px de large, tandis que l'utilisateur de Windows phone voit son CSS considérer qu'il en a 1024!
+Simple palliatif : ''max-device-width'' qui demande la largeur du périphérique (du support) et non du navigateur (le logiciel).
+<box round rgb(185,211,238) 95%|**A Faire** :  >
+  * Ecrire la //media query// et les règles CSS permettant d'afficher tous les liens en vert sur mobile et testez.
+  * Mettez en évidence la différence de viewport avec un même code exécuté sur Android et sur iPhone (ou windows phone si vous en trouvez un)
+  * Théoriquement, quelle autre media query devrait nous éviter ce problème ? Pourquoi ne fonctionne-t-elle pas ?
+</box>
+===== Et en pratique ? =====
+Une bonne idée est de limiter les menus latéraux sur les petits écrans verticaux voir d'éliminer les menus qui défilent avec le scroll.
+Cela nécessite de restructurer sa page.
+<box round rgb(185,211,238) 95%|**A Faire** :  >
+  * Concevez ou reprenez une page web disposant d'un menu visible à tout instant et d'une colonne à gauche et à droite présentant respectivement le menu de la page et les partenaires du site.
+  * Ecrivez le CSS nécessaire à l'adaptation de cette page à une navigation sur mobile. Testez.
+  * Quels changements proposez-vous pour une adaptation vers un écran géant 40" ? Implémentez-les dans votre CSS.
+</box>
+===== Je dois savoir =====
+<box round rgb(255,150,103) 97%|Je dois savoir :   >
+  * Les media queries permettent d'appliquer différents styles CSS en fonction de certaines conditions.
+  * Il existe de nombreux paramètres booléens à disposition : nombre de couleurs, résolution de l'écran, orientation...
+  * On utilise a directive @media d'une ou plusieurs conditions, le style CSS qui suit sera appliqué si elles sont remplies.
+  * Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport.
+  * On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à l'écran : ''max-device-width''.
+</box>