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

• HTML5 et CSS pour l'intégrateur web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Editeur de dégradés CSS3 à la mode de Photoshop
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Nouvelle méthode de remplacement de texte par une image

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

24 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Safari — Chrome

    .test { [color: #000000; }

14. Tout sauf IE6 — 8

    :root *> .test { color: red  }

15. IE7

    *+html .test { color: red }

16. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

17. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

7. IE8

   .test { color: #0000FF; }

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• HTML5 et CSS pour l'intégrateur web
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Nouvelle méthode de remplacement de texte par une image
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)

Coins arrondis et ombre semi-transparente avec une image

Méthode universelle pour décorer les blocs – Agrémenter des blocs HTML de largeurs variables avec des images de fond pour obtenir des coins arrondis ou des ombres portées est souvent un casse-tête pour l’intégrateur web.

La solution proposée ici ne nécessite aucun hack tout en restant compatible avec les plus vieux navigateurs web comme IE6.

Les balises div surnuméraires pourront être générées par Javascript afin de ne pas polluer inutilement votre code avec du marquage HTML non sémantique. Pour cela, je suis allé me fournir chez l’ami burningHat qui nous gâte avec coins arrondis avec jQuery dont vous pourrez vous inspirer pour la partie purement jQuery.

13 Extensions Chrome pour développeurs web

13 extensions pour développer avec Google Chrome — J’utilise beaucoup le navigateur de Google pour le surf quotidien et je réserve Firefox pour le développement. Toutefois, il peut être utile d’avoir quelques outils d’aide au développement sous la souris : Color Picker, Firebug Lite, Capture d’écran avec Aviary, IE Tabs, Mesure It, Speed Tracer, etc. Via Rémi Garcia.

Aviary Screen Capture

J’ai tout de suite été séduit par Aviary Screen Capture qui permet d’obtenir une capture d’écran depuis votre navigateur en plus d’un accès direct au outils en ligne d’édition d’image développés par Aviary.com.

Une fois l’extension installée, il suffit de cliquer sur son icône et de lancer l’application avec Capture Visible Portion of Page pour accéder ensuite directement à votre capture d’écran dans un outil en ligne permettant d’effectuer moult opérations utile pour attirer l’attention sur une image : dessin, texte, rotation, rognage, redimensionnement, etc.

Parmi les autres outils proposés, nous trouvons : Image MarkUP, Image Editor, Color Editor, Effects Editor, Vector Editor et Audio Editor que je vous laisse le soin de découvrir par vous-même ;)

Augmenter l’affordance de vos boutons

Créer des boutons avec CSS3 — Même si les CSS3 en sont pas implémentée dans tous les navigateurs, rien n’empêche d’en faire profiter ceux qui ont eut la bonne idée d’installer un navigateur moderne, comme Firefox 3.6. Ce tutoriel simple et concis propose des exemples concrets (codes et images) pour ajouter des effets d’arrondis et d’ombres portées sur les blocs et les textes pour obtenir des boutons attrayants afin d’augmenter le côté affordance de la chose ;)

CSS3 en action

Les propriétés CSS3 en action — Louis Lazaris a eu la bonne idée de regrouper les propriétés CSS3 box-sizing, border-radius, box-shadow, rgba, column, hsla, gradient et multiple backgrounds sur la même page avec l’effet, la description et un exemple de syntaxe.

Plan de site en CSS

SlickMap CSS est une simple feuille de style CSS qui assure un affichage soigné à toute liste non-ordonnée jusqu’à 3 niveaux d’imbrication ; facile à personnaliser en fonction de vos besoins.

Pour la route

