Ce billet fait partie de la série « Dirty Hacky ». Le but de cette série est un objet critique sur les astuces de web-développement, et n'a pas pour vocation d'être une recette définitive, mais d'attirer l'audience par la polémique technique.
BANG! BANG!            BANG!

0. Je parse en HTML .357 S&W
1. Commentaires conditionnels
2. Magouilles dans les CSS
3. Du sprite explosé en petits glaçons
4. Liens serrés dans la police
5. Des Bleus et des Boss
6. Exécutions très rapides
7. Le script des bas-fonds
8. Préfixes frelatés

Les petites frappes de la CSS

Le hack concerne aussi les langages descriptifs. Et il est aussi utilisé en webdesign. Mais bien souvent dans ce métier, ce ne sont pas des programmeurs, mais plutôt des graphistes, qui n'ont pas forcément conscience de l'ensemble des problèmes que peuvent causer une arme de poing astuce mal maîtrisée. Bien souvent, ces hacks sont utilisées littéralement, comme des recettes, d'un coup de ^+C, ^+V ou plutôt de ⌘+C, ⌘+V, comme ils disent dans leurs quartiers.

Bref, si on les laisse en toute impunité, ils vont faire de grosses conneries.

Les _zoom et *zoom

Des propriétés bizarres dans vos css, et qui en plus n'apparaissent pas dans la doc du W3C… Elles concernent des versions passées de MSIE. Historiquement, cette astuce permettait de passer des règles css spécifiques à MSIE pour qu'il considère certains éléments en hasLayout. On parle là de changer une propriété interne au moteur de rendu de MSIE, donc d'interférer avec sa cuisine interne des objets DOM.

La raison de cette astuce fut de palier à des erreurs d'affichages de MSIE, ce qui empêchait ce brouteur de pouvoir positionner correctement des objets flottants. _zoom est interprété par MSIE 4 à MSIE 6, *zoom jusqu'à MSIE7.

L'exemple est fictif, Votre Honneur, c'est juste pour ces avortons de jurés...

a {
  color : blue;
}
a {
  *zoom : 1;
  color : red;
}
a {
  _zoom : 1;
  color : yellow;
}

Vous ne saviez pas ce qu'est ce fameux bug hasLayout ? Vous n'avez jamais entendu parlé du box-model ? Alors pourquoi utiliser ce hack ?

Ce hack est doublement malsain : il utilise une règle mal-formée (le * ou le _ en début de clé), ce qui normalement doit immédiatement arrêter l'interprétation de la règle CSS en cours ce que ne faisait pas MSIE, et une propriété “zoom” qui n'existait que pour un navigateur mais qui n'a pas été préfixée à l'époque.

À mon avis, des règles élémentaires de prudence devraient s'appliquer :

• Si un hack vous semble illisible, c'est qu'il est probablement disgrâcieux ;
• S'il fait appel à une propriété non-préfixée mais propre qu'à un seul constructeur, c'est qu'il est décidément non-standard ;
• Si en plus vous n'avez aucune explication à sa présence, c'est que vous l'avez bêtement appliqué par pure superstition.

Malgré trois warning qui <blink></>otent violemment dans votre cerveau, l'appliquer est un signe évident de tendances suicidaires.

Actuellement, ce mauvais hack n'a plus aucune raison d'être : MSIE 8 n'est plus sujet à ce bug. Néanmoins, il est utilisé par des “frameworks” CSS “réputés” pour corriger certains navigateurs (Twitter Bootstrap 2, sachant que son créateur le regrette amèrement).
Qui plus est, l'usage de ce hack a tendance à faire hurler les validateurs W3C, de Firefox et de Chrome. À raison.

Origine	BAD
Élégance	BAD
Modernité	OBSOLETE
Postérité	SHORT

* html

Cette astuce est utilisée pour trouver les MSIE 4 à 6. À mon sens, c’est une astuce acceptable : elle ne corrompt pas le parsing. Ce hack joue sur le comportement d'un navigateur qui interprétait d'une manière assez libre un joker. Il induit aussi que le moteur de rendu des navigateurs modernes perde du temps précieux lors des rendus, donc que le correctif induit un ralentissement des bons navigateurs. Mais en soit, il ne cause pas de bug ou rend illisible le code.

* html a {
  color : blue;
}

Mais pour Çelik Tantek, philosophiquement, il est très mauvais car il cible les navigateurs ultérieurs, alors qu'il était possible d'obtenir le même effet en utilisant la filiation directe, comme dans html > body . En soit, je suis aussi d'accord qu'il ne devrait plus être utilisé. Mais techniquement il ne prête plus à conséquence pour les navigateurs récents. Il peut donc être oublié dans le code.

Origine	BAD
Élégance	GOOD
Modernité	OBSOLETE
Postérité	SHORT

To be continued

L'inspecteur Dirty Hacky reviendra, avec du sprite en petits glaçons.

D'ici-là, les petits branleurs qui croient être du Grand Art car ils ont ouvert un éditeur de code pourront toujours couiner comme des femelettes, je n'aurais aucune pitié sur mes commentaires ↓ ci-bas.