<Blink> et <Marquee> (2020)

• Les balises <blink> et <marquee>, apparues aux débuts du web dans les années 1990, étaient alors des éléments emblématiques du web design
• La balise <blink> a été introduite dans Netscape Navigator 2.0 et, malgré son caractère facétieux et son manque d’esthétique, elle a été largement utilisée
• En réponse, Microsoft a introduit la balise <marquee> dans Internet Explorer, permettant un contrôle bien plus varié des animations de texte
• En imbriquant les deux balises, il devenait possible d’obtenir des effets d’animation différents selon le navigateur, ce qui est cité comme un exemple de progressive enhancement
• Aujourd’hui, <blink> a disparu et l’usage de <marquee> est lui aussi déconseillé, mais ces balises restent des exemples marquants de l’histoire du web et de la nostalgie en ligne

---

Introduction : souvenir des balises <blink> et <marquee>

• Lors d’une récente conversation avec un collègue développeur web, l’auteur a plaisanté à propos des balises HTML <blink> et <marquee>, avant de découvrir que son interlocuteur ne connaissait pas ces deux balises
• Si elles sont aujourd’hui peu familières aux jeunes développeurs, elles ont autrefois été des symboles emblématiques du web design des années 1990

Origines et histoire de la balise <blink>

• Le créateur de la balise <blink> est souvent présenté comme Lou Montulli, connu pour avoir créé le navigateur Lynx, mais il a en réalité précisé qu’il n’avait pas lui-même écrit le code
• Selon son récit, lors d’une discussion dans un bar avec des ingénieurs de Netscape, un « effet de texte clignotant » pouvant aussi s’utiliser dans un navigateur texte comme Lynx a été proposé sur le ton de la plaisanterie, puis un autre ingénieur l’a implémenté dans la nuit
• En 1995, la balise <blink> a été officiellement intégrée à Netscape Navigator 2.0, contribuant, avec les GIF animés et le JavaScript des débuts, à définir l’expérience des sites web personnels
• La balise <blink> s’utilisait sans attributs et, bien qu’elle soit officiellement mentionnée dans HTML4 comme une balise de plaisanterie, elle a été massivement détournée à la fin des années 1990
• Elle était souvent utilisée pour attirer l’attention sur divers messages, comme les « dernières mises à jour »

<marquee> et la concurrence entre navigateurs

• La même année, Internet Explorer 2.0, publié par Microsoft, a introduit la balise <marquee> en contraste avec le <blink> de Netscape
• La balise <marquee> permettait d’ajuster l’animation grâce à de nombreux attributs, comme la direction du défilement, la vitesse ou la répétition
• Là où <blink> relevait presque de la plaisanterie en pouvant nuire à la lisibilité visuelle, <marquee> mettait délibérément l’effet en avant
• À la fin des années 1990, l’usage combiné des deux balises — <marquee> contenant <blink> — est devenu populaire comme moyen d’obtenir des effets différents selon le navigateur (IE ou Netscape)

Progressive Enhancement et compatibilité web

• L’imbrication de <blink> et <marquee> est liée au Postel’s Law (principe de robustesse), selon lequel les navigateurs ignorent les balises non prises en charge tout en continuant à afficher leur contenu interne
• De nouveaux éléments HTML comme <video> adoptent eux aussi souvent cette logique de balises non auto-fermantes afin de préserver la compatibilité
• En utilisant des balises comme <blink>/<marquee>, il restait possible de lire le contenu informatif même dans des navigateurs ne reconnaissant pas ces balises
• Le web repose sur l’idée de fournir l’information à tous les utilisateurs, tout en permettant seulement à certains navigateurs de profiter d’effets supplémentaires : c’est le principe du progressive enhancement

Évolutions et prise en charge selon les navigateurs

• Les utilisateurs d’Opera, même avec une licence payante, voyaient rarement les effets <blink> ou <marquee>, mais l’accès au contenu ne posait pas de problème
• Netscape 7 était presque le seul navigateur à prendre en charge à la fois <blink> et <marquee>, permettant ainsi de combiner défilement et clignotement pour produire l’un des effets les plus difficiles à regarder du web

