K čemu jsou v CSS potřeba vendor prefixy

23. 9. 2008 11:02 (aktualizováno) | Martin Hassman

Made with CSSV diskusi pod článkem o zavedení vendor prefixů do IE8 se ukázalo, že všem není jasné, proč kaskádové styly něco takového obsahují. Pokusím se to vysvětlit.

Napřed upozornění pro všechny kodéry a webdesignery. Vendor prefixy (-moz, -webkit, -o a -ms) až na opravdu speciální případy nejsou určeny pro vás. Můžete se úplně spokojit s tím, že je k životu nepotřebujete, nadále je ignorovat a přestat číst právě teď. Neuděláte žádnou chybu a ušetříte deset minut. Opravdu! Už jste přestali číst?

Trochu nám to tu prořídlo, tak teď pro ty co zůstali. Vendor prefixy plní dva nezávislé účely:

  • implementace rozšíření jednotlivých výrobců
  • implementace nestabilních specifikací

Implementace rozšíření jednotlivých výrobců

Je to tak. Prohlížeče čas od času implementují vlastnosti, které nejsou součástí specifikací W3C. A někdy k tomu mají dobré důvody.

Kupříkladu v Gecku (jádro Firefoxu) se kaskádové styly odjakživa používají nejen pro stylování webu, ale i jazyka XUL. Gecko proto obsahuje některá vlastní rozšíření, např. -moz-binding, bez kterých by Firefox vůbec nefungoval. Pro XUL vývojáře kritická vlastnost, pro běžného designera naprostá zbytečnost.

Logo WebKitu v krabiciPodobně na tom jsou vývojáři WebKitu, který se už dávno nepoužívá jen pro webové stránky, ale i pro widgety na Mac OS X a byl ostatně určen i pro aplikace na iPhone. Snad proto loni přidali vývojáři do WebKitu vlastnosti pro tvorbu hejbátek a animací -webkit-transform, -webkit-transition. Opět, minoritu vývojářů to potěší, běžným webdesignerům je na nic.

Dalším příkladem je svět mobilního webu a mobilních prohlížečů. Jedním takovým jejich specifikovaným rozšířením je -wap-input-format, kterým lze nastavit očekávaný formát vstupu formulářových prvků (používá ho např. mobilní verze Srealit). Pro uživatele mobilního webu prima věc, klávesnice telefonů je neohrabaná, jakékoliv usnadnění vítám. Zmíněný styl dokáže telefonu např. říct, které políčko vyžaduje pouze číslice a prohlížeč podle toho rovnou přepne na číselnou klávesnici. Nevěřili byste, jak taková maličkost potěší. Onu menšinu, která optimalizuje weby pro mobilní prohlížeče takové rozšíření potěší, všem ostatním je na nic.

Všimli jste si společného prvku? V kaskádových stylech se prostě objevují minoritní skupinky (XUL vývojáři, mobilní vývojáři i uživatelé iPhone prostě jsou minoritní skupinky 8-) se specifickými potřebami, které jsou pro onen velký běžný web venku zbytečné.

Pro tyhle minoritní skupinky bylo, je a bude čas od času potřeba kaskádové styly trochu „nafouknout“. Nemůžou čekat, že W3C jejich požadavky standardizuje (jednak by to mohlo trval 5 let a druhak se něco takového na celý web třeba vůbec nehodí). Je dobře, že všichni mají ve velkém světě kaskádových stylů svůj soukromý koutek označený svým vlastním štítkem (vendor prefixem). V takovém koutku si mohou dělat, co se jim zlíbí, aniž by zaplevelili celý jmenný prostor kaskádových stylů.

Vše špatné k něčemu dobré

Zmíněná rozšíření nemusí zůstat rozšířeními na věky, může se z nich časem stát standard. Opravdu! Takové rozšíření WebKitu o animace se pracovní skupině pro CSS natolik zalíbilo, že se v seznamu připravovaných modulů CSS3 objevily hned tři nové CSS Transformations, CSS Transitions a CSS Animation.

