CSS on the Horizon

Alright boys and girls, put your propeller hats on, we’re going to talk about CSS, what’s cool, and what’s coming up on the horizon. If you’d like to follow along, be sure to have Firefox, Chrome (or Safari) and Internet Explorer ready to go. You might want to view this post in all three.

For a long time, CSS was limited to boxes, borders, colors, repeating backgrounds, and simple text styling. Currently, transparency in PNG files, and some other clever techniques have enabled the use of a perverse number of layered gradients in our designs.

More recently, specialized web platforms (Apple’s Safari Mobile, Android’s Browser and Palm’s WebOS) have bundled additional fonts, and adopted the latest and greatest CSS properties to enable things like image rotation, multiple backgrounds, and text shadows. Some of these new CSS properties are even available in our favorite desktop browsers.

The first item that I’ll touch on is probably one of the stranger CSS properties available, but it’s a godsend to anyone who ever wanted to make a newspaper or magazine style layout for their site. I’m talking about text columns. Text columns that flow from one to the next can really sell that print medium inspired layout you’ve been working on.

Actually, if you’re reading this in Firefox, Safari or Chrome, you should note that this paragraph is split into two columns, just like your favorite printed publication. The nature of the web is that pages have no real bottom (unlike in the print world), so some say that this is more of a visual style than a practical improvement in readability. Others hate long lines, so the divide is there, but for us designers and developers to have the option would be great. Currently Firefox and Webkit are the only browsers with robust support for this CSS property. The good news is that Webkit is becoming more popular with each new smartphone sold by Apple & Palm, or any of the Android handset manufacturers (Samsung, HTC, Motorola, ASUS, Garmin, Dell)

.columns {
-moz-column-width:16em;
-moz-column-gap:2em;
-moz-column-width:16em;
-webkit-column-width:16em;
-webkit-column-gap:2em;
-webkit-column-width:16em;
}

Notice how the properties are repeated with the prefixes for Mozilla(Firefox) and Webkit(Safari, Chrome, webOS, Android) The native properties don’t use the prefix, but aren’t supported yet.

Rotation is one CSS effect that most of us have never used. The perfectly orthogonal grid that most photo galleries present can get boring real fast. Using a little rotation is a super quick way to spice up a photo gallery, but none of the browsers support it in a standard way. You’ll need to insert CSS rules for Firefox, Webkit(Safari, Chrome) and Internet Explorer. I know that some of you fellow IE haters out there are saying “What?” Yes IE supports it, but as with all things IE, there’s a caveat. IE will only let you rotate in 90 degree increments. Thanks again for nothing IE.

.rotation_shadow {
-webkit-transform: rotate(-5deg); /* negative rotation for Webkit */
-moz-transform: rotate(5deg); /* positive rotation for Firefox */
/* 90 degrees counter-clockwise for IE */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
/* Shadow for Firefox and Webkit */
-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
}