Tech Life

Ilustrační obrázek

Krotíme dynamické vlastnosti

14. 01. 2010 14:00    kategorie: Tech Life    autor: JIz    komentářů: 0

Jak asi víte, Internet Explorer umožňuje nastavovat v CSS dynamické vlastnosti – tedy vlastnosti, jejichž hodnota se dopočítává dynamicky. Pro historické verze tohoto prohlížeče (verze IE 8 už je podporuje jen v režimech zpětné kompatibility) je to ve spojení s podmíněnými komentáři téměř univerzální prostředek k doplnění jejich slabé podpory CSS, samozřejmě pokud se používá s rozmyslem a s vědomím všech možných dopadů.
 

Osobně mi příliš nevadí, že jde o věc závislou na javascriptu ani že je to nestandardní konstrukt. Obojí jde dobře dohromady s tím, pro jakou skupinu uživatelů tu ladíme. Ukončená podpora nás navíc zbavuje nutnosti řešit dopřednou kompatibilitu.

Pro mne je významnou výhodou tohoto přístupu, že věci, které se týkají formátování, jsou popsané na příslušném místě: tedy ve stylu, a ne v dalším přilinkovaném souboru s javascriptem apod.

Nejhorší problém tak zůstávají otázky výkonu. Steve Souders publikoval poznámku o tomto aspektu, kde mimo jiné doporučuje nahrazovat dynamické vlastnosti statickým výrazem při prvním vyhodnocení.

O co jde?

  • Hodnota dynamické vlastnosti se počítá vyhodnocením javascriptového výrazu.
  • Ve výrazu je možné použít slovo this jako referenci na element, jehož vlastnost se právě dopočítává.
  • Zdá se, že vyhodnocování výrazu není uzavřené v žádném „sandboxu“, to znamená, že například všechna přiřazení provedená při vyhodnocování výrazu mohou normálně modifikovat DOM.
  • Speciálně je možné modifikovat vlastnost style elementu odkazovaného jako this.

Pokoušel jsem se prozkoumat podrobněji, jak se Internet Explorer 6 a 7 skutečně chová v těchto případech; následující příklad berte jako ukázku zlomyslností, které vám tyto prohlížeče mohou přichystat.

Příklad: dynamický obsah

CSS zná vlastnost content; její typické použití se předpokládá ve spojení s pseudotřídou :after. nebo :before. Můžeme tak doplnit různé znaky doplňující vizuální prezentaci obsahu elementu; například použít pravé francouzské uvozovky v prezentaci drobečkové navigace.

Tuto dvojici konstruktů ale právě IE 6 a 7 nepodporují (od verze 8 je všechno v pořádku).

Speciálně pro ně bychom tedy mohli psát:

  • Výraz používá operátor , (čárka), který se vyhodnocuje tak, že se nejprve spočítá levá část a výsledek se zahodí; pak se spočítá pravá část, a co vyjde, je výsledek celého výrazu.
  • Výpočet levé části má jako vedlejší efekt požadovanou modifikaci dokumentu.
  • V pravé části je přiřazení, které nahrazuje dynamickou hodnotu statickým výrazem.
  • Zároveň je prázdný řetězec výsledkem vyhodnocení celého výrazu při prvním (ještě dynamickém) vyhodnocení.

Narazíme tu na první (a v tomto konkrétním případě jedinou) záludnost: očekávali bychom, že při prvním vyhodnocení se hodnota filtru přepíše na prázdný řetězec a znaky ” » ” se tak připojí právě jednou. Ve skutečnosti se při testování pravidelně doplňovaly dvakrát.

Důvod neznám; tipoval bych, že je vyhodnocení dynamické vlastnosti spjaté s nějakými dvěma událostmi, které nastávají při načítání, parsování a vykreslování dokumentu krátce po sobě. Jednoduché testy ukázaly, že první vyhodnocení následuje po vykonání inline javascriptů, ale předchází vykonání inline javascriptů s atributem defer. Druhé vyhodnocení následuje po vykonání skriptů s nastaveným defer, ale předchází událost load na elementu body.

V každém případě pomůže následující úprava:

Sdílet odkaz:
tisk

Diskuze k článku

K článku nebyl zatím přidán komentář.

Přidat příspěvek

 

Kontakt pro média


Máte zájem o další informace, odborný článek či přednášku na konferenci? Kontaktujte nás prosím na pr@etnetera.cz.

RSS - Tech life


RSS kanál Tech Life Blogu

Offlineblog

Offlineblog

Ljama


Komix z prostředí imaginární firmy.

ljama

Ještě jste ho nečetli? Tak tudy ...

 
Doporučujeme: Nabídka práce, volná pracovní místa - pracovní portál SPRÁVNÝKROK.CZ