Firehed's Blog

Quick TextMate snippet for you, this one for dealing with all of the browser-specific CSS3 properties that you have to use because the spec is still in draft form. border-radius comes to mind, as does the border-image property I've been playing around with recently. There are tons more; check out www.css3.info for details.

I have the following bound to Tab Trigger "-" in TextMate, with the following scope: source.css meta.scope.property-list
-webkit-$1: $2;
-moz-$1:    $2;
-o-$1:      $2;
-icab-$1:   $2;
-khtml-$1:  $2;
-ms-$1:     $2;
$1:         $2;
$0
Very quick and handy way to drop in all of the browser-specific prefixes (that I'm aware of), plus the finalized version for future compatibility, in one fell swoop. -{tab}border-radius{tab}3px potentially gives me a 3px border radius across all browsers, though obviously support is mixed between different browsers and the various properties. As you might expect, the -ms- prefix is almost never used, though it looks like they'll try to use it for css3 properties still in draft spec in IE8. The good thing with CSS3 is that it's almost entirely to add graphical flair to a page, so it tends to degrade very gracefully if the property isn't supported in a browser (as compared to, say, doing absolutely anything in IE6).

Also, this should work fine in e, the Windows TextMate counterpart, as well as any other text editors that support TM's snippet syntax. Of note, the meta.scope.property-list part of the snippet scope restricts this specifically to the area between braces of an element property, so it won't fire off anywhere with a CSS scope (embedded in HTML or an external file). Interestingly, there are only a couple of CSS properties in the default TextMate bundle that behave that way; most of the CSS snippets can be triggered even if you're not in an element's property list. Oh well.