Comment j'ai (encore) retiré le CSS

Alors que j'étais récemment tout fier de parler des nouvelles couleurs plus proches de celles du papier.

Alors que je me prenais la tête à propos de contrastes, d'aisance à la lecture, d'accessibilité pour identifier les liens sans pour autant entacher le confort...

Cela devait arriver, j'ai finalement supprimé la majorité du CSS de mon site.

Tout commence par l'arrivé d'un nouveau téléphone, avec /e/ OS installé dessus, et le constat inattendu de voir une version "dark" de mon site bien que le CSS ne le prévoyait pas. Il semble en effet que les navigateurs récents prévoient déjà des couleurs adaptées aux préférences de l'utilisateur qui aurait souhaité un mode de lecture sombre.

À ceci s'ajoute la mauvaise expérience de voir le rendu de mon site sur un autre appareil, les couleurs semblant légèrement différentes, avec une gêne désagréable à cette découverte.

Or, qui suis-je pour prétendre mieux connaître les goûts de chacun en terme de couleurs?

Qui suis-je pour mieux connaître le niveau de contraste nécessaire à une lecture confortable pour tous?

Comment prétendre choisir la meilleur police de caractères qui améliorerait la lisibilté du texte à n'importe quels yeux?

Les navigateurs peuvent être configurés pour choisir les polices par défaut, et même les couleurs semble-t-il. J'ai découvert ça dans les paramètres de Firefox, sans même avoir à passer par le mode de lecture.

Pour limiter la fatigue oculaire, la plupart des systèmes permettent de modifier la température de couleur (Android le fait. Sur Linux ou OpenBSD, il y a redshift ou sct).

Alors c'est décidé, je retire toute mention de couleur ou de police.

Au final, le CSS s'en retrouve grandement simplifié.

Cela flatte mon goût du minimalisme, et je l'espère, respecte davantage les préférences personnelles des lect(rice|eur)s.

Voici mes 382 bytes de CSS :

body {
    font: 1.2rem/1.4 sans-serif;
    max-width: 62ch;
    margin: auto;
    padding: 1rem;
}
a { text-decoration: none; }
pre {
    padding: 1rem;
    max-width: 100%;
    overflow: auto;
    font-size: .9rem;
    border: 1px solid;
}
img {
    max-width: 100%;
    height: auto;
}
blockquote {
    border-left: 3px solid;
    padding: 1rem;
}
#header { text-align: right; }

Voir aussi :

redshift

sct

58 bytes of CSS to look great nearly everywhere

Une réaction?

Envoyez votre commentaire par mail (anonyme).

Mode d'emploi de la liste de diffusion pour recevoir les réponses.