Eén regel, één wet en maar één manier


Ik heb eens ooit de shorthand methode aangeprezen en uitgelegd, maar ik heb er nooit bij stilgestaan dat er bijvoorbeeld bij de font shorthand methode één regel is die je moet volgen.

Voorbeeld

Ik heb een testpagina gemaakt welke duidelijk aantoont wat het verschil kan zijn als je de bewuste regel niet naleeft.

fout, wat je in firefox zietIndien je met FireFox surft zal je bovenaan rechts dit zien bij het bekijken van de pagina, - screenshots toegevoegd voor diegene die niet met FireFox surfen en ook geen webdeveloper extentie hebben - en indien je op de rode uitroepteken klikt krijg je volgend foutmeldings-venster te zien. Klik op de afbeelding om de FireFox error venster te zien.

De regel

Als je de shorthand methode toepast voor de font eigenschap moeten de laatste 2 bepalingen de font-size en font-family zijn en wel in de zojuist beschreven volgorde. Anders zal de gehele regel niet toegepast worden door de browser zoals te zien is in de voorbeeld pagina.

Alle andere bepalingen zoals font-style, font-variant, font-weight en line-height mogen in willekeurige volgorde geschreven, of gewoon niet bepaald worden daar de browser de niet aanwezige bepalingen automatisch in normale standaard waarden zet.

Duidelijke voorbeelden

p#correct {font : normal normal normal 1.4em/1.4 Verdana, Arial, sans-serif;}

p#nietcorrect {font : normal normal 1.4em/1.4;}
font-family vergeten te bepalen

p#nietcorrect {font : normal/1.4 Verdana, sans-serif;}
font-size vergeten te bepalen

Misschien onnodig te vertellen dat je CSS niet meer valid is bij het fout schrijven van de shorthand methode?

Je bent het probleem waarschijnlijk nog nooit tegengekomen, maar nu zal je niet vreemd opkijken als je plots rare dingen ziet gebeuren met je tekst omwille van het per ongeluk iets vergeten te zijn bij je font shorthand.