Interval.cz

Individualizace stylopis∙ k eliminaci chyb prohlφ₧eΦ∙ - praktickΘ postupy roku 2004

Tento Φlßnek informuje o tom, jakΘ prohlφ₧eΦe u₧ivatelΘ pou₧φvajφ na konci roku 2004, p°edklßdß praktickΘ postupy, jak oh²bat styly pro pou₧φvan² ale star² MSIE, a nasti≥uje metody hledßnφ trik∙ pro jinΘ potencißln∞ problematickΘ prohlφ₧eΦe.

KonΦφ rok 2004 - nenφ ideßln∞jÜφho Φasu k rekapitulaci procentußlnφho zastoupenφ prohlφ₧eΦ∙ na ΦeskΘm webu. Podle tiskovΘ zprßvy spoleΦnosti Internet Info pou₧ilo v listopadu 2004 k prohlφ₧enφ ΦeskΘho webu 85 % u₧ivatel∙ Microsoft Internet Explorer, vφce ne₧ 10 % u₧ivatel∙ n∞kter² z prohlφ₧eΦ∙ zalo₧en²ch na jßd°e Gecko (Mozilla, Firefox) a zhruba 2,5 % norsk² prohlφ₧eΦ Opera. Zbylφ u₧ivatelΘ vyu₧ili n∞kter² z mΘn∞ v²znamn²ch prohlφ₧eΦ∙. Skupinu "explorerist∙" jeÜt∞ zprßva rozd∞luje na MSIE 5 (6,5 %), MSIE 5.5 (5 %) a MSIE 6 (52 %). StarÜφ verze MSIE ji₧ dnes nemajφ v²znam.

D°φve, ne₧ se v∙bec zaΦneme zab²vat tvorbou a individualizacφ stylopis∙, m∞li bychom si ujasnit, ve kter²ch prohlφ₧eΦφch budeme podporovat a zajiÜ¥ovat bezvadnou grafickou podobu strßnek, u kter²ch o₧elφme vzhledovΘ vady a, koneΦn∞, kterΘ nechßme zcela bez v²chozφho vzhledu. K tomu nßm poslou₧φ rozd∞lenφ, do n∞j₧ se pokusφme vÜechny prohlφ₧eΦe za°adit:

V zßvorce uvßdφm prohlφ₧eΦe, kterΘ do konkrΘtnφch skupin pat°φ s ohledem na v²Üe zmφn∞nou tiskovou zprßvu.

Kde styly individualizovat?

V prohlφ₧eΦφch dokonal²ch se nebudeme ₧ßdnou individualizacφ zab²vat. Budeme prost∞ pou₧φvat pouze pr∙nik mno₧in funkcφ podporovan²ch jednotliv²mi prohlφ₧eΦi. Tento pr∙nik je ji₧ dostateΦn∞ rozsßhl², aby vystaΦil na graficky skv∞lΘ a bezvadnΘ weby.

Pro prohlφ₧eΦe s chybami (ano, mluvφme o MSIE) budeme mo₧nß muset n∞kterΘ fragmenty kaskßdov²ch styl∙ individualizovat. N∞kterΘ chyby v tomto zastaralΘm, ale stßle pou₧φvanΘm prohlφ₧eΦi jsou velmi nep°φjemnΘ, tak₧e mßme-li se dr₧et slo₧it∞jÜφ grafickΘ p°edlohy, bez individualizace se neobejdeme.

Skupinu minoritnφch prohlφ₧eΦ∙ je nejlΘpe ·pln∞ od styl∙ "odst°ihnout", jak °φkßme. ╚ili, sna₧φme se o to, aby se v nich u₧ivateli zobrazil nestylovan² strukturovan² dokument. Je samoz°ejmΘ, ₧e obsah webu musφ b²t i nadßle do poslednφho pφsmenka p°φstupn².

Jak individualizovat?

Individualizaci styl∙ nelze provßd∞t ₧iveln∞, v₧dy je nutno dodr₧et jistß pravidla. Nenφ takΘ nutno vym²Ület vÜe od poΦßtku, existuje mno₧stvφ dob°e zdokumentovan²ch postup∙, kterΘ lze pou₧φt p°φmo, nebo jako zßklad pro v²voj vlastnφho postupu.

Odst°i₧enφ minoritnφch prohlφ₧eΦ∙

ZaΦn∞me u "odst°i₧enφ" minoritnφch prohlφ₧eΦ∙ od stylopis∙. Jako ideßlnφ se ukazuje p°ipojit stylopis k dokumentu zp∙sobem, kter² minoritnφ prohlφ₧eΦe neznajφ. Obecn∞ rozÜφ°enΘ je p°ipojenφ at-pravidlem @import v elementu style:

