Relative størrelser med nøgleord kan forekomme at være et noget svagt værktøj, men benyttet med omhu er denne metode faktisk én af de bedre.
Arsenalet er ikke så stort. Det indskrænker sig til 2 nøgleord:
font-size:smaller; font-size:larger;
De engelske ord betyder jo "mindre" og "større", hvis nogen skulle være i tvivl. Så melder sig spørgsmålet: mindre eller større end hvad?
Det spørgsmål er sådan set rimeligt let at besvare: mindre eller større end skriftstørrelsen i forældre-elementet. Hvis vi gennemtænker dette, står det nok klart, hvorfor netop disse nøgleord kan være lidt besværlige at håndtere:
Eksempel 5
illustrerer dette. I dette eksempel er der ikke sat nogen overordnet
skriftstørrelse for nogen af sidens elementer, hvorimod andet og
tredie tekstafsnit er tildelt nogle relative størrelser
(larger
og smaller
), ligesom listen
(larger
).
Nu har det overordnede element (f.eks. body
) jo en
skriftstørrelse, selvom jeg ikke bestemmer, hvad den skal være.
Denne skriftstørrelse svarer i de allerfleste browsere –
om ikke alle – til 16 pixel på en 96 ppi monitor. Og det
er denne skriftstørrelse, der danner udgangspunkt for brugen
af larger
og smaller
– så
længe jeg ikke tildeler et overordnet element som
f.eks. body
en skriftstørrelse.
Dette forudsætter også at brugeren ikke har ændret på skriftstørrelsen i browserens tekststørrelsesværktøj (se artiklen Browserens kontrolmekanismer).
I eksempel 5 er der ingen overraskelser i de første 3 tekstafsnit. Derimod illustrerer den uordnede liste en vigtig pointe: font-size arves. Også i den grad.
Det, der sker i listen er, at jeg har givet den overordnede
liste en skriftstørrelse larger
. Men denne liste er
forældrelement til den indlejrede liste, der således arver
font-size:larger
– skriften i den indlejrede liste skal være
større end i den overordnede liste, der jo i forvejen er større.
Det er ikke alene et problem i forbindelse med indlejrede lister,
men måske især i forbindelse med brugen af tabeller til layout af
websider, hvad mange fortsat gør. I
eksempel 6
har jeg forsøgt at illustrere dette problem ved at sætte font-size
for table
-markøren til smaller
. I den indlejrede
tabel (dybrød ramme) er teksten så blevet smaller to gange, om man så
må sige. Og det vil blive endnu værre, hvis jeg havde endnu flere niveauer
af indlejring.
Remediet mod dette er at give indlejrede elementer deres egen class og
eksplicit sætte skriftstørrelsen for disse elementer, eller at tage højde
for det gennem konstekstuelle selektorer. For at vende tilbage til
eksempel 5 ville formreglen ul ul {font-size:100%;}
give
den indlejrede liste samme skriftstørrelse som den overordnede liste.
smaller
og larger
er udmærkede værktøjer
at have i kassen, men efter min ringe mening anvendes de bedst som et
supplement til andre metoder til at sætte skriftstørrelse, det vil
sige brugen af relative længdeværdier, som vi skal se på i næste artikel.
Denne side er senest opdateret: 26. November, 2006