CSS vendor prefix macro for Netbeans

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.


2 Responses to “CSS vendor prefix macro for Netbeans”

  1. CSS vendor prefix issues - dev.webonomic.nl Says:

    […] 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 […]

  2. programmer Says:

    It doesn’t work really good on second thought, Netbeans docs are lacking on good info on writing macros and the macro language itself doesn’t seem very powerful.
    Can’t find a proper search and replace or regex command.
    Above example doesn’t work for background gradients, so it’s use is limited.
    Maybe updated later.