Nouvelle technique de CSS hack

Mon camarade YoGi expose au grand jour une nouvelle technique pour éviter d’avoir recours aux CSS hacks qui, souvent, font autant de mal que de bien.

Cette technique a le mérite d’être simple à comprendre et à mettre en oeuvre mais je dois avouer être dubitatif quant à son intérêt. En effet elle ne peut s’utiliser que dans la page HTML et non dans les fichiers CSS. Il est clair que pour des raisons de maintenance et de gâchis de bande passante, il est inimaginable de laisser les propriétés CSS sur chaque page. Ce qui revient à dire qu’il faudrait utiliser la méthode suivante pour contourner certains bugs d’Internet Explorer :

<link rel= »stylesheet » type= »text/css » href= »style.css » media= »screen » />

<!–[if IE 5]> <link rel= »stylesheet » type= »text/css » href= »style_ie.css » media= »screen » /> <![endif]–>

Sachant que selon les version d’Internet Explorer les bugs diffèrent on pourrait très rapidement se retrouver avec ce genre de chose :

<link rel= »stylesheet » type= »text/css » href= »style.css » media= »screen » />

<!–[if IE 5.0]> <link rel= »stylesheet » type= »text/css » href= »style_ie_5.css » media= »screen » /> <![endif]–>

<!–[if IE 5.5]> <link rel= »stylesheet » type= »text/css » href= »style_ie_5_5.css » media= »screen » /> <![endif]–>

<!–[if IE 6]> <link rel= »stylesheet » type= »text/css » href= »style_ie_6.css » media= »screen » /> <![endif]–>

Dès lors je doute que cela soit meilleur que les CSS hacks, je serais même tenté de dire que les CSS hacks simple sont préférables. Personnellement j’essaie d’y avoir recours le moins possible et quand c’est vraiment nécessaire je me contente de hacks tout bêtes afin de ne pas prendre en facilité de maintenance ce que je gagne en possibilités. Cela dit, cette technique a le mérite d’exister et peut, dans certains cas, être une bonne idée. Comme tous les outils elle n’a pas une utilité universelle mais constitue un bon apport à votre trousse à outils.

Ce contenu a été publié dans Développement Web. Vous pouvez le mettre en favoris avec ce permalien.

