• Read more about Why you should use border-box for everything

Internet Explorer 6. The name still sends chills down the spine of any web designer. The compatibility nightmare that refuses to die, IE6 has cost developers countless hours of productivity. One of the most diabolical of the compatibility issues is the difference in box models: namely, while "width" and "height" specifications referred to the content of a container (according to the W3C and CSS specifications), IE6 used "width" and "height" to describe the box as a whole, including borders and padding. This made it extremely difficult to write compatible code (without invoking standards mode in IE6). There's just one thing that bugs me about this: I think that Microsoft was right in defining the box model that way.

• Read more about Toggle CSS3 Bookmarklet

If you’ve begun to use CSS3 experimental features in your sites lately such as box-shadow, border-radius or text-shadow, you know how much pain it can take away from the design process. Unfortunately, lots of people are still using Internet Explorer and can’t see all these pretty additions you’ve added.

I thought it would be useful to have a simple way to run a sanity check on my design to make sure it wasn’t going to look awful or unreadable once all of the CSS3 goodies were taken away. With that in mind, I created a bookmarklet that will toggle the display of all of that modern goodness.

Just drag this link: Toggle CSS3 into your bookmark toolbar. Then, by clicking it, you can turn off (and back on) the most common CSS3 improvements. Once installed, if you visit a page such as CSS3.info and click the bookmarklet, you should see the CSS3 effects toggle off.

Note that this is a simple, none-too-bright bookmarklet and only removes the obvious traces of CSS3. It doesn’t inspect your CSS for non-supported color values (like RGBA) or deal with many of the more advanced features of CSS3. In fact, all it does is eradicate these styles:

• border-radius
• box-shadow
• text-shadow
• border-image
• background-origin
• background-clip

However, it’s still a useful tool if you’re designing for the future with an eye for the past. Enjoy!

• Read more about What the World Needs Now is CSS3

The discussion around HTML 5 has been heating up recently, with people advocating to get it finalized and implemented sooner rather than later (and lamenting the ulterior motives of major browser vendors in lobbying for specs). I simply can’t get passionate about this fight, much as I’ve tried. While some of the things that HTML 5 offers will certainly be a boon for web developers, by and large the issues that it addresses (in terms of interactivity) are surmountable simply by using the excellent Javascript libraries we’ve all become dependent upon. The next version of the CSS specification, however, is an entirely different story.

I recently started a new project and as an experiment decided to play with using the non-final border-radius implementations available in Firefox and Safari. After using it for about 15 minutes, I decided that I would simply forgo rounded corners in the interface for Internet Explorer. After using it for three days, I am wondering why every designer and developer on the internet isn’t simultaneously demanding immediate forced adoption of CSS3.

Styling is Fun Again

Our interfaces and style tastes have grown much more complex as the web has grown up, but the tools we use to implement those styles haven’t been keeping up. It shouldn’t feel like a trip to the dentist just to get a box to have some rounded edges. It shouldn’t be a nightmare to try to use translucent pngs for overlays (admittedly this has nothing to do with CSS3 and everything to do with IE6, the browser that won’t die no matter how much we pray).

I can tell you that styling on the edge doesn’t just feel good, it feels amazing. I’m able to implement in a few seconds what I might otherwise spend three hours styling while polluting my markup with hack tags.

Rounded Corners: Nemesis of Designers Everywhere

There is no good way to make rounded corners. The javascript libraries are buggy, images are limited in practicality, and getting it just right in all browsers is downright painful and usually ends up with markup something like this (and a whole mess of CSS to go with):

<div class='rounded'>   <div class='tl'>     <div class='tr'>       <div class='bl'>         <div class='br'>           So much for semantics...         </div>       </div>     </div>   </div> </div>

In the CSS3 specification, the same effect is achievable like so:

.rounded { border-radius: 10px; }

But it’s not just a convenient way to shortcut the hacks to which we’ve all grown accustomed, it opens up entirely new possibilities for design that would simply not be worth the effort to hack without it.

Lead By Example

Let me explain what I mean by example. Form design has always been one of the trickiest parts of web design, what can we do with a little CSS 3 magic? Let’s say we have a simple form that takes a person’s name:

<form id='sample_form'>   <label for="name">First Name:</label>   <input type='text' name="name" id="name"/><br/>      <label for="name">Last Name:</label>   <input type='text' name="name" id="name"/><br/>      <button type="submit">Submit</button> </form>

Simple enough, this turns out looking something like this:

Now we can add some standard CSS to make it look a little more acceptable:

label {   display: block;   float: left;   width: 100px;   font-weight: bold;   padding: 4px 5px;   font-family: Verdana, sans-serif;   font-size: 12px;   margin-bottom: 5px;   clear: both;   text-align: right; }  input {   font-size: 12px;   margin-bottom: 5px; } button {   margin-left: 115px;   margin-top: 10px; }

And our result is a perfectly usable form:

But what if we use just a taste of what CSS3 has to offer? We can make a form that looks completely unique without using a single image:

label {   display: block;   float: left;   width: 100px;   padding: 4px 5px;   border: 2px solid #037;   background: #06a;   color: #fff;   font-family: Verdana, sans-serif;    font-size: 12px;   margin-bottom: 5px;   font-weight: bold;   clear: both;   text-align: right;   border-radius: 13px;   border-top-right-radius: 0px;   border-bottom-right-radius: 0px; }  input {   background: #fff;   border: 2px solid #8ac;   border-left: 0px;   padding: 5px 5px;   margin-top: 0;   margin-bottom: 5px;   margin-left: 0;   border-radius: 5px;   top-left-radius: 0px;   border-bottom-left-radius: 0px; }  button {   background: #080;   color: #fff;   border: 2px solid #060;   font-size: 12px;   font-weight: bold;   margin-left: 112px;   padding: 5px 10px;   border-radius: 13px; }

It’s a hefty chunk of code, but anyone experienced in writing CSS can knock something like that out in about five minutes. The result is well worth it:

This kind of styling opens up with the application of just a single new attribute from the CSS3 draft specifications. Designers have had to hack, cheat, and wrangle every semi-complex interface that has been developed in the last 5 years thanks to the limitations of CSS (and more specifically the limitations of Internet Explorer), but it doesn’t have to stay that way forever.

State of the Browser

The complete CSS3 spec is not coming to a browser near you any time soon (more accurately not all browsers), and that’s a real shame. It brings to the table powerful new tools that can really enable the kind of semantic markup that we all wish was possible with today’s browsers. Rounded corners are just the “tip of the iceberg”; once CSS3 sees widespread adoption, interface design will take a leap forward unlike any it has seen before.

In the meantime, keep an eye out on the WebKit Nightlies for cutting edge CSS implementations (just added: CSS Variables). Five years from now we’ll look at the troubles we used to have and laugh. Until then, a person can dream…