Blog: CSS

Autoprefixer helps me write better code

Published

In a perfect world, everyone would play by the same rules. But the web isn't perfect. And different browsers need different helping hands to play the same game.

Enter vendor prefixes.

Admittedly modern browsers are a lot better at reading the same language, but still need a helping hand from time to time. Because they feel they can do better. Whatever. Have we not learned anything from those horried IE6-8 days? Anyway...

When I save my LESS or SCSS, CodeKit handles my compilation, and also runs Autoprefixer on the CSS file. What does it do?

It turns this:

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}

Into this:

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

But why is it better?

I find there are two reasons:

1. My pre-complilation code is easier to read (and write)

If every browser played the same game with "display: flex;" we would be all set. But Microsoft and Webkit browsers still need a prefix, and having to write the prefixes every time I want to use "display: flex" (or any of the other properties that need prefixing) is such a task.

The shorthand of "display: flex;" is just so easy to read - it means my declaration for the .container is simple and I can quickly scan and read every line without having to skip duplicated prefixed lines.

As you can see, as soon as we add "flex-direction", we get 4 lines to define it for all browsers. I know I want my container to be a flex parent with a column of elements - so let me be clean and concise in saying just that, and not have to worry about remembering every prefix option.

With large projects, readability of code is so crucial.

2. My code is less error-prone

If I have to to remember to prefix every property every time, let's face it, I'll forget something somewhere, and then wonder why Safari on iOS decides to behave differently.

Using Autoprefixer takes the responsibility from me, and when using CodeKit, it never forgets I want it done, so I know my final compiled CSS will be ready for any browser. This means I can spend more time on writing more code, rather than remembering every nuance of every vendor prefix.

Blog

View all
Life

Installing and review of the Sonos Wall Mount with the Sonos One SL

I’m new to the Sonos ecosystem, and after setting up the Sonos Arc and Sub combination, I wanted more, so splurged on a pair of One SL speakers for surrounds....

Continue reading...

Life

IKEA hack: BESTÅ unit with HANVIKEN doors with speaker fabric

There’s a room in the house called the Marty Cave. It’s like a Man Cave, but for Marty. And that’s me (phew) so that’s all good. And in the Marty Cave...

Continue reading...

JS

Learning to love the menu

This article was written for and originally appeared on Blueprint by Tiny. TinyMCE gives you immense flexibility when it comes to the user interface you present...

Continue reading...

Web

Lessons learned over 20 years as a web developer

This article was written for and originally appeared on Blueprint by Tiny. Is it just me, or does it still feel like the 90s happened only yesterday? It feels...

Continue reading...

I am the Development Director (and co-owner) at Mity Digital, a Melbourne-based digital agency specialising in responsive web design, custom web development and graphic design.
Mity Digital