Interval.cz

CSS2 - podpora kaskßdov²ch styl∙ v prohlφ₧eΦφch Opera a Firefox

Op∞t se vracφme k norm∞ CSS2, kterß znaΦn²m zp∙sobem rozÜi°uje mo₧nosti p∙vodnφch kaskßdov²ch styl∙. Tento Φlßnek dopl≥uje p°ehlednΘ informace o podporu CSS2 v  nov²ch °adßch Opery a v prohlφ₧eΦi Firefox.

Je a₧ p°φznaΦnΘ, jak radikßln∞ se m∞nily po₧adavky na modernφ prohlφ₧eΦ v pr∙b∞hu rozvoje internetu. Zatφmco d°φve byla tato aplikace posuzovßna p°edevÜφm z hlediska podpory vlastnφch proprietßrnφch technologiφ a rozÜφ°enφ, v poslednφch letech je jasn∞ patrn² trend p°iklßdßnφ d∙razu na bezpeΦnost a podporu standard∙. A prßv∞ v tomto Φlßnku si shrneme situaci na poli podpory jednΘ z nejd∙le₧it∞jÜφch norem, druhΘ verze kaskßdov²ch styl∙, a doplnφme tak informace uvedenΘ v jednotliv²ch dφlech serißlu. Testovan²mi prohlφ₧eΦi jsou Opera 7.54, t°etφ betaverze velmi ambici≤znφ Opery 8 a Firefox 1.0.1.

Selektory

Zßkladem kaskßdov²ch styl∙ je bezesporu mechanismus selektor∙ umo₧≥ujφcφ jednoznaΦn∞ definovat elementy, na kterΘ se bude aplikovat p°φsluÜn² styl. O nov²ch selektorech normy CSS2 se doΦtete ve Φlßnku CSS2 - selektory, pseudot°φdy a pseudoelementy. VÜechny t°i prohlφ₧eΦe je zvlßdajφ bez problΘm∙:

Selektory se dßle dajφ rozÜi°ovat o pseudo-t°φdy a pseudo-elementy. Jejich podporu prezentuje nßsledujφcφ tabulka:

I zde se testovanΘ prohlφ₧eΦe vyznamenaly. Jedin²m detailem je rozdφlnΘ p°edßvßnφ zam∞°enφ (focus) v Ope°e a Firefoxu. Firefox podporuje p°edßvßnφ zam∞°enφ (v OS Windows standardn∞ pomocφ klßvesy Tab) nad vÜemi aktivnφmi Φßstmi strßnky (odkazy a formulß°ovΘ prvky), zatφmco Opera p°edßvß focus pouze mezi prvky formulß°e. Proto u nφ nem∙₧ete poΦφtat se zv²razn∞nφm odkaz∙ pomocφ p°edßnφ zam∞°enφ.

VÜechny zmi≥ovanΘ prohlφ₧eΦe sprßvn∞ interpretujφ dynamickΘ pseudo-t°φdy :hover a :active a umo₧≥ujφ je aplikovat na libovolnΘ elementy, ne pouze na odkazy, jako je tomu u MSIE.

@pravidla

ZavinßΦovß pravidla rozÜi°ujφ kaskßdovΘ styly o dalÜφ funkce. Umo₧≥ujφ import styl∙, jejich cφlenφ na urΦitß mΘdia, nastavenφ tisknutelnΘ oblasti a definici vlastnφch font∙. Vφce se o nich doΦtete ve Φlßnku CSS2 - at rules aneb pravidla zavinßΦe. Jejich podporu znßzor≥uje tato tabulka:

Importovßnφ i cφlenφ styl∙ zvlßdajφ vÜechny prohlφ₧eΦe bez problΘm∙, ani v jednom naopak nenφ podporovßna dynamickß definice font∙ pomocφ pravidla @font-face.

Nastavenφ tisknutelnΘ oblasti a °φzenφ toku textu

