css 4 design » Focus

Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Bruno Bichet — Sun, 03 Apr 2011 17:07:27 +0000

Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques.

Tirer le meilleur de CSS

La première partie devrait à elle seule déclencher l’acte d’achat. Raphaël passe en revue les propriétés CSS 2.1 dont l’intégrateur HTML & CSS s’est privé pendant des années à cause de leur manque d’implémentation dans IE6 et IE7, bons derniers de la classe à l’école des standards… A nous, désormais, les joies procurées par l’utilisation de sélecteurs sur lesquels nous faisions l’impasse : sélecteur d’enfant, sélecteur de frère adjacent, sélecteur d’attribut, :first-letter et first-line, :first-child, :focus, :before et :after, règle «@» diverses et variées.

Selon votre politique de prise en compte des versions d’Internet Explorer, vous pourrez utiliser tout ou partie de ces «nouveaux» jouets. Le niveau de support spécifique de tel ou tel sélecteur par les versions d’IE est précisé à chaque fois au fil de la lecture. Notons qu’il devient de plus en plus courant de délaisser IE6 et de prévoir une dégradation gracieuse pour IE7, ce qui permet d’utiliser à fond la spécification des CSS 2.1 prise en charge par IE8 et les autres navigateurs modernes.

HTML5 et CSS3 : l’innovation en marche

Cette partie fait le point sur les nouveautés qui arrivent dans le sillage de HTML5 : la syntaxe, les nouvelles balises sémantiques pour structurer les contenus, avec un focus particulier sur les balises video, audio et canvas, les nouveaux attributs de formulaires, etc.

Après HTML5, le livre présente CSS3. Toutes les nouveautés passent sur le grill bien chaud de Raphaël qui en profite pour nous faire saliver avec ses recettes «maison» et ses tours de main, pour que nous aussi, devenions des chefs en CSS ! Toujours très pragmatique, le livre donne dans cette partie — comme dans les autres –, des bonnes adresses permettant de prendre en compte les navigateurs anciens via Javascript, ou des composants HTC.

CSS et applications spécifiques

Web mobile

Cette dernière partie aborde le web mobile avec les défis qu’il lance à l’intégrateur web et les solutions qu’il peut mettre en oeuvre pour tenir compte du parc hétérogène des téléphones portables plus ou moins «smarts» et des tablettes tactiles aux formats et résolutions d’écran disparates.

CSS Print

