autoprefixer

autoprefixer intaractive demo

by kazu69

HTML

<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<div>
    <textarea id="input">/* Enter CSS source code here */</textarea>
    <textarea id="output">/* Autoprefixer generated code */</textarea>
</div>

CSS

* { -moz-box-sizing: border-box; box-sizing: border-box }
html, body { width: 100%; height: 100% }
div { display: flex; height: 100% }
div > * { flex: auto; border: none; padding: 1em; font-family: Consolas, monospace; resize: none }
#input { background-color: pink }
#output { background-color: silver }

JavaScript

var input = document.querySelector('#input');
var output = document.querySelector('#output');

input.addEventListener('keyup', function () {
    var source = this.value;
    var compiled = autoprefixer("last 1 version", "> 1%", "Explorer 7").process(source);    
    output.value = compiled.css;
});

// clear input on initial focus
var clear = false;
input.addEventListener('focus', function () {
    if (!clear) {
        input.value = '';
        clear = true;
    }
});