CSS3 Quickies

I did some web-design for a friend this January. I didn’t use HTML & CSS for a while, I did quite a bit of tinkering with the graphic design of scratchpad 6 months ago, using a custom font and trying a few ‘newish’ features like media queries. It was a good oportunity to discover & use the new HTML5 & CSS3 features.

My friend had a Joomla template he wanted to use for his site. His needs were limited: 5 pages and maybe a contact form. Hosting this with Joomla seemed a bit overkill, so I decided to ‘rip-off’ the template and create a clean HTML skeleton for him to us.

First we tried to work from the source of the template, but the template’s HTML & CSS were very hairy, I couldn’t wrap my head around it, so I decided to rewrite it from scratch. Who doesn’t love to reinvent the wheel? :)

I used purecss on the 1st version, but I wasn’t satisfied with the way it worked. I like to minimize HTML markup. I really dislike it there are 5 divs to size what should be a single box, when all you need to do is use CSS correctly. Unfortunately purecss works this way, you need to get your boxes inside other boxes to get things to work correctly. It’s understandable why they do that: it’s a CSS framework, the CSS directs the way the DOM is structured. CSS is complicated to get to work without a few intermediate steps. Since I was here to learn more about CSS, I dropped purecss, started using what I learned studying it for the new template.

Here are the few things I tried while working on the site:

box-sizing

box-sizing: border-box is handy: it includes the border & the padding in the box’s size. If you have 2px borders and a 1em padding in a 200px box, the box will be 200px with 2px off for the border and 200px - 2 × 2px = 196px of usable space. It simplify box’s placement, no more: My borders are 4px, my box is 200px so that’s 4 × 2 + 200 = 208px… It’s only supported by IE9+, and it needs a prefix on some browsers like Firefox. I used it when developing the site, at the end of the design process I removed it, I had to make a few adjustments here and there, but it was easy to do. border-box was neat though: no more pointless tinkering. I’ll use it again for sure.

Media queries

Media queries are the basis of responsive design. Instead of using pixels as a unit like most do, I use ems, the typographic unit of measure. That made many things simpler, like re-calculating the size of the grid when adjusting the font size.

While media queries aren’t that easy to use & lack expressive power there weren’t too bad and I managed to do what I wanted without too much thinkering.

inline-block

display: inline-block; allows you to simplify box packing: designing layouts requires less tweaks and hacks. inline-blocks are well supported by all modern browsers. IE6 supports it –short-of–, and it even works correctly on IE7! I’m kind of late to the party, better late than never.

CSS3 transition

Fancy, but meh. It’s all eye-candy, and I don’t think it improves usability / readability one bit. I’ll still used them there and there to fade in and out bits of interface.