1. Et vous, savez-vous faire des liens ? — Les liens hypertextes sont le sang du web. Faire un lien parait aussi simple que de ne pas en faire (oui, bof, je sais…). Pourtant faire un lien correct du point de vue de l’accessibilité n’est pas donné à tout le monde.
2. Markdown et XSS — Une attaque XSS (cross-site scripting) est une technique permettant d’injecter du contenu HTML suspect dans une page web pour voler des mots de passe  en analysant les cookies. Markdown n’inclus pas de filtre XSS et il faut donc le faire soi-même, mais pas n’importe comment !
3. eCSStender — Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (@font-face et @page pour le moment). Pour la suite des explications je vous invite à lire la documentation ;)
4. Le rédacteur web est un animal social — Les métiers liés à la rédaction web ne peuvent plus faire l’impasse sur le référencement et la dimension sociale des contenus. Le rédacteur web est-il un Community Manager comme les autres ?
5. Migrer d’un WordPress.com à un WordPress.org — Vous avez commencé par un blog hébergé chez WordPress.com et vous aimeriez avoir les mains libres avec un blog bien à vous ? Cette traduction de l’article How to Migrate your Blog from WordPress.com to a Personal Domain est là pour vous aider.
6. TestSize — Affiche n’importe quelle URL dans une `iframe` à une taille déterminée (`240×320`, `640×480`, `800×600`, `1024×600`, `1024×768`, etc. ou selon vos envies. Pratique pour s’assurer que votre site est accessible sur des écrans différents du vôtre. Découverte de l’excellent http://time.is par la même occasion ;)
7. Footerama — Galerie de pieds de page de site tous plus intéressants les uns que les autres à garder sous le coude lorsque vous aborderez la conception de votre footer. Via John’s Graphisme.
8. Les annuaires sont nos amis ? — C’est en tout cas ce que pense Aymeric dans ce billet qui fait le point sur la bonne attitude à adopter face à ces mal-aimés du web. Je n’ai jamais été vraiment convaincu de leur véritable intérêt, mais pour jouer le jeu, j’ai commencé à proposer mon blog dans quelques annuaires.
9. Classement des 30 premiers annuaires — En parlant d’annuaire, voici une liste composée d’annuaires à priori de qualité que je soumets à votre sagacité.
10. L’harmonie des couleurs — De la même manière qu’un musicien doit avoir des notions d’harmonie s’il veut avoir des chances de composer la mélodie du siècle, le webdesigner doit connaitre les principes de base qui régissent l’harmonie des couleurs afin de les employer en connaissance de cause. Très bon article de Pixenjoy sur ce sujet complexe qui mêle le subjectif et l’objectif.
11. Mettre à jour instantanément votre Flux RSS avec votre blog — Cette astuce vous permettra d’ajouter et d’actionner les services liés à la fonction PingShot de Feedburner pour signaler immédiatement vos nouvelles entrées de blog.
12. Designing Interfaces (Patterns for Effective Interaction Design) — Ce site est la version abrégée du livre Designing Interfaces paru aux Editions O’Reilly : une foultitude de pistes et de conseils concis pour améliorer nos interfaces utilisateurs.
13. IE6 Funeral — Pour finir cette liste, je ne résiste pas au plaisir de vous convier aux funérailles d’internet Explorer 6 prévues le 1er mars 2010 à Mountain View, Californie. Venez nombreux.

Articles sur le même sujet

• Le petit journal permanent de CSS3 — 100+ ressources pour commencer
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Super Formateur HTML & CSS bientôt dans la place ?
• CSS3 pour les web designers : voyez grand, codez petit !

Pour autant, je reste un utilisateur comme les autres quand il s’agit de consulter mes mails (Gmail) de saisir du courrier (Google Documents), de consulter mes flux RSS (Google Reader) ou simplement pour lire le journal (Google News).

Firefox 3 — le capital sympathie s’épuise ?

La force de Firefox 3 ne réside pas dans ces qualité intrinsèques : qu’en reste-t-il une fois les extension désactivées ? Pourtant, l’indulgence de la part de la communauté vis-à-vis du Panda roux a été jusqu’au déni des contre-performances, pourtant évidentes que j’avais évoqué dans l’article Firefox roxe ? Opera, ça ira ? et IE7 part en sucette ?

La faute à Javascript ?

La particularité des services mentionnés plus haut est de faire un usage important de Javascript qui sollicite la mémoire du navigateur et grève ses performances. De ce point de vue, Firefox n’est pas un foudre de guerre et question rapidité il ne fait pas le poids, y compris face à Internet Explorer 6…

On a retrouvé Big Foot !

Quant à l’empreinte mémoire, n’en parlons pas : il m’arrive régulièrement d’observer une occupation de près de 1Go. Tout ça ne serait rien, si Firefox n’avait pas la fâcheuse habitude de planter régulièrement. La fonction qui permet de recouvrer l’ensemble de la session n’excuse pas tout. Mais au final, j’y trouve mon compte grâce aux extensions disponibles qui me font gagner du temps dans dans le « débuggage » des pages web.

Et Google Chrome fut

Une des particularités de Google Chrome est de lancer chaque onglet dans un processus différent à côté du noyau principal qui reste très léger. Grâce au gestionnaire de tâche intégré, il devient possible de connaitre précisément l’occupation mémoire de des onglets ouverts. Cela permet d’optimiser la navigation et de mieux gérer la RAM en réservant Google Chrome pour afficher les sites nécessitant des ressources importantes.

Où je veux en venir ? Simplement à une nouvelle organisation de mon surf quotidien : Google Chrome comme navigateur par défaut et Firefox 3 comme outil de développement web.

Conclusion

Comme la majorité de la population n’a pas besoin des extensions de developpement de Firefox 3, Google Chrome risque de rafler la mise auprès du grand public, comme le moteur de recherche Google l’avait fait en son temps : on ne résiste pas à l’accélération de l’affichage des résultats, pas plus qu’à celui des pages web.

Pour finir, il sera plus difficile pour la fondation Mozilla de mettre en place une plate-forme anxiogène sur le produit de Mountain View que sur celui de Redmond !

Articles sur le même sujet

• Google Chrome — une poignée pour redimensionner les textareas
• 2 vidéos sur le fonctionnement du navigateur (Gecko)
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Auditez votre site web avec Browser Size de Google

L’aspect pratique, en revanche est indéniable quand on est face à des zones de saisie trop chiches. Déjà une bonne surprise au bout de 5 min. d’utilisation seulement. Ca promet :)

Question : Au fait, c’est quoi le user-agent de Google Chrome ?

Réponse :

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko)
Chrome/0.X.Y.Z Safari/525.13.`<h3 class='related_post_title'>Articles sur le même sujet</h3><ul class='related_post'><li><a href='http://css.4design.tl/google-chrome-va-changer-ma-vie-dinternaute' title='Google Chrome va changer ma vie d&#039;internaute'>Google Chrome va changer ma vie d&#039;internaute</a></li><li><a href='http://css.4design.tl/une-feuille-de-style-et-des-hacks-css-pour-cibler-ie6-ie7-ou-ie8' title='Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8'>Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8</a></li><li><a href='http://css.4design.tl/auditez-votre-site-web-avec-browser-size-de-google' title='Auditez votre site web avec Browser Size de Google'>Auditez votre site web avec Browser Size de Google</a></li><li><a href='http://css.4design.tl/videos-fonctionnement-navigateur-gecko' title='2 vidéos sur le fonctionnement du navigateur (Gecko)'>2 vidéos sur le fonctionnement du navigateur (Gecko)</a></li><li><a href='http://css.4design.tl/ressources-pour-web-designer' title='9 ressources pour web designer'>9 ressources pour web designer</a></li></ul>