Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 254 lines (223 sloc) 12.5 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Prefix free: Break free from CSS vendor prefix hell!</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="shortcut icon" href="img/favicon.png" />
<script src="prefixfree.js"></script>
body {
transform:none; /* Just to test embedded styles */
<h2>Break free from CSS prefix hell!</h2>
<a href="" class="download" title="Click to download" download="prefixfree.min.js">Only <strong>2KB</strong> gzipped</a>
<a href="" target="_blank" class="github-ribbon"><img src="" alt="Fork me on GitHub"></a>
<p id="wtf">
<strong>-prefix-free</strong> lets you use only unprefixed CSS properties everywhere.
It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
Learn more:<ul>
<li><a href="#">Home</a></li>
<li><a href="#test-drive">Test drive</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#plugins">Plugins</a></li>
<blockquote cite="!/meyerweb/status/124618575263711232">
<p>“[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.”</p>
— <a href="!/meyerweb/status/124618575263711232" target="_blank">Eric Meyer</a>
<div class="section-container">
<section id="features">
<ul class="features">
<li>Processes every stylesheet in <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> elements and adds a vendor prefix where needed</li>
<li>Processes elements with a <code>style</code> attribute and adds a vendor prefix where needed</li>
<li>Takes care of <strong>new</strong> <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> elements, <code>style</code> attribute changes and CSSOM changes (<a href="#dynamic-dom">requires plugin</a>)</li>
<li>Lets <strong>jQuery</strong>’s <code>.css()</code> method get and set unprefixed properties (<a href="#jquery">requires plugin</a>)</li>
<section id="limitations">
<ul class="drawbacks">
<li>Prefixing code in <code>@import</code>-ed files is not supported</li>
<li>Prefixing <strong>cross-origin</strong> linked stylesheets is not supported, unless they are <a href="" target="_blank">CORS-enabled</a></li>
<li>Unprefixed linked stylesheets won’t work <strong>locally</strong> in Chrome and Opera. <a href="#local-xhr">You can change that for yourself</a> though.</li>
<li>Unprefixed <strong>values</strong> in inline styles (in the <code>style</code> attribute) won’t work in IE and Firefox &lt; 3.6. <strong>Properties</strong> as well in Firefox &lt; 3.6.</li>
<div class="section-container">
<section id="demo">
<p>Check <a href="css/style.css">this page’s stylesheet</a> ;-)</p>
<p>You can also visit the <a href="#test-drive">Test Drive</a> page, type in any code you want and check out how it would get prefixed for the current browser.</p>
<section id="howto">
<h1>How to use</h1>
<p>Just include <code>prefixfree.js</code> anywhere in your page. It is recommended to put it right after the stylesheets, to minimize <abbr title="Flash Of UnCSS3-ed Content">FOUC</abbr>
<p>That’s it, you’re done!</p>
<section id="browser-support">
<h1>Browser support</h1>
<p>The target browser support is <strong>IE9+</strong>, <strong>Opera 10+</strong>, <strong>Firefox 3.5+</strong>, <strong>Safari 4+</strong> and <strong>Chrome</strong> on desktop and <strong>Mobile Safari</strong>, <strong>Android browser</strong>, <strong>Chrome</strong> and <strong>Opera Mobile</strong> on mobile.</p>
<p>If it doesn’t work in any of those, it’s a bug so please <a href="">report it</a>. Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix.</p>
<p>In older browsers like IE8, nothing will break, just properties won’t get prefixed. Which wouldn’t be useful anyway as IE8 doesn’t support much CSS3 ;)</p>
<section id="test-drive" class="page">
<h1>Test drive</h1>
<p>Test the prefixing that -prefix-free would do for this browser, by writing some CSS below:</p>
<textarea id="source">@keyframes rotate {
from { transform: rotate(15deg) }
to { transform: rotate(375deg) }
.download {
position: absolute;
top: 1em;
left: -1.5em;
width: 6em;
height: 6em;
padding: 1em 0;
background: #80A060;
background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
color: white;
line-height: 1;
font-size: 140%;
text-align: center;
text-decoration: initial;
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
box-shadow: .1em .2em .4em -.2em black;
box-sizing: border-box;
transform: rotate(15deg);
animation: rotate;
cursor: zoom-in;
:read-write {}</textarea>
<textarea id="prefixed" readonly></textarea>
<section id="faq" class="page">
<h1>What if I actually want to target only a specific prefix?</h1>
<p>Properties/values etc that <strong>already</strong> have a prefix won’t be altered. However, if you use the unprefixed property/value etc after the prefixed properties, you might run into <a href="" target="_blank">issue #16</a>.
For those cases, -prefix-free adds a class on the root element (the <code>&lt;html&gt;</code> element in HTML) with the same name as the current prefix. So for example, to solve the problem presented in the above issue, you could do:</p>
<pre>.myselector {
transform: rotate(15deg);
.-webkit- .myselector {
transform: rotate(15deg) rotateX(0);
<p>It’t not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free.</p>
<p>Please note that in unsupported browsers like IE8, no such class will be added.</p>
<h1>How do I exclude specific files from being prefixed?</h1>
<p>You can exclude a file from being prefixed by adding the <code>data-noprefix</code> attribute to the <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> element. For example:</p>
<pre>&lt;link href=&quot;//; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; data-noprefix&gt;</pre>
<section id="local-xhr">
<h1>How do I enable local testing?</h1>
<p>Firefox (and IE?) natively support local XHR, so -prefix-free will work fine locally with them.</p>
<p>To enable local XHR for <strong>Chrome</strong>, you need to run it with the flag <code>--allow-file-access-from-files</code>.</p>
<p>To enable local XHR for <strong>Opera</strong>, you have to go to <a href="opera:config#UserPrefs|AllowFileXMLHttpRequest">opera:config#UserPrefs|AllowFileXMLHttpRequest</a>, check that option and Save.</p>
<h1>Something like this belongs to the server-side</h1>
<p>A server side script would need to add all prefixes, making the size of the CSS file considerably larger. Also, it should maintain a list of features that need prefixes, or add them all and unnecessarily bloat the stylesheet. -prefix-free automatically detects what needs a prefix and what doesn’t.</p>
<p>Also, a common argument against doing this on the client side, is that it makes the design rely on JavaScript. However, that is completely false: If JS is disabled, only some of the CSS3 won’t show. But if your design <em>relies</em> on CSS3 to be functional, you have bigger problems bro.</p>
<p>You can read some more about this in my recent <a href="">CSS Tricks interview</a></p>
<p>But every solution has its own pros and cons. If you would feel more comfortable with a server-side script, use that and don’t troll me please. Remember: nobody forced you to use -prefix-free. <strong>KTHXBAI ☺</strong></p>
<section id="plugins" class="page">
<p>Extra code on top of -prefix-free that makes it more flexible, integrates it with different APIs etc</p>
<section id="dynamic-dom">
<h1>Dynamic DOM plugin</h1>
<p>Originally a part of -prefix-free, it’s now a separate plugin. It makes -prefix-free take care of:</p>
<ul class="features">
<li><strong>New</strong> <code>&lt;link&gt;</code> and <code>&lt;style&gt;</code> added to the document afterwards</li>
<li><strong>New</strong> elements with a <code>style</code> attribute added to the document afterwards</li>
<li><code>style</code> attribute changes through <code>setAttribute()</code> (except in Webkit)</li>
<li>Getting and setting unprefixed properties through the CSSOM, like:
<pre> = 'rotate(10deg)';</pre>
Things to be aware of:
<ul class="drawbacks">
<li>Mutation events have a reputation of being slow, and they are the only way to do stuff when an attribute changes or new elements get added</li>
<li><code>style</code> attribute modifications will not work in Webkit</li>
<em>Setting</em> unprefixed CSSOM properties, like:
<pre> = 'rotate(5deg)';</pre>
will not work in Chrome (<em>reading</em> will)
<p>Get the Dynamic DOM plugin now:</p>
<li><a href="">prefixfree.dynamic-dom.js</a></li>
<li><a href="">prefixfree.dynamic-dom.min.js</a></li>
<section id="jquery">
<h1>jQuery plugin</h1>
<p>A tiny plugin (I didn’t even bother minifying it as it’s so small) that lets you set/get unprefixed CSS properties through jQuery's <code>.css</code> method.</p>
<p>Get the jQuery plugin now:</p>
<li><a href="">prefixfree.jquery.js</a></li>
<section id="viewport-units">
<h1>Viewport-relative units</h1>
<p>A static polyfill for the new <a href="">vw, vh, vmin, vmax units</a>.</p>
<ul class="features">
<li>Will do nothing if the units are supported natively.</li>
<ul class="drawbacks">
<li>It’s not dynamic. The lengths are replaced once, and then they function as normal CSS pixel values. So, they won’t update when the window is resized, but only on load.</li>
<li><a href="">prefixfree.viewport-units.js</a></li>
<section id="viewport-units">
<h1>CSS Variables</h1>
<p>Enables rudimentary <a href="">CSS variables</a> support.</p>
<ul class="features">
<li>If a prefixed implementation is available, it will add the necessary prefixes and use that</li>
<li>It supports overwriting the variable value</li>
<ul class="drawbacks">
<li>Doesn’t support scoping. Every variable is in the global scope and every subsequent declaration of the same variable overwrites the previous ones, regardless of scoping</li>
<li>It’s not dynamic. Variables are replaced once, and then they function as normal CSS values</li>
<li><a href="">prefixfree.vars.js</a></li>
<a href="" target="_blank">@prefixfree</a>
✿ <a href="" target="_blank">Commits feed</a>
✿ Made by <a href="">Lea Verou</a> with care
<script src="index.js"></script>
<a href="" class="twitter-share-button" data-count="vertical" data-via="prefixfree" data-related="LeaVerou">Tweet</a>
<script src=""></script>
<script>var _gaq = [['_setAccount', 'UA-25106441-4'],['_trackPageview']];</script>
<script src="" async></script>