Looks like it just strips out the background gradient once the file is loaded?

http://jsfiddle.net/cYMgY/

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

I couldn't get the minified version of the script to work in any browser (Chrome 16, Firefox 8, IE9). I tried the uncompressed version, works just fine. Not sure what the issue was.

IE10 version tested: 10.0.8102.0
When prefixing the box-shadow propertie (like -prefix-free do it on IE10), this propertie doesn't work.
Example that doesn't work for IE10:
-ms-box-shadow(#6D6D6D 2px 2px 4px)
This works for IE10:
box-shadow(#6D6D6D 2px 2px 4px)

You can see this issue on that page: http://jojaba.free.fr/alsacreations/prefixfree-demo/prefixfree-demo.html

Thanks for your great work

If prefixfree is activated, jquery CSS like ui.css for calendar, tabs..... doesn't work anymore.

Please don't kill me by asking this! But I really prefer to handle this in server and hand a clean stylesheet to the browser. Do you know a PHP version of this?

I checked on iOS and android and the js doesn't seem to work on mobile devices. Can you please take a look and suggest a workaround?

Great work btw and many thanks for all the hard work.

Currently, -prefix-free converts URLs in linked stylesheets since they are relative to the CSS file. However, IE treats behavior URLs as relative to the HTML document, so they shouldn’t be converted.

This bug breaks CSS3PIE.

Hello,

I was planning to develop a PHP script in order to get rid of prefixes... and I found out you made a great js script :-). Thanks a lot for this !

So here are some difficults/bug I found :-p. the gradient property doesn't seem to work on the Opera browser, such as :

background : linear-gradient(left, #484848 0%,#a3a3a3 100%);

For the iOS device, the problem is different since the property hasn't the same format, so I guess I have to add it manually in my style sheet, isn't it ?

Thank you :-)

This is probably a long shot, but would you consider having PrefixFree generate -pie- prefixed properties for use with CSS3 PIE?

In other words, it would be awesome if I could write this in my stylesheet:

body {background: linear-gradient(#fff, #000);}

And have PrefixFree generate this in IE:

body {-pie-background: linear-gradient(#fff, #000);}

Then I could drop in PIE.htc and my non-prefixed CSS3 gradients would work in all versions of IE down to 6! I know it's probably out of the scope of PrefixFree, but maybe it could be offered as a plugin?

When using the Safari/Chrome Extension AdBlock there is an error on line 67 in prefixfree.js

• XMLHttpRequest cannot load data:text/css,. Cross origin requests are only supported for HTTP
• 67NETWORK_ERR: XMLHttpRequest Exception 101: A network error occured in synchronous requests.

The Issue is, that AdBlock seems to create a link element between the head and the body
link type="text/css" rel="stylesheet" href="data:text/css,"

I guess prefixfree tries to do something with it and then the error occurs.

Of course u could just deactivate AdBlock but IMO that's a pretty common Extension to have so maybe we should try to find a workaround.

Version 1.0.1 worked fine btw

It mentions support for IE9 and above, but what about earlier version of IE? Is there any partial support? In particular I'm thinking of gradients.

Thanks,
Rene

I recently tried to use -prefix-free on my site, but ended up dumping it as it changed code with multiple linear gradients (which I happened to get from the CSS3 Pattern Gallery) and incorrectly added vendor prefixes to each item in the gradient list instead of putting in different background-image properties. So something like this:

    background-image: 
            -webkit-linear-gradient(#fff 2px, transparent 2px),
            -webkit-linear-gradient(0, #fff 2px, transparent 2px),
            -webkit-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -webkit-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);

SHOULD have turned into this (but didn't - it instead turned into one very long list of linear gradients [which breaks the effect in all the browsers I tried]):

    background-image: 
            -webkit-linear-gradient(#fff 2px, transparent 2px),
            -webkit-linear-gradient(0, #fff 2px, transparent 2px),
            -webkit-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -webkit-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            -moz-linear-gradient(#fff 2px, transparent 2px),
            -moz-linear-gradient(0, #fff 2px, transparent 2px),
            -moz-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -moz-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            -ms-linear-gradient(#fff 2px, transparent 2px),
            -ms-linear-gradient(0, #fff 2px, transparent 2px),
            -ms-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -ms-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            -o-linear-gradient(#fff 2px, transparent 2px),
            -o-linear-gradient(0, #fff 2px, transparent 2px),
            -o-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -o-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            linear-gradient(#fff 2px, transparent 2px),
            linear-gradient(0, #fff 2px, transparent 2px),
            linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);

For linear-gradient and the others, where the prefix is in the value, not the attribute, prefixfree's not doing anything.

background: linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);

should be adding:

background: -moz-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);
background: -ms-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);
background: -o-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d6f0fc), color-stop(0.5, #ffffff), to(#3867a1));
background: -webkit-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);

but it's not.

Hopefully there's a fix; gradients are the biggest part of my css; if I can trim them out, the size savings from that alone would make prefixfree worthwhile, even ignoring all the other prefix headaches that it saves me! :D

For example, transition: transform 0.25s ease-in-out;
becomes -moz-transition: transform 0.25s ease-in-out;.

I expected -moz-transition: -moz-transform 0.25s ease-in-out;

test value '1px+5%' is invalid, use '1px + 5%' instead.

@font-face
  font-family: 'IconicStroke'
  src: url('iconic_stroke.eot?') format('eot'), url('iconic_stroke.ttf') format('truetype'), url("iconic_stroke.svg#IconicStroke") format('svg')
  font-weight: normal
  font-style: normal

this breaks in 1.0.2 - worked fine in 1.0.1

tested in firefox/chrome/safari on mac

Hi!
I'm getting error in Opera (but not on all sites)
Console is throwing out:

Error thrown at line 68, column 2 in <anonymous function: link>(link) in ../prefixfree.js:
    link.setAttribute('data-inprogress', '');
called from line 125, column 2 in <anonymous function>() in ../prefixfree.js:
    $('link[rel="stylesheet"]').forEach(StyleFix.link);

Tried out this script today and as soon as I refreshed the page I was working on all of the css background images disappeared as soon as the script loaded. I tried the script first at bottom of page, where I normally put js like this, tried it in the as well.

I'm on a mac and this bug happened in Chrome 14 and the latest Firefox version 7.0.

I typically write my css on one line and write background properties like this: background: url(../img/hero-bg.png) no-repeat;

Would love to use the script but unfortunately won't be able to with this bug.

Thanks

When -prefix-free adds the -ms- prefix to keyframe animation, animation doesn't work. Not sure that this is a -prefix-free issue, because when disabling -prefix-free, no animation doesn't work either. Maybe the tested version is not uptodate !!! (10.0.8102.0)

Go to this site to see this issue: http://jojaba.free.fr/alsacreations/prefixfree-demo/prefixfree-demo.html

Styles with rel=stylesheet alternate should not be processed until the style has been selected. Currently all styles will be applied at once.

To avoid bugs affecting most people with current sites using alternate stylesheets, prefixfree should not process alternate stylesheets at all until some way of determining when a stylesheet is in use has been figured out. I can't find anything in the specs on possible DOM events for this.

Prefixfree doesn't support columns rules from CSS3 :

http://www.w3.org/TR/css3-multicol/

It should be interesting to add it :-)

@Keyframes {} does not get a prefix applied to it.

While writing border-image with the shorthand border-image rule, since the border-image-slice will not be correctly handled by firefox and the whole rule thus will be ignored in that browser.
so, firefox will choke on this
border-image: url(path/to/img.png) 10 10 10 10 fill round round;
unless an extra
-moz-border-image: url(path/to/img.png) 10 10 10 10;
is presented.

more details:
http://code.google.com/p/chromium/issues/detail?id=101311#c9
http://www.w3.org/TR/css3-background/#border-image-slice-fill

theseus {
display: box;
}

is a little strange, should be prefixed thusly for webkit:

theseus {
display: -webkit-box;
}

and for moz:

theseus {
display: -moz-box;
}

-moz-perspective does exist and function in latest firefox

test drive page currently will generate "-webkit-perspective", but on moz nada

thanks for a brilliant tool. very next-gen :)

The URL in my stylesheet url(/images/socialicons.png) is replaced with the path to the stylesheet and the URL as so: url(/css//images/socialicons.png).

I'm getting the following error with prefixfree enabled on my site:

XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Ubuntu+Condensed. Origin http://www.andreaverlicchi.eu is not allowed by Access-Control-Allow-Origin

All ok if prefixfree is disabled.

Check it here:
http://www.andreaverlicchi.eu (prefixfree is now disabled by default, waiting for fixes)
http://www.andreaverlicchi.eu/?prefixfree=enable

Thank you in advance.

I discovered a very odd issue with PrefixFree while developing a site recently. On only certain pages of my site, when the script was present, an additional set of styles would get loaded that conflicted with the rest of the styles on the page and completely messed up the layout.

By diffing pages that worked fine with PrefixFree against those that didn't, I discovered that all the pages that weren't working were referencing stylesheets that no longer existed. In other words, on a broken page, I would have something like <link rel="stylesheet" href="css/template.css" />, but nothing called template.css in the css directory. Upon removing these references, the pages immediately began rendering correctly again.

The strangest part is that I couldn't determine where those additional styles were coming from. I copied them out of Firebug and searched for them across my entire project, and found nothing that was defining them anywhere. The only thing I could think of was that PrefixFree was acting on cached versions of the stylesheets that no longer existed - but I looked at old versions from before they had been removed, and nothing inside them matched the additional styles I was seeing through Firebug.

I'm not sure if there's anything you can or should do to PrefixFree to address this, since the solution for me was to remove references to non-existent stylesheets - which is good practice anyway - but I wanted to bring it up since it did severely alter the layout/presentation of my pages.

I'll try to explain it with words, but I made a picture more understandable.

=> http://www.yojimbo.fr/_images/prefixfree_issue.png

I set up 2 test-cases :

• http://www.yojimbo.fr/test_prefixfree.html
• http://www.yojimbo.fr/test_without_prefixfree.html

Step by Step :

• In both cases, I do a right-click on the section tag (Big grey square) -> inspect
• then Dev Tools open in Elements panel, where i can see DOM on the left, and Styles applied to selection on the right.
• In the right subpannel, we can see which file is the origin of the shown CSS, it's where the difference appears. Without PrefixFree, I get the classic behaviour : the CSS file is show, i can click on it and live edit it in Ressources panel. But With PrefixFree, it's the HTML file which is shown, and whene i click on, i still go to Ressource panel, and Chrome doesn't show me the CSS, but the HTML file -> and here, when i click on the CSS file, and try to edit it, it doesn't work :( !

Maybe it's not a PrefixFree problem, that's why I didn't make an issue here at first. Maybe it's a local problem (But my coworkers have the same) ... I don't know, but thanks for the help !

Using the minified version of 1.0.3, I get this error "Node was not found" on FF, and "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8" on Chrome, appearently about: window.PrefixFree.process.link.e.onreadystatechange

When AddThis is included on a page, IE9 throws a script error. Doesn't appear to effect anything visually.

Error thrown:
SCRIPT5: Access is denied.
prefixfree.min.js, line 2 character 336

AddThis stylesheet URL:
http://s7.addthis.com/static/r07/widget74.css

Hi,
I was wondering, is there any way to make Prefixfree compatible with Less.js ? Make it add prefixes to .less files compiled on-the-fly ?

I used this great library in a new project. However, I ran into a problem by having a media="print" stylesheet. When using prefixfree, the print stylesheet gets included without media type - which will show the print view of the page (which has completely different layout in my case).

There is a workaround by including the "@media print {}" in the print stylesheet. However, I think it is safer to carry the media type into the newly created stylesheet node. Maybe you could include this patch:

73 +: media = link.getAttribute('media'),
97+: if (media) { style.setAttribute('media', media); }

Regards, Kai

The vendor specific cursors below dont work un-prefixed with prefixfree

works:
div {
cursor: -webkit-grab;
cursor: -moz-grab;
}

does not work:
div {
cursor: grab;
}

To get the flexbox model working correctly, we need to use "width: flex(1 2)" and similar styles.

I had expected that prefixfree would help with translating those, since it does correctly translate "display: flexbox"

Reference:
http://www.w3.org/TR/css3-flexbox/#multiline

PrefixFree removes every base64 image in the css?
If I use it, my page doesn't show the images.
See this: http://t.co/HjqOqIHw

This is really more of an issue of how to correctly handle vendor-specific rendering problems, but I'm logging this issue so you're aware of this effect.

When using different vendor-spefic selectors, I can easily specify CSS attributes for different rendering engines:

-webkit-transform: rotate(15deg) rotateX(0); /* Force Chrome to render as 3D, enabling antialias */
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);

Using prefixfree, however, writing something like this:

-webkit-transform: rotate(15deg) rotateX(0);
transform: rotate(15deg);

...turns the resulting CSS on Chrome into:

-webkit-transform: rotate(15deg) rotateX(0);
-webkit-transform: rotate(15deg);

This negates the vendor-specific attribute spec and reverts it back to a non-antialiased view.

Now, I know that this could be solved by simply applying a Modernizr-like class name for specific browsers (and platforms, like IE), but the alternative would be to assign vendor-specific attributes a higher priority than unprefix ones, eg. if the rule exists prefixed in addition to the unprefixed one in source, do not transform the unprefixed one. This enables the override which would fix this issue.

Again, not sure if this is something that should be handled by prefixfree or not, just putting it out there.

For example, content: "transformers: robots in disguise" becomes content: "-webkit-transformers: robots in disguise".

PrefixFree.properties contains outline in Mozilla, which results in it getting prefixed even though it shouldn't.

This makes -prefix-free incompatible with rgba.php.

Just a heads up. I know that in the past the DOMAttrModified event has been buggy/not supported in all browsers that implement other Mutation events.

Tag significant versions so that they can be referenced directly (e.g. https://raw.github.com/LeaVerou/prefixfree/$VERSION/prefixfree.js).

In IE9 with a linked stylesheet using the media query "only screen and (min-width: 500px)", -prefix-free disables that stylesheet when it loads. Resizing the browser causes the stylesheet to be re-applied.

Test case: http://eastsussex.gov.uk/testcase/linked.html

When I use the following CSS:

/**
 * Disabled drop-down lists
 *    - background-color alone does not work in Google Chrome:
 *      http://code.google.com/p/chromium/issues/detail?id=100234
 *      Setting background-image: url('') solves the issue 
 */
select[disabled] {
    background-image: url('');
    background-color: #ebebe3;
}

It triggers the following error in my JS console:

GET http://[...]' 404 (Not Found)

Confimed on the following browsers:

• Google Chrome 16.0.950.0
• Firefox 9.0.1

I wanted to add ::scrollbar so it would be prefixed by Webkit, but it seems like the supported test function isn't reporting correctly for some values in Webkit. I tried adding '::foobar':null to the selectors object, and supported returns true in Webkit. In Opera the same code returns false.

Android 2.3.6 default browser not showing gradient while other browser are fine. I have only tested in Android 2.3.6 version.

.discount-label {
left: -7.1em;
top: 1.4em;
background: url(../img/texturee.png), linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);}

it's working in all but not android. For me now only option to add vendor-prefixes to whole css. I had made it for a big project.

I noticed you shim Object.defineProperty, but only partially. This may cause problems w/ 3rd-party code that lazy detects functionality with checks like if (Object.defineProperty) {. Your own code assumes Object.defineProperty has functionality that the shim does not provide (setting the enumerable and configurable descriptor attributes). Since the primary use of your shim is for getter/setter why not just abstract those into private util functions.

Hi,
2 errors occurs in IE10:

• Access is denied (line 89 , ch 3)
• Access is denied (line 125, ch 3)

I don't test on IE9.