27 |
28 | 29 | -prefix-free lets you use only unprefixed CSS properties everywhere. 30 | It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. 31 |
32 | 33 | 41 | 42 |43 |46 | 47 |“[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.”
44 | — Eric Meyer 45 |
<link> or <style> elements and adds a vendor prefix where neededstyle attribute and adds a vendor prefix where needed<link> or <style> elements, style attribute changes and CSSOM changes (requires plugin).css() method get and set unprefixed properties (requires plugin)@import-ed files is not supportedstyle attribute) won’t work in IE and Firefox < 3.6. Properties as well in Firefox < 3.6.Check this page’s stylesheet ;-)
72 |You can also visit the Test Drive page, type in any code you want and check out how it would get prefixed for the current browser.
73 |Just include prefixfree.js anywhere in your page. It is recommended to put it right after the stylesheets, to minimize FOUC
78 |
That’s it, you’re done!
79 |The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.
85 |If it doesn’t work in any of those, it’s a bug so please report it. 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.
86 |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 ;)
87 |Test the prefixing that -prefix-free would do for this browser, by writing some CSS below:
92 | 121 | 122 |Properties/values etc that already have a prefix won’t be altered. However, if you use the unprefixed property/value etc after the prefixed properties, you might run into issue #16.
131 | For those cases, -prefix-free adds a class on the root element (the <html> 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:
.myselector {
133 | transform: rotate(15deg);
134 | }
135 | .-webkit- .myselector {
136 | transform: rotate(15deg) rotateX(0);
137 | }
138 | It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free.
139 |Please note that in unsupported browsers like IE8, no such class will be added.
140 |You can exclude a file from being prefixed by adding the data-noprefix attribute to the <link> or <style> element. For example:
<link href="//example.com/style.css" rel="stylesheet" type="text/css" data-noprefix>147 |
Firefox (and IE?) natively support local XHR, so -prefix-free will work fine locally with them.
152 |To enable local XHR for Chrome, you need to run it with the flag --allow-file-access-from-files.
To enable local XHR for Opera, you have to go to opera:config#UserPrefs|AllowFileXMLHttpRequest, check that option and Save.
154 |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.
159 |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 relies on CSS3 to be functional, you have bigger problems bro.
160 |You can read some more about this in my recent CSS Tricks interview
161 |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. KTHXBAI ☺
162 |Extra code on top of -prefix-free that makes it more flexible, integrates it with different APIs etc
168 | 169 |Originally a part of -prefix-free, it’s now a separate plugin. It makes -prefix-free take care of:
172 |<link> and <style> added to the document afterwardsstyle attribute added to the document afterwardsstyle attribute changes through setAttribute() (except in Webkit)element.style.transform = 'rotate(10deg)';178 |
style attribute modifications will not work in Webkitelement.style.transform = 'rotate(5deg)';187 | will not work in Chrome (reading will) 188 |
Get the Dynamic DOM plugin now:
191 |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 .css method.
Get the jQuery plugin now:
201 |A static polyfill for the new vw, vh, vmin, vmax units.
209 |Enables rudimentary CSS variables support.
221 |