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)

L’idée, c’est de ne prévoir qu’une seule feuille de style pour IE pour placer les déclarations spécifiques aux versions 6 et à 7 :

Dans ie.css

Pour s’adresser à IE6 :

* html div {
blablabla
}

html>body div {
blablabla
}

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

Idée inspiré par l’organisation des feuilles de style du framework CSS Blueprint que j’ai eu l’occasion de présenter dans cette traduction. Sans oublier le billet de Country qui a déclenché l’envie d’en faire un billet ;)

Note : Mise à jour de cette technique pour prendre en compte IE8 dans le fichier ie.css et liste des hacks CSS dans l’article Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Articles sur le même sujet

• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Nouvelle méthode de remplacement de texte par une image
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop

Ruiner l’expérience utilisateur

Pendant un récent voyage d’affaire à Seattle, j’ai passé deux soirées à déguster la cuisine locale. Je me suis régalé à chaque repas, mais je garde de l’un deux un souvenir bien plus marqué. Mais pourquoi ?

Les deux restaurants présentaient de nombreux points communs : les plats étaient alléchants et présentés avec goût ; l’atmosphère était sympathique et chaleureuse ; les menus offraient un large choix de plats tout deux à un prix raisonnable, et le personnel était aux petits soins. Alors qu’est-ce qui fait que le second restaurant m’a laissé un bien meilleur souvenir que le premier ?

Comme souvent dans la vie, ce sont les détails qui comptent le plus. Prenez un verre d’eau, par exemple. Un serveur négligent peut le servir glacé, ou pire encore, vous laisser mourir de soif avant de vous resservir. Alors qu’un serveur bienveillant s’assurera que le niveau de l’eau ne descendra jamais plus bas que la moitié du verre ; les meilleurs vous feront la surprise de trouver le verre que vous venez de finir, rempli à ras bord une nouvelle fois.

Pour nous les ergonomes du web, Il y a beaucoup à apprendre d’une chose aussi simple qu’un verre d’eau.

Qui est le client ?

Quand vous êtes serveur dans un restaurant, vous savez que les gens viennent avec certains besoins et, parfois même, avec quelques attentes. Souvent, le verre d’eau est le « premier contact » avec le client. S’il est rempli rapidement, vous marquez un point, mais ce n’est que le début. En effet, certaines personnes boivent plus vite que d’autres et demandent à être resservies plus souvent. Certains clients ne boiront pas avant d’avoir les plats devant eux. D’autres encore ne toucheront pas à leur bouteille d’eau… ou demanderont peut-être un peu de thé glacé, ou encore autre chose. Au départ, vous ne pouvez vraiment pas savoir à qui vous avez à faire. Et lorsqu’il s’agit d’une table de 4, 6 ou même 10 personnes il vaut mieux s’être préparé à l’avance…

Sur le web, c’est la même chose. Nous faisons de beaux sites qui (nous l’espérons) font une excellente première impression, mais nous devons nous assurer que chaque point d’interactivité renforce cet avis favorable tout au long de la navigation, sinon nous risquons de dilapider le peu de crédit acquis au départ. Ce type de pensée à donné naissance au concept d’amélioration progressive

Sur le web, nous ne savons rien à propos de la personne qui vient visiter notre site. Nous ne connaissons pas le navigateur utilisé. Nous ignorons si le serveur est interrogé depuis un téléphone portable. Nous ne savons pas si le clavier est préféré à la souris. Nous ne savons pas si Javascript (ou même CSS) est activé. Nous ne savons pas si la page doit être imprimée. Nous ne savons pas si l’utilisateur consulte le site à l’aide d’un lecteur d’écran. Nous ne savons vraiment rien…

Alors, que fait-on quand on ne sait rien ? On an-ti-ci-pe.

En tant que développeurs, nous devons pouvoir satisfaire les besoins de nos clients. Et si nous sommes assez pointus, nous pouvons régler leurs problèmes sans qu’ils ne se rendent compte de notre intervention.

Une douche froide ?

