LESS Prefixer

http://lessprefixer.com/

by JoelSutherland • 14 years ago

45 20 14 years ago

lessprefixer.com

daniel_sim• 14 years ago

Ahhh great! I've been rolling my own as I go, but this will save a lot of time and effort.

micheljansen2• 14 years ago

Most of these are also in Twitter Bootstrap 2 (see mixins.less).

JoelSutherland4• 14 years ago

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.

micheljansen2• 14 years ago

Agreed. This is a useful project, but it stands or falls on maintenance. Kudos for putting it on Github. I hope you will take good care of any pull requests!

po• 14 years ago

There is also Lea Veriou's prefix free project.

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.

JoelSutherland4• 14 years ago

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.

cristiantincu• 14 years ago

Opera-specific prefixes to WebKit? No. WebKit-specific prefixes to Opera? Maybe yes.

http://dev.opera.com/articles/view/opera-mobile-emulator-exp...

dlsym• 14 years ago

Looks like a more complete alternative to http://lesselements.com/

Thanks!

JoelSutherland4• 14 years ago

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.

shpoonj• 14 years ago

This is great... wish I'd had it before I made my own.

I would suggest either minifying it or aligning the properties. Or both!

nosecreek2• 14 years ago

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.

JoelSutherland4• 14 years ago

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.

talmand• 14 years ago

That's one of the many problems with the prefixes, we're stuck with them until we're sure that all the "modern" browsers' old versions are no longer in use. Thankfully for most of those it shouldn't take that long.

nosecreek2• 14 years ago

Chrome supports .box-shadow without prefixes 8 versions back according to http://caniuse.com/css-boxshadow. It looks like the most likely place to run into trouble is the previous versions of Safari and iOS Safari, as well as all versions of Android Browser (this one surprised me). Personally, I will continue to use it without prefixes unless it is really important that the shadows work for mobile devices.

justjohn• 14 years ago

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.

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.

sophacles• 14 years ago

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.)

jscheel• 14 years ago

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.

yuchi• 14 years ago

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.

benatkin• 14 years ago

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.

xtian• 14 years ago

Bourbon is another alternative for SASS.

http://thoughtbot.com/bourbon/

LESS Prefixer

Related Stories