IE 9 bude rozumět standardům – to může být problém

Čím více standardů podporuje Internet Explorer 9, tím více v určitém úhlu pohledu komplikuje život programátorům. Celý trh si totiž zvykl na to, že kód pro IE je třeba „hackovat“.

Webové standardy nemusí být z hlediska kvality návrhu a technologie vždy to nejlepší, jejich podstatou je ale právě to slovíčko standard – jednoznačně popisují určitý úkon. Postupný přechod k W3C standardům trval Microsoftu dlouhá léta a díky této prodlevě vznikla hromada programátorských nesrovnalostí. Každý z hráčů používal své vlastní postupy, o kterých byl přesvědčený, že jsou nejlepší, a i když už nějaké ty standardy zavedl, mohl je implementovat „trochu jinak“.

Dědictví minulosti

Výsledkem toho všeho jsou tucty k nih o webovém designu, které radí, jak napsat web, který bude vypadat všude stejně s pixelovou přesností. Typickým příkladem takové nejednoty může být třeba rozdílná práce s ajaxem v Internet Exploreru 6 a ostatních prohlížečích nebo třeba jiný box model, tedy způsob, jak se chovají blokové elementy (div rámce aj.).

Další nejednota vznikne i s příchodem Internet Exploreru 9. Vlastně se opakuje situace z doby, kdy se blížil příchod Internet Exploreru 8. Devítkové „íéčko“ bude natolik správně podporovat webové standardy, že může nastat problém s optimalizací webů pro Internet Explorer obecně.

ie9.png
Technologické demo Internet Exploreru 9

Průhlednost čtyřikrát jinak

Pro názornost použiji příklad, který si vybrali i na oficiálním IEBlogu. Devítka rozumí barevnému modelu CSS3, podporuje tedy i vlastnost opacity pro průhlednost. Pokud tedy třeba pomocí třídy nastavíte nějakému prvku na stránce opacity: 0.5, bude prvek z padesáti procent průhledný.

Funguje to na jedničku, v čem je tedy problém? Internet Explorer pro průhlednost doposud používal vlastní filtr alpha, kterému ale pro změnu nebude rozumět nová Devítka – tedy pokud nepoužijete její kompatibilní mód. Jaký je výsledek? Designéři a programátoři budou muset pro úplnou kompatibilitu opět napsat více kódu – v tomto jednoduchém případě tedy budou muset v CSS použít jak standardní CSS3 vlastnost opacity, tak proprietární IE efekt alpha.

Ukázka kompatibilního CSS zápisu – použijí se obě podoby 

.padestiprocentniPruhlednost
{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

To zase není žádná katastrofa, pokud ale budete chtít průhlednost objektu měnit dynamicky třeba pomocí Javascriptu, už se trošku zapotíte, budete si totiž muset zjistit, v jakém prohlížeči se zrovna stránka načetla a jestli je tedy třeba měnit parametry opacity, nebo alpha efektu. Případně v hlavičce stránky jedním řádkem kódu Internet Explorer přinutíte, aby používal kompatibilní režim a rozhodnete se pro standard, nebo proprietární efekt. Problém může nastat také u autodetekce, kdy si programátor v javascriptovém kódu zjistí jméno prohlížeče a podle něho pak použije buď starý IE kód, nebo CSS3 normu. Pokud by se však autodetekce netýkala konkrétních verzí a i v IE9 by se použil starý filtr alpha, stránka by se pochopitelně nezobrazila správně.

A kdy se to vše vyřeší? Microsoft snad v Devítce pohřbí své zbývající proprietární CSS „standardy“ a za pár let se konečně naplní idea skutečně standardizovaného HTML jazyka a kaskádových stylů, které vždy a za každé situace a v každém prohlížeči vykresli vše, tak jak má být.

Microsoft v tom ale není sám – nemá smysl mu křivdit, ostatně i Mozilla dlouhé roky používala svoje filtry -moz*, se kterými se setkáte v kódu dodnes. I zde tedy najdete zastaralý filtr pro průhlednost -moz-opacity. A nestandardní zápis používaly i webkitové prohlížeče, které zase mají vlastní předponu -webkit*. Průhlednost se nakonec dá řešit i pomocí CSS3 RGBA barevného modelu, kde poslední kanál A představuje míru průhlednosti, třeba: <div style="background-color: rgba(255, 0, 0, 0.5);">z poloviny průhledný červený rám</div>.

Ukázky kódu a další informace najdete v článku IE9, Opacity, and Alpha na oficiálním IEBlogu

Diskuze (125) Další článek: Odhaleno: nová myš od Microsoftu je ohýbací, nikoli multidoteková

Témata článku: , , , , , , , , , , , ,