Lala.com est un site bâti autour d’une communauté de gens qui aiment la musique. Le système facilite l’échange de CD dans toute la communauté par la poste.

Je ne dirais pas que leur site web est attractif, mais il est utilisable… sauf si Javascript est désactivé.

Vous apprécierez le fait qu’il y a un message indiquant un Chargement en cours alors que rien ne se charge.

Pour régler le problème (la copie d’écran ci-dessus a été prise entre le moment où j’ai commencé à me servir du site comme exemple de ce qu’il ne fallait pas faire et la finalisation de l’article), tout ce qu’ils ont été capable de faire, c’est de ressortir ce vieux message au parfum entêtant datant de la dernière guerre des navigateurs.

Le problème ici n’est pas que le site utilise Javascript, mais qu’il ne fonctionne pas sans. La raison ? Et bien, apparemment, les concepteurs se font plaisir en Ajax-isant tout le contenu. Dans leur précipitation, ils ont entassés tous les trucs du web 2.0 sous le capot et se sont aliénés une bonne partie des utilisateurs du web 1.0, et une part importante du marché des appareils mobiles. Et ils ne sont pas les seuls.

Pensez à ceci : vous êtes un utilisateur de Lala.com, vous êtes proche d’un magasin de disque et vous vous arrêtez sur l’album des Fatals Picards ["Arcade Fire" dans la version originale, NdT]. Vous n’avez pas réalisé qu’il était sorti et voulez l’ajouter à votre liste de souhaits avant de l’oublier. Si votre téléphone mobile ne supporte pas Javascript (ou si vous l’avez désactivé pour réduire le temps/coût de chargement), vous allez vous retrouver devant un écran qui vous donne des informations pertinentes sur Lala, suivies malheureusement du message indiquant que Javascript est nécessaire pour utiliser le site.

Vous ne pouvez pas accéder à votre liste de souhaits ou à quoi que ça soit d’autre, d’ailleurs. Même le champs de recherche (en bas de la page) ne fonctionne pas. Pour une application de type intranet, cela peut être acceptable, mais pour un site web grand public, c’est un désastre.

Réfléchissez avant de servir

Nous avons déjà établi qu’en tant que développeur web nous sommes généralement dans le brouillard quant aux desiderata de nos utilisateurs. Le mieux que nous puissions faire est d’anticiper ce que pourrait être leurs besoins et s’assurer qu’ils sont pris en compte à tout les niveaux pour apporter la meilleure expérience possible. C’est là que l’amélioration progressive entre en scène. Nous devons penser aux besoins des différents types d’utilisateurs et leur apporter une réponse.

1. Niveau 1 : pas de fioriture

   Certains utilisateurs veulent seulement accéder au contenu. Ils peuvent surfer depuis un appareil mobile, chercher à imprimer quelques informations, ou utiliser toutes sortes de périphériques d’assistance pour naviguer. Ils peuvent même avoir désactivé l’affichage des images. En gardant un marquage propre et bien-ordonné et en respectant la sémantique associée aux balises HTML, vous répondrez aux besoins de ces utilisateurs qui veulent consommer léger et afficher les pages rapidement, sans chichi.

2. Niveau 2 : faites joli

   D’autres, aiment les belles vitrines (ou une tranche de citron). Pour eux, concevez un design graphique visuellement attractif. Vous pouvez même ajouter quelques fioritures visuelles (ou un peu de Flash) et ils seront contents. Aussi longtemps qu’il n’y a pas de confusion entre les éléments de décoration et le contenu de la page, que vous avez réalisé tout vos tests sur les navigateurs (ou que vous fournissez quelques styles basiques pour les médias alternatifs), ça devrait le faire.

