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.

Měšec.cz: Banky umí platby na kartu, jen to neříkají

Banky umí platby na kartu, jen to neříkají

DigiZone.cz: Skylink v 1. polovině srpna ukončí 12 207

Skylink v 1. polovině srpna ukončí 12 207

Měšec.cz: Se stavebkem k soudu už (většinou) nemusíte

Se stavebkem k soudu už (většinou) nemusíte

120na80.cz: Tipy pro odvodnění organismu

Tipy pro odvodnění organismu

Lupa.cz: IT scéna po brexitu: přijde exodus vývojářů?

IT scéna po brexitu: přijde exodus vývojářů?

Lupa.cz: Vodafone umí volání přes Wi-Fi. Z ciziny jako v ČR

Vodafone umí volání přes Wi-Fi. Z ciziny jako v ČR

Vitalia.cz: Za zánět močových cest mohou plavky

Za zánět močových cest mohou plavky

Vitalia.cz: Patří maso do dětského jídelníčku?

Patří maso do dětského jídelníčku?

Lupa.cz: Japonská invaze. Proč SoftBank kupuje ARM?

Japonská invaze. Proč SoftBank kupuje ARM?

Měšec.cz: Co s reklamací, když e-shop krachuje?

Co s reklamací, když e-shop krachuje?

Měšec.cz: Investice do drahých kovů - znáte základní chyby?

Investice do drahých kovů - znáte základní chyby?

Měšec.cz: Cool karta: recenze předplacenky

Cool karta: recenze předplacenky

Vitalia.cz: Tohle je Břicháč Tom, co zhubnul 27 kg

Tohle je Břicháč Tom, co zhubnul 27 kg

120na80.cz: Jaké plavecké pomůcky vaše dítě ochrání?

Jaké plavecké pomůcky vaše dítě ochrání?

Měšec.cz: Nový sazebník mBank radost nedělá

Nový sazebník mBank radost nedělá

Podnikatel.cz: Kanceláře jako kóje? Špatný vtip

Kanceláře jako kóje? Špatný vtip

Vitalia.cz: Petr Koukal: Až rakovina mi zkvalitnila život

Petr Koukal: Až rakovina mi zkvalitnila život

DigiZone.cz: Sat novinky: pátý kanál maďarské televize

Sat novinky: pátý kanál maďarské televize

Podnikatel.cz: Daň z nemovitosti? Změny budou v říjnu

Daň z nemovitosti? Změny budou v říjnu

Vitalia.cz: Jak na domácí zmrzlinu?

Jak na domácí zmrzlinu?