MSIE bug

diakritický CSS trik

Monday, 9. July 2007

O tom, že je Microsoft Internet Explorer (dále jen MSIE) problematický prohlížeč, který obsahuje stohy chyb a špatných implementací ví asi každý, kdo někdy bojoval s box-modelem, PNG alfa průhledností, position:fixed či maximální nebo minimální šířkou.

Chyb je zkrátka tolik, že se s nimi musí chtě-něchtě každý webmaster naučit žít, validně či nevalidně je ošetřovat atd. – asi to známe všichni. Po všech těch peripetiích jsem měl až do včerejšího večera pocit, že mě MSIE už v ničem nepřekvapí – překvapil.

Nový bug?

Podívejte se na následující CSS zápis:

p {color:red}
/* MSIE čistič */
p {color:green}

Zdá se být v pořádku – a to také je. Známe-li pravidlo „pozdější vyhrává“ je nám jasné, že odstavec by měl být zelený. Ve všech chytřejších prohlížečích (Mozilla, Opera) také bude. Jenže v MSIE (otestováno ve verzích 5, 5.5, 6) ne, podívejte se na příklad.

Zdá se to neuvěřitelné? Mně se to tak zdálo dobrých 30 minut, nechtěně jsem totiž narazil na zajímavou chybu v MSIE, o které jsem do té doby neměl tušení a která v konečném důsledku (samozřejmě značně neelegantně) dokáže od sebe odfiltrovat MSIE od Firefoxu a Opery.

V čem je problém?

Řešení je prosté. Problém je v použitém kódování a některých znacích s diakritikou. Jinými slovy, HTML dokument je v kódování, které běžně používám (UTF-8) a externí styl je v kódování Windows 1250 (PSPad mi jej použije jako výchozí, při vytvoření nového souboru). MSIE pro mě nepochopitelně nedokáže „překódovat“ styl a tudíž některé znaky s diakritkou zobrazí jako neznámé znaky (různé „klikyháky“).

Pokud tedy komentář v CSS stylu končí znakem s diakritickým znaménkem (ě,č,ř atd.), IE se na tom zasekne a ukončí zpracování CSS. Pokud však někde dále v kódu narazí na další (nejlépe prázdný) komentář /**/, opět se chytne a pokračuje ve zpracování, jak ukazuje následující příklad.

p {color:red} // Tuto definici MSIE použije
/* MSIE čistič */
p {color:green} // Tyto dvě definice MSIE nepoužije
p {background:yellow}
/**/
p {background:black}  // Tuto definici MSIE opět použije

Podle výše uvedeného zápisu to bude vypadat takto: Mozilla i Opera použijí zelené písmo na černém pozadí (původní hodnota background se přepíše pozdější), zatímco MSIE zobrazí červené písmo na černém pozadí. To jsou věci!

Podívejte se na druhý příklad.

Jaká je pointa?
Pointu raději nehledejme, tento spot měl poukázat na zajímavý problém, na který jsem narazil včerejší noc a s kterým jsem si zprvu nevěděl rady, MSIE totiž odmítal spolupráci, naprosto nereagoval na zápisy – až jsem měl chvílemi pocit, že tím hloupým v této dvojici jsem já ;-)

PS: Nejsem odborník na kódování, mohl by mi někdo vysvětlit, proč výše uvedené pravidlo platí u znaků s diakritikou kromě "š" a "ž"?, možná se dobereme k nečekanému výsledku.

Poznámka: Nerad bych začátečníky a méně pokročilé webmastery uvedl v omyl, samozřejmě, že pokud použijete p {color:red}; p {color:green} bude odstavec zelený. Tento spot slouží spíš pro pobavení a zamyšlení profesionálům.

zdroj: http://www.vitdlouhy.cz/weblog/2005/02/kouzelny-msie-bug.php

 


systém spravován pomocí webmaker.ooo.cz
©2006-2024 Tomáš Hanus | ixulot | ixodesign.cz | RSS