CSS3 and Something Personal
Monday, August 16, 2010 at 5:48PM John Allsopp's CSS3 class starts today over at Sitepoint.
I've got it opened in another tab, but I've yet to get my feet wet. I'm looking forward to it. I've dabbled a bit in CSS3 over on another Squarespace site I'm working on, Don't Forget Your Treats. It's a personal foodie site that my wife and I are working on. There isn't really much there at the moment. I'm still working on getting some of the art assets together, but I think it's coming along nicely.
Funny I started that paragraph with the intention of talking about CSS3 but I derailed myself. I don't think I'll go back and edit that out. So moving along. Like all the new emerging web standards, I'm looking forward to learning more about CSS3. I know there are lots of cool things coming with CSS3, from rounded corners and animation, to drop shadows and gradients, but I think the thing I'm most excited about is columns.
I know it seems a bit silly. It's not as fancy as being able to create in a few lines of code what used to require Photoshop. But, in a way it's just as big a time saver. When you have to create a columned layout now it coding your CSS, and then much trial and error with the content. Once we're able to implement CSS3 elements it will save hours of time coding and allow designers and developers more time to work on other areas of the sites we're creating or spend time doing something else entirely.
Here is an example from the W3C spec that I linked earlier.
#cols { columns: 2 12em }
Basically that is short hand for 2 columns that are 12ems wide. And that's all you have to do. Now you put your text into your div and it will flow from one column to the next. Columns are intended to work pretty much the same way that it does in InDesign or any of it's competitors. You're even able to add a gutter widths and borders. After looking at how simple it is to implement, it's probably easy for anyone familiar with how things currently work with CSS to see why this feature gets me so excited.