Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Transcription

1 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction du périphérique Web utilisé. Cette pratique est nommé "Responsive Web Design", pour dénoter qu'il s'agit d'adapter dynamiquement le Web design à l'aide de CSS. La méthode permet d'exploiter les avantages de la séparation du contenu et de la forme (présentation): On peut satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité d'un site Web par des navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.

2 HTML5 CSS3 IvMad Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Fonctionne avec les navigateurs: Chrome Safari Firefox MSIE 9 Opéra HTML5 CSS3 IvMad Les directives peuvent être intégrées au sein même d'une feuille de style grâce à une suivie directement du type. L'exemple suivant évite l'impression des menus, entête et des informations non propres au contenu de la page print { #menu, #footer, aside { display:none; font-size:120%; color:black;

3 HTML5 CSS3 IvMad L'attribut media peut prendre les valeurs suivantes : 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 HTML5 CSS3 IvMad Une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent. Les opérateurs logiques peuvent être: and, only et not. Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite, séparées par des virgules. L'exemple suivant cible les écrans de largeur inférieure à 640 pixels et supérieure à 200 pixels grâce à la règle max-width associée à la valeur screen and (min-width: 200px) and (max-width: 640px) {.bloc { display:block; clear:both;

4 HTML5 CSS3 IvMad color - support de la couleur (bits/pixel) color-index - périphérique utilisant une table de couleurs indexées aspect-ratio - ratio du périphérique de sortie (par exemple 16/9) device-aspect-ratio - ratio de la zone d'affichage device-height - dimension en hauteur du périphérique device-width - dimension en largeur du périphérique grid - périphérique bitmap ou grille (ex : lcd) height - dimension en hauteur de la zone d'affichage monochrome - périphérique monochrome ou niveaux de gris (bits/pixel) orientation - orientation du périphérique (portait ou landscape) resolution - résolution du périphérique (en dpi, dppx, ou dpcm) scan - type de balayage des téléviseurs (progressive ou interlace) width - dimension en largeur de la zone d'affichage HTML5 CSS3 IvMad Un exemple qui suit la largeur de l'écran. On déclare la couleur de fond (background-color) du body blanche, On déclare une couleur noire pour tout écran (screen) ayant une taille maximum (max-width) de 800px: background-color:white; only screen and (max-width:800px) { background-color:black; color:white [Test] Avec max-device-width, on peut cibler l'écran. Concerne les Smartphones.

5 HTML5 CSS3 IvMad HTML5: le cours en ligne