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.

  • 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.

DigiZone.cz: Mobilní aplikace pro DVTV je tady

Mobilní aplikace pro DVTV je tady

DigiZone.cz: Slováci první, Češi třetí. Krásný...

Slováci první, Češi třetí. Krásný...

Vitalia.cz: 5 porcí ovoce a zeleniny: no ale jak na to?

5 porcí ovoce a zeleniny: no ale jak na to?

DigiZone.cz: Skylink přidává kanály už teď

Skylink přidává kanály už teď

Měšec.cz: Cestujte bez starostí, získejte výhodné pojištění

Cestujte bez starostí, získejte výhodné pojištění

DigiZone.cz: Krajské televize na okraji zájmu?

Krajské televize na okraji zájmu?

Lupa.cz: Jaké IoT tarify nabízejí mobilní operátoři?

Jaké IoT tarify nabízejí mobilní operátoři?

DigiZone.cz: ČT veze bronz z klání televizní grafiky

ČT veze bronz z klání televizní grafiky

Root.cz: Špína v počítačích: mrtvé myši, prach a pavouci

Špína v počítačích: mrtvé myši, prach a pavouci

DigiZone.cz: Markíza: tady je předběžné opatření

Markíza: tady je předběžné opatření

Podnikatel.cz: "Okurku" vyřeší slevové servery. Už jim věřte

"Okurku" vyřeší slevové servery. Už jim věřte

DigiZone.cz: TV Nova a její postoj k DVB-T2

TV Nova a její postoj k DVB-T2

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

DigiZone.cz: Skylink: Nova Sport volně

Skylink: Nova Sport volně

Lupa.cz: Vydavatelé jsou v háji, ale neumí si to připustit

Vydavatelé jsou v háji, ale neumí si to připustit

Lupa.cz: Text umírá, na webu zbude jen video

Text umírá, na webu zbude jen video

Vitalia.cz: Jíme přesolené potraviny. Zrovna tyhle

Jíme přesolené potraviny. Zrovna tyhle

Lupa.cz: eIDAS je tu. O co přijdeme u elektronických podpisů?

eIDAS je tu. O co přijdeme u elektronických podpisů?

DigiZone.cz: ČTÚ květen: rušení TV vysílání narůstá

ČTÚ květen: rušení TV vysílání narůstá

Vitalia.cz: Máte chutě? Nejezděte do světa, ale do Dobřichovic

Máte chutě? Nejezděte do světa, ale do Dobřichovic