3. Niveau 3 : c’est la fête !

   D’autres encore, veulent le grand jeu. Pour ceux-là, vous pouvez faire sauter le bouchon et créer une merveilleuse application web 2.0 avec fondu-enchainé, widget en veux-tu en-voilà, et Ajax en abondance. Gardez toutefois à l’esprit, que ces niveaux ne sont pas toujours aussi clairement identifiables. Un palier intermédiaire entre les niveaux 1 et 2 sera peut-être nécessaire pour donner à Netscape 4.x et IE5/Mac quelques styles typographiques spécifiques. Ou vous pouvez avoir envie d’offrir des raffinements Javascript selon les navigateurs, ou encore injecter un peu de crème au nougat entre les niveaux 2 et 3…

Passer inaperçu

Une fois que vous avez décidé des niveaux à prendre en compte, vous pouvez construire votre site.

Commencez par le contenu. Quelquefois, les webdesigners et les développeurs oublient que les gens viennent surtout pour ça. Travaillez-le avec amour sans noyer vos visiteurs sous les informations. N’empilez pas les blocs comme pour un buffet. La production du contenu demande toujours beaucoup de travail. Mettez-le en valeur.

Lorsque le contenu est balisé, il est temps d’établir le look and feel du site. Concevez un design adapté à vos utilisateurs en utilisant pour chaque niveau les différentes techniques à votre disposition : cachez certains fichiers CSS aux navigateurs les plus anciens et donnez des styles spécifiques à ceux qui demandent un peu plus d’attention. Les commentaires conditionnels sont réellement vos amis pour la vie en la matière. Mais n’oubliez pas les vieilles recettes comme les règles @import et les combinaisons pour les médias spécifiques qui permettent d’offrir sélectivement un parfum différent pour les navigateurs collés au radiateur du fond de la classe.

Vérifiez la présentation de votre contenu à l’impression et son affichage sur les périphériques mobiles. A ce propos, envisagez-vous une mise en pages spécifique ou seulement un traitement basique en terme de couleur ou de typographie ? Quel sort réservez-vous aux images et aux formulaires ? Essayez d’anticiper les fonctionnalités qu’un utilisateur mobile voudrait, et ôtez le superflu ! Si vous utilisez la pseudo-classe :hover sur un lien, n’oubliez pas de considérer également la pseudo-classe :focus, et les utilisateurs de claviers ou d’appareils mobiles vous remercieront.

Lorsque le design est validé, ajoutez quelques étincelles avec une pincée de Javascript non-intrusif. Vous connaissez déjà les méthodes de détection pour savoir si un script peut fonctionner sur tel navigateur ? Considérez aussi comment vos scripts peuvent interférer avec les interactions communes aux navigateurs telles que « bookmarker » un lien ou utiliser le bouton retour. Et n’oubliez pas l’interdépendance qui peut exister entre des scripts différents : votre site deviendrait-il inutilisable si un script fonctionnait et pas un autre ?

Si vous créez un widget ou autre interface de contrôle, générez le marquage additionnel quand avez déterminé qu’il est prêt à être utilisé, et que tout le reste fonctionne encore. Et si vous séparez les CSS liées à votre widget de votre code Javascript comme un bon petit soldat des standards, assurez-vous que les styles ne sont pas actifs tant que le script n’a pas indiqué que le widget peut être utilisé. Une bonne pratique est d’utiliser l’échange de classe (cf. Table 1) :

Au final, si vous envisagez d’utiliser Ajax, faites-le avec discernement : il n’est pas nécessaire de charger l’ensemble de la page via des appels asynchrones qui finissent par devenir une barrière entre l’utilisateur et votre contenu. Paradoxalement, cela peut entraîner une augmentation de la charge serveur, rendre votre contenu invisible pour les moteurs de recherche, et rendre votre site inutilisable pour quiconque utilise un lecteur d’écran ou un mobile.

Ne me faites pas dire ce que je n’ai pas dit, Ajax a sa place, mais il est important de savoir laquelle, et plus encore, de savoir où elle n’est pas.

Conclusion

Anticipez les besoins de l’utilisateur avec précaution et occupez-vous d’eux en vous faisant remarquer le moins possible. C’est la clé pour laisser une première bonne impression. Comme avec un verre d’eau, vos utilisateurs ne devraient jamais avoir à réclamer pour être servi.

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

