Autoprefixer plugin for Contao 4

, _(*1)

About

Forget about vendor prefixes. Just write pure (S)CSS. This plugin adds vendor prefixes (depending on your settings) to CSS rules using values from Can I Use., _(*2)

Write your CSS rules without vendor prefixes:, _(*3)

:fullscreen a {
    display: flex
}

Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer., _(*4)

:-webkit-full-screen a {
    display: -webkit-box;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project by queries like last 2 versions or > 5%., _(*5)

See Browserslist docs for queries, browser names, config format, and default value., _(*6)

Or visit the Autoprefixer project page for more informations., _(*7)

Requirements

The autoprefixer tool used by this plugin is written in Javascript and called via node. Therefore, Node.js has to be installed on the server., _(*8)

Visit https://nodejs.org to see how to installing Node.js., _(*9)

Install

Contao manager

Search for the package and install it, _(*10)

agoat/contao-autoprefixer

Managed edition

Add the package, _(*11)

# Using the composer
composer require agoat/contao-autoprefixer

Registration and configuration is done by the manager-plugin automatically., _(*12)

Standard edition

Add the package, _(*13)

# Using the composer
composer require agoat/contao-autoprefixer

# app/AppKernel.php
class AppKernel
{
    // ...
    public function registerBundles()
    {
        $bundles = [
            // ...
            // after Contao\CoreBundle\ContaoCoreBundle
            new Agoat\AutoPrefixerBundle\AgoatAutoPrefixerBundle(),
        ];
    }
}