Máte nějaký CSS3 styl (např. animaci, rámeček, apod.), který v některém prohlížeči uživatelům nefunguje, ale jakmile otevřete debugger (DOM inspector, Firebug, apod.), tak záhadně fungovat začne?

Problém se stylem je v tom, že některé prohlížeče pro určité styly přímo vyžadují vlastní prefix (např. „-moz-„, „-webkit-„, „-o-„, „-ms-„) a bez něj styl nefunguje. Problém s debuggerem je ten, že v okamžiku jeho otevření začne opravovat některé CSS styly tak, aby je mohl co nejlépe zobrazit. A jednou z oprav je to, že všechny prefixované styly převede na neprefixované a tím donutí prohlížeč použít původní neprefixovaný styl.

Pokud předchozímu odstavci nerozumíte, tak to neřeště – prostě si pamatujte, že některé styly vyžadují prefixy.

Příklad:

.niceButton{
    /* bude fungovat jen v Chrome */
    border-image: url('button.png') 5px 5px fill;
}
.niceWorkingButton {
    /* styl pro Safari */
    -webkit-border-image:
                url('button.png') 5px 5px fill;
    /* styl pro Firefox */
    -moz-border-image:
                url('button.png') 5px 5px fill;
    /* styl pro Opera */
    -o-border-image:
                url('button.png') 5px 5px fill;
    /* styl pro Chrome */
    border-image: url('button.png') 5px 5px fill;
    /* ...v IE border-image nefunguje vůbec */
 }

Vždy uvádějte nejprve prefixované styly a pak teprve ten bez prefixu. Zajistíte tím lepší kompatibilitu.

Podobný problém nastává i u debuggeru F12 v IE11. Ten umožňuje emulovat starší verze IE a Windows Phone, avšak debugger také převádí některé definice určené pouze pro IE11 na formát, kterému rozumí i IE10 nebo starší. To se napříkla stává při testování Flexboxu:

.layout { /* layout pro IE10 a IE11 */
    display: -ms-flexbox; /* definice pro IE10 */
    display: flex; /* definice pro IE11 */
}
.layout2 { /* layout pouze pro IE11 */
    display: flex;
    /* ale funguje i v emulovaném IE10 !!! */
}

Pozor na Animace

Pozor je potřeba si dávat u CSS3 vlastnosti Transition, která provádí animaci. Sama vyžaduje prefixy a navíc vyžaduje i prefixy u definice vlastností, které má ovlivňovat.

V příkladu je obrázek, který je ve výchozím stavu malý a po změně stylu (např. kliknutím nebo najetí myší) se zvětší na celý obraz.

img.small {
    //zmenšení obrázku na 10% původní velikosti
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1);

    //animace zvětšení
    //všimněte si -webkit-transform v definici!
    -webkit-transition:
               -webkit-transform 0.5s ease 0.5s;
    -moz-transition:
               -moz-transform 0.5s ease 0.5s;
    −o−transition:
               −o−transform 0.5s ease 0.5s;
    transition: transform 0.5s ease 0.5s;
}

img.large, img:hover {
    //zvětšení zpět na 100%
    −webkit−transform: scale(1);
    −moz−transform: scale(1);
    −o−transform: scale(1);
    transform: scale(1);
}

Internet Explorer podporuje transition od verze 10, transform v této podobě (bez prefixu) podporuje od verze 9; pro starší verze musíte použít Transform generator.

Pěkný seznam všech požadovaných (a nepotřebných) prefixů je na stránkce shouldiprefix.com. Stačí zadat část definice, kterou chcete použít, a stránka vám zobrazí jak nejlépe ji použít a které prefixy jsou potřeba.

Pokud nechcete neustále pamatomat na dopisování prefixů, můžete k tomu použít nějaký auto-prefixer, který vyřeší problém za vás.