Merci à Véro pour son coup de main quand j’étais « Lost in translation » ;)

Note du 24/05/07 : Merci à Goulven pour sa relecture et les améliorations qu’il a apportées à cette traduction.

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• Framework JQuery pour écrire du Javascript non-intrusif
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Trucs et astuces CSS
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

… ou comment sortir « téléologique¹ » du même chapô que « mashup² »

Le design : centré, fixe, liquide…

C’est sur ces contraintes de structure mettant en jeu les balises XHTML que je voudrais m’attarder un peu en votre compagnie. Notre mise en pages doit-elle être de largeur fixe, ou variable ? Centrée, ou pas ? Il m’est difficile de choisir à votre place, mais en ce moment la tendance est de présenter des pages minimalistes de largeur fixe, centrées dans le navigateur.

Dans l’échantillon de code qui suit, on crée un container d’une largeur de 750 pixels, centré horizontalement grâce au raccourci margin: 0 auto. Ainsi, tout le contenu placé dans la balise identifiée par #container sera centré dans la page.

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     position: relative;
     width: 750px;
     margin: 0 auto;
     text-align: left;
}

C’est pourquoi, il est judicieux de mettre le padding et le margin des balises html et body à zéro. Par ailleurs, IE5 ayant du mal avec margin: 0 auto, on prendra soin de centrer l’ensemble du document avec text-align: center, et ensuite d’expliciter la valeur d’alignement du texte par défaut dans le container.

MAJ : Pour la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus.

Dans la plupart ces cas, le choix d’un design à largeur fixe permet de mieux contrôler le nombre de mots par ligne pour offrir une lecture confortable (qu’on trouve raremment dans les pages où le texte s’étire d’un bout à l’autre de la fenêtre du navigateur…). A condition toutefois de permettre l’agrandissement de la taille du texte, en utilisant des unités relatives em, ex ou %, à la place des px qu’IE ne sait pas agrandir…

Dans d’autres cas, ce choix est dicté par les difficultés liées à la conception d’un design liquide (ou fluide) comportant des visuels en haut, en bas, sur les côtés et dans les coins ! En effet, si la réalisation d’un design composé d’images qui se répètent verticalement est aisée, ce n’est pas toujours le cas lorsqu’on veut que la mise en pages s’adapte horizontalement et verticalement à la taille de la fenêtre (cf. mon billet «Design CSS : fixe, élastique ou liquide ?» pour plus d’information sur la question).

Une page web toute simple

La structure que l’on rencontre le plus souvent sur le web est composée d’un titre h1 suivi des différents niveaux de sous-titre h2, h3… le tout, agrémenté de texte p et d’image img. Notez que pour les images, on peut mettre la balise img dans la même balise p que le texte, ou dans sa propre balise p. On divisera ensuite (en fonction de la nature du contenu) le document en plusieurs parties avec les balises div dont c’est précisément la fonction.

Si l’on ajoute la gestion des colonnes, on obtient une structure qui ressemble à la plupart des pages que l’on trouve à portée de clic ; les différences étant souvent le fruit d’un travail sur l’identité visuelle et du soin apporté à la réalisation-intégration des divers éléments composant la page.

MAJ : Lire Conception dans le navigateur avec HTML5 & CSS3 sur le marquage structurel d’une page web avec HTML5.

Des colonnes avec float

Pour en revenir aux colonnes, la propriété float, associée aux valeurs right ou left, donnera rapidement forme à votre document, à condition de ne pas oublier le clear: right, left ou both pour ajouter un élément de type pied de page que nous voudrons voir, comme son nom l’indique, à la fin de notre page, et ce, quelque soit la hauteur des contenus respectifs de nos deux colonnes !

C’est vrai qu’Internet Explorer n’a pas toujours besoin que l’on explicite un clear après un float, contrairement aux navigateurs respectant les spécifications du W3C comme Firefox ou Opera. L’esprit humain non plus, puisqu’il faut souvent passer de bons longs moments avec les spécifications pour s’en convaincre. Quoiqu’il en soit, souvenez-vous que si votre div est placée correctement dans un navigateur et pas dans l’autre, c’est souvent la faute à float ;)

