Sometimes the frame makes the picture -- there's nothing like a good border to wrap your ever-so-important content. Here, we'll explore how CSS3 will help skinny up our markup when putting our content inside fancy borders.
Old School Borders - Respect your Elders!
I've you've ever owned the title "Webmaster" (c'mon, fess up!), then you've probably been doing Web development long enough to remember how fancy borders were done back in the 90s. The tactic frequently involved creating no fewer than eight images, one in each cell of an HTML table, like so:
There are tons of problems with this approach, obviously. For starters, that's a boatload of markup for a simple border. There's also the fact that your clients have to download all those images in order to render the page. And, if the size of the content were to increase too much, you'd have to create new images.
In order to get around many of these problems, Web developers began using the background attribute of the td tag to contain the entire border image. This definitely alleviated much of the extraneous markup, although it required a bit of finagling with the cellpadding, width, and height attributes in order to get the content placed properly. Not to mention, we still haven't solved the problem of needing to create a new image whenever content size changes.
Slimmin' and Slidin'
When CSS came on the scene, it introduced some additional options for framing your content. One neat technique is called Sliding Doors, which involves two images -- one is just a cap, and the other is an extra-long version of the rest of it. See here -- we have a cap image on the left, and the content image on the right:
By using some CSS magic, the longer image can slide behind the cap image, which makes it possible to dynamically increase the size of the content (in one direction, at least), without having to produce new images. Here's the markup for that:
This approach takes more characters of code than the previous approach, but it sure is nice not having to re-create our border image when the content grows! Plus we've achieved a separation of content and presentation.
But we still have some HTML pounds to shed. After all, if we're going for semantic markup, what the heck is that "content-wrapper" class doing in there?! It's quite meaningless, since it doesn't add any semantic value. It's really only there as a hook for our CSS, so in the markup, it's just extra noise.
CSS3 Puts HTML Borders on a Diet
CSS3 introduces some new properties that will make our mostly-semantic, medium-weight HTML even slimmer. Check it out:
Sweet! We've slimmed up our markup to just the semantics, and there's only one rule in the CSS. Furthermore, the client has to download a grand total of... (wait for it...) zero images. So not only is our markup slimmer and more appropriate, but there are fewer bytes to download in order to render the page!
Well, CSS3 definitely helps us keep our markup clean for rendering borders. And there are many other ways that CSS3 can shed those excess pounds. We'll hit those bits soon, so stay tuned!
No comments:
Post a Comment