Relative størrelser

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 smallerså 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