![[Passamynd]](/files/2003/05/mar.gif)
Már ÖrlygssonCSS og breytilegar leturstærðir í IE
Flestir CSS forritarar þekkja vandamálið með Internet Explorer vafrann á Windows sem veldur því að notendur geta ekki breytt leturstærðum á vefsíðum ef stærð letursins er skilgrein í "px" í CSS skjalinu. Mikið hefur verið skrifað um þetta vandamál í gegnum tíðina og mikið deilt um það hvort það sé ásættanlegt að fórna möguleikum notandans til að breyta leturstærðinni svo hönnuðurinn geti haft fulla stjórn á innbyrðis stærðarhlutföllum letursins.
Hingað til hefur CSS forriturum staðið þrjár forritunarleiðir til boða:
- Nota nöfnin
xx-large,x-large,large,medium,small,x-smallogxx-smallí hvert einasta skipti þar sem breyta þarf leturstærð í CSS skjalinu.
Kostir: IE/Win notendur geta breytt leturstærðinni.
Gallar: Minnsti munur á milli leturstærða er mjög mikill og aðrir vafrar eru ekki sammála IE um hversu stórt "medium" letur er. Til að leiðrétta þetta þarf að tvískilgreina allar leturstærðir í CSS skjalinu (og nota CSS brellur til að tryggja að ólíkir vafrar taki réttu skilgreininguna til sín). - Tvískilgreina leturstærðina á
<body>markinu (nota "em" eða "medium,small,x-small, etc. fyrir IE/Win og "px" fyrir aðra vafra) og nota svo "em" mælieininguna til að stækka og minnka letrið innan síðunnar hlutfallslega út frá upprunalegu skilgreiningunni.
Kostir: Engir.
Gallar: IE/Win notendur geta stækkað og minnkað letrið en hvert stökk upp eða niður hefur í för með sér margfalda stærðarbreytingu sem þýðir að síðan er allt að því ólæsileg nema í upphaflegu stillingunni. - Nota "px" til að stilla grunnleturstærðina og nota "em" mælieininguna til að stjórna hlutfallslegri stærð annara hluta síðunnar út frá grunnstærðinni.
Kostir: Letrið lítur vel út og útlitshönnuðurinn og kúnninn er glaður.
Gallar: IE/Win notendur geta ekki breytt leturstærðinni nema með því að fara í "Tools->Internet Options->Accessibility" valmyndina og haka við "Ignore font sizes..." valkostinn, en sú aðgerð gerbreytir útliti flestra vefsíðna.
Það var hins vegar ekki fyrr en nýlega sem menn uppgötvuðu að það var ein leið til viðbótar sem CSS forritarar gátu farið - leið sem leyfir IE/Win notendum að breyta leturstærðinni en hefur ekki í för með sér neina alvarlega ókosti.
Trikkið felst í því að tvískilgreina grunnleturstærðina (á <body> markið). Annars vegar með "px" fyrir alla eðlilega vafra en með "%" fyrir IE/Win. (Sjálfgefna, innbyggða leturstærðin í IE/Win er "16px" og því má framkalla "12px" stórt letur með því að nota "75%" í IE/Win.) Allar aðrar leturstærðir innan síðunnar eru síðan skilgreindar sem "em" hlutfall af grunnstærðinni. Þessi forritunarleið - og engin önnur - lætur IE/Win hegða sér skikkanlega þegar notandinn reynir að stækka eða minnka letrið á síðunni.
Kóðadæmi:
body {
font-size : 11px;
_font-size : 68,75%; /* 11px / 16px = 0,6875 */
}
h1 { font-size : 2em; } /* 2 x 11px = 22px */
h2 { font-size : 1.64em; } /* 1,64 x 11px ~ 18px */
...
Það þarf vart að taka fram að ég er alveg ógeðslega kátur með að hafa rekist á þessa aðferð...
Þeir sem ekki vita hvað undirstrikunin (_) fremst í þriðju línu gerir, bendi ég á að lesa Tackling the IE Factor.
Svör frá lesendum (3)
Sindri svarar:
Veist þú hvort er hægt að fara kringum vandamálið með að merkja texta inní sumum div tögum í IE. Í IE vafranum mínum er ekki hægt að merkja textabúta í greinunum þínum heldur bara greinina í heild. Í fljótu bragði sýnist mér þetta vera bundið við div tög með position:absolute; stíl.
30. janúar 2004 kl. 13:11 GMT | #
Már Örlygsson svarar:
Já ég hef orðið var við þetta í sumum verkefnum sem ég hef unnið, en mér hefur enn ekki tekist að greina nákvæmlega hvað veldur þessu. Skítavafri þessi IE.
30. janúar 2004 kl. 13:25 GMT | #
Már Örlygsson: "All my ..."
7. júlí 2004 kl. 09:50 GMT | #