Myslete elasticky s CSS
Myslet elasticky ve webdesignu znamenß urΦovat rozm∞ry strßnek ne napevno, ale v zßvislosti na preferencφch u₧ivatele û v zßvislosti na jeho velikosti pφsma a na velikosti okna prohlφ₧eΦe. ElastickΘ strßnky nemajφ problΘm se zobrazenφm tΘm∞° v ₧ßdnΘm za°φzenφ, nekladou u₧ivateli p°ekß₧ky. Ukß₧eme si tedy, jak pomocφ CSS nastavit relativn∞ velikost pφsma a jak se zbavit pevnΘ Üφ°ky strßnky.
ProΦ myslet elasticky
V souΦasnosti si u₧ivatelΘ prohlφ₧ejφ webovΘ strßnky na r∙zn²ch za°φzenφch s r∙zn²mi preferencemi. Jmenujme nap°φklad PDA a podobnΘ vymo₧enosti s malou obrazovkou a tφm pßdem i mal²m oknem prohlφ₧eΦe, nebo klasickΘ poΦφtaΦe, jejich₧ rozliÜenφ se dnes pohybuje od 640 do 1 600 pixel∙ na Üφ°ku. V takov²ch podmφnkßch je stßle obtφ₧n∞jÜφ vystaΦit s pevnou Üφ°kou strßnky, proto₧e t∞₧ko vyhovφte jednou hodnotou souΦasn∞ malΘ obrazovce PDA a poΦφtaΦi s rozliÜenφm vφce ne₧ 1 000 pixel∙ na Üφ°ku.
Vedle tohoto vznikajφcφho problΘmu se ji₧ dlouho pot²kßme i s problΘmem druh²m û prohlφ₧eΦ Microsoft Internet Explorer pro Windows (MSIE) neumo₧≥uje u₧ivateli zm∞nit velikost pφsma, pokud je v CSS nastavena pomocφ absolutnφch jednotek, vΦetn∞ pixel∙. To by snad jeÜt∞ ani nebyla takovß tragΘdie, kdyby ale MSIE nem∞lo nainstalovßno p°es 90 % u₧ivatel∙ internetu. (T∞₧ko °φct, jestli je chovßnφ MSIE v tomto p°φpad∞ sprßvnΘ nebo chybnΘ. Mo₧nß by se nßm stejn∞ tak nelφbilo, kdyby umo₧≥oval pφsmo s absolutnφ velikostφ zv∞tÜovat.)
Nechat u₧ivatele ovlivnit velikost pφsma strßnky je urΦit∞ dobrß v∞c, kdy₧ uvß₧φme, kolik lidφ nosφ br²le nebo mß jinΘ problΘmy. Proto je t°eba nastavovat pφsmo strßnky relativn∞, s Φφm₧ jsou spojeny dalÜφ problΘmy. Nynφ se na n∞ podφvßme.
Jak nastavit relativn∞ velikost pφsma
K nastavenφ velikosti pφsma, kterß byla nastavena u₧ivatelem v prohlφ₧eΦi, staΦφ jedinΘ û nenastavovat ₧ßdnou velikost pro prvek <body>, nastavit pouze v∞tÜφ Φi menÜφ pφsmo pomocφ procent tam, kde to pot°ebujeme, nap°φklad u nadpis∙.
V²chozφ velikost pφsma v prohlφ₧eΦi (pokud ji u₧ivatel po instalaci nezm∞nφ) je ale obvykle p°φliÜ velkß a nehodφ se nßm do grafickΘho pojetφ strßnky. Proto budeme chtφt nastavit velikost, kterß je p°ibli₧n∞ osmdesßtiprocentnφ oproti v²chozφ velikosti v prohlφ₧eΦi. To se d∞lß v∞tÜinou takto...
font-size: 0.8em;
}
...nebo takto:
font-size: 80%;
}
Zde je ale kßmen ·razu! Pokud nastavφme pφsmo jednφm z t∞chto zp∙sob∙ a zkusφme ho zmenÜit nebo zv∞tÜit v prohlφ₧eΦi, zjistφme, ₧e rozdφly mezi jednotliv²mi stupni velikosti jsou p°φliÜ velkΘ (u jednotek em v∞tÜφ ne₧ u procent). Nap°φklad v MSIE u₧ p°i "malΘ" velikosti pφsma dostaneme tΘm∞° neΦitelnou velikost. Tento problΘm se ale t²kß i ostatnφch prohlφ₧eΦ∙, nap°φklad Mozilly.
╪eÜenφm je pou₧φt klφΦovß slova pro nastavenφ velikosti pφsma, v naÜem p°φpad∞ slovo small. KlφΦovß slova jsou ale Üpatn∞ interpretovßna v MSIE 5.x, proto musφme pou₧φt hack. Pro MSIE 5.x pou₧ijeme klφΦovΘ slovo x-small, kterΘ nastavuje jeÜt∞ o stupe≥ menÜφ pφsmo, proto₧e MSIE 5.x mß posunutΘ v²znamy t∞chto klφΦov²ch slov. Pro ostatnφ prohlφ₧eΦe nastavφme small pomocφ zkrßcenΘho Tantekova hacku.
font-size: x-small;
fo\nt-size: small;
}
Nynφ ji₧ jsou rozestupy mezi r∙zn²mi stupni velikosti pφsma v po°ßdku. ProΦ ale zp∙sobujφ procenta a em takovΘ problΘmy a klφΦovß slova fungujφ, to se m∙₧eme jen dohadovat. Podle mΘho nßzoru je to zap°φΦin∞no r∙zn²mi aproximacemi p°i poΦφtßnφ skuteΦnΘ velikosti pφsma, kdy u procent a em jich je urΦit∞ vφce ne₧ u klφΦov²ch slov, jejich₧ ΦφselnΘ hodnoty si m∙₧e prohlφ₧eΦ podle sv²ch pot°eb upravit.
ProblΘmy s n∞kter²mi elementy v MSIE
V MSIE se po pou₧itφ hodnoty small na <body> vykreslujφ prvky <samp>, <code> a <kbd> menÜφm pφsmem, ne₧ by m∞ly. Proto se vyplatφ p°idat do CSS jeÜt∞ pßr °ßdek:
font-size: 90%;
}
P°i devadesßtiprocentnφ velikosti vypadß neproporcißlnφ pφsmo (jφm₧ jsou tyto prvky vykresleny) uvnit° normßln∞ psanΘho textu asi nejlΘpe, jak m∙₧e a nenaruÜuje tolik jeho tok jako p°i stoprocentnφ velikosti.
TakΘ m∙₧ete u₧ivatele nechat ovlßdat pφsmo ve formulß°ov²ch prvcφch:
font-size: 100%;
}
Po tomto nastavenφ se i v nich bude pφsmo zv∞tÜovat a zmenÜovat podle p°ßnφ u₧ivatele.
Jak se osvobodit od pevnΘ Üφ°ky
Jak jsme si ji₧ °ekli, v souΦasnosti bychom p°i nßvrhu vzhledu strßnky m∞li poΦφtat jak s mal²mi, tak velk²mi obrazovkami (a tφm pßdem s r∙zn²mi velikostmi okna prohlφ₧eΦe). M∞li bychom tedy d∞lat strßnky elastickΘ, kterΘ se automaticky p°izp∙sobujφ velikosti okna (proto₧e p°φliÜ ÜirokΘ strßnky v malΘm okn∞ se Üpatn∞ pou₧φvajφ a p°φliÜ ·zkΘ strßnky ve velkΘm okn∞ Üpatn∞ vypadajφ). Samoz°ejm∞ nenφ mo₧nΘ d∞lat elastickΘ strßnky ve vÜech p°φpadech, pokud nap°φklad pot°ebujeme na strßnku nasklßdat hodn∞ grafiky nebo chce zadavatel stejn² vzhled za vÜech okolnostφ, pravd∞podobn∞ pou₧ijeme pevnou Üφ°ku. Troufßm si ale tvrdit, ₧e v∞tÜina web∙ se bez nφ m∙₧e obejφt.
A jak provΘst osvobozenφ od pevnΘ Üφ°ky prakticky? Nenastavovat Üφ°ku strßnky vlastnostφ width a mφsto nφ zaΦφt pou₧φvat vlastnosti min-width pro minimßlnφ Üφ°ku (d∙le₧itß kv∙li mal²m obrazovkßm) a max-width pro maximßlnφ Üφ°ku (d∙le₧itß kv∙li vyÜÜφm rozliÜenφm). SpoleΦn∞ nßm tyto vlastnosti umo₧≥ujφ nastavit jakΘsi rozmezφ. Podle konkrΘtnφho webu je t°eba se rozhodnout, jestli pou₧φt tyto vlastnosti pro celou strßnku a Üφ°ku jejφch Φßstφ nastavit procentußln∞, nebo takto omezovat jejφ Φßsti zvlßÜ¥ û nap°φklad hlavnφ obsah, sloupeΦky a podobn∞.
TextovΘ bloky
U textov²ch blok∙ bychom m∞li vlastnosti min-width a max-width nastavovat podle velikosti pφsma. Tu jsme ale nastavili relativn∞, zßle₧φ tedy na u₧ivatelov∞ prohlφ₧eΦi. Skv∞le nßm v tomto p°φpad∞ poslou₧φ jednotka em, kterß nßm umo₧nφ nastavit rozmezφ Üφ°ky v zßvislosti na velikosti pφsma v prvku:
min-width: 18em;
max-width: 30em;
}
Otßzka znφ, jakΘ hodnoty se pro textovΘ bloky hodφ. Obecn∞ se mφnφ, ₧e ke Φtenφ je vhodnß Üφ°ka od 40 do 65 znak∙ na °ßdek. Je tedy t°eba zjistit, kterß hodnota zajistφ pot°ebn² poΦet znak∙ na °ßdek p°i vÜech mo₧n²ch velikostech pφsma. Provedl jsem pokusy s r∙zn²mi pφsmy a doÜel jsem k nßsledujφcφm hodnotßm:
| Pφsmo | èφ°ka pro 40 znak∙ | èφ°ka pro 65 znak∙ |
|---|---|---|
| Arial | 18 em | 30 em |
| Times | 16 em | 26 em |
| Verdana | 21 em | 34 em |
| Georgia | 19 em | 31 em |
VhodnΘ hodnoty se liÜφ podle typu pφsma, co₧ je zp∙sobeno r∙zn²m pom∞rem Üφ°ky a v²Üky znak∙ u jednotliv²ch pφsem. Pokud se s tφm ale nechcete zase tolik "babrat", m∙₧ete se smφ°it s urΦit²mi nep°esnostmi a pou₧φvat jedny hodnoty pro vÜechna pφsma.
Grafickß zßhlavφ
V souvislosti s grafikou a elastick²mi strßnkami m∙₧ete pou₧φt jeden trik. ╪ekn∞me, ₧e mßte v hlaviΦce obrßzek na pozadφ p°es celou Üφ°ku strßnky û s pevnou Üφ°kou jste v CSS mohli pou₧φt nßsledujφcφ:
background: url("zahlavi.gif") no-repeat;
width: 750px;
}
S pou₧itφm elastickΘ Üφ°ky by to ale dopadlo takto:
background: url("zahlavi.gif") no-repeat;
max-width: 750px;
min-width: 250px;
}
V druhΘm p°φpad∞ m∙₧e mφt hlaviΦka r∙znou Üφ°ku. To ale obrßzku nevadφ, proto₧e se ho zobrazφ pouze takovß Φßst, aby se do hlaviΦky veÜel. Dokonce m∙₧ete nastavit maximßlnφ Üφ°ku i v∞tÜφ ne₧ 750 pixel∙ a cel² obrßzek ud∞lat v∞tÜφ û v₧dy se ho zobrazφ pouze takovß Φßst, jakß je pot°eba.
Co zvß₧it, na co si dßt pozor
Pou₧φvßnφ minimßlnφch a maximßlnφch Üφ°ek je daleko slo₧it∞jÜφ na mo₧nΘ kombinace ne₧ pevnß Üφ°ka, hlavn∞ v kombinaci s jednotkou em. P°i nßvrhu vzhledu strßnky je tedy t°eba v₧dy p°em²Ület a zkouÜet, jak bude strßnka vypadat ve velkΘm a jak v malΘm okn∞, jak ji ovlivnφ nastavenφ v∞tÜφho Φi menÜφho pφsma a podobn∞.
Zprovozn∞nφ max-width v MSIE
Prohlφ₧eΦ MSIE bohu₧el nepodporuje vlastnosti min-width ani max-width. V p°φpad∞ vlastnosti min-width to tolik nevadφ (je d∙le₧itß hlavn∞ kv∙li mal²m obrazovkßm), ale max-width je ji₧ bolestivß ztrßta, proto₧e bez nφ se m∙₧e strßnka na vysok²ch rozliÜenφch roztßhnout tak, ₧e u₧ z nφ u₧ivatel nebude moci nic p°eΦφst.
Programßto°i Microsoftu sice neimplementovali v²Üe uvedenΘ vlastnosti, ale zavedli specißlnφ CSS hodnoty expression(v²raz) (viz About Dynamic Properties), kde "v²raz" je vyhodnocen pomocφ JavaScriptu a jeho v²sledek je pou₧it jako hodnota pro danou vlastnost. Prßv∞ s pomocφ tΘto hodnoty max-width nahradφme:
max-width: 750px;
min-width: 250px;
width: 751px;
width: expression((document.getElementById("hlavicka").currentStyle.width == "751px") ? "auto" : (document.getElementById("hlavicka").offsetWidth > 750 ? "750px" : "auto"));
}
Jak vidφte, testujeme skuteΦnou Üφ°ku prvku a pokud je v∞tÜφ ne₧ 750 pixel∙, nastavφme Üφ°ku na t∞chto 750 pixel∙.
Krom∞ toho se musφme n∞jak vypo°ßdat se situacφ, kdy jsou vypnutΘ skripty, v takovΘm p°φpad∞ toti₧ expression() nefunguje. Proto jsme p°ed°adili naÜφ deklaraci jeÜt∞ jednu deklaraci, kterß nastavuje pevnou Üφ°ku 751 pixel∙. V hodnot∞ expression() pak tuto Üφ°ku zruÜφme. Tato pevnß Üφ°ka nesmφ b²t stejnß jako Üφ°ka, kterou jsme urΦili jako maximßlnφ, jinak by se v²poΦet expression() zacyklil (po prvnφm p°ekroΦenφ maximßlnφ Üφ°ky by se stßle dokola nastavovaly hodnoty "auto" a "750px").
Skrytφ deklaracφ p°ed ostatnφmi prohlφ₧eΦi
Ob∞ nastavenφ vlastnosti width ve v²Üe uvedenΘ ukßzce jsou ale urΦena jen pro MSIE, v ostatnφch prohlφ₧eΦφch by m∞la dopad, o kter² nestojφme. Proto musφme tyto dv∞ deklarace p°ed ostatnφmi prohlφ₧eΦi n∞jak skr²t. Pro tento ·Φel m∙₧eme pou₧φt podtr₧φtkov² hack û na zaΦßtek jmΘna vlastnosti se umφstφ podtr₧φtko, co₧ zajistφ, ₧e tuto vlastnost interpretuje jen MSIE:
max-width: 750px;
min-width: 250px;
_width: 751px;
_width: expression((document.getElementById("hlavicka").currentStyle.width == "751px") ? "auto" : (document.getElementById("hlavicka").offsetWidth > 750 ? "750px" : "auto"));
}
Podtr₧φtkov² hack zp∙sobφ, ₧e naÜe CSS bude nevalidnφ, proto₧e specifikace CSS o ₧ßdnΘ vlastnosti _width nemluvφ. Zßrove≥ ale tato specifikace °φkß, ₧e v nßzvu vlastnosti se smφ vyskytovat podtr₧φtko a ₧e prohlφ₧eΦe majφ ignorovat neznßmΘ vlastnosti. Proto by ostatnφ prohlφ₧eΦe m∞ly deklaraci _width ignorovat a pokraΦovat dalÜφ Φßstφ p°edpisu (jeho sprßvnΘmu parsovßnφ tato deklarace nezabra≥uje).
Pokud chcete mφt sv∙j stylov² p°edpis validnφ, m∙₧ete pou₧φt ke skrytφ obou deklaracφ druhou mo₧nost, takzvanΘ podmφn∞nΘ komentß°e. StaΦφ umφstit do hlaviΦky strßnek tento k≤d:
<link rel="stylesheet" type="text/css" href="styl-ie.css" />
<![endif]-->
Prohlφ₧eΦ MSIE naΦte v takovΘm p°φpad∞ do strßnky dalÜφ stylov² p°edpis, ve kterΘm m∙₧ete uvΘst vÜechny deklarace urΦenΘ jen pro n∞j (tedy i naÜe dv∞ deklarace Üφ°ky). Ostatnφ prohlφ₧eΦe budou tento zßpis chßpat sprßvn∞ jako (X)HTML komentß° a nic nenaΦtou. Udr₧φte si tak sv∙j stylov² p°edpis validnφ, na druhou stranu bude muset MSIE nahrßvat o jeden soubor CSS navφc, co₧ m∙₧e vykreslovßnφ strßnky zpomalit. Vyberte si sami °eÜenφ, kterΘ je vßm bli₧Üφ.
ProΦ nenahrazovat min-width
V tΘto chvφli si takΘ m∙₧eme vysv∞tlit druh² d∙vod, proΦ nenahrazovat min-width pomocφ expression(). Pokud si u₧ivatel otev°e odkaz na naÜi strßnku v MSIE do novΘho okna, je toto okno minimalizovanΘ. Velmi pravd∞podobn∞ by se v takovΘm p°φpad∞ nastavila Üφ°ka prvku (pomocφ expression()) na svoji minimßlnφ hodnotu. Jak jste si ale ji₧ mo₧nß vÜimli, jakmile je takto Üφ°ka nastavena na urΦitou hodnotu, prvek si ji ponechß za vÜech okolnostφ a ji₧ se pomocφ expression() nezm∞nφ (proto₧e hodnota document.getElementById("hlavicka").offsetWidth bude ji₧ napo°ßd stejnß). To znamenß, ₧e i po maximalizaci okna by si prvek ponechal minimßlnφ Üφ°ku, co₧ jist∞ nenφ ideßlnφ (vzhledem k tomu, ₧e otevφrßnφ nov²ch oken nenφ nic neobvyklΘho).
Nahrazenφ max-width v em
Zp∙sobem, kter² jsme si prßv∞ popsali, je tedy mo₧nΘ nahradit vlastnost max-width v p°φpad∞, ₧e ji uvßdφte v pixelech. Nynφ si ukß₧eme, jak tuto vlastnost nahradit v p°φpad∞, ₧e je nastavena pomocφ jednotky em:
min-width: 18em;
max-width: 30em;
width: 30.1em;
width: expression((document.getElementById("obsah").currentStyle.width == "30.1em") ? "auto" : (document.getElementById("obsah").offsetWidth >= (parseInt(document.documentElement.currentStyle.fontSize) <= 10 ? ((parseInt(document.documentElement.currentStyle.fontSize) - 1) * 4/3 * 30) : ((parseInt(document.documentElement.currentStyle.fontSize) - 2) * 4/3 * 30)) ? "30em" : "auto"));
}
Postup je podobn² jako v p°edchozφm p°φpad∞, i kdy₧ to tak podle dΘlky k≤du nevypadß. Jedin² rozdφl je v tom, jak se zjiÜ¥uje maximßlnφ Üφ°ka v pixelech, kterß mß pro prvek v danΘ chvφli platit (v p°edchozφm p°φpad∞ bylo na tomto mφst∞ pouze Φφslo "750"). Musel jsem takΘ pou₧φt neostrou nerovnost, proto₧e s ostrou mi MSIE z mn∞ nepochopiteln²ch d∙vod∙ padal.
Abychom zφskali maximßlnφ Üφ°ku v pixelech, musφme nejprve zjistit velikost pφsma v bodech (pt) v dokumentu (p°edpoklßdßm, ₧e v naÜem prvku je tato velikost stejnß, pokud ne, bylo by to t°eba ve skriptu zohlednit). Vynßsobenφm tΘto velikosti Φty°mi t°etinami zφskßme velikost pφsma v pixelech (Φφslo "4/3", respektive jeho aproximaci, pro tento p°epoΦet prohlφ₧eΦe opravdu pou₧φvajφ) a tuto velikost vynßsobφme t°iceti (proto₧e Üφ°ka mß b²t 30em a jedno em je rovno velikosti pφsma prvku v pixelech), Φφm₧ zφskßme maximßlnφ Üφ°ku v pixelech pro prvek.
Nynφ k tomu, jak zjistit velikost pφsma dokumentu v bodech. Nem∙₧eme k tomu pou₧φt vlastnost currentStyle, proto₧e ta obsahuje pouze p°i°azenΘ, ne p°epoΦφtanΘ hodnoty (p°i°azenß hodnota je v naÜem dokumentu small). Ud∞lal jsem tedy n∞jakΘ pokusy a zjistil jsem nßsledujφcφ:
- MSIE nabφzφ u₧ivateli p∞t zßkladnφch velikostφ pφsma - 9 pt pro "nejmenÜφ", 10 pt pro "malΘ", 12 pt pro "st°ednφ", 14 pt pro "velkΘ" a 16 pt pro "nejv∞tÜφ". Velikost vybranß u₧ivatelem je nastavena pro dokument a relativnφ velikost, kterou nastavujeme pro
<body>, se od nφ odvozuje. - Pokud nastavφme pro
<body>pφsmo small, celß stupnice se posune û 8 pt bude pro "nejmenÜφ", 9 pt pro "malΘ", 10 pt pro "st°ednφ", 12 pt pro "velkΘ" a 14 pt pro "nejv∞tÜφ".
Abychom zjistili velikost pφsma dokumentu v bodech, staΦφ nßm tedy zφskat u₧ivatelem nastavenou velikost (pomocφ document.documentElement.currentStyle.fontSize) a p°evΘst ji na hodnotu odpovφdajφcφ small.
Jednß se o vcelku slo₧it² v²poΦet, kter² vÜak dßvß p°esnΘ v²sledky. Vy mu ale rozum∞t p°φliÜ nemusφte, staΦφ vßm upravit si m∙j zßpis pro svΘ pot°eby (pravd∞podobn∞ pouze ·pravou hodnoty maximßlnφ Üφ°ky). Samoz°ejm∞ byste op∞t m∞li ob∞ deklarace skr²t p°ed ostatnφmi prohlφ₧eΦi, bu∩ podtr₧φtkov²m hackem nebo pomocφ podmφn∞n²ch komentß°∙.