Podobně v případě Gecka W3C připravuje specifikaci XBL 2.0 (pro webdesignery zatím nezajímavá), která recykluje jeho -moz-binding vlastnost. Další příklad standardizace.

Existují samozřejmě i případy, které na webu nechceme. Třeba zrovna takový -wap-input-format. Informaci o formátu textového pole lze vložit téměř kamkoliv, ať již přímo do značkovacího jazyka nebo do JavaScriptu, ovšem vkládat ji do kaskádových stylů, které popisují PREZENTACI dokumentu, určitě není dobry nápad. Mobilní svět tak učinil. Dobře mu tak. Možná tím chtěl rychle vyřešit svůj problém. Budiž, ale na Web ať nám něco takového netahají!

A teď si představte, že by vendor prefixy nebyly. Všichni ti, které jsem tu popsal a pomluvil, by své vlastnosti (a je jich mnohem víc) cpali do kaskádových stylů a dělali tam nepořádek. Můžete nesouhlasit s tím, aby si všichni kaskádové styly rozšiřovali, ale nejspíš budete souhlasit, že je lepší, pokud se tak bude dít jen v jejich vyhrazeném prostoru, pomocí vendor prefixů.

Implementace nestabilních specifikací

Logo Internet Exploreru 8 betaDruhý druhý důvod existence vendor prefixů je spjatý s noční můrou všech webdesignerů. S odlišným boxmodel v IE. On nám to ten Internet Explorer ani neudělal schválně. On to implementovat správně. Specifikace všechny ty šířky, výšky, okraje tak původně měla. Jenže čert tomu chtěl, když už to implementoval, specifikace se změnila do podoby, kterou známe dnes. Ovšem džin už byl z láhve vypuštěn. Box model nešlo jednoduše změnit, jelikož řada webů jej začala podle IE používat. Opravená verze by rozbila web. Internet Exploreru trvalo roky, než problém vyřešil (tuhle pomalost už mu trochu vyčítat můžem). Kolik webdesignerů se jen kvůli tomu z žalu opilo.

Stejný problém by se mohl kdykoliv opakovat. A postiženým by tentokrát nemusel být Internet Explorer, ale jiný prohlížeč. Když se nedávno objevil první návrh specifikace proměnných v kaskádových stylech, WebKit jej hned implementoval. Ovšem nepoužil specifikovanou syntaxi var(name), nýbrž -webkit-var(name).

Proč? Specifikace se může ještě změnit (a nic bych nedal za to, že se ještě změní), a WebKit by si tak vytáhl černého Petra. Jelikož použil vendor prefix,  když se specifikace změní, nic se neděje. Pokud by totiž -webkit-var(name) náhodou začal někdo používat (a to by raději neměl, viz pravidlo že webdesigner vendor prefixy nepotřebuje), WebKit může -webkit-var(name) ponechat ve stávajícím stavu, var(name) implementuje správně a všichni budou spokojení.

Proč s implementací nepočkat?

Proč výrobci někdy implementují tak brzo? Někdy proto, že vývojáři implementaci už už chtějí (Přiznejte kdo všechno z vás by už chtěl mít CSS3? A to jeho většina je ještě v onom rozepsaném měnícím se stavu!) a pak proto, že chtějí vývoj specifikace ovlivnit nebo urychlit. A v neposlední řadě proto, že bez existence dvou nezávislých implementací nemůže být specifikace u W3C označena za Recommendation. Rané implementace měnících se specifikací tu budou dnes a denně.

IE tým se rozhodl, že striktně všechny vlastnosti kaskádových stylů, které dosud nedosáhly stádia Recommendation, budou implementovat s vendor prefixem. Předchází problémům a mě se to líbí. Důležité samozřejmě bude, aby i včas onen prefix odstranili. Pokud by totiž byly za ostatními prohlížeči pozadu a nechali by ho, mohlo by některé webdesignery napadnou začít -ms- vlastnosti běžně používat. A byli bychom znova na začátku.