Pomocφ vlastnostφ uveden²ch uvnit° pravidla @page lze ovlivnit nastavenφ tisknutelnΘ oblasti. Prohlφ₧eΦe umo₧≥ujφ tato nastavenφ:

Operu provßzφ u₧ od ÜestΘ verze problΘmy s interpretacφ strßnkov²ch pseudot°φd. Testovanß sedmiΦkovß verze dokßzala sprßvn∞ interpretovat pseudot°φdy :left a :right a naopak ignorovala :first. Pokud byla uvedena t°φda pro levou i pravou stranu, doÜlo ke zvlßÜtnφmu bugu, kdy pozd∞ji uvedenß pseudot°φda byla ·pln∞ ignorovßna (neÜlo tedy zßrove≥ nastavit levou i pravou strßnku).

Beta Opery 8 se pouΦila z p°edchozφch chyb a umo₧≥uje tΘm∞° veÜkerß nastavenφ pomocφ pravidla @page a jejich p°φpadnΘ kombinace. Nezvlßdß, stejn∞ jako jejφ p°ech∙dkyn∞, pojmenovanΘ strßnky.

Firefox 1.0.1 zde ·pln∞ vyho°el, zdß se, ₧e pravidlo @page v∙bec nepodporuje.

Generovan² obsah

Druhß verze kaskßdov²ch styl∙ nßm umo₧≥uje vklßdat do v²slednΘho dokumentu dalÜφ obsah, nap°φklad text, obsah atribut∙ nebo Φφslovßnφ, na zaΦßtek, respektive konec elementu pomocφ ji₧ zmφn∞n²ch pseudo-element∙ :before a :after. TakΘ lze elementu nastavit sprßvnΘ uvozovky, kterΘ se pak okolo n∞j budou automaticky dopl≥ovat. O generovanΘm obsahu pojednßvß Φlßnek CSS2 - automaticky generovan² obsah. Podporu v prohlφ₧eΦφch zjistφte z nßsledujφcφ tabulky:

V p°φpad∞ generovanΘho Φφslovßnφ nemßm k ob∞ma Operßm ₧ßdnΘ nßmitky. Bez problΘm∙ zvlßdajφ vklßdßnφ jakΘhokoli obsahu p°ed a za element a problΘmy jim ned∞lajφ ani uvozovky nebo Φφslovßnφ element∙. Naopak Firefox nezvlßdß r∙znΘ ·rovn∞ uvozovek a vklßdßnφ Φφslovßnφ.

Vizußlnφ model

Spoustu mo₧nostφ p°ineslo CSS2 do vizußlnφho modelu. P°edevÜφm p°ibyly novΘ hodnoty pro st∞₧ejnφ vlastnost display. O t∞chto zm∞nßch se doΦtete ve Φlßnku CSS2 - vizußlnφ formßtovacφ model. Nynφ ji₧ k podpo°e t∞chto hodnot ve sledovan²ch prohlφ₧eΦφch:

DalÜφ novinkou je nastavenφ minimßlnφ, respektive maximßlnφ velikosti elementu:

A koneΦn∞ takΘ norma CSS2 definovala novΘ vlastnosti pou₧itelnΘ pro dynamickΘ efekty vyvolanΘ n∞kter²m skriptovacφm jazykem:

V tΘto Φßsti pom∞rn∞ zklamal Firefox, kter² nezvlßdß ani jednu z nov²ch hodnot vlastnosti display. Naopak ob∞ Opery zvlßdajφ a₧ na jedinou v²jimku vÜechna nastavenφ vizußlnφho modelu CSS2.

CSS2 a tabulky

Velk² pokrok v CSS2 takΘ zaznamenala podpora tabulek. V p°edchozφ Φßsti jsme si ukßzali, jak prohlφ₧eΦe podporujφ hodnotu inline-table vlastnosti display, tedy vlo₧enφ tabulky jako °ßdkov² element. Zde je v²Φet dalÜφch vlastnostφ:

P°esto₧e podpora CSS2 v tΘto oblasti nenφ tak velkß jako v jin²ch oblastech, lze s klidn²m sv∞domφm °φci, ₧e vÜechny d∙le₧itΘ mo₧nosti druhΘ verze kaskßdov²ch styl∙ jsou implementovßny. VÜemi testovan²mi prohlφ₧eΦi je ignorovßno pouze zarovnßnφ na znak a specißlnφ hodnota collapse vlastnosti visibility, urΦenß pro dynamickΘ skr²vßnφ °ßdk∙. Opery majφ problΘm s umis¥ovßnφm popisu tabulky pomocφ vlastnosti caption-side, zvlßdajφ pouze umφst∞nφ nad a pod tabulkou, ostatnφ vlastnosti pova₧ujφ za umφst∞nφ nad tabulkou. Poslednφ poznßmka se t²kß implicitnφ hodnoty vlastnosti empty-cells, u Opery to je hide, zatφmco u Firefoxu show.

Polohovßnφ

Poslednφ skupina vlastnostφ umo₧≥uje umφs¥ovat elementy mimo normßlnφ tok dokumentu. Takto se dajφ vytvß°et takzvanΘ CSS layouty. O polohovßnφ se doΦtete vφce ve Φlßnku CSS2 - pozicovßnφ element∙. Nßsleduje poslednφ tabulka tohoto Φlßnku reprezentujφcφ podporu polohovacφch vlastnostφ:

Ve vÜech testovan²ch prohlφ₧eΦφch se tedy nebojte zobrazovat jakΘkoli strßnky s CSS layoutem, m∞ly by je zvlßdnout bez problΘm∙.

Formßtovßnφ XML

VÜechny t°i prohlφ₧eΦe dßle umo₧≥ujφ zobrazovat obecnΘ XML soubory. Pokud jim nep°i°adφte ₧ßdn² styl, budou v Ope°e vÜechny elementy vypsßny za sebou jako °ßdkovΘ elementy, p°esn∞ podle normy. Firefox naopak nabφdne obsah souboru podobn∞ jako MSIE ve form∞ stromovΘho v²pisu, a poznßmku, ₧e k souboru nebyl p°i°azen ₧ßdn² popis stylu. V opaΦnΘm p°φpad∞ bude dokument sprßvn∞ naformßtovßn podle danΘho stylu.

Nastavenφ posuvnφk∙

Microsoft Internet Explorer p°iÜel s mo₧nostφ nastavit pomocφ svΘho rozÜφ°enφ CSS barvu posuvnφk∙ (scrollbar∙). Opera tuto mo₧nost podporuje takΘ. Ale proto₧e jde o nestandardnφ rozÜφ°enφ, musφte to nejd°φve povolit. Provedete to p°es | Tools | Preferences | Page style | zaÜkrtnutφm mo₧nosti Enable styling of scrollbars. V osmΘ verzi Opery odpovφdajφcφ nabφdku najdete v | Tools | Preferences | Advanced |C ontent |. Firefox toto rozÜφ°enφ nepodporuje.

Souhrn

Pokud bychom hledali absolutnφho vφt∞ze tohoto testu prohlφ₧eΦ∙, stala by se jφm osmß verze Opery, kterß stavφ na v²born²ch v²sledcφch svΘ p°edchozφ verze. Firefox p°ekvapiv∞ v n∞kter²ch oblastech zaostßvß, neznßmou je pro n∞j nastavovßnφ oblasti tisku. P°esto lze i o n∞m °φci, ₧e podporuje vÜechny d∙le₧itΘ prvky CSS2 a ₧e jde o kvalitnφ prohlφ₧eΦ, zvlßÜt∞ ve srovnßnφ s Microsoft Internet Explorerem.

Vyhledßvßnφ