Takto p°ipojen² stylopis odst°ihne "Φty°kovΘ" verze prohlφ₧eΦ∙ (myÜlen je MSIE a NN) a MSIE5 na systΘmech "Mac". N∞kte°φ auto°i pou₧φvajφ verzi s dvojit²mi uvozovkami (@import "style.css";) - ta je nev²hodnß v tom, ₧e neodst°ihne MacIE5, kter² ji₧ dnes v∞tÜinou nepodporujeme. Je t°eba podotknout, ₧e za standardnφ je pova₧ovßno p°ipojenφ stylopisu k dokumentu elementem link:

Takto p°ipojen² styl znajφ i Φty°kovΘ verze prohlφ₧eΦ∙, proΦe₧ je t°eba provΘst individualizaci p°φmo v souboru. Zde se ukazuje vhodnΘ pou₧itφ at-pravidla @media, kterΘ neznß v podstat∞ stejnß skupina prohlφ₧eΦ∙ jako pravidlo @import:

Souhrnem stojφme tedy p°ed nßsledujφcφmi mo₧nostmi:

Prvnφ °eÜenφ je pova₧ovßno za mΘn∞ vhodnΘ, p°edevÜφm pro jednu specifickou vlastnost, kterou n∞kte°φ webdesignΘ°i pova₧ujφ za nev²hodu - MSIE5+ a 6 p°i takto p°ipojenΘm stylu zaΦφnß vykreslovat dokument jeÜt∞ d°φve, ne₧ je sta₧en stylopis. U₧ivateli se tak zaΦne zobrazovat nestylovan² strukturovan² dokument a po naΦtenφ stylu se znovu celß strßnka p°ekreslφ. Pou₧ijeme-li druh² zp∙sob, MSIE zaΦne strßnku vykreslovat a₧ po naΦtenφ celΘho souboru se stylopisy.

Pozn. aut.: Podot²kßm, ₧e nap°φklad prohlφ₧eΦ Opera neΦekß na naΦtenφ stylu nikdy. Myslφm si, ₧e ani nenφ v kompetenci webdesignΘra n∞jak toto chovßnφ ovliv≥ovat - zßle₧φ na klientskΘm prohlφ₧eΦi, p°esn∞ji °eΦeno na jeho nastavenφ u₧ivatelem.

Individualizace v MSIE

Zrekapitulujme si, v jakΘ fßzi v²voje webu se nachßzφme. Mßme u₧ dokument a k n∞mu p°ipojen² soubor se stylopisy. V modernφch prohlφ₧eΦφch se vÜe zobrazuje bezvadn∞ a v minoritnφch vidφme strukturovanΘ nestylovanΘ dokumenty. V MSIE se ale pot²kßme s implementaΦnφmi chybami a pot°ebujeme zde n∞kterΘ fragmenty hlavnφho stylopisu individualizovat.

Jak ji₧ bylo naznaΦeno v p°edchozφm Φlßnku, k individualizaci v MSIE bychom m∞li pou₧φt podmφn∞nΘ komentß°e. ZaΦn∞me p°φmo ukßzkou k≤du, kterou pova₧ujme za nejsprßvn∞jÜφ °eÜenφ:

Na prvnφm °ßdku standardn∞ p°ipojujeme soubor se stylopisy pro vÜechny prohlφ₧eΦe. Na °ßdku druhΘm otevφrßme podmφn∞n² komentß° - z hlediska specifikacφ normßlnφ komentß°, jeho₧ obsah by m∞l b²t ignorovßn ka₧d²m prohlφ₧eΦem, z hlediska MSIE proprietßrnφ mechanismus, p°esn∞ specifikovan² internφ normou Microsoftu. Podmφn∞n² komentß° jsme postavili tak, aby byl interpretovßn jen v MSIE6 a ni₧Üφch, Φφm₧ eliminujeme potencißlnφ komplikace s budoucφmi verzemi. Na t°etφm °ßdku p°ipojujeme soubor se stylem style-ie.css a na ΦtvrtΘm °ßdku podmφn∞n² komentß° konΦφ. Prvnφ styl p°ipojφ vÜechny prohlφ₧eΦe, druh² navφc jen MSIE6 a ni₧Üφ.

Mo₧nß nynφ p°em²Ülφte, jak bychom postupovali, kdyby vyvstal po₧adavek na rozliÜenφ mezi jednotliv²mi verzemi MSIE. (Ponechßme-li MSIE6 v re₧imu zp∞tnΘ kompatibility, je jeho chovßnφ velmi podobnΘ MSIE5+, co₧ tento po₧adavek tΘm∞° vyluΦuje.) Pou₧ijeme op∞t podmφn∞nΘ komentß°e? Ano, v zßsad∞ je pou₧φt m∙₧eme, leΦ budeme se pot²kat s dalÜφm souborem se stylopisy a dalÜφm °ßdkem v hlaviΦce HTML dokumentu. Jeliko₧ pou₧itφ CSS trik∙ k rozliÜenφ jednotliv²ch verzφ MSIE v ji₧ individualizovanΘm stylopisu m∙₧eme pova₧ovat za bezpeΦnΘ, nenφ d∙vodu se jim zde vyh²bat.

