Quill.

Notes sur la fabrication du web, lentement et volontairement.

🌐 FR , Changer de langue

Artisanat

Mesurer plutôt que déclarer

Une feuille de style est un ensemble d'affirmations. Chaque règle dit que lorsque ce motif apparaît, ces propriétés s'appliquent. L'ennui est qu'une affirmation peut être fausse tout en paraissant parfaitement raisonnable.

Une règle qui ne correspondait à rien

Prenons une règle censée espacer les paragraphes :

.prose > * + * { margin-top: 2.5em; }

Elle se lit correctement. Elle est aussi inerte lorsque le générateur enveloppe le Markdown rendu dans son propre élément : les paragraphes ne sont alors plus des enfants de .prose, et le combinateur enfant ne les atteint pas.

Rien ne proteste. La feuille se charge, la page s'affiche, et l'espacement est simplement absent.

Pourquoi la relecture ne suffit pas

Lire une différence vous dit ce qu'une règle affirme, pas si elle s'applique. Les deux exigent de connaître la forme du DOM que la règle rencontrera, et cette forme est décidée ailleurs.

Une règle que vous avez lue n'est pas une règle que vous avez vérifiée.

Mesurer la sortie, pas la source

Les contrôles utiles ont tous la même forme : charger la page construite dans un vrai navigateur, lui demander ce qu'elle a peint, et comparer.

Affirmation Ce qu'il faut mesurer
Le texte atteint un rapport de contraste La couleur calculée face à son fond réel
Rien ne déborde sur un téléphone L'étendue horizontale de chaque élément
Le focus n'est jamais masqué Quel élément recevrait un clic à cet endroit