Voir le Web comme au début

Comment — et peut-on encore — voir le Web comme à ses débuts ? Oui, avec une feuille de style dédiée. Et non, pas tout à fait, car le rendu des navigateurs actuels diffère. Essayons !

Je me souviens de l'apparence des premiers sites, dans les premiers navigateurs, et j'étais curieuse de revoir ça. Il nous en reste aujourd'hui quelques captures d'écran, à partir desquelles j'ai essayé de reconstituer, en CSS, l'apparence du Web à ses débuts, notamment pour voir la première page web, qui vient d'être remise en ligne, telle qu'elle était à l'époque.

C'est un travail de restauration un peu étrange, puisqu'il ne suffit pas d'appliquer le style de l'époque. En effet, celui-ci n'aurait plus strictement le même effet, car le rendu graphique des navigateurs a évolué entre temps. Et le langage CSS n'existait pas encore ! Il s'agit donc simuler le rendu originel. À l'époque, les lettres n'étaient pas “anti-aliasées”, c'est à dire qu'il n'y avait pas de niveaux de couleurs intermédiaires pour simuler un lissage des lettres pointe en particulier Jean-no. Il faut pour cela utiliser la propriété CSS font-smooth: never; ; mais non standard et mal supportée, il faut la préfixer : -webkit-font-smoothing: none; pour obtenir, sous Chrome, un rendu crénelé à l'ancienne. C'est un peu déroutant de chercher à obtenir ce rendu, à contre-courant de la tendance d'amélioration du rendu typographique à l'écran !

J'ai donc préparé une feuille de style pour simuler le rendu du navigateur Mosaic, sur fond gris moche, avant de remonter plus avant dans le temps, jusqu'au premier navigateur, dont les pages s'affichaient en niveau de gris, sur fond blanc. Autre difficulté : pour obtenir ces rendus sur le Web actuel, il faut aussi passer outre les styles en vigueur sur les sites, à gros coup de surcharges CSS peu orthodoxes, usant du sélecteur universel comme jamais et des !important à foison. Voici ce que ça donne appliqué à cette page :

Même si le résultat est imparfait, c'est assez rigolo de pouvoir (re)voir le Web ainsi. Et cet exercice de style était une expérience intéressante pour le sentiment qu'il m'a donné de coder à reculons, au contraire des bonnes pratiques actuelles, refaisant le chemin inverse des évolutions graphiques du Web.

Comment voir ça chez vous ? Il faut pour cela pouvoir appliquer ces styles sur les sites que vous visitez.

C'est possible avec, par exemple l'extension Stylish qui, une fois installée dans votre navigateur, permet d'appliquer d'autres styles à tous les sites que vous visitez. Par défaut, cette extension activée est sans effet. Allez ensuite télécharger l'une de mes deux feuilles de style partagées sur le site dédié :

• First Web Browser
• Mosaic Web Browser

Alors ? Ça pique les yeux, hein !