Využijte efektů CSS3 i na starém IE

Webdesign

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

Internet Explorer ve verzi 8 moc technologií z CSS3 nepodporuje. Kromě :before a :after ještě určitou část selektorů, ale jinak je na tom velmi bídně. A přitom je to stále jeden z velmi používaných prohlížečů. Jak ho tedy donutit, abychom mohli bez využití obrázků použít zaoblené rohy, nebo stín rámečku?

Jedním z řešení je CSS3PIE. Stačí si ze stránek stáhnout soubory, nahrát je na server a propojit se stávajícími CSS styly. To je možné tak, že v každém CSS pravidle, kde chceme využít CSS3 i v IE přídáme řádek behavior: url(path/to/PIE.htc);.

Například:

#zaoblenyRoh {
    border: 1px solid #999;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

Bohužel, aby to nebylo tak růžové, existují věci, které přes CSS3PIE udělat nejdou. V praxi jsem narazil například na nemožnost použít inset u box-shadow, které nevytvoří stín, ale funguje potom jako background dané barvy. Dále nefungují průhledné barvy RGBA u stínování. Zkrátka doporučuji si pročíst dokumentaci, případně hledat na tamějším fóru, kde se o většině nedostatků ví.

Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)

Komentáře