Les techniques de hacking HTML qui ont façonné Internet

L’ingéniosité des hacks HTML

• La nécessité des hacks HTML : il arrive qu’il faille écrire du code peu élégant pour obtenir le résultat attendu en raison d’échecs du code HTML ou d’implémentations incomplètes des navigateurs. Ces hacks sont parfois créatifs et méritent d’être retenus.
• Le hack @import de Netscape Navigator 4.0 : permettait de bloquer les styles CSS non pris en charge par Netscape. Netscape soutenait JSSS plutôt que CSS, mais lorsque le W3C a choisi CSS, l’implémentation CSS de Netscape 4 a été précipitée, ce qui l’a rendue moins performante que celle des navigateurs ultérieurs.
• L’utilisation des tableaux HTML pour la mise en page : a rendu possibles des mises en page plus expérimentales. Utiliser des tableaux HTML comme outil de layout correspond exactement à la définition d’un hack, et cela reste encore utilisé dans l’univers de l’e-mail.
• L’utilisation d’un soulignement avant les styles CSS : permettait d’appliquer certains styles uniquement à IE6. Cela exploitait les limites d’IE dans l’analyse des caractères spéciaux.
• L’utilisation de AlphaImageLoader pour gérer la transparence PNG : permettait de rendre la transparence des fichiers PNG qu’IE6 ne prenait pas en charge. L’image était traitée via un filtre.
• Les commentaires conditionnels : permettaient d’utiliser certains tricks uniquement sur des versions précises d’IE. Ils détournaient la fonctionnalité de commentaire HTML pour permettre l’exécution de code.
• Scalable Inman Flash Replacement (sIFR) : permettait d’utiliser des polices non web-safe. Il utilisait un hack JavaScript remplaçant le texte par une intégration Flash.
• Le hack du texte de pré-en-tête : empêchait, dans les e-mails, du texte supplémentaire de déborder dans la ligne de description. Il utilisait des séquences non standard ou inhabituelles de caractères d’espacement.
• Google Chrome Frame : remplaçait IE6 par une fenêtre Chrome. Cela était mis en œuvre via un plugin de navigateur.
• Le hack des sélecteurs réservés à Webkit : appliquait du code CSS uniquement aux navigateurs Webkit. Il détectait si un navigateur prenait en charge un code CSS spécifique à ce navigateur.
• Le responsive design : permet de disposer efficacement l’information dans divers contextes, notamment sur tablette et mobile. Dans la plupart des cas, il utilise des media queries pour adapter l’agencement selon l’appareil.

L’avis de GN⁺

• Le plus important est l’effort des développeurs pour trouver des solutions créatives en dehors des standards HTML et CSS.
• Cet article est intéressant et captivant, car il montre comment les développeurs web ont utilisé des hacks créatifs pour surmonter les limites des navigateurs et améliorer l’expérience utilisateur.
• Ces hacks reflètent l’évolution des standards du web et les efforts constants des développeurs en faveur d’un meilleur web design.

[GN⁺]

Avis Hacker News

• On peut comprendre l’utilisation des tableaux pour la mise en page.

  Une fois les tableaux passés de mode, l’usage de float pour la mise en page a dominé pendant quelques années. Étonné que cette méthode n’apparaisse pas dans la liste. Selon la documentation MDN, la propriété float était à l’origine utilisée pour faire flotter des images dans des blocs de texte, mais elle a souvent servi à créer des mises en page web à plusieurs colonnes. Avec l’arrivée de flexbox et de grid, elle est revenue à son usage initial.

• Aucun respect pour spacer.gif.

  Toujours utilisé sur HN, et inclus dans chaque requête de page : s.gif

• Mes techniques préférées :

  • Les « Faux columns » pour donner l’impression que la barre latérale a la même hauteur que le contenu
  • Le nine-patch et 9 div ou un tableau 3x3 pour bricoler les bordures, avec un fond répété sur certains axes. En CSS3, border-image est apparu pour aider à cela. Mais ces styles de bordure ne sont plus vraiment appréciés.
  • On peut utiliser le nine-patch pour créer des bordures arrondies, mais beaucoup de gens utilisaient des générateurs produisant du HTML pour simuler ces bordures. Comme l’explique l’article, l’idée reçue voulait que le balisage supplémentaire coûte plus d’octets qu’une image, mais il y avait moins d’allers-retours et c’était plus simple à exécuter.

• HN utilise encore aujourd’hui l’une de ces techniques :

  • Utiliser des tableaux HTML pour la mise en page
  • Cette liste montre bien comment le développement sans standards encode des informations de contrôle dans divers canaux auxiliaires tolérés.
  • La confusion et les conflits potentiels qui en résultent soulignent parfois le mépris que certains ressentent envers le processus du W3C, qui combine l’évolution des technologies web fondées sur des standards et l’innovation pilotée par les navigateurs. Parfois l’un mène l’autre, parfois les deux avancent en parallèle.
  • Souvent critiqué, ce processus peut néanmoins être vu comme plus durable et plus stable que ce qui l’a précédé.
  • Je me demande combien de ceux qui critiquent la nouvelle norme W3C-vendeurs se souviennent de ces dix hacks étranges et voudraient vraiment revenir à cette époque.

• N’inclut pas la pratique consistant à placer les titres hors écran à la position -10000 pour l’accessibilité.

• Aucune mention de l’installation de HTML5 shiv avant le CSS pour éliminer les particularités de tous les navigateurs.

  L’histoire de HTML5 shiv

• Je me souviens de la belle époque où l’on contrôlait les cellules de tableau avec un gif transparent de 1×1 pixel.

• Mention supplémentaire de  , l’entité d’espace insécable, très utilisée au début :

  Utilisée pour déplacer du texte vers la droite ou la gauche à l’intérieur d’un conteneur. Ou employée comme un gif spacer 1x1 pour faire fonctionner correctement des cellules de tableau. Certaines pages contenaient des centaines de  . On l’utilisait généralement pour ajouter des marges ou du padding.

• J’ai parfois du mal à dire si les développeurs web modernes sont devenus trop gâtés grâce à CSS Grid et à la fin d’IE, ou si c’est nous qui l’étions à l’époque parce qu’on n’avait pas à gérer des frameworks modernes complexes et des processus de build.

• Doute sur le fait que le responsive design soit vraiment un hack :

  Les media queries sont remarquables. Mettre la logique conditionnelle dans le CSS plutôt qu’en JavaScript est un gros avantage quand on veut faire du rendu côté serveur.