CSS3 let’s you do a lot of cool stuff, most of which add graphical enhancements like gradients and rounded corners, all of which are great. Lately however, I think my favorite new property is box-sizing.
There are two modes: content-box and border-box. content-box is default, and will calculate the true width for an element as width+padding+border. So if you have a child <div> with 100% width and 10px of padding, it will extend outside the parent <div>. Here’s an example of content-box:
The parent<div> has a black background and the child has a red background with 50% opacity (rgba is another awesome new tool to use with css)
With border-box, the padding and border are included in the width of the element. So an element with width: 300px; and padding: 10px; will still have a width of 300px, rather than 320px. Here’s the example from above using border-box:
This allows for more fluid specification of widths in a lot of instances. Say you need a textarea with width: 100%, you can add padding to it and not have to worry about it extending to be wider than what you really want. Before, I always had to set a fixed width, which obviously isn’t ideal when developing a site you want to work in a variety of resolutions and devices (mobile).
The box-sizing property doesn’t work in IE 7, but you can get around that with this.
Here’s how you implement it:
box-sizing: border-box; /* Firefox */ -moz-box-sizing: border-box; /* Webkit */ -webkit-box-sizing: border-box; /* IE */ -ms-box-sizing: border-box; /* Opera */ -o-box-sizing: border-box;
Hope this helps you out like it has helped me!
The past year plus, whenever I’ve had free time, I’ve used to it to familiarize myself with WebGL, a new technology that allows some pretty awesome graphics to work in your browser without any plugins (utilizing HTML5′s <canvas>). Part of that time has been spent developing a game (which can be very hard work), and I even used the technology to make my girlfriend’s anniversary gift.