Závěr jako z reklamy:  V ideálním světě bychom mohli vendor prefixy vypustit. To ale my nemůžeme.

Související články na blogu Martin Hassman: nejen o prohlížečích

  • 10. 9. 2008 21:20

    Marek Soldát (neregistrovaný)

    > Kolik webdesignerů se jen kvůli tomu z žalu opilo.
    :-D Pár takových znám a osobně už jsem kvůli tomu pomalu bral prášky na uklidnění.

    Tenhle článek je určitě přínosný, nicméně poodhaluje jednu věc, kterou si protiřečí s prvním odstavcem. Třeba takový -wap-input-format (a podobných je víc) je vlastnost, která zvýší použitelnost celé webové aplikace (a kdo surfoval někdy po internetu přes mobil mi potvrdí, že konkrétně tohle ušetří hodně práce).

    Já jsem však zásadním odpůrcem vytváření různých (prakticky téměř galvanicky oddělených) aplikací pro různá zařízení. Navíc v době, kdy se rozdíl mezi PC a mobilem pomalu smazává... Nechápu, proč třeba uvedenou vlastnost -wap-input-format nestandardizovali do normálního CSS pro všechny prohlížeče (možná že ano, CSS3 jsem ještě nečetl, stejně to ale ještě nikdo pořádně neimplementoval). Vždyť teďka se to samé řeší pro PC javascriptem.

    Obecně bych řekl, že lidé zodpovědní za vývoj webových standardů a i samotných prohlížečů uvažují moc v současnosti a minulosti a nemyslí na budoucnost. A právě vývojáři webových aplikací se snaží tento "dluh informační společnosti" kompenzovat (jedním z těchto důsledků je právě používání zmíněných vendor-prefix vlastností).

  • 10. 9. 2008 21:30

    Martin Hassman (neregistrovaný)

    No -wap-input-format hlavně do žádných kaskádových stylů nepatří (a nikdy se tam nedostane, ťukám to hned na dřevo), to určitě není prezentační vlastnost dokumentu. Pánům přes mobily se tam zrovna hodil, tak si ho tam dali, což ale vůbec neznamená, že je to dobré řešení. A protiřečení popírám.

  • 10. 9. 2008 21:34

    Tuttle (neregistrovaný)

    Diky za vyborny clanek!

  • 10. 9. 2008 21:46

    kukulich (neregistrovaný)

    Neexistuje také prefix -khtml? Mám ho ve stylech jednoho projektu a tehdy jsem ho použil kvůli Safari. Ale teď vlastně nevím, jestli bych neměl tedy používat -webkit.

    A ještě k boxmodelu. Ano, také jsem mockrát nadával, avšak nikoliv na IE, ale na specifikaci, která obsahovala podle mne horší typ boxmodelu. S "IE" boxmodelem se dají dělat mnohem větší kouzla.

  • 10. 9. 2008 22:00

    Martin Hassman (neregistrovaný)

    [4] Je jich víc, údajně třeba i -icab-. -khtml- považuji dnes již za historický relikt, ale nezkoumal jsem, kdy to vlastně ve WebKitu prohodili.

  • 10. 9. 2008 22:10

    Marek Soldát (neregistrovaný)

    OK, to protiřečení jsem asi řekl moc silně, ale menší rozpor v tom, že to nejsou vlastnosti určené webdesignérům přecijen vidím.

    Pro pohodlí uživatelů se snad shodneme na tom, že by měl vědět, co si ve formuláři může a nemůže dovolit. Máme dvě možnosti - dát to do HTML, nebo do CSS (dobře, možná se to víc hodí do HTML, to je otázka názoru) - každopádně ta možnost teoreticky třetí, přesto dnes používaná - řešit to javascriptem - mi přijde jako nejhorší (to potom můžeme vypustit úplně všechno, čím prohlížeč usnadňuje uživateli život a javascriptem řešit vše). Představte si takový INPUT TYPE="email" a vybírat adresu z adresáře... Taková jednoduchá záležitost je dneska sci-fi...

  • 10. 9. 2008 22:17

    Martin Hassman (neregistrovaný)

    [6] Spojení "až na zvláštní případy" zde má svůj přesný účel.

    Jinak pokud považujete input s type="email" za sci-fi, doporučuji navštívit některou mou příští přednášku o HTML5, kde zmíním i input s type="number" a mnohé, mnohé další 8-)

  • 10. 9. 2008 22:30

    Marek Soldát (neregistrovaný)

    Pozvánku na přednášku rád přijmu (marek.soldat@ol­s.cz), nicméně můj názor na HTML5 zůstává stejný - nepřehledný balast, který, pokud bude implementován jako dosavadní standardy (tj. napůl a zčásti všude jinak), bude narozdíl od současných standardů typu "webdesignér se byl opít" spíše standardem typu "webdesignér obdržel pozvánku k Dr. Nešporovi". Jestli mě přesvědčíte o opaku, zvu Vás na pivo ;-)

  • 11. 9. 2008 11:09

    rezna (neregistrovaný)

    [4] - ad box-model IE - nelze nez souhlasit. Prijde mi mnohem rozumnejsi. protoze cloveku to nerozhazi kompletne celej web, pohne jenom s paddingem napr.

