A Script to Eliminate Vendor Prefixes in CSS [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

Is there a script out there that I can just include on my site that will automatically throw in the vendor prefixes to CSS? I'd like to just write standard CSS so in a few years I don't have to go back and strip out the vendor prefixes.

Answer 1

Just found this, it looks perfect: http://leaverou.github.com/prefixfree/

Answer 2

I dont know of a script to do this specifically but ive been writing everything in LESS instead of straight CSS. This way you can put things like gradients in mixins (kinda like functions) and then you only have to change one small set of declarations. instead of doing it over multiple files. Of course mixins in general lead to a lot of reuse not jsut for vendor declarations but for lots of things (for example i typically define a color palette and icon sets as well as grid mixins based on 960.gs).

On dynamic sites i usually set things up to compile on the server side and cache. On static sites i just use a shell script to compile the less down to css directly before i deploy.

Answer 3

I wrote just such a script, used in production and without dependencies: http://imsky.github.com/cssFx/

Answer 4

Given the cascading nature of CSS you could include two stylesheets, the firstsecond of which follows official CSS3, and the secondfirst one of which overrides certain settings to do the vendor specific stuff you need to make it actually work. Then in future you (obviously) just remove the secondfirst stylesheet...

Answer 5

There's no reason to eliminate vendor prefixes, unless you dislike them adding clutter to your code.

As to why they're there in the first place, this article at A List Apart http://www.alistapart.com/articles/prefix-or-posthack/ provides valuable insight. Basically, it's easier to have them then it is not to have them.

If your CSS cascades correctly like:

-webkit-border-radius: 5px;
        border-radius: 5px;

Then when Chrome and Safari drop the vendor prefix the style will cascade naturally and you don't have to remove anything (unless you are worried about the extra bytes they add).