Les CSS pour l’impression ne sont pas oubliées. Il est vrai qu’elles sont souvent le parent pauvre des CSS en dépit de leur utilité indiscutable. Surtout quand on pense que le web — loin d’avoir diminué les besoins en ressources de la planète –, n’a fait qu’augmenter l’utilisation de l’encre et du papier ainsi que l’énergie nécessaire à leur production :-(

Profitons donc de @media print pour limiter l’utilisation de l’encre en éliminant les couleurs, les aplats et tout ce qui n’est pas utile dans le contexte de l’impression.

Lecteurs de mails et CSS

Créer des Newsletters ou tout autre document susceptible de s’afficher sur un client de messagerie est une épreuve que je ne souhaite à personne. Et pour cause : à côté des clients de messagerie de bureau comme Lotus ou Outlook et certains services de messagerie en ligne, IE6 fait figure de champion du monde ! Bref, c’est galère, mais il est possible de s’en sortir en suivant les conseils de conception de page web pour les clients mail de ce livre.

En deux mots

CSS avancées, vers HTML5 et CSS3 est un des rares livres indispensables que tout intégrateur web devrait avoir à portée de main. Raphaël Goetter sait comment expliquer les concepts flous des spécifications (et il y a !) avec humour et simplicité tout en restant didactique. Le livre est à priori destinés aux utilisateur avancés, mais devrait rester accessible aux jeunes «padawans». Toutefois, je recommande fortement à ces derniers la lecture de la 3ème édition de CSS2 — Pratique du design web qui vient d’être rééditée au format semi-poche le 31 mars 2011 !

Informations pratiques

CSS avancées. Vers HTML 5 et CSS 3

Auteur(s) : Raphaël Goetter
Editeur : Eyrolles
Nombre de pages : 400 pages
Date de parution : 17/03/2011
Extraits au format PDF disponibles sur la fiche du livre
EN COULEUR !

Articles sur le même sujet

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Bruno Bichet — Tue, 14 Aug 2007 02:51:45 +0000

Vous n’utilisez pas de styles CSS pour votre page web ? Ce n’est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C’est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l’immense majorité présente des différences plus ou moins importantes. Ce fameux manque de « consistance » décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous…

Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu’ils ont voulu. Enfin, il est aussi possible que les spécifications – parfois sybillines – du monde joyeux des recommandations puissent être interprétées de diverses manières…

Prudence est mère de sûreté…

Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d’une boite. Gardez également à l’esprit que l’on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n’est pas toujours rigolo : il s’agit d’une technique à manier avec précaution.

D’autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l’héritage entre parents et enfants. Faire table rase, d’accord, encore faut-il savoir de quoi ^_^ Une autre notion indispensable est d’avoir une idée des possibilités d’imbrication des balises. Voici un récapitulatif de qui contient quoi, ainsi qu’une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1.

La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont « priorisés » les différents styles qui peuvent s’appliquer à un élément.

Pour faire simple : si vous débutez l’apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s’il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tourné… Enfin maintenant si vous insistez, je vous ai préparé un mini dossier sur le sujet :

Remise à zéro du margin et du padding avec le sélecteur universel * »

Articles sur le même sujet

Votre blog sur un téléphone portable, really ready ?

Bruno Bichet — Sat, 21 Apr 2007 03:41:07 +0000

Des fois c’est facile, des fois… pas facile. Pourtant, un site web ou un blog devraient être accessibles depuis n’importe quel périphérique, y compris un téléphone portable. Après la lecture du billet de Nico, j’ai testé mon blog sur le site .mobi qui a évalué ma page d’accueil sur une échelle de 1 à 5 en fonction de sa lisibilité sur un petit écran, de sa taille et de l’estimation de sa vitesse (ou coût) de chargement. Le tout en une trentaine de tests. Strict is the way…

Comme vous pouvez le constater, avec une note de 2 sur 5, mon blog n’est pas mobile ready. A cause notamment du marquage XHTML non valide au regard des possibilités de traitement des navigateurs embarqués. Au moins ais-je échappé à la shame frame ^^

Le résumé des tests est sans appel, mais plein d’enseignements : un lien sur chaque élément pris en compte détaille les raisons de l’échec. Sans oublier les avertissements ou les commentaires sur les spécificités non bloquantes à prendre tout de même en considération pour une meilleure accessibilité de mon contenu sur ces petits appareils.

Résultats des tests

Ce blog échoue donc lamentablement à sept d’entre eux :

La page n’est pas conforme à XHTML-MP (wap 2.0, formulation de XHTML à l’usage des périphériques mobiles), ni même à un autre langage comme :
- i-mode (cHTML)
- wap 1.0 (WML)
Le marquage XHTML n’est de toute façon pas valide ! C’est vrai que j’ais laissé la DTD Strict Made in Dotclear alors que je devrais mettre une DTD Transitionnal. (c’est fait depuis la capture),
Taille des images. Au moins une image n’a pas de hauteur ou de largeur spécifiée,
Mesures. Des dimensions spécifiées en pixel ou de manière absolue sont détectées dans la feuille de style,
Feuilles de style. Mon utilisation des feuilles de style n’est pas en accord avec les bonnes pratiques. L’usage des styles en ligne en est principalement la cause. Mais aussi l’utilisation des balises sup ou del mal prises en charge par les navigateurs mobiles,
La taille de la page (en incluant les images et les feuilles de styles) est trop importante : si le code HTML se stabilise à 68 ko, la page complète pèse dans les 277 ko… Depuis, j’ai remplacé Prototype et script.aculo.us par la Splash Box de Xuxu pour l’effet lightbox, et j’ai installé jQuery en version compressée pour le reste : j’ai économisé plus de 50 ko,
La page est liée à trop de ressources externes, (images, feuilles de styles et autres objets) ce qui ajoute du temps au chargement de la page.

Avertissements et commentaires

Grâce à ces derniers, j’en ai appris davantage sur les éléments à prendre en compte lorsqu’on veut cibler les navigateurs embarqués dans les appareils mobiles. Répétez avec moi :

J’évite de concevoir mes pages web avec des propriétés display ou float,
Je garde sur un coin du bureau un post-it pour me souvenir que la plupart des périphériques mobiles ne supportent pas Javascript,
Je mets le focus sur les champs input pour faciliter la saisie, et je fournis des valeurs sélectionnées par défaut,De toutes manières, étant données les limitations typiques des formulaires sur les appareils mobiles, une interface utilisateur devrait autant que possible en minimiser l’usage, Lorsque c’est possible, je privilégie les checkbox, radio, et autres button qui ne nécessitent pas de saisie fastidieuse,
Je me retiens d’utiliser des tableaux qui sont par nature difficiles à rendre sur ces petits appareils,
J’utilise les accesskeys sur tous les liens,
Pour finir, je place un fichier sitemap.gz à la racine du site. Chez moi il s’appelle sitemap.xml… je changerais le nom à l’occasion.

Résumé

Pour être mobile ready un site web devrait donc :

Posséder un code XHTML non seulement valide, mais conforme au XHTML-MP, ou en tout cas débarrassé de certaines balises comme sup, del, ou table,
Spécifier les dimensions des images,
Abandonner les unités de mesures fixes (sauf peut-être pour les images) au profit des unités relatives comme em, ex ou %,
Éviter les styles CSS en ligne comme style= »border: 0; » par exemple,
Limiter (voire supprimer) les liens vers les ressources externes comme les scripts, ou les balises object,
Etre léger, léger…

Malgré le haut-débit et la puissance des processeurs, l’allègement des pages web est toujours d’actualité

Le poids des mots, le choc des photos

Faire un site adapté aux périphériques mobiles ne se limite pas à modifier quelques balises et à en supprimer d’autres. Car même en ne visant que les navigateurs compatibles WAP 2.0, le poids total des pages handicape la plupart des blogs et des sites web.

Toutefois, rien n’est gravé dans le marbre et il est toujours possible d’alléger la page. A cet égard, le choix d’une librairie Javascript légère et évolutive est essentiel. Nous faisons trop souvent comme si le chargement des éléments tels que les CSS ou Javascript dans le cache du navigateur à la première requête, nous autorisait à être léger sur l’accessibilité et à avoir la main lourde sur les effets graphiques ou les animations.

Suite à ces tests, je me suis rappelé que chaque jour, près de 75% des visiteurs venaient ici pour la première fois, et qu’une partie non négligeable, repartait après la première page vue. Ces visiteurs-là n’ont pas le temps d’apprécier les bienfaits de la mise en cache par le navigateur ! Reste l’étude de la mise en cache via PHP qui pourrait — avec compression gzip — faire l’objet d’un autre billet.

L’avenir appartiendrait-il aux flux Atom et RSS…

On peut envisager de détecter le navigateur et décider de charger ou non ces ressources, mais cette approche ne règle pas les autres particularités des navigateurs embarqués concernant notamment les propriétés float. Et encore je ne parle même pas des unités de mesure trop souvent définies en pixels.

Pour moi, la solution se trouve du côté des flux Atom ou RSS qui vont à l’essentiel du contenu. A cet égard, j’ai trouvé I Feed You qui permet de convertir un fil RSS/Atom au format Wap et i-mode pour suivre l’actualité d’un site ou un blog très simplement depuis un mobile.

…avec du semacode dedans ?

C’est déjà pas mal. Mais sachez que nous pouvons épargner cette fastidieuse saisie de l’adresse du flux en question en utilisant les tags visuels de semacode.

Alors n’hésitez plus, et créez un code barre pour le flux RSS/Atom de votre blog. Il sera ainsi facilement accessible aux utilisateurs d’un mobile avec appareil photo.

PS : Si vous connaissez un bon lecteur de flux pour téléphone portable, ou d’autres solutions, c’est le moment de dégainer :)

Stay tuned and mind the gap!