Conclusion : place actuelle et leçons pour le web design

• La balise <blink> a aujourd’hui complètement disparu (navigateurs modernes non compatibles) et, si nécessaire, peut être remplacée par des animations CSS
• Bien que <marquee> bénéficie encore dans certains navigateurs d’une prise en charge native ou d’un polyfill, son utilisation reste déconseillée
• Elle demeure, avec <blink>, un symbole de l’histoire du web et de l’esthétique en ligne d’autrefois, ainsi qu’un cas d’école sur les standards web, l’accessibilité et la maintenabilité
• Si la nostalgie numérique vous intéresse, il suffit de consulter d’anciens sites ou ressources consacrés au web design d’autrefois

[GN⁺]

Avis Hacker News

• Je me souviens qu’il existait autrefois un site comme celui du lien ci-dessous : https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/

• J’ai l’impression d’être là depuis 3 000 ans. Je me souviens de l’époque où l’on se disputait violemment pour savoir si la navigation par frames était une mauvaise pratique (pas les iframe, les frames). Ravi si quelqu’un ici connaît encore les frames. Avant l’arrivée d’AJAX, j’utilisais moi-même HTTP 204 pour envoyer des messages au serveur sans recharger la page. Au début des années 2000, je faisais aussi des image maps référence image map : https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map. Il m’est même arrivé de passer plusieurs jours à tracer les frontières d’une carte dans Dreamweaver pour obtenir une carte du monde cliquable. Avec les templates Dreamweaver, comme on n’utilisait pas de contrôle de version, il arrivait souvent qu’une mise à jour fasse disparaître toutes les modifications, sans possibilité de récupération. Je me souviens aussi d’avoir géré côté backend les positions de clic sur des images via input type=image. J’ai également implémenté des mises à jour en streaming sur une page avec du Motion JPEG, et ça marche encore dans Chrome, même si c’est un peu instable dans Firefox. J’ai essayé toutes sortes de méthodes pour contourner les problèmes d’alpha blending PNG dans IE, et j’ai fini par exploiter un moment une version ActiveX, jusqu’à ce que la mode du flat design rende tout cela inutile. J’ai utilisé JAVA, Flash et Silverlight pour la navigation. Je me rappelle très bien aussi des spacer GIF, des commentaires conditionnels, et à quel point l’environnement de développement s’est simplifié après l’arrivée de Firebug. Le temps a passé sans que je me rende compte que je vieillissais

  • J’ai développé des logiciels web avec les anciennes frames et je n’y voyais pas de problème particulier. Les gens parlent toujours d’accessibilité, mais je ne comprends toujours pas précisément ce qui posait problème

  • Je me souviens avoir travaillé pour des clients qui demandaient du support malgré tous les bugs et limitations absurdes d’IE6. Quand un designer livrait un design à coins arrondis depuis Photoshop, je ne pouvais que soupirer à chaque fois. À l’époque, le « responsive » consistait en réalité à prendre en charge plusieurs résolutions desktop. Il fallait découper les coins en images et les placer directement dans les cellules d’un tableau. Ce genre de travail manuel forgeait sérieusement le mental des développeurs

  • Je me souviens de l’époque où l’on découpait méticuleusement des images avec l’outil slice de Photoshop, avant de les exporter en GIF puis d’essayer de les placer exactement dans des tableaux HTML. Beaucoup de designs étaient optimisés pour le 800x600. J’ai l’impression que tous ces souvenirs se sont dissous dans le temps

  • Il y a encore aujourd’hui des sites que je visite parfois et qui utilisent des frames. Le site de The Open Group/POSIX utilise toujours des frames

  • J’ai déjà créé un webchat avec des frames. En haut, une fenêtre de chat en rechargement infini ; en bas, une input box, et lors de l’envoi d’un message, on empêchait le rafraîchissement avec un 204. On pouvait aussi envoyer au frame du haut un petit script pour recharger le frame de droite qui contenait la liste des utilisateurs. Je m’en servais vers 2000 avec quelques amis

