Sass niceheid!

Foto door AlohaEen paar jaar geleden ben ik gestopt met het bouwen in em’s, en ben teruggegaan naar het bouwen in pixels. Waarom? Em’s zijn over het algemeen een pain in the ass, en volgens mij hoef ik niet uit te leggen waarom. Daarnaast zoomden modererne browsers ipv dat ze alleen werkten met het vergroten van de lettergrootte, zoals in oude ie’s. Maar daar kom ik nu op terug.

Waarom?

Het belangrijkste punt is deze. Als je in firefox (chrome doet dit nog niet goed) een responsive site met breakpoints in em’s inzoomt, verandert de lettergrootte. En omdat de breakpoints niet in pixels maar in em’s zijn aangegeven veranderen die mee. Dus laat de site op een groot scherm met een grote lettergrootte de mobiele site zien. En dat is de site die is ontworpen voor een klein lettertype op een klein beeldscherm! Relatief gezien zijn ze dus hetzelfde, en de site is voor iemand met een visuele handicap gemakkelijker om mee te werken.

Van pixels naar em’s zonder hoofdpijn

Mason Wendell geeft op deze pagina een mooi voorbeeld van een functie om pixels om te rekenen in em’s. Da’s een stuk gemakkelijker, want je blijft de originele groottes altijd in je sass-bestand zien. Maar deze functie heb ik nog een stukje verbeterd. Omdat je toch heel vaak van de lettergrootte van de body uitgaat is het volgens mij handiger dat je die niet elke keer mee hoeft te geven. Dus daarom heb ik er onderstaande functie van gemaakt:


$body-size: 14px;

@function calc-em($target-px, $context: $body-size) {
@return ($target-px / $context) * 1em;
}

De functie werkt als volgt: als je de lettergrootte van de body niet mee hoeft te geven schrijf je


h1 {
calc-em(28px);
}

et voila! De 28 pixels worden heel netjes omgerekend naar de em waarde tov de $body-size. Moet je daarentegen de lettergrootte van bijv. een span in deze h1 uitrekenen, dan gebruik je deze code:


h1 span {
calc-em(12px,28px);
}

en je krijgt vanzelf de juist em waarde. Handig!

Update!

Het zoomen en daardoor springen naar een mobiele versie van de site werkt ook in pixels. Dus dat argument is eigenlijk niet meer relevant. Lastig. Het enige argument dat volgens mij nog geldt is dat mensen die gewend zijn om in IE6 hun tekstgrootte aan te passen dat ook in nieuwere browsers blijven doen.

2 Reacties

  1. Ik gebruik nu rems met een px fallback via een sass mixin: https://github.com/bitmanic/rem sass niceheid!

  2. Ja, mooi hoor! Ik had het hier afgelopen week nog met fili over, en toen kwamen we ook uit op rems. Misschien een idee voor m’n volgende project.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *