CSS autoprefixer

Pavel Tipy & triky, CSS

CSS autoprefixer dokáže doplnit prefixované vlastnosti v CSS3 pro podporu ve starších prohlížečích, nebo pro zatím neoficiálně specifikované vlastnosti. Navíc umí i již zbytečné prefixy odstranit podle využití prohlížečů. Ukážeme si taky online ukázku, která toho nabízí ještě trochu více.

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/

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

Vlastní eventy v Javascriptu

Eventy jsou s Javascriptem spjaty už od jeho počátků. Přesto, že jich v základu obsahuje nepřeberné množství, je někdy užitečné vytvořit si eventy vlastní. V tomto článku se...

Další články