• J’ai déjà créé un site qui faisait des animations uniquement avec des balises marquee. Aucun JavaScript, et à chaque fois que je le montrais à quelqu’un, les gens étaient surpris : https://udel.edu/~ianozi/

  • Ça doit faire 20 ans que je n’ai pas vu de balise marquee, et je crois que je ne savais même pas qu’on pouvait aussi faire du défilement vertical avec le paramètre direction

• Mon astuce préférée avec la balise marquee, c’est de les imbriquer. Si on met des directions différentes et qu’on règle la marquee intérieure à la même vitesse en sens inverse, on peut obtenir un effet d’arrêt momentané avant que ça reparte. Avec des vitesses différentes, on pouvait faire des mouvements encore plus complexes. Si je me souviens bien, pour que ça fonctionne correctement, il fallait définir une largeur maximale sur l’inner marquee

• Autrefois, je détestais tellement la balise blink que j’ai modifié le fichier binaire du navigateur que j’utilisais (sans doute Netscape) en remplaçant blink par blonk, pour que ça ne clignote plus

  • Je fais surtout ce genre de tweaks binaires sur le client Slack (comme c’est une app Electron, c’est super facile). On peut aussi retirer facilement des fonctionnalités que je déteste, par exemple masquer les notifications ou bloquer l’indicateur de saisie

  • Si quelqu’un a déjà utilisé la balise blonk, alors il y a peut-être maintenant du blonking. C’est un hack assez drôle

  • Modifier des binaires, c’est plutôt amusant. Je remplaçais parfois __gnu_warning par __gnu_whining pour faire disparaître les messages d’avertissement sur gets(). Les buffer overflows, bon, ça peut arriver, mais dans du code écrit à l’arrache, je n’allais pas m’en préoccuper outre mesure

• J’utilise très souvent la balise marquee pour tester les injections HTML. Comme c’est une balise animée que presque personne n’utilise, on voit immédiatement si l’attaque a marché. Même pour des non-techniciens, le fait de montrer qu’un texte se met à bouger alors qu’il ne devrait pas est bien plus parlant qu’un simple bold pour faire comprendre le risque

  • Lors de la sanitization HTML, je laisse uniquement marquee en whitelist comme easter egg, et je bloque à peu près tout le reste

  • Je consulte Hacker News via un agrégateur personnalisé, et cet article m’a fait découvrir qu’il était vulnérable à l’injection HTML. Un billet de 2020 se promenait sur mon écran en marquee

• « La Bête apparaîtra entourée de nuages tourbillonnants de vengeance. La maison des incroyants sera détruite, et leurs balises clignoteront jusqu’à la fin. » – The Book of Mozilla, 12:10 (about:mozilla). Et ça me fait penser qu’aujourd’hui Mozilla aussi est en train de disparaître. On dirait presque la fin du monde

  • J’utilise toujours Firefox comme navigateur par défaut

• Ça me rappelle l’époque où je faisais tourner le site web de l’étage de ma résidence universitaire depuis mon propre ordinateur. J’y avais mis un long message de 997 mots dans une marquee, où je radotais sur les filles, la dépression, la philosophie et tout un tas d’autres choses. À la fin du message, il y avait un !, qui pointait vers une page cachée. Quelqu’un a fini par trouver cette page en lisant tout le long message via view source

• Mon ami entourait toujours son deuxième prénom avec une balise blink pour tester rapidement l’absence d’escaping et les XSS potentielles. À l’époque, ce genre de méthode simple était étonnamment efficace pour découvrir des failles

• Ce commentaire est actuellement en construction. Revenez souvent pour vérifier les mises à jour

  • Je me demande où sont le compteur de visiteurs et le livre d’or

  • Je me demande pour quel navigateur cette page est optimisée

  • N’oubliez pas l’indication [NEW]