Hoi janyep,
Even terug naar je nr. #7.
Begrijp ik goed dat alle width's, height's, borders, paddings, margins etc. in em's gaan? Behalve de width's en height's die een % hebben natuurlijk?
Neen!
Alléén alle width's enz. die je
relatief wilt hebben: bv. t.o.v. de schermbreedte, de containerbreedte of de standaard-lettergrootte of standaard-regelhoogte. Want op die manier schalen ze mee met de schermbreedte, enz.
Soms kan ook een relatief opgegeven margin-top en/of margin-bottom voor de schalende tekst-elementen (<h1>, <h2>, ..., <p>, <li> e.d.) nuttig zijn, maar meestal kan dat ook gewoon in vaste px zonder dat je er last van hebt.
In elk geval: een
relatieve margin-left of padding-left (en idem:
-right) bij tekst-elementen geeft bij opschalen juist een
averechts effect!
Hoe groter het letterformaat (bij eenzelfde breedte), des te minder woorden passen er op een regel. En als je dan de margin-/padding- L/R óók in em's zou doen, zou die linker- en rechter-afstand tot de zijkant ook juist groter worden: nog minder woorden op een regel!
Dus bij L/R margins en paddings is meestal de px-eenheid de aangewezen weg.
Geldt dat ook voor width en height van de .img ?
Nee, die hoeven ook niet relatief opgegeven worden, tenzij je juist wilt dat een image meeschaalt met de lettergrootte.
Maar browsers kunnen images niet zo goed geschaald weergeven, en vaak is het ook niet nodig. Voor afbeeldingen houd ik altijd gewoon de px-maten aan.
Unitless line-heights vlgs. ...
Prima idee, prima bronnen.
alistapart.com/articles/howtosizetextincss voegt nog een IE-hack toe, maar dat lijkt overbodig?
Lijkt me ook, want het artikel is van 2007, en Safari is intussen weer een paar versies verder dan de toenmalige Safari 2: in de body kan alles gewoon met % voor de letterhoogte.
Eigenlijk is het een "niet-IE hack", bedoeld voor Safari; want in:
HTML:
<!--[if !IE]>-->
.... font-size:16px;
<!--<[endif]-->
is het uitroepteken "niet". D.w.z. het is geen
normaal conditional comment (waarbij iets voor alleen IE geregeld wordt), maar juist
een omgekeerd CC.
In de ALA-constructie wordt IE dus een relatieve lettergrootte toebedeeld, en de rest niet (omdat Safari 2 daar niet goed mee omging). Als de rest ook een relatieve lettergrootte kan krijgen (omdat Safari verder is), kan het omgekeerde CC
dus (denk-denk
) gewoon weggelaten worden.
Dus:
Code:
body {font: 14px/21px Arial, Helvetica, sans-serif;}
kan worden:
body {font: 100.1%/1.5 Arial, Helvetica, sans-serif;}
Nu de:
Code:
#header {border-left: 3px solid #666;}
of:
#header {border-left: 0.188em solid #666;}
/* 3px met body-font=16px */
Een border-breedte kan volgens de css2.1-spec (
http://www.w3.org/TR/CSS2/box.html#border-properties) een expliciete <length> waarde hebben. Een <length> eenheid kan uitgedrukt worden in em's (
http://www.w3.org/TR/CSS2/syndata.html#length-units): "The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used."
Gaan we rekenen! De font-size van de #header is geërfd van de <body>, dus ook 100.1% (van de 16px standaard browser-fontsize) = 16.016px. Om daar 3px van te maken, moet het 3*(1/16.016)= 0.1873 keer zo klein zijn, dus .1873em.
Wat gaat er nu gebeuren bij vergroting van het letterformaat?
Stel in de browser wordt het letterformaat geschaald naar 110% > dat geeft dan 110% van die 3px = weer 3px, want kleiner dan één px kan een beeldscherm niet vertonen! Afhankelijk van hoe een browser precies afrondt, is minstens een letter-vergroting van 150% of 200% nodig om de border-breedte op 4px te krijgen.
Maar - is de hamvraag -: is het wel nodig om de border-breedte mee te schalen met het letterformaat? Nee, zou ik zeggen, die borderlijn zie je altijd wel en mag gerust op 3px blijven staan.
Daarmee kunnen we al dit gemuggel op de virtuele duizendste pixel weer vrolijk vergeten :d :
Code:
#header {border-left: 3px solid #666;}
De:
Code:
#header h1 { padding:0 0 20px 20px;}
Hier draaien de padding-waarden met de klok mee: boven, rechts, onder en links.
In elk geval voor de linkerpadding kunnen we ons afvragen: moet die wel meeschalen als de letters vergroot worden? Zo nee, dan kan de laatste 20px rustig blijven staan.
En dezelfde vraag eigenlijk voor de padding-bottom:
- is het echt wel nodig om deze iets groter te laten worden als de fontsize opgeschaald wordt door de bezoeker?
- en is dat verschil eigenlijk wel waarneembaar?
(Antwoord: twee testpagina's, met px'en resp. em's, zullen dat gauw genoeg uitwijzen!
)
Tot zover op heden!
Wordt vervolgd,
CSShunter
_______________
PS: Als lui tiepje doe ik nooit aan font-size berekening. Ik "rotzooi maar wat aan", en bekijk het resultaat in de browser. Bevalt het me niet, dan ben ik binnen 3 testjes trial-and-error wel waar ik wezen moet.
vindt je dit dus te kort door de bocht? 
