LESS Prefixer | Hacker News Reader

LESS Prefixer

lessprefixer.com

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.

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.

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

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

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.

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.

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.

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

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

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.

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!

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.

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.

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

Thanks!

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.

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

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.

Bourbon is another alternative for SASS.

http://thoughtbot.com/bourbon/

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!

Reply on news.ycombinator.com