Vendor prefixes are the verbose code you see in new `HTML5` sites, in which browser vendors test their new CSS3 rules, when specs are in proposal time or under development.
Something like:
-o-transition: opacity 1s ease-in 1s; //opera
-moz-transition: opacity 1s ease-in 1s; /firefox
-ms-transition: opacity 1s ease-in 1s; // internet explorer
-webkit-transition: opacity 1s ease-in 1s; // safari , chrome
-khtml-transition: opacity 1s ease-in 1s; // konquerer , linux
transition: opacity 1s ease-in 1s; // all when it's official spec
The problem is that most developers seem to do just this:
-webkit-transition: opacity 1s ease-in 1s; // safari , chrome
So they only support webkit browsers and that is plain dumb. At least you should always add the rule without any prefix. That means eventually it will work in every browser that supports it.
Typing all the rules is a pain in the ass, so most developers only do webkit, probably also because Apple invented quite a lot for transitions etc. At that time it was not supported by any other browser, so why on earth should you add code that has no meaning. Well because you care about the future and care about different minded people.
Two helpful solutions
First there are macro’s for IDE’s to type one rule and auto generate the other ones. Here is a CSS vendor prefix macro for Netbeans. Not much of a hassle.
Secondly you can call userJS to the rescue, userJS is like userCSS a rather underestimated part of the internet, but yet a very valuable one. It let you overrule CSS rules or run own JS in websites.
For Opera add this as a userJS:
opera.addEventListener('BeforeCSS', function(userJSEvent){
userJSEvent.cssText = userJSEvent.cssText
.replace(/-(moz|ms|webkit|o)-(border|text-overflow)/g,'$2')
.replace(/-(moz|ms|webkit)-(gradient|transform|transition)/g,'-o-$2');
}, false);
It will automatically rewrite all -webkit- rules to -o- rules in Opera, so all the webkit demo’s will start to work. (if Opera supports them)
Caveats
- Code (css specs) can change during development.
- Implementations differ between vendors.
Of course these are workarounds, I still think developers should add all vendor prefixes to their code. It can be automated in an IDE like with mentioned macro for Netbeans or in deployment.