An Event Apart, Web Design

Everything Old Is New Again

November 2nd, 2010 by Matt Haff

Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.

Faux columns. Sliding doors. Image replacement. We rely on these techniques on a near-daily basis, but how will they be affected by the expanding vocabulary of CSS3? Will they be reworked, slimmed down, or abandoned altogether? An Event Apart cofounder and CSS mastermind Eric Meyer pulls some old standbys out of the toolbox and applies the capabilites of CSS3 to see how they can be made leaner, meaner, and more powerful.

Inline CSS

If you can have CSS in the page it will load much faster than an additional server call…even if it makes your file size a little bigger.

Box Sizing

Get rid of the stupid idea that a box width doesn’t include the padding or border size…

.col {
-moz-box-sizing: border-box; }

You can alter the layout of your site based on the width of the browser window with CSS.

@media all and (min-width:800px;) {
[wide layout rules]
}
@media all and (min-width:500px;) and (max-width:799px;) {
[narrow layout rules]
}
@media all and (max-width:499px;) {
[mobile layout rules]
}

Border Radius (Rounded Corners)

No more crazy hacks to get a fluid box with rounded corners…

.box {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; }

Multiple Backgrounds (Gradients)

Now you can make gradients with multiple background .PNGs

.gradient {
background-image: url(grad.png), url(grad1.png), url(grad2.png);
background-position: 50% 0, 0 0, 100% 0;
background-repeat: repeat-x, repeat-y, repeat-y;}

Dividers between list items

Navigation with borders between them? No more need to do have multiple styles for the different items.

#nav a:after {
content: “\2022″;}
#nav a:last-child:after {
content: “”;}