Manipulez, il en restera toujours quelque chose

Pour mieux observer ce phénonème, je vous propose quelques manipulations à faire chez vous sur un exemple de positionnement avec float. Tout est précisé dans le code source, mais pour les jedi, un résumé devrait suffire :

1. Dans #container, enlevez les commentaires autour de width: 900px;, réaffichez cette page dans IE6 et FF et observez le déplacement du footer dans FF.
2. Puis, dans #footer, enlevez délicatement les commentaires autour de clear: both, et réaffichez cette page dans IE6 et FF. Que s’est-il passé avec le footer ?
3. Pour terminer, remettez tout comme au début, et ajoutez du texte dans la sidebar. Que se passe-t-il ? Que faut-il faire ?

Tant que nous somme dans la float, et les colonnes, j’en profite pour vous proposer un autre exemple de mise en page sur une ou deux colonnes.

Pour la boite, vous prendrez quel modèle ?

Dès que l’on applique une largeur à un élément de type block, on prend le risque de tomber dans le maelström des différents modes de calcul concernant le modèle de boite : Internet Explorer a une façon bien à lui de mettre border, padding et zone de contenu dans le même sac, contrairement au modèle standard qui dissocie bien chaque élément dans le calcul final de la boite.

Grosso modo, un bloc de 250px de large avec un padding de 20px et un border de 5px donneront 250 + 20 + 20 + 5 + 5 = 300 pixels dans le modèle standard, tandis que cette valeur sera ramenée à 250 pixels sur IE, puisque la bordure et la marge intérieure seront assimilés à la zone de contenu :(

Ok, quelques mots sur le DocType switching… Ou comment forcer l’une ou l’autre interprétation des dimensions du modèle de boite. Pour résumer la fin de l’article d’Openweb cité plus haut, la plupart des navigateurs modernes (si si, même IE6) basculeront dans le modèle de boite standard si une DTD XHTML (strict, transitional ou frameset) est spécifiée dans l’en-tête de la page. Sauf pour IE6 (faut pas trop rêver non plus…) qui rebascule dans son modèle de boite propriétaire dès qu’il voit le méchant prologue XML…

Il existe de nombreux contournements (hacks) plus ou moins funky pour régler ce problème de compatibilité des modèles de boite. Pour ma part, je m’en tiens à une ligne de conduite simple : j’applique le padding aux éléments enfants du bloc qui possède une propriété width. Lorsque celà n’est pas possible, je spécifie une feuille de style pour IE en utilisant les commentaires conditionnels.

Si votre page contient des formulaires, je vous invite à lire ce billet sur la conception de formulaires sans tableau qui a gardé toute sa fraicheur ;) Souvenons-nous toutefois de ne pas troubler l’utilisateur avec des formulaires trop funkydéliques. L’utilisateur ne fait pas que remplir des champs de saisies, il donne un peu de lui-même : respectons-le !

Et comme vous voudrez certainement mettre de beaux visuels en fond de page, je vous propose ce billet sur l’utilisation, non pas d’un, mais de deux background pour enjoliver votre fond de page !

Il n’y a pas que les div dans la vie

Après la mise au point du squelette de notre page, nous allons nous occuper des autres éléments qui nous aideront à structurer le contenu. J’ai évoqué rapidement la balise h1 et ses petites soeurs h2…, h6 qui doivent être utilisées pour les titres et sous-titres de vos documents.

Par exemple, plutôt qu’un div id= »titre1″, on stylera la balise h1 pour le plus grand plaisir des moteurs de recherches et navigateurs alternatifs ! La balise p encadre les paragraphes ; blockquote sert lorsqu’on cite une portion conséquente de texte.

A noter que cette balise peut contenir d’autres éléments de type bloc, comme p ou table, mais la réciproque n’est pas vraie. Pour mieux connaître les mœurs subtiles des balises HTML, j’abuse de la bande passante de gotapi.com.

Lorsque la structure du contenu implique une idée de liste, le mieux, c’est encore, d’employer les listes ordonnées ol ou non ordonnées ul avec leur cohorte de li. Ces listes sont très pratiques et permettent de nombreuses fantaisies en matière de CSS.

Mais on oublie trop souvent les listes de définitions qui peuvent rendre de grands services, comme présenter la chronologie de ma loupanthère, par exemple… Le sujet des listes de définitions est inépuisable, ce qui n’est pas mon cas : je vous ai donc laissé quelques liens à suivre dans la linkographie.

Les éléments en ligne c’est pour aujourd’hui ou pour demain ?

Après sur survol des éléments de type block, il nous reste tout juste assez de temps pour jeter un oeil sur les éléments en ligne. J’utilise assez souvent les éléments suivants : samp pour spécifier les échantillons de code ; em pour l’emphase (en gros, ça met de l’italique) ; strong pour marquer un renforcement du texte (en gros, ça met du gras), q pour les citations courtes mais pas forcément vulgaires…, a pour les liens, etc.

Bon, c’est comme le café, je crois que ce n’est pas la peine d’en rajouter. Et puis vous êtes sûrement déjà parti faire un tour sur gotapi ou pire, sur bashfr où vous trouverez des vrais morceaux d’humour, pas comme ici :)

Et vous, quelles sont vos balises préférées ?

Linkographie :

Maxdesign

Sans doute l’un des meilleurs site au monde concernant les 1001 façons de styler les listes ;)

Selfhtml.org

Tout sur le formatage des listes.

Pompage

L’essentiel et un peu plus sur les listes de définitions.

Alsacreations

Utilisez les listes de définition pour structurer vos menus déroulants.

Giminik

Liste des attributs et événements associés à la balise dl

Articles sur le même sujet

• Trucs et astuces CSS
• Exercice de style CSS et HTML : table vs div
• Frameworks CSS + Reset CSS : design from scratch
• Design de formulaire HTML avec CSS
• Design CSS : fixe, élastique ou liquide ?

Articles sur le même sujet

• Trucs et astuces CSS
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Check your <body> avec le W3C

Comme vous n’avez pas le temps de revoir la structure de votre code XHTML, vous songez aux fameux hacks CSS dont on vous rebat les oreilles. Comme beaucoup, j’ai longtemps utilisé les box model et autre underscore hacks pour finir avec des feuilles de styles qui n’en n’ont plus (de style) ! J’ai donc cherché à m’en passer. Mais par quoi les remplacer ?

Le constat

Tous les navigateurs ont des faiblesses concernant le support des normes CSS, mais celui qui a la palme est sans conteste Internet Explorer. C’est pourquoi je me suis lancé dans la recherche du hack ultime pour filtrer ce piètre navigateur. Je me suis rapidement rendu compte que de plus en plus de sites encouragent, non sans quelques réserves judicieuses, l’utilisation des commentaires conditionnels pour IE.

La solution

Les commentaires conditionnels encadrant l’appel de la feuille de style ne sont compris que par IE, toute version confondue dans l’exemple ci-dessous, ou bien en précisant la version, voire la sous-version que l’on veut filtrer. Voyez le site MSDN de Microsoft pour plus de détails.

La syntaxe pour cibler toutes les versions d’IE

<!--[if IE]>
     <style type="text/css">
         @import "/style/pour_ie.css";
     </style>
<![endif]-->

Pour cibler une version spécifique

<!--[if IE 5.0]>
     pour IE 5.0
<![endif]-->


<!--[if IE 5.5000]>
     pour IE 5.5
<![endif]-->

<!--[if IE 6]>
     pour IE 6.0
<![endif]-->

Pour cibler une version supérieure ou égale à

<!--[if gte IE 5]>
     pour réserver le contenu à IE 5.0, IE5.5
     et IE6.0
<![endif]-->


<!--[if gte IE 5.5000]>
     pour IE5.5
     et IE6.0
<![endif]-->

Pour cibler une version inférieure ou égale à

<!--[if lte IE 6]>
     pour IE5.0, IE5.5
     et IE6.0
     mais pas IE7.0
<![endif]-->

Pour cibler une version inférieure à

<!--[if lt IE 6]>
     pour IE5.0
     et IE5.5
<![endif]-->

Les navigateurs autres que IE considèrent ces lignes comme des commentaires HTML. Internet Explorer est programmé pour les prendre en compte. C’est aussi simple que ça ;)

Pour masquer du code à toutes les versions d’IE Windows

La nouveauté dans les exemples qui suivent, c’est l’ajout de commentaires HTML qui permet de filtrer un peu plus subtilement les navigateurs. Dans cet exemple, seul IE Windows n’interprètera pas le code ou l’appel à une feuille de style.

<!--[if !IE]> <!-->
     IE Windows ne lira pas ça
<!--> <![endif]-->

compliquons un peu les choses

L’exemple qui suit permet dans un premier temps de cibler tous les navigateurs plus IE7, et dans un second temps de s’adresser uniquement aux versions inférieures ou égales à IE6 Windows.

 <!--[if IE 7]> <!-->
     Pour IE7
     mais aussi Safari, Firefox, Opera, etc.,
     mais ni IE5.x ni IE6.0 Windows
<!--> <![endif]-->


<!--[if lte IE 6]>
     pour IE5.x
     et 6.0 Windows
<![endif]-->

La méthode de travail

Dans un monde idéal, cette feuille de style pour_ie.css serai vide. Nous allons donc essayer d’en mettre le moins possible. Pour cela, nous allons travailler sur la feuille de style « standard », que nous testerons sous Firefox, Opera sur PC et les mêmes sur MacOS X en ajoutant Safari et Camino (pour la forme, puisque le moteur est le même que Firefox. Mais sait-on jamais !).

Une fois ces navigateurs satisfaits, nous nous tournerons vers Internet Explorer pour fixer les problèmes de rendu en surclassant les déclarations fautives (et uniquement celles-ci) pour profiter du C de CSS (la cascade) ! Le plus souvent, il s’agit des attributs width, padding, margin, position ou de différence de rendu des formulaires ou des tableaux.

Conclusion

Deux feuilles de style peuvent sembler ajouter plus de confusion encore. Certains préfèreront sans doute utiliser les contournements. Mais les navigateurs évoluent, et les hacks qui fonctionnent aujourd’hui, pourraient poser des problèmes plus tard. Je vous laisse avec un peu de lecture. N’hésitez pas à laissez vos commentaires (inconditionnels ?)

Linkographie. Quelques liens sur les hacks CSS et les commentaires IE

le site MSDN de Microsoft

A tout seigneur, tout honneur ;)

http://www.blog-and-blues.org/articles/…

Un article exhaustif au sujet des commentaires conditionnels dont j’ai repris les échantillons de code, mais pas les explications : je vous en recommande fortement la lecture !

http://darkmag.net/darkBlog/…

Pourquoi et comment on peut se passer des hacks CSS

http://www.dyingculture.net/…

Quelques réserves vis-à-vis des commentaires conditionnels

http://forum.alsacreations.com/faq/

Liste des commentaires conditionnels spécifiques cités en exemple.

http://www.tantek.com/CSS/Examples/boxmodelhack.html

L’inventeur du box model hack

http://css-discuss.incutio.com/?page=CssHack

La plupart des hacks CSS disponibles sur une page

http://centricle.com/ref/css/filters/

Quels filtres pour quels navigateurs et plateformes ? C’est ici que ça se passe !

Articles sur le même sujet

• Trucs et astuces CSS
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• IE6 — Gérer la transparence du format PNG 24 bits
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Quelques notes sur XHTML et CSS, au fil de l'eau…

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

            <title>Un titre explicite contenant les mots-clés de la page</title>



            <!--[if lt IE 7]&gt;-->


            <!--[if IE]&gt;-->

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits