Using TextMate for easier CSS3

Over the past couple of years Webkit has popularised many fancy new CSS tricks. Amongst these the ability to rotate an element is certainly one of the most useful. Fortunately it’s also widely supported in other browsers, even in lowly old IE right back to version 5.5. The ‘modern’ browsers support this with a reasonably simple syntax

[-vendor-prefix-]transform: rotate([angle]deg);

so to use this to rotate an element by 15 degrees in Webkit (e.g. Safari, Chrome), Mozilla and Opera you’d use

-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg); ```

We include the rule without a vendor prefix so that once browsers start to implement this without requiring the use of it our CSS will be ready.

Sadly the syntax for Internet Explorer is a little more cumbersome. It uses the DXImageTransform.Microsoft.Matrix filter which is a little cryptic, but fortunately quite well documented on [MSDN](http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx). We also need 2 variations of this filter, one for IE < 8 and another for IE ≥ 8.

To use the filter the first thing we need to do is convert our angle into radians (angle in radians = angle in degrees * π / 180) then we work with the sine and cosine of this angle:

`DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=[cos(angle)],M12=[-sin(angle)],M21=[sin(angle)],M22=[cos(angle)]);`

So if we take our rotate by 15 degrees example from above we’d end up with the following to cover all IE versions:

filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.965925826289068,M12=-0.258819045102521,M21=0.258819045102521,M22=0.965925826289068);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.965925826289068,M12=-0.258819045102521,M21=0.258819045102521,M22=0.965925826289068)";```

Obviously we don’t really want to have to whip out a calculator and type 6 lines of CSS every time we want to rotate an element. To save myself a little time I created a TextMate bundle that simplifies the process a bit. This bundle allows me to type the standard syntax.

transform:rotate(-10deg)

Then hit a keyboard shortcut to have TextMate fill in the rest.

To add this bundle go to Bundles > Bundle Editor > Show Bundle Editor

Select CSS from the list on the left and side of the editor and select Add new command from the buttons at the bottom. Paste the following into the Command(s) field

```

!/usr/bin/env ruby

line = $stdin.read
if line =~ /(s)transforms:srotates(s(-?[0-9]+)sdegs*)/i
rad = $2.to_i * Math::PI / 180 cos = Math.cos(rad) sin = Math.sin(rad)

print $`
print $1 + "-moz-transform:rotate(" + $2 + "deg);n"
print $1 + "-o-transform:rotate(" + $2 + "deg);n"
print $1 + "-webkit-transform:rotate(" + $2 + "deg);n"
print $1 + "transform:rotate(" + $2 + "deg);n"
print $1 + "filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" +     cos.to_s + ",M12=" + (sin * -1).to_s + ",M21=" + sin.to_s + ",M22=" + cos.to_s + ");n"
print $1 + "-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=" + cos.to_s + ",M12=" + (sin * -1).to_s + ",M21=" + sin.to_s + ",M22=" + cos.to_s + ")";n"
print $'

else
print line end

print $`
print $1 + "-moz-transform:rotate(" + $2 + "deg);n"
print $1 + "-o-transform:rotate(" + $2 + "deg);n"
print $1 + "-webkit-transform:rotate(" + $2 + "deg);n"
print $1 + "transform:rotate(" + $2 + "deg);n"
print $1 + "filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" +     cos.to_s + ",M12=" + (sin * -1).to_s + ",M21=" + sin.to_s + ",M22=" + cos.to_s + ");n"
print $1 + "-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=" + cos.to_s + ",M12=" + (sin * -1).to_s + ",M21=" + sin.to_s + ",M22=" + cos.to_s + ")";n"
print $'
-moz-box-shadow: 0 2px 5px #333; -webkit-box-shadow: 0 2px 5px #333; box-shadow: 0 2px 5px #333;undefined -moz-box-shadow: ${1:x offset} ${2:y offset} ${3:blur radius} ${4:color}; -webkit-box-shadow: ${1:x offset} ${2:y offset} ${3:blur radius} ${4:color}; box-shadow: ${1:x offset} ${2:y offset} ${3:blur radius} ${4:color};undefined -moz-box-shadow: x offset y offset spread color; -webkit-box-shadow: x offset y offset spread color; box-shadow: x offset y offset spread color;undefined -moz-border-radius: ${1:1em}; -webkit-border-radius: ${1:1em}; border-radius: ${1:1em};```

TextMate is a wonderful editor and snippets really do make this stuff a breeze.