Šuplík Honzy Hučína

Různé prohlížeče ukládají interně barvy různě

Když se nějakému blokovému elementu v HTML nastaví přímým stylem vlastnost border-color, různé prohlížeče to v příslušném objektu (do vlastnosti objekt.style.borderColor) ukládají různě. Pokud jde jenom o vykreslení rámečku, nevadí to, je to úplně jedno. Ale problém začíná ve chvíli, když potřebuju v javascriptu zjistit, jakou barvu rámečku má objekt nastavenou.

Potíž je v tom, že zapsat barvu okraje lze asi milionem způsobů. Jednak se stejná barva dá zapsat různě, jednak se může ještě uvádět společně pro celý rámeček, po dvojicích stran, nebo pro každou stranu zvlášť. Internet Explorer si to interně uchová v podstatě tak, jak to dostal v kódu, naopak Mozilla nebo Opera se to snaží převést do jednotného formátu, bohužel každá z nich to dělá jinak. Takže když se snažíte javascriptem zjistit, jestli má element nastavený třeba červený rámeček, musíte zadat složitější testovací podmínku – pro každý prohlížeč testovat něco jiného.

Vyzkoušejte si to na příkladu, nejlépe v různých prohlížečích. Jsou tam čtyři bloky, všechny rámečky vypadají stejně, ale pokaždé jsou zapsané – a tím pádem i uložené – trochu jinak.

Problém je částečně řešitelný dvěma opatřeními:

1. testovat místo celého rámečku jen jednu stranu, tím se předejde rozdílům typu „red red red red“ versus „red“
2. nastavit barvu tak, aby jí rozumělo co nejvíc prohlížečů stejně („#ff0000“ nebo „rgb(255,0,0)“)

Případně se dá – aspoň si to myslím – místo přímého stylu použít třída CSS (class) a pak testovat třídu místo konkrétní vlastnosti stylu, ale to má jiné nevýhody, například pokud má element přiřazeno více tříd.

Na tento problém jsem narazil při programování vánočního dárku. Ale nebojte, v IE, Mozille i Opeře mi to snad už funguje.