I can see arguments for both leaning on JavaScript or doing it server side as this one does. One benefit of doing it on the client is that it only generates the relevant prefixes. There is no need to send down opera-specific prefixes to a webkit browser.
The bandwidth saved once gzipped cannot possibly outweigh the downside of another HTTP connection for the JS file and then the processing time needed to run it. Additionally a JS file at the top of your page will be blocking.
The benefit to the JS method is developer convenience.
I keep seeing box-shadow used as an example in projects like this, but my understanding is that all browsers which support box-shadow now support it without any prefixes. If this is the case, aren't we better off to only have the generic .box-shadow, and not including any of the vendor prefixes?
I have been using my own version of something similar to this for other CSS properties. This looks more complete than my own, so I look forward to trying it out. Thanks for putting this together.
In building this, I had to look this up for each rule. http://CSS3Please.com has the most compact 'reasoning' for each in the form of comments.
To answer your specific question, all browsers that support it do so without prefixes, but not all browser versions. For example, even with auto-updates, a non-negligible percentage of Chrome browsers out there are older.
Great lib, thanks. (How did you know I was searching for something like this yesterday? :) )
I hope to see more and more component libraries for less being built -- both low level ones like this, and higher level widget kits, and finally full framework kits like bootstrap. Less provides such a great way to do mix and match with proper factoring that I feel a real design-dev ecosystem could be built with it. Particularly if some conventions about naming variables for various things like colors and borders start seeing widespread adoption -- theming becomes a matter of setting the right variables.
(aside: coincidentally, I think the biggest problem with bootstrap and why bootstrap sites aren't as custom as they really could be is this that a lot of variables aren't nicely exposed for theming purposes, in some cases values that don't need to be hardcoded are, and deep in the project. This is also true of other, similar frameworks I investigated.)
It's not quite as complete, and comes with other idioms as well so it's not as portable. I'm not really sure why they put so many different things in a single file to be honest.
This looks fantastic. I've been using a similar (but less complete) css3 less file in some of my projects. It's nice to have a more complete one available.
Sorry but this type of libraries are only going to enforce in me the idea that stylus is the best option out there.
Want mixins? then use that `mymixin( arg, arg2 );`. Want simply overloaded/overridden standard properties to extend support for non-standard-compliant environments? use `box-shadow: 0px 2px 0px rgba(0,0,0,0.4);` with the nib extension, or build it by yourself.
Nice! I too like the idea of having a tiny module that does only this, rather than using a big library like Bootstrap or the LESS equivalent of Compass. I added a pull request that puts the Opera prefixes into a separate file since it has a small market share. It's like the webkit-only version, only less minimalistic, and is closer to what someone who writes their own CSS might do.
I used LESS Elements for a while -- its shortcomings caused me to build this. I can't fault LESS Elements too much since I think the problems it has are caused by choosing a syntax before CSS3 was stabilized.
The main issue it has is that it often puts parameters in a different order than the CSS3 spec making it a huge pain to remember.
Good work on this. Personally, I tend to use Preboot (http://markdotto.com/bootstrap/), which was the precursor to bootstrap, before they tacked on the kitchen sink.
[+] [-] po|14 years ago|reply
http://leaverou.github.com/prefixfree/
I can see arguments for both leaning on JavaScript or doing it server side as this one does. One benefit of doing it on the client is that it only generates the relevant prefixes. There is no need to send down opera-specific prefixes to a webkit browser.
[+] [-] JoelSutherland|14 years ago|reply
The benefit to the JS method is developer convenience.
[+] [-] cristiantincu|14 years ago|reply
http://dev.opera.com/articles/view/opera-mobile-emulator-exp...
[+] [-] nosecreek|14 years ago|reply
I have been using my own version of something similar to this for other CSS properties. This looks more complete than my own, so I look forward to trying it out. Thanks for putting this together.
[+] [-] JoelSutherland|14 years ago|reply
To answer your specific question, all browsers that support it do so without prefixes, but not all browser versions. For example, even with auto-updates, a non-negligible percentage of Chrome browsers out there are older.
[+] [-] sophacles|14 years ago|reply
I hope to see more and more component libraries for less being built -- both low level ones like this, and higher level widget kits, and finally full framework kits like bootstrap. Less provides such a great way to do mix and match with proper factoring that I feel a real design-dev ecosystem could be built with it. Particularly if some conventions about naming variables for various things like colors and borders start seeing widespread adoption -- theming becomes a matter of setting the right variables.
(aside: coincidentally, I think the biggest problem with bootstrap and why bootstrap sites aren't as custom as they really could be is this that a lot of variables aren't nicely exposed for theming purposes, in some cases values that don't need to be hardcoded are, and deep in the project. This is also true of other, similar frameworks I investigated.)
[+] [-] micheljansen|14 years ago|reply
[+] [-] JoelSutherland|14 years ago|reply
[+] [-] justjohn|14 years ago|reply
I would reccomend also taking a look at this border-radius mixin: http://tech.matchfwd.com/a-better-border-radius-mixin-in-les... it's quite well done using guard statements to allow more fine-grain control.
[+] [-] yuchi|14 years ago|reply
Want mixins? then use that `mymixin( arg, arg2 );`. Want simply overloaded/overridden standard properties to extend support for non-standard-compliant environments? use `box-shadow: 0px 2px 0px rgba(0,0,0,0.4);` with the nib extension, or build it by yourself.
[+] [-] benatkin|14 years ago|reply
[+] [-] dlsym|14 years ago|reply
Thanks!
[+] [-] JoelSutherland|14 years ago|reply
The main issue it has is that it often puts parameters in a different order than the CSS3 spec making it a huge pain to remember.
[+] [-] daniel_sim|14 years ago|reply
[+] [-] jscheel|14 years ago|reply
[+] [-] xtian|14 years ago|reply
http://thoughtbot.com/bourbon/
[+] [-] shpoonj|14 years ago|reply
I would suggest either minifying it or aligning the properties. Or both!