Omezenφ CSS styl∙

zp∙sobenß zejmΘna dne╣nφmi prohlφ╛eΦi

AΦkoli pou╛φvßnφ kaskßdov²ch styl∙ siln∞ prosazuji, nelze zamlΦet, ╛e styly majφ svΘ mouchy. Tyto mouchy nejsou malΘ -- mφsty dosahujφ velikosti vß╛ek, ba i pterodaktyl∙.

R∙znΘ prohlφ╛eΦe - Co nefunguje skoro nikde - Netscape 4 - Explorer 4 a 5 - Explorer 3 - Omezenφ element∙ - Nefungujφcφ d∞diΦnost - ProblΘmy externφho CSS

R∙znΘ prohlφ╛eΦe

Ka╛d² prohlφ╛eΦ interpretuje CSS jinak. V╣echny se shodnou pouze v tak zßkladnφch v∞cech jako je barva pφsma a pozadφ, velikost pφsma nebo pou╛it² font. Mnoha autor∙m to staΦφ, mnoha autor∙m to nestaΦφ. Pokud se budeme pokou╣et t°eba o okraje, obtΘkßnφ nebo o pozicovßnφ, zobrazφ se to v╣ude jinak.

Klasicky nastßvß ten p°φpad, kdy autor odladφ strßnky pro Explorer 5, pak si to n∞kde zobrazφ v Netscapu a jde do kolen.

V dne╣nφ dob∞ (listopad 2000) podporujφ CSS pouze tyto mn∞ znßmΘ prohlφ╛eΦe: Internet Explorer 3, 4 a 5, Netscape 4 a 5 (Mozilla), Opera 3. Pokusφm se vypsat n∞kterΘ svΘ poznatky o jejich podpo°e CSS u konkrΘtnφch element∙. Zd∙raz≥uji, ╛e se jednß pouze o moje poznatky, proto╛e zdroje na toto tΘma jsem nikde nena╣el, a ╛e jsem hledal! TakΘ jsem objevil nestandardnφ mo╛nost, jak pomocφ rovnφtek a uvozovek pro r∙znΘ prohlφ╛eΦe aplikovat r∙znΘ styly.

Co nefunguje skoro nikde

Ve specifikaci CSS1 se objevujφ pseudoelementy :first-line a :first-letter, kterΘ by m∞ly um∞t zformßtovat pouze prvnφ °ßdku nebo prvnφ pφsmeno danΘho elementu. Nap°. p:first-letter {color: blue} by m∞lo obarvit na modro prvnφ pφsmenko odstavce. Zatφm jsem podporu tΘto srandy vid∞l pouze ve v²vojovΘ verzi Mozilly 5 a Internet Exploreru 5.5.

Mimochodem Mozilla 5 podporuje CSS perfektn∞ a skoro nenφ nutno v nφ nic testovat. Zvlßdß dokonce CSS 2.

Netscape 4

Opravdovou zhoubou pro webovΘ designΘry pracujφcφ s CSS je Netscape 4. Jeho podpora je natolik ╣patnß, ╛e tento prohlφ╛eΦ mnoho autor∙ ignoruje. Na Linuxu je to ale jedin² v╣eobecn∞ roz╣φ°en² prohlφ╛eΦ.

Co NN 4 neumφ:

• stylovat tabulky (leda pozadφ bun∞k) a prvky formulß°∙
• potlaΦit margo u nadpis∙ (margin-top a margin-bottom)
• blokovΘ elementy chßpe pouze tak ╣irokΘ, jak je ╣irok² jejich obsah (t°eba u jedno°ßdkov²ch odstavc∙; pak pom∙╛e leda p°idßnφ border: n∞co)
• p°i stylovßnφ odkaz∙ n∞kdy zp∙sobuje jejich nefunkΦnost 
• zcela ignoruje vlastnosti border-strana, o slo╛it∞j╣φch border-* si takΘ ned∞lßm iluze
• neumφ list-style-image a list-style-position
• neznß vlastnosti clip a overflow
• neznß-li vlastnost, ignoruje celou deklaraci
• dal╣φ drobnΘ impotence lze vyΦφst v pravΘm sloupeΦku p°ehledu vlastnostφ a hodnot CSS

Internet Explorer 4 a 5

Podpora CSS v Microsoftφch prohlφ╛eΦφch je obecn∞ °eΦeno dobrß, pouze Φty°ka trochu vßhß u blokov²ch element∙.

OkrajovΘ nefunkΦnosti:

• neumo╛≥uje stylov∞ stφnovat Φßry a okraje bun∞k v tabulkßch
• neumφ word-spacing
• neumφ text-decoration: blink
• ╣patn∞ vykresluje verzßlky kapitßlek u font-variant: small-caps
• neumφ u border: dotted, double a dashed
• neumφ nastavit ╣φ°ku elementu body

Internet Explorer 3