Přidávat nové názory je zakázáno.

120na80.cz: Tady se vaří padělané léky

Tady se vaří padělané léky

Lupa.cz: Jak EET vidí ajťák aneb Drahá vražda UX

Jak EET vidí ajťák aneb Drahá vražda UX

Vitalia.cz: 10 rad šéfkuchařů pro perfektní grilování

10 rad šéfkuchařů pro perfektní grilování

Vitalia.cz: Ministerstvo: tyto příbory jsou nebezpečné

Ministerstvo: tyto příbory jsou nebezpečné

Vitalia.cz: Mlékárenský výrobek 2016: Rozpory mezi slovy a činy

Mlékárenský výrobek 2016: Rozpory mezi slovy a činy

Vitalia.cz: Před, nebo po snídani? Kdy je lepší čistit si zuby

Před, nebo po snídani? Kdy je lepší čistit si zuby

120na80.cz: 5 triků, jak zastavit krvácení po holení

5 triků, jak zastavit krvácení po holení

Vitalia.cz: 7 nemocí očí, které musíte léčit včas

7 nemocí očí, které musíte léčit včas

120na80.cz: Zjistěte, zda je vaše klíště infikované

Zjistěte, zda je vaše klíště infikované

Podnikatel.cz: Šizený guláš na pultě. Jako Lidl to nedělejte

Šizený guláš na pultě. Jako Lidl to nedělejte

Vitalia.cz: Dnešní patolog o mrtvolu téměř nezavadí

Dnešní patolog o mrtvolu téměř nezavadí

Lupa.cz: Přenos hokeje padal kvůli útoku, tvrdí O2

Přenos hokeje padal kvůli útoku, tvrdí O2

DigiZone.cz: Panasonic v Praze uvedl TV pro rok 2016

Panasonic v Praze uvedl TV pro rok 2016

Podnikatel.cz: Když už je sexy, tak ať taky funguje

Když už je sexy, tak ať taky funguje

Podnikatel.cz: Opět chtějí zvyšovat daně živnostníkům

Opět chtějí zvyšovat daně živnostníkům

Měšec.cz: Udali ho na nelegální software a přišla Policie

Udali ho na nelegální software a přišla Policie

120na80.cz: Jak si udržet zdravou vaginu

Jak si udržet zdravou vaginu

Vitalia.cz: Mražené ryby z Makra byly falšované

Mražené ryby z Makra byly falšované

120na80.cz: 10 dezinfekcí: Vede „starý dobrý“ peroxid

10 dezinfekcí: Vede „starý dobrý“ peroxid

DigiZone.cz: Šlágr TV dostala pokutu 100 000 Kč

Šlágr TV dostala pokutu 100 000 Kč