GravDept uses CSS processors. This enables automatic insertion of vendor prefixes.

Use Autoprefixer

Autoprefixer is a CSS processor that intelligently adds vendor prefixes to your CSS.

1. You write standardized CSS without vendor prefixes.
2. You declare the browserlist config you need to support.
3. Autoprefixer checks Can I Use to determine which CSS properties need prefixes.
4. Autoprefixer adds vendor prefixes for you.

div {
    border-radius: 5px;
    transform: translateX(-100px);
}

Use mixin libraries

Do not use. This approach is outdated.

From 2011–2015 I used the Compass mixin library for Sass.

div {
    @include border-radius (5px);
    @include transform (translateX(-100px));
}

Write prefixes manually

Do not use. This approach is outdated.

Writing vendor prefixes by hand is messy, error-prone, and hard to maintain.

div {
       -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
            border-radius: 5px;
       -moz-transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
}

One exception

Use rarely. Sometimes it’s the only way.

Experimental and browser-specific properties may require vendor prefixes to work.

::-moz-placeholder {
    color: $c-input-placeholder;
}

:-ms-input-placeholder {
    color: $c-input-placeholder;
}

::-webkit-input-placeholder {
    color: $c-input-placeholder;
}