Prohlφ╛eΦ z roku 1996 se u╛ dnes vyskytuje mßlo, ale znamenß pro pou╛itφ CSS doslova katastrofu. On toti╛ styly trochu podporuje, ale opravdu jenom trochu. Vlastn∞ skoro v∙bec a hlavn∞ ╣patn∞, Φili d∞lß zr∙dnΘ chyby. Bylo by lep╣φ, kdyby styly ignoroval. Nap°φklad moje strßnky v IE 3 skoro nejsou ΦitelnΘ.

IE 3 obzvlß╣t∞ chybuje v dΘlkov²ch jednotkßch (plete si je), v deklaraci barev a v nastavovßnφ okraj∙ objekt∙ (margin). Margin toti╛ sΦφtß, mφsto aby akceptoval naposledy nastavenou hodnotu. A nechßpe moc t°φdy a identifikßtory. Atd.

Omezenφ element∙

Mß smysl zab²vat se jedin²m podstatn²m omezenφm: kterou vlastnost lze aplikovat na kter² element (element = tag). «e nap°φklad nelze odkaz zarovnat doprava, je v╣eobecn∞ z°ejmΘ, proto╛e by vypadl z textu. Prozkoumal jsem podrobn∞ podporu vlastnosti float (obtΘkßnφ) s hodnotou right.

Podpora vlastnosti float

Jak vidno, je to p∞kn² zmatek. Z tabulky nap°φklad vypl²vß, ╛e vlastnost float lze bezpeΦn∞ pou╛φt pouze u element∙ div, span a img!

Takovouto tabulku by bylo mo╛nΘ vypracovat pro dal╣φ vlastnosti. Je to ale Φasov∞ nßroΦnΘ, tak╛e to berte jen jako ilustraci. ObecnΘ pouΦenφ znφ: v╣echno se musφ vyzkou╣et v n∞kolika prohlφ╛eΦφch.

Nefungujφcφ d∞diΦnost

╚asto se pro celou strßnku nastavuje spoleΦn² font, barva pφsma a jinΘ detaily. Dejme tomu ╛e chci nastavit pro celou strßnku pφsmo Arial CE. Sprßvn∞ by m∞lo staΦit napsat

body {font-family: Arial CE},

proto╛e typ pφsma se mß d∞dit na vno°enΘ elementy. Ale chyba lßvky: takto to prost∞ n∞kdy nefunguje. Je nutno vypsat to n∞jak podrobn∞ji:

body, p, li, td, th {font-family: Arial CE}.

Nebo dejme tomu, ╛e chci ud∞lat obrßzkovΘ odrß╛ky u seznam∙. Normßln∞ se to d∞lß
ul li { list-style-image: URL('images/listecek.gif')} a funguje to. Pokud ale budu mφt seznam v tabulce, tak tam se to nezobrazφ. Je nutno dopsat
ul li, td ul li { list-style-image: URL('images/listecek.gif')}, co╛ se t²kß i polo╛ek (li) seznam∙ (ul) uvnit° bud∞k tabulky (td). (V²klad toho vrstvenφ je v textu o slo╛it∞j╣φch deklaracφch CSS.)

ProblΘmy externφho CSS

NepraktiΦt∞j╣φ pou╛itφ CSS spoΦφvß ve vytvo°enφ souboru *.css, ve kterΘm je zapsßn stylopis namφsto toho, aby byl v hlaviΦce strßnky. Popisuji to jinde. Nynφ mi jde o drobnΘ problΘmy, kterΘ s tφm nastßvajφ.

• Pokud mßte stylopis v jinΘm adresß°i ne╛ html strßnku a odkazujete ze stylopisu n∞jak² obrßzek pozadφ relativnφ adresou, nenφ ·pln∞ z°ejmΘ, jak se mß ta relativnφ adresa vyhodnocovat. Sprßvn∞ by se m∞la odvozovat od umφst∞nφ css souboru, n∞kterΘ prohlφ╛eΦe (minimßln∞ NN4) ho odvozujφ od umφst∞nφ strßnky. ╪e╣enφ spoΦφvß bu∩ v tom, ╛e se dß stylopis do stejnΘho adresß°e (to n∞kdy nejde) nebo se obrßzek zkopφruje do v╣ech mysliteln²ch adresß°∙.
• Pokud nßhodou mßte ve strßnce link na neexistujφcφ css soubor, Netscape 4 to zmate natolik, ╛e nenφ strßnku schopen v∙bec zobrazit. Chce to Φasto kontrolovat linky, aby to v∙bec nenastalo.
• Explorery d∞lajφ jin² problΘm: pokud externφ css soubor zm∞nφm, n∞kdy odmφtajφ naΦφst aktußlnφ verzi a starΘ styly si dr╛φ v cache pam∞ti.

Vizte tΘ╛: p°ehled vlastnostφ CSS, r∙zn² styl v r∙zn²ch prohlφ╛eΦφch, ·vod do CSS, r∙znΘ prohlφ╛eΦe

O tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek. Zßklady HTML CSS FrontPage Hledßnφ