There is all about CSS vendor prefixes at the moment. PPK doesn’t like them at all, the W3C is afraid that webkit might rule the world, developers seem to find that webkit is the only mobile browser around.

Agreed, the CSS vendor prefixes make verbose code. It’s ugly, and sometimes it’s a lot of typing. But they pinpoint a real problem, browsers need them, and although maybe obsolete in the future, if you want your code cross browser now and future-proof you simply have to use them. No matter if they’re going to be abolished or not. No matter what solutions is to be found tomorrow.

But what most people fail to notice, that it’s actually an IDE/deployment problem. If IDE can spellcheck and code-complete why can’t they extend CSS prefixed rules.

Well they can. So we created a macro for Netbeans. Netbeans is our favourite PHP-IDE.  The macro recorder in Netbeans is easy and fast, so it suits.

Just add  a Macro in Netbeans: tools -> options ->  editor -> macros -> new.

Paste this

copy-selection-else-line-down copy-selection-else-line-down copy-selection-else-line-down copy-selection-else-line-down copy-selection-else-line-down caret-up caret-up caret-up caret-up caret-begin-line caret-forward delete-next "moz" caret-down caret-begin-line caret-forward selection-forward "ms" caret-down caret-backward selection-backward "webkit" caret-down caret-backward caret-backward caret-backward caret-backward caret-backward selection-backward "khtml" caret-down caret-backward caret-backward caret-backward delete-previous delete-previous delete-previous

And give it a proper shortcut CTRL + ] is free.

Then start writing your code for the least popular browser, but it has the shortest prefix vendor: Opera.

-o-transition: opacity 1s ease-in 1s;

Put your cursor soemwhere in the line and press CTRL + ]

You get this result

-o-transition: opacity 1s ease-in 1s;
 -moz-transition: opacity 1s ease-in 1s;
 -ms-transition: opacity 1s ease-in 1s;
 -webkit-transition: opacity 1s ease-in 1s;
 -khtml-transition: opacity 1s ease-in 1s;
 transition: opacity 1s ease-in 1s;

Probably khtml can be skipped, I don’t know the market share, but let’s try to support everything.

Has become hell a heaven. No but it isn’t that bad any more. Are they’re caveats. Sure, like different implementations, but that should be corrected by hand.

Important thing is, the rule without a prefix should end the list.

Tags: netbeans

This entry was posted on Wednesday, February 15th, 2012 at 5:50 pm and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.