

You can find autoprefixer’s settings under Languages > Special Languages Tool. The HTML section is there so whenever an HTML file changes, the browser will livereload. Configure Autoprefixer Bring up the project settings by first clicking on the gear icon. run the Sass task then the autoprefixer task and then trigger a livereload of the browser.
#CODEKIT AUTOPREFIXER CODE#
Its just a piece of code that sits in your projects folder.
#CODEKIT AUTOPREFIXER INSTALL#
This means I can spend more time on writing more code, rather than remembering every nuance of every vendor prefix. Grunt is not an application that you install and run in the background like Codekit. 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. 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. With large projects, readability of code is so crucial. 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. container is simple and I can quickly scan and read every line without having to skip duplicated prefixed lines.Īs you can see, as soon as we add "flex-direction", we get 4 lines to define it for all browsers. The shorthand of "display: flex " is just so easy to read - it means my declaration for the. 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. It works seamlessly with Less, Sass and Stylus. You just write standard CSS and Autoprefixer adds all the necessary vendor prefixes based on the latest information about each browser. Autoprefixer makes them painless and its now built-in to CodeKit. If every browser played the same game with "display: flex " we would be all set. Autoprefixer Vendor prefixes: the CSS rules that only an IE6 Engineer could love. My pre-complilation code is easier to read (and write) The Autoprefixer, Babel and Libsass functions are designed specifically to increase productivity and the workforce.