Na prvnφ pohled vÜe vypadß v²born∞. Ale abychom byli nestrannφ, m∞li bychom hovo°it i o nev²hodßch podmφn∞n²ch komentß°∙. Ze zßsadnφch jmenujme dv∞:

AΦ majφ podmφn∞nΘ komentß°e svΘ nev²hody, je to stßle jedinΘ sprßvnΘ °eÜenφ. Nesna₧te se hledat n∞jakΘ jinΘ, "revoluΦnφ". V²Üe uvedenou praktickou ukßzku v tomto Φlßnku prost∞ do sv²ch strßnek s klidn²m sv∞domφm p°ekopφrujte. Samoz°ejm∞ z∙stßvß faktem, ₧e nejlΘpe je se jakΘkoli individualizaci vyhnout.

Hledßnφ vlastnφch trik∙

VÜe zde zmφn∞nΘ platφ na "pr∙m∞rnΘm" webu na konci roku 2004. Ale v∞ci se mohou zm∞nit, nebo statistiky na vaÜem konkrΘtnφm webu (p°φkladn∞ na webu zahraniΦnφm se specifickou cφlovou skupinou) ukazujφ jin² okruh majoritnφch prohlφ₧eΦ∙, Φi jen do majoritnφ skupiny pronikne i jin², ale hlavn∞ a bohu₧el problematick² prohlφ₧eΦ. Pak stojφme p°ed ·kolem, jak individualizovat stylopisy prßv∞ v n∞m.

V∙bec nejd°φve bychom se m∞li porozhlΘdnout po tom, zda prohlφ₧eΦ nedisponuje vestav∞n²m mechanismem umo₧≥ujφcφm individualizaci provΘst. Existuje-li takov² mechanismus, pak nenφ co °eÜit - pou₧ijeme jej a tuto kapitolu m∙₧eme p°eskoΦit. Pokud tomu tak nenφ, nezb²vß ne₧ najφt n∞jak² funkΦnφ trik. JeÜt∞ p°ed tφm si ale zopakujme t°i zßsady, kterΘ nesmφme poruÜit:

Praktickß ukßzka

Zde p°eruÜme akademickΘ °eΦi a pokraΦujme praktickou ukßzkou, jak najφt CSS trik k °eÜenφ n∞jakΘ chyby. Ne°eÜme, o jakou chybu jde, vymodelujme si rad∞ji teoretickΘ podmφnky:

Jak postupovat p°i °eÜenφ tohoto problΘmu? V souboru style.css deklarujeme #zlobivy-prvek {width:33%}. Dßle v tabulce kompatibility CSS trik∙ najdeme ty triky, kterΘ majφ ve sloupeΦku Windows-IE-5 pφsmeno N a ve sloupeΦku Windows-IE-6 pφsmeno Y. Jeliko₧ mßme na v²b∞r vφce trik∙, snφ₧φme jejich poΦet jen na ty, kterΘ vyu₧φvajφ nedostateΦnou implementaci CSS. Zφskßme dva triky: html*#test a p\roperty:value;. Nynφ je ji₧ jedno, kter² vybereme. Preferujme °ekn∞me ten druh², jeliko₧ je p°ehledn∞jÜφ. Do style-ie.css p°idßme #zlobivy-prvek {width:50%; wid\th:33%;} a jsme na konci °eÜenφ. JeÜt∞ rekapitulace, jakou deklaraci kter² prohlφ₧eΦ vidφ:

VÜimn∞te si zp∙sobu prßce, vypl²vajφcφho ze z·₧enφ okruhu trik∙ - v₧dy nejprve deklarujeme vlastnost pro star² prohlφ₧eΦ (MSIE5) a tu pak p°epφÜeme deklaracφ, kterou interpretuje jen nov∞jÜφ prohlφ₧eΦ (MSIE6). NßÜ p°φklad byl navφc zjednoduÜen tφm, ₧e jsme pracovali se stylem pouze pro MSIE. Kdyby situace takto zjednoduÜenß nebyla, museli bychom po₧adovat, aby vÜechny ostatnφ prohlφ₧eΦe trikem proÜly (museli by b²t oznaΦeny pφsmenem Y).

Odkazy a zdroje

Vyhledßvßnφ