Voir le Web comme au début

Exercice de style, de reconstitution historique

30 avril 2013, 8 décembre 2013,
par Romy Têtue

Mots-clefs associés à cet article :

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. Étonnant aussi de voir la similitude avec certains looks actuels, qui se simplifient par souci de valoriser le contenu et/ou de s’afficher correctement sur tous les terminaux…

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é :

Alors ? Ça pique les yeux, hein !

Partagez cet article :

Voter pour cet artice sur hellocoton.fr Netvibes Del.ico.us

Vos commentaires

  • Le 8 décembre 2013 à 18:21, par Suske En réponse à : Voir le Web comme au début

    Héhé tetue :-)

    Il faudrait y joindre un générateur de gifs animés si je me souviens bien ^^

  • Le 8 décembre 2013 à 19:11, par Nico En réponse à : Voir le Web comme au début

    Dans le même genre, j’avais qq CSS alternatives façon vieil écran. Attention les yeux :)

  • Le 8 décembre 2013 à 20:16, par Romy Têtue En réponse à : Voir le Web comme au début

    @Suske : ah ah ! Bien vu !

    @Nico : ma préférence va aux deux « old screen » !

    Ceci dit, ce n’est pas le même exercice de faire des feuilles alternatives ou thèmes, pour lesquels il faut moins forcer la surcharge. Au mieux, ils s’appuient sur une base CSS sur laquelle on peut coder élégamment. Mais là, je devais y aller, non pas à la truelle, mais au marteau-piqueur. Bizarre comme sensation !

Un message, un commentaire ?


Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom