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*:s*rotates*(s*(-?[0-9]+)s*degs*)/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```

Then select Save: Nothing, Input: Selected text or Line and Output: Replace Selected Text. Now you need to setup how you’ll trigger this. Select Activation: Key Equivalent and then enter the keyboard shortcut you’d like – I’m using <kbd>Shift + Cmd + R</kbd>

![bundle-editor](http://think-robot.com/wp-content/uploads/2010/09/bundle-editor-300x180.png "bundle-editor")

Finally close the bundle editor and select Bundle > Bundle Editor > Reload Bundles and you should be good to go.

Of course there are many other CSS3 properties that up until now have been implemented using vendor prefixes in some browsers. We can simplify creating these with some more TextMate snippets. I’ll include a couple of examples here, firstly box-shadow. Webkit and Mozilla support this using a vendor prefix, Opera and Internet Explorer 9 use the standard property. The syntax is:

`[-vendor-prefix-]box-shadow: [x offset] [y offset] [blur radius] [color];`

So to create a drak grey shadow just offset slightly below an element we might use something like this:

-moz-box-shadow: 0 2px 5px #333;
-webkit-box-shadow: 0 2px 5px #333;
box-shadow: 0 2px 5px #333;```

For the TextMate snippet we’ll use tab triggers and placeholders – this let you type a keyword and hit the tab key to insert the text of the snippet with placeholder values inserted with the first placeholder selected so you can fill in a value, tabbing again moves onto the next placeholder and so on. Open up the bundle editor from Bundles > Bundle Editor > Show Bundle Editor and select to add a new snippet under the CSS section. Paste the following into the snippet window:

-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};```

Select Activation: Tab Trigger and type in the word box as the trigger. Name this snippet box-shadow and exit the bundle editor. Relaod bundles to give it a try. In a CSS file now type box and hit the tab key. The following should be inserted:

-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;```

with the x offset text highlighted. Starting to type will overwrite all the x offset placeholders, hitting tab again will move onto the y offset. Easy. You could add another snippet that provided box shadows using the inset modifier.

[-vendor-prefix-]box-shadow: inset [x offset] [y offset] [blur radius] [color];

border-radius might also be a good candidate for a time-saving snippet. Probably the most common use of this is where we want to specify equally rounded corners on all round our box. We could use the same style of tab triggered snippet as with the box-shadow example. The snippet would be very simple with just a single placeholder – something like this:

-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.