====== 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: - mon smartphone ~5" - une tablette en spare ~8" - le mac book air d'un collègue 13" - mon mac book pro 15" - l'alienware d'un étudiant 17" - mes écrans fixe 24" - 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 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 : 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. Media queries ... ===== 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. @media screen and (max-width: 640px) { .bloc { display:block; clear:both; } } 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 ===== * 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 ? ===== 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. 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. 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. ===== 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). * 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 ? ===== 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. * 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. ===== 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''.