9 réponses à Nouvelle technique de CSS hack

  1. YoGi dit :

    Au contraire, je pr?f?re nettement cette approche. Certes, tu dois recopier dans chacune de tes pages les commentaires conditionnels, mais ta feuille de style g?n?rale reste ta feuille de style pour tout bon navigateur, et a cot? tu d?finis les propri?t?s des navigateurs r?calcitrants. C’est quand m?me plus propre.

    Et puis, pour peu que tu fasses du dynamique, tu colles tout ?a dans un script que tu inclues dans chacune de tes pages, et le tour est jou?, c’est pas fondamentalement plus difficile ? maintenir.

    Enfin, une petite erreur s’est gliss?e dans tes exemples : "<!–[if IE 5]>" s’appliquera a tous les navigateurs en version 5.x, 5.5 y compris, donc. Ca marchera quand m?me vu que tu l’as d?fini dans l’ordre, mais dans l’id?e je pense que tu voulais plus faire "<!–[if IE 5.0]>" (qui s’applique quant ? lui ? tous les IE 5.0xxxx)

  2. JMF dit :

    C’est s?r que c’est pas trop contraignant pour du dynamique mais il y a un autre souci que je n’ai pas abord? dans mon billet.

    Il n’y a pas que Internet Explorer qui pose des soucis d’interpr?tation CSS, Konqueror, Safari ou Opera ont parfois quelques petits soucis. Bien plus modestes il est vrai mais ils existent. Cela veux dire que dans ta feuille « propre » tu vas devoir ajouter des hacks css quand m?me pour g?rer ces navigateurs.

    Enfin en tout ?tat de cause, c’est une affaire de go?t et je te remercie d’avoir mis cette technique en lumi?re parce qu’au fond personne n’est oblig? de l’utiliser s’il ne l’aime pas. 🙂

    Merci pour la correction au passage.

  3. aza dit :

    au contraire il est bien plus int?ressant de mettre les css dans la page :

    – on peut sauvegarder la page sans les images, la pr?sentation sera toujours l?

    – qui se pr?occupe de bande passante aujourd’hui quand on voit les sites qui "marchent" pas du tout optimis?s, c’est pas en optimisant sur les css (du texte) qu’on risque de niquer la bande passante (? moins d’?tre un goret et d’avoir des css longues comme ma bite dans ce cas l? optimise tes css mec au lieu de les externaliser)

    – enfin , qui a dit qu’une fois les css dans la page, ces css seraient impossible ? maintenir parceque dans chaque page ?
    H? ! Qui fait encore des pages statiques ? Le Php, l’asp ou autres permettent des "includes" non ?

  4. madmolf dit :

    Bonjour,pour r?pondre ? Permalien… le fait de placer un "include" reviens pour moi ? lier un fichier externe. Je ne vois pas le b?n?fice.

  5. JMF dit :

    madmolf, "Permalien" n’est pas le nom de quelqu’un mais un lien permanent (d’o? son nom) vers un billet ou un commentaire. 😉

  6. Aur?ance dit :

    Bonjour.
    Ma pens?e ? propos des Hacks:
    Nous devrions, vous, moi et beaucoup d’autres; faire un genre de restriction (boycott) .
    Je m’explique: Loin d’?tre partisant d’une descrimination quelconque; il me semble que le W3C vient de f?ter son 10eme anniversaire. Ors, il semble que l’on doive ( encore ! apr?s 10 ans ) faire des hacks pour tel ou tel navigateur obsol?te.
    Moi, pour ma part, je suis r?solu ? utiliser et ? me conformer aux r?solutions du W3C.
    Et dommage pour ceux qui refusent ( par m?connaissance ? ) l’utilisation de navigateurs web gratuits et tr?s performants ( Mac & PC ).
    Je cite:
    _Opera qui propose 2 versions: une gratos et une tr?s developp?e payante ( "30$" aujourd’hui fev 2005 )
    _Mozilla ( je ne vois pas pourquoi on s’en priverait )
    _FireFox ( du m?me accabit que les browsers cit?s pr?c?demment et qui vient des m?mes d?veloppeurs )
    PS: Faudrait pas que les entreprises qui vendent des navigateurs merdiques m’accusent de faire de la publicit? pour des navigateurs gratuits qui n’ont de similaire que le nom .
    _Safari ( pour les Macintosheux ) navigateur de la plateforme (compris dans l’achat du Mac) exellent pour comprendre ce que peut ?tre un vrai navigateur.
    Je n’utilise pas telle ou telle marque, je prends ce qu’il y a de meilleur.
    Moi; pour l’instant: Safari / Mac.
    Mais, je fais mes validations de WebPages sur tous les navigateurs possibles sur Mac. ( Y’a la dose )
    Salut.

  7. HawkFest dit :

    Salut "madmeuf" et "Permalien" (lol)… Je suis d’accord avec aza: une inclusion interpr?t?e par PHP n’est pas du tout telle une inclusion interpr?t?e par le navigateur (ou le serveur Web (qui envoie la page suivie de l’inclusion, mais ?a d?pend des m?thodes, des foi sl’assemblage se fait c?t? serveur). Le seul "hic" est effectivement en ce cas une inclusion redondante pour toutes les pages (sauf la premi?re ?videmment), mais c?t? gestion des codes et s?paration de la coquille, C kif-kif si c’est fait du c?t? serveur via PHP/CF/Perl/etc… Quand ? la bansde passante… Nous ne sommes plus ? l’?poque des 14400 bauds! On ne parle que de 4 ? 10 lignes de texte suppl?mentaire par page, ce qui ?quivaut ? un ajout d’environs 3 ? 7 Ko par page (en assumant 8 bits/car, et toutes les lignes contiennent 100 caract?res)… Pas de quoi paniquer pour la milliseconde de perdue! 😉

  8. Aur?ance dit :

    Il va de soit, que les styles CSS sont indiqu?s de pr?f?rence dans une page externe, je vois mal un site qui contiendrait tout le style encapsul? dans chaque page. Lourd !.
    Cependant, il y a d’autres d?viances qui sont ? ?viter…
    J’ai par exemple not? dans le code source de la tr?s jolie page darkmag.net/darkBlog/inde… mise en exergue plus haut, la quantit? de 30 (trente) balises <link rel=bla bla />
    Je crois que n’importe quel navigateur se fatigue quand il lui faut brasser et reunir autant d’infos.
    Je pense que le Hack est une mani?re de se d?carcasser ( comme Ducros) pour que les standarts passent partout, ou presque. Finalement, cela abouti ? un ralentissement de l’inexorable machine du progr?s. Il serait bon, par exemple, que les d?veloppeurs de browsers web (obsol?tes, mais n?anmoins monopolisants), indiquent clairement aux webmasters, quelles sont leurs lacunes sur tels ou tels points de non conformit? W3C.
    Cela permettrait, d’?viter les "? peu-pr?s", les pertes de temps et… harmoniserait la cr?ation des sites durant le temps n?cessaire ? l’?tablissement concret d’un commencement de norme.
    Pensez qu’on est bient?t CSS3.
    Jules Vernes avait song?, le W3C songe… Il y’a eu une r?alit? et il y aura une r?alit?.

  9. Aur?ance dit :

    Alors…
    On se la joue cette p?tition ? :
    ______________________________________________________
    AUX DEVELLOPEURS WEB BROWSER
    _supportez vous la pseudo class " hover" ?
    _supportez vous la pseudo class " active" ?
    _supportez vous la pseudo class " focus" ?
    _supportez vous le pseudo ?lement " before "?
    _supportez vous le pseudo ?lement " after "?
    _supportez vous le pseudo ?lement " first-line "?
    _supportez vous la propri?t? " text-shadow " ?
    _supportez vous totalement l’insertion " object " ?
    _supportez vous les autres bowsers que le votre ?
    _supportez vous l’import @font…..
    Etc … y’en ? beaucoup.
    On aurait bien de quoi (qui) s’amuser.

Les commentaires sont fermés.