CSS autoprefixer

Vývojáři často chtějí implementovat novinky v CSS3, které ještě nemají finální specifikaci. Proto vzniká hodně problémů, kdy prohlížeče využívají prefixy pro řešení nových CSS3 vlastností.

Autoprefixer

Preprocesory pro CSS integraci autoprefixeru podporují. Stačí jen aktivovat nebo stáhnout jako plugin. Pokud ale preprocesor nevyužíváte, může se hodit tento nástroj využívat.

Autoprefixer je postprocesor, protože se využije až po napsání validního CSSka. Stačí mu předat parametr, jakou podporu v prohlížečích vyžadujete a samotný styl. Výstup bude doplněn, případně omezen, pouze na vlastnosti, které podporují všechny prohlížeče ve vámi vybraném rozsahu.

Jaké vlastnosti využít, a které jsou již zbytečné, zjišťuje v databázi CanIUse.com.

Výběr prohlížečů

Pomocí vstupního parametru můžete říct, kolik verzí prohlížečů, chcete zpětně podporovat. Využijeme toto vstupní CSSko

a{
    -webkit-border-radius: 5px;
    border-radius: 5px;
    transition: 0.5s;
    transform: scale(0.5);
}

Pro nastavení last 2 versions dostaneme na výstupu

a{
    border-radius: 5px;
    transition: 0.5s;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

Zatímco pro defaultní nastavení, tj > 1%, last 2 versions, Firefox ESR, Opera 12.1 bude výstup:

a{
    border-radius: 5px;
    -webkit-transition: 0.5s;
            transition: 0.5s;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
}

Na ukázce jde vidět, že -webkit-border-radius je již při nastavení zbytečná položka, proto byla odstraněna.

Integrace a použití

Autoprefixer lze integrovat snad úplně všude. Ať už jej seženete pro JavaScript, konkrétně Node.js, pro PHP přes všechny preprocesory až po integraci do Sublime Text a dokonce i Visual Studia.

Kompletní možnosti použití a dokumentaci naleznete na GitHubu

---

Pleeease.io

Pleease.io je nástroj, který je také napsán v Node.js a lze si jednoduše stáhnout na počítač. Případně jde využít i jeho online formulář.

Pleease integruje Autoprefixer, ale nabízí toho ještě více. Například opacity přepíše na filter pro starší IE. Přepočítá rem jednotky a pár dalších vychytávek.

Pleease je online na Pleeease.io/play/