In dit artikel betoogt de auteur dat pixels (px) in CSS misleidend zijn, omdat ze niet consistent overeenkomen met fysieke pixels op verschillende apparaten. Om de leesbaarheid van tekst te optimaliseren, stelt de auteur voor om de ch-eenheid (gebaseerd op de breedte van een teken) te gebruiken voor de maximale breedte van content en de ex-eenheid voor verticale afstanden. Dit zorgt ervoor dat de lay-out proportioneel blijft ten opzichte van de tekst zelf, ongeacht het scherm.
Dood met px, leve ch!
In CSS zijn pixels een dubbele leugen. Let op dat 1px niet noodzakelijkerwijs gelijk is aan één fysieke apparaatpixel. Op HD-schermen kan dit meerdere fysieke pixels beslaan. Op dezelfde manier komt 1cm in CSS vaak niet overeen met een honderdste van een SI-meter; op een groot televisiescherm is dit doorgaans langer. De lengtes zijn perceptueel: 16px ziet er ongeveer hetzelfde uit op een telefoon, laptop of televisiescherm bij een typische kijkafstand.
De overstap naar de ch-eenheid
Deze blog is primair tekstgebaseerd. Ik wil dat de breedte van de tekst leesbaar is voor de gemiddelde mens. Daarom stel ik de hoofdbreedte niet in als een percentage van het scherm, maar op basis van de tekenbreedte met behulp van de ch-eenheid. Dit is niet exact een teken, maar voor mijn doeleinden is het voldoende:
--width-content: min(75ch, 100%);
main {
max-width: var(--width-content);
}
Padding en marges
Wat betreft padding en marges geldt hetzelfde. Als ik een ruimte rond een element wil, wil ik dat die ruimte in verhouding staat tot de tekst die erin staat. Voor breedtes is het daarom logisch om de ch-eenheid opnieuw te gebruiken.
Voor de hoogte is het echter wellicht niet zinvol om verticale afstand uit te drukken in tekenbreedte. In dat geval kan de ex-eenheid worden gebruikt, wat de grootte is van een typische kleine letter.
Conclusie
Net als bij mijn idee om CSS-klassen uit mijn HTML te elimineren, is het mogelijk om hierin te ver gaan. Ik heb niet elke referentie van px naar ch veranderd, maar experimenteer simpelweg om te zien of het werkt.
Er is niets mis mee, immoreels of kwaadaardigs aan het gebruik van px — of welke andere maateenheid dan ook. Het gebruik van ch en ex past simpelweg bij mijn persoonlijke voorkeuren.
Dood met px, leve ch!
In CSS zijn pixels een dubbele leugen. Let op dat 1px niet noodzakelijkerwijs gelijk is aan één fysieke apparaatpixel. Op HD-schermen kan dit meerdere fysieke pixels beslaan. Op dezelfde manier komt 1cm in CSS vaak niet overeen met een honderdste van een SI-meter; op een groot televisiescherm is dit doorgaans langer. De lengtes zijn perceptueel: 16px ziet er ongeveer hetzelfde uit op een telefoon, laptop of televisiescherm bij een typische kijkafstand.
De overstap naar de ch-eenheid
Deze blog is primair tekstgebaseerd. Ik wil dat de breedte van de tekst leesbaar is voor de gemiddelde mens. Daarom stel ik de hoofdbreedte niet in als een percentage van het scherm, maar op basis van de tekenbreedte met behulp van de ch-eenheid. Dit is niet exact een teken, maar voor mijn doeleinden is het voldoende:
--width-content: min(75ch, 100%);
main {
max-width: var(--width-content);
}
Padding en marges
Wat betreft padding en marges geldt hetzelfde. Als ik een ruimte rond een element wil, wil ik dat die ruimte in verhouding staat tot de tekst die erin staat. Voor breedtes is het daarom logisch om de ch-eenheid opnieuw te gebruiken.
Voor de hoogte is het echter wellicht niet zinvol om verticale afstand uit te drukken in tekenbreedte. In dat geval kan de ex-eenheid worden gebruikt, wat de grootte is van een typische kleine letter.
Conclusie
Net als bij mijn idee om CSS-klassen uit mijn HTML te elimineren, is het mogelijk om hierin te ver gaan. Ik heb niet elke referentie van px naar ch veranderd, maar experimenteer simpelweg om te zien of het werkt.
Er is niets mis mee, immoreels of kwaadaardigs aan het gebruik van px — of welke andere maateenheid dan ook. Het gebruik van ch en ex past simpelweg bij mijn persoonlijke voorkeuren.
Groetjes,