Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Modern CSS Layouts, Part 2: The Essential Techniques


In Modern CSS Layouts, Part 1: The Essential Characteristics1, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.

Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.

You can jump straight to:


CSS3, the newest version of CSS that is now being partially supported by most browsers, is the primary thing you need to know in order to create modern CSS web sites, of course. CSS is a styling language, so it’s no surprise that most of what’s new in CSS3 is all about visual effects. But CSS3 is about more than progressive enhancement and pretty typography. It can also aid usability by making content easier to read, as well as improve efficiency in development and page performance.

There are too many CSS3 techniques to cover in a single article, let alone an article that isn’t just about CSS3! So, we’ll go through the basics of the most important or supported CSS3 techniques and point you to some great resources to learn more in-depth.

CSS3 Visual Effects Link

Semi-transparent Color
Aids in: progressive enhancement, efficiency

RGBA10 allows you to specify a color by not only setting the values of red, green, and blue that it’s comprised of, but also the level of opacity it should have. An alternative to RGBA is HSLA11, which works the same way, but allows you to set values of hue, saturation, and lightness, instead of values of red, green, and blue. The article Color in Opera 10 — HSL, RGB and Alpha Transparency2012 explains how HSLA can be more intuitive to use than RGBA.

The 24 Ways web site14 makes extensive use of RGBA to layer semi-transparent boxes and text over each other.

RGBA or HSLA isn’t just about making things look cool; it can also improve your web site’s efficiency. You don’t have to take time to make alpha-transparent PNGs to use as backgrounds, since you can just use a color in the CSS, and the user agent doesn’t have to download those images when loading the site.

For more on how to use RGBA and HSLA, including fallback methods for browsers that don’t support it, see:

Styling Backgrounds and Borders
Aids in: progressive enhancement, efficiency

CSS3 offers a whole host of new ways to style backgrounds and borders, often without having to use images or add extra divs. Most of these new techniques already have good browser support, and since they’re mainly used for purely cosmetic changes, they’re a good way to get some progressive enhancement goodness going in your sites right away.

Here are some of the new things CSS3 lets you do with backgrounds:

  • Multiple backgrounds on a single element: You can now add more than one background image21 to an element by listing each image, separated by commas, in the background-image property. No more nesting extra divs just to have more elements to attach background images onto!
  • More control over where backgrounds are placed: The new background-clip22 and background-origin23 properties let you control if backgrounds are displayed under borders, padding, or just content, as well as where the origin point for background-position should be.
  • Background sizing: You can scale background images using the new background-size property24. While scaling won’t look good on many background images, it could be really handy on abstract, grunge-type backgrounds, where tiling can be difficult and where some image distortion would be unnoticeable.
  • Gradients: While just part of a CSS3 draft spec25, Safari, Chrome and Firefox support declaring multiple color and placement values in the background-image property to create gradients without images. This allows the gradients to scale with their container — unlike image gradients — and eliminates the need for page users to download yet another image while viewing your site.

CSS3 lets you do the following with borders:

  • Rounded corners: Use the border-radius-property26 to get rounded corners on divs, buttons, and whatever else your heart desires — all without using images or JavaScript.
  • Images for borders: With CSS 2.1, the only way to create a graphic border was to fake it with background images, often multiple ones pieced together on multiple divs. You can now add unique borders without having to use background images by adding the images to the borders directly, using the new border-image property27, which also allows you to control how the images scale and tile.

The border-radius property can be used to round corners and even create circles out of pure CSS, with no images needed. (Stunning CSS3 web site29)

These background and border techniques have already been covered well in a lot of great articles and tutorials, so check these out for the details:

Drop Shadows
Aids in: progressive enhancement, adaptability, efficiency

Drop shadows can provide some visual polish to your design, and now they’re possible to achieve without images, both on boxes and on text.

The box-shadow property45 has been temporarily removed from the CSS3 spec, but is supposed to be making its re-appearance soon. In the meantime, it’s still possible to get image-free drop shadows on boxes in Firefox and Safari/Chrome using the -moz-box-shadow and -webkit-box-shadow properties, respectively, and in Opera 10.5 using the regular box-shadow property with no prefix. In the property, you set the the shadow’s horizontal and vertical offsets from the box, color, and can optionally set blur radius and/or spread radius.

The Cherry web site47 uses drop shadows created with box-shadow on many boxes and buttons.

The text-shadow property48 adds drop shadows on — you guessed it — text. It’s supported by all the major browsers except — you guessed it — Internet Explorer. This makes it the perfect progressive enhancement candidate — it’s simply a visual effect, with no harm done if some users don’t see it. Similarly to box-shadow, it takes a horizontal offset, vertical offset, blur radius and color.

Using text-shadow keeps you from resorting to Flash or images for your text. This can speed up the time it takes you to develop the site, as well as speed up your pages. Avoiding Flash and image text can also aid accessibility and usability; just make sure your text is still legible with the drop shadow behind it, so you don’t inadvertently hurt usability instead!

For more on box and text drop shadows, see:

Aids in: progressive enhancement, adaptability, efficiency

CSS3 makes it possible to do things like rotate, scale, and skew the objects in your pages without resorting to images, Flash, or JavaScript. All of these effects are called “transforms.”57 They’re supported in Firefox, Safari, Chrome, and Opera 10.5.

You apply a transform using the transform property, naturally (though for now you’ll need to use the browser-specific equivalents: -moz-transform, -webkit-transform, and -o-transform). You can also use the transform-origin property to specify the point of origin from which the transform takes place, such as the center or top right corner of the object.

In the transform property, you specify the type of transform (called “transform functions”), and then in parentheses write the measurements needed for that particular transform. For instance, a value of translate(10px, 20px) would move the element 10 pixels to the right and 20 pixels down from its original location in the flow. Other supported transform functions are scale, rotate, and skew.

The BeerCamp SXSW 2010 site scales and rotates the sponsor logos on hover.

For the full syntax on these transform functions, as well as examples of how to use them, see:

Animation and Transitions
Aids in: progressive enhancement, efficiency

Animation is now no longer the solely the domain of Flash or JavaScript — you can now create animation in pure HTML and CSS. Unfortunately, CSS3 animation and transitions do not have very good browser support, but as with most of the effects we’ve talked about so far, they’re great for adding a little non-essential flair.

CSS3 transitions67 are essentially the simplest type of animation. They smoothly ease the change between one CSS value to another over a specified duration of time. They’re triggered by changing element states, such as hovering. They’re supported by Safari, Chrome, and Opera 10.5.

To create a transition, all you have to do is specify which elements you want to apply the transition to and which CSS properties will transition, using the transition-property property. You’ll also need to add a transition-duration value in seconds (“s” is the unit), since the default time a transition takes is 0 seconds. You can add them both in the transition shorthand property. You can also specify a delay or a timing function to more finely tune how the two values switch.

Transitions are easiest to understand with live examples, so check out:

Beyond transitions, full-fledged animations74 with multiple keyframes are also possible with CSS3 (but currently only supported in Safari/Chrome). First, you give the animation a name and define what the animation will do at different points (keyframes, indicated with percentages) through its duration. Next, you apply this animation to an element using the animation-name, animation-duration, and animation-interation-count properties. You could also set a delay and timing function, just like with transitions. For details, see:

CSS3 Usability / Readability Enhancements Link

Most the CSS3 techniques we’ve gone over so far have been purely cosmetic effects that aid progressive enhancement. But CSS3 can also be used to improve the usability of your pages.

Creating Multiple Columns of Text
Aids in: progressive enhancement, adaptability

Some pieces of text are more readable in narrow, side-by-side columns, similar to traditional newspaper layout. You can tell the browser to arrange your text into columns82 by either defining a width for each column (the column-width property) or by defining a number of columns (the column-count property). Other new properties let you control gutters/gaps, rule lines, breaking between columns and spanning across columns. (For now, you need to use the browser-specific prefixes of -moz and -webkit.) This is another one of those techniques that can harm instead of aid usability if used improperly, as explained in “CSS3 Multi-column layout considered harmful83,” so use it judiciously.

For details, see:

Controlling Text Wrapping and Breaking
Aids in: adaptability

CSS3 gives you more control over how blocks of text and individual words break and wrap if they’re too long to fit in their containers. Setting word-wrap87 to break-word will break a long word and wrap it onto a new line (particularly handy for long URLs in your text). The text-wrap88 property gives you a number of options for where breaks may and may not occur between words in your text. The CSS2 white-space89 property has now in CSS3 become a shorthand property for the new white-space-collapse90 and text-wrap properties, giving you more control over what spaces and line breaks are preserved from your markup to the rendered page. Another property worth mentioning, even though
it’s not currently in the CSS3 specification, is text-overflow, which allows the browser to add an ellipsis character (…) to the end of a long string of text instead of letting it overflow.

For details, see:

Media Queries
Aids in: adaptability, efficiency

CSS2 let you apply different styles to different media types — screen, print, and so on. CSS3’s media queries99 take this a step further by letting you customize styles based on the user’s viewport width, display aspect ratio, whether or not his display shows color, and more. For instance, you could detect the user’s viewport width and change a horizontal nav bar into a vertical menu on wide viewports, where there is room for an extra column. Or you could change the colors of your text and backgrounds on non-color displays.


This demo file from Opera102 uses media queries to rearrange elements and resize text and images based on viewport size.

Media queries couldn’t come at a better time — there is more variety in the devices and settings people use to browse the web than ever before. You can now optimize your designs more precisely for these variations to provide a more usable and attractive design, but without having to write completely separate style sheets, use JavaScript redirects, and other less efficient development practices.

Media queries are supported to some degree by all the major browsers except IE, and there are lots of great articles and tutorials explaining how to use them right now:

Media queries are particularly helpful in serving alternate styles to small-screen mobile devices, as these articles and tutorials explain:

For other options on how to deal with mobile devices, see Mobile Web Design Trends For 2009112.

Improving Efficiency Through CSS3 Link

Many of the visual effect properties of CSS3 that we’ve gone over have a great bonus in addition to making your design look great: they can improve efficiency, both in your development process and in the performance of the pages themselves.

Any CSS3 property that keeps you from having to create and add extra images is going to reduce the time it takes you to create new pages as well as re-skin existing ones. Less images also mean less stuff for the server to have to send out and less stuff for the users to download, both of which increase page loading speed.

CSS3 properties that keep you from having to add extra divs or extra classes can also reduce your development time as well as file size. We’ve already gone over some great techniques that help with this, but there are a few more worth mentioning.

The box-sizing Property
Aids in: efficiency

In addition to the div-conserving properties we’ve already talked about, the box-sizing113 property can also help limit your div use in certain situations.

In the traditional W3C box model of CSS 2.1, the value you declare for a width or height controls the width or height of the content area only, and then the padding and border are added onto it. (This is called the content-box model.) If you’ve worked with CSS for a while, you’re probably used to the content-box box model and don’t really think much about it. But, it can lead you to add extra divs from time to time. For instance, if you want to set a box’s width and padding in different units of measurement from each other, like ems for the width and pixels for the padding, it’s often easiest to nest another div and apply the padding to this instead, to make sure you know how much total space the box will take up. In small doses, nesting additional divs simply to add padding or borders is not a great sin. But in complicated designs, the number of extra divs can really add up, which adds to both your development
time and the file size of the HTML and CSS.

Setting the new box-sizing property to border-box instead of content-box solves this problem so you can get rid of all those extra divs. When a box is using the border-box box model, the browser will subtract the padding and border from the width of the box instead of adding it. You always know that the total space the box takes up equals the width value you’ve declared.

In the traditional box model (bottom image), padding and border are added onto the declared width. By setting box-sizing to border-box (top image), the padding and border are subtracted from the declared width.

The box-sizing property has good browser support114, with the exception of IE 6 and IE 7. Unlike the more decorative CSS3 properties, however, lack of support for box-sizing could cause your entire layout to fall apart. You’ll have to determine how serious the problem would be in your particular case, whether it’s worth living with or hacking, or whether you should avoid using box-sizing for now.

For details, see:

CSS3 Pseudo-Classes and Attribute Selectors
Aids in: progressive enhancement, efficiency, modularity, rich typography

CSS has several really useful selectors116 that are only now coming into common use. Many of these are new in CSS3, but others have been around since CSS2, just not supported by all browsers (read: IE) until recently, and thus largely ignored. IE still doesn’t support them all, but they can be used to add non-essential visual effects.

Taking advantage of these newer, more advanced selectors can improve your efficiency and make your pages more modular because they can reduce the need for lots of extra classes, divs, and spans to create the effects you want to see. Some selectors even make certain effects possible that you can’t do with classes, such as styling the first line of a block of text differently. These types of visual effects can improve the typography of your site and aid progressive enhancement.

For details, see:

Read these articles and tutorials for examples of how to put advanced selectors to practical use right now:


Although this article is focused on modern CSS techniques, you can’t have great CSS-based web pages without great markup behind them. Although HTML5126 is still in development, and although debate continues about its strengths and weaknesses, some web developers are already using it in their web pages. While HTML 4.01 and XHTML 1.0 are still great choices for the markup of your pages, it’s a good idea to start learning what HTML5 has to offer so you can work with it comfortably in the future and perhaps start taking advantage of some of its features now. So, here is a brief overview of how HTML5 can help with our five modern CSS-based web design characteristics (progressive enrichment, adaptive to diverse users, modular, efficient, typographically rich).

Note: Many of these techniques are not supported in enough browsers yet to make their benefits really tangible, so think of this section as, perhaps, “here’s how HTML5 can aid these five characteristics in the future.”

New Structural Markup Link

Aids: adaptability, modularity, efficiency

HTML5 introduces a number of new semantic elements that can add more structure to your markup to increase modularity. For instance, inside your main content div you can have several article elements, each a standalone chunk of content, and each can have its own header, footer, and heading hierarchy (h1 through h6). You can further divide up an article element with section elements, again with their own headers and footers. Having clearer, more semantic markup makes it easier to shuffle independent chunks of content around your site if needed, or syndicate them through RSS on other sites and blogs.

In the future, as user agents build features to take advantage of HTML5, these new elements could also make pages more adaptable to different user scenarios. For instance, web pages or browsers could generate table of contents based on the richer hierarchy provided by HTML5, to assist navigation within a page or across a site. Assistive technology like screen readers could use the elements to help users jump around the page to get straight to the important content without needing “skip nav” links.

Although many of these benefits won’t be realized until some unforeseen time in the future, you can start adding these new elements now, so that as soon as tools pop up that can take full advantage of them, you’ll be ready. Even if your browser doesn’t recognize an element, you can still style it — that’s standard browser behavior. Well, in every browser but IE. Luckily, you can easily trick IE into styling these elements using a very simple piece of JavaScript, handily provided by Remy Sharp127.

Of course, you usually can’t depend on all your users having JavaScript enabled, so the very safest and most conservative option is to not use these new structural elements just yet, but use divs with corresponding class names as if they were these new elements. For instance, where you would use an article element, use a div with a class name of “article.” You can still use the HTML5 doctype — HTML5 pages work fine in IE, as long as you don’t use the new elements. You can then later convert to the new HTML5 elements easily if desired, and in the meantime, you can take advantage of the more detailed HTML5 validators128. Also, using these standardized class names can make updating the styles easier for both you and others in your team, and having consistent naming conventions across sites makes it easier for users with special needs to set up user style sheets that
can style certain elements in a needed way.

For more on HTML5 markup, see:

Reducing JavaScript and Plug-in Dependence Link

Aids in: adaptability, efficiency

A number of the new elements and features in HTML5 make effects possible with pure markup that used to be possible only with JavaScript or various third-party plug-ins, like Flash or Java. By removing the need for JavaScript and plug-ins, you can make your pages work on a wider variety of devices and for a wider variety of users. You may also make your development process quicker and more efficient, since you don’t have to take the time to find the right script or plug-in and get it all set up. Finally, these techniques may be able to boost the speed of your pages, since extra files don’t have to be downloaded by the users. (On the other hand, some may decrease performance, if the built-in browser version is slower than a third-party version. We’ll have to wait and see how browsers handle each option now and in the future.)

Some of the features that reduce JavaScript and plug-in dependence are:

  • New form elements and attributes. HTML5 offers a bunch of new input types, such as email, url, and date, that come with built-in client-side validation without the need for JavaScript. There are also many new form attributes that can accomplish what JavaScript used to be required for, like placeholder to add suggestive placeholder text to a field or autofocus to make the browser jump to a field. The new input types degrade to regular inputs in browsers that don’t support them, and the new attributes are just ignored, so it doesn’t hurt unsupporting browsers to start using them now.

    Of course, you’ll have to put in fallback JavaScript for unsupporting browsers, negating the “no JavaScript” benefits for the time being. (Or, depend on server-side validation—which you always ought to have in place as a backup behind client-side validation anyway—to catch the submissions from unsupporting browsers.) Still, they offer a nice usability boost for users with the most up to date browsers, so they’re good for progressive enhancement.

  • The canvas element. The canvas element creates a blank area of the screen that you can create drawings on with JavaScript. So, it does require the use of JavaScript, but it removes the need for Flash or Java plug-ins. It’s supported in every major browser but IE, but you can make it work in IE easily using the ExplorerCanvas144 script.

  • The video and audio elements. HTML5 can embed video145 and audio146 files directly, just as easily as you would add an image to a page, without the need for any additional plug-ins.

Some of the new input types in HTML5 will bring up widgets, such as the calendar date picker seen with the datetime input type in Opera, without needing any JavaScript. (HTML5 input types test page148)

For more on these features, see:

IE Filtering

Aids in: progressive enhancement

IE 6 doesn’t seem to be going away anytime soon, so if you want to really make sure your pages are progressively enhanced, you’re going to have to learn how to handle it. Beyond ignoring the problem or blocking IE 6 altogether, there are a number of stances you can take:

  • Use conditional comments158 to fix IE’s bugs: You can create separate style sheets for each version of IE you’re having problems with and make sure only that version sees its sheet. The IE sheets contain only a few rules with hacks and workarounds that the browser needs.
  • Hide all main styles from IE and feed it very minimal styles only: This is another conditional comment method, but instead of fixing the bugs, it takes the approach of hiding all the complex CSS from IE 6 to begin with, and only feeding it very simple CSS to style text and the like. Andy Clarke calls this Universal Internet Explorer 6 CSS159.
  • Use JavaScript to “fix” IE: There are a number of scripts out there that can make IE 6 emulate CSS3, alpha-transparent PNGs, and other things that IE 6 doesn’t support. Some of the most popular are ie7-js160, Modernizr161, and ie-css3.js.

In addition to the resources linked in the text above, you can learn more about how to handle IE at:

Flexible Layouts

Aids in: adaptability

One of the main ways you can make your sites adaptable to your users’ preferences is to create flexible instead of fixed-width layouts. We’ve already gone over how media queries can make your pages more adaptable to different viewport widths, but creating liquid, elastic, or resolution-dependent layouts can be used instead of or in conjunction with media queries to further optimize the design for as large a segment of your users as possible.

  • Liquid layouts: Monitor sizes and screen resolutions cover a much larger range than they used to, and mobile devices like the iPhone and iPad let the user switch between portrait and landscape mode, changing their viewport width on the fly. Liquid layouts, also called fluid, change in width based on the user’s viewport (eg, window) width so that the entire design always fits on the screen without horizontal scrollbars appearing. The min-width and max-width properties and/or media queries can and should be used to keep the design from getting too stretched out or too squished at extreme dimensions.
  • Elastic layouts: If you want to optimize for a particular number of text characters per line, you can use an elastic layout, which changes in width based on the user’s text size. Again, you can use min- and max-width and/or media queries to limit the degree of elasticity.

  • Resolution-dependent layouts: This type of layout, also called adaptive layout, is similar to media queries, but uses JavaScript to switch between different style sheets and rearrange boxes to accommodate different viewport widths.

For details on creating flexible layouts, see:

Layout Grids

Aids in: modularity, efficiency

Designing on a grid of (usually invisible) consistent horizontal and vertical lines is not new — it goes back for centuries — but its application to web design has gained in popularity in recent years. And for good reason: a layout grid can create visual rhythm to guide the user’s eye, make the design look more clean and ordered, and enforce design consistency.

Grids can also make your designs more modular and your development more efficient because they create a known, consistent structure into which you can easily drop new elements and rearrange existing ones without as much thought and time as it would take in a non-grid layout. For instance, all of your elements must be as wide as your grid’s column measurement, or some multiple of it, so you can easily move an element to another spot on the page or to another page and be assured that it will fit and look consistent with the rest of the design. At worst, you’ll need to adjust the other elements’ widths around it to a different multiple of the column measurements to get the new element to fit, but even this is not too work-intensive, as there is only a handful of pre-determined widths that any element can have.

All of the content of The New York Times site174 falls into a grid of five columns, plus a thin column on the left for navigation.

To learn how to use grids, see:

Efficient CSS Development Practices

Aids in: modularity, efficiency

Layout grids and many of the CSS3 techniques we’ve gone over have the side benefit of making your CSS more modular and helping you write and maintain CSS more efficiently. There are also a few CSS development practices that you can use with any of the techniques we’ve already covered in order to reduce the time it takes you to write the CSS for those techniques in the first place, as well as save you time reusing components in your pages.

CSS Frameworks Link

A CSS framework is a library of styles that act as building blocks to create the standard pieces you might need in your site. While CSS frameworks differ greatly in depth and breadth, most popular, publicly-distributed frameworks contain some sort of layout grid, as well as standard styles for text, navigation, forms, images, and more. It’s a good idea to create your own CSS framework, perhaps based on one of the most popular ones; it can be as simple as standardizing the IDs and classes you tend to use on every project and creating a starter style sheet for yourself.

Good CSS frameworks provide you with a solid starting point for your designs, cutting down your time spent developing, testing, tweaking, and updating. They can also reduce the time others (your team members or those who inherit your sites) spend modifying your CSS, as everyone is working from a standard set of conventions. Frameworks can make your designs more modular by giving you a standard set of classes that can be reused from page to page easily, breaking the styles down into separate sheets that can be applied independently to pages on an as-needed basis, or allowing you to plug in various types of content without needing to invent new classes for it.

But, frameworks have their share of problems too. For instance, publicly-distributed (as opposed to your own private) frameworks tend to have large file sizes, as they need to work for any type of site with any type of content; if they’re separated into multiple sheets, they can further damage page speed since every HTTP request takes time. We won’t get into the full list of pros and cons here, but there are ways to work around many of them, so check out the following articles for the details. You’ll also find links to the most popular CSS frameworks.

Object-oriented CSS (OOCSS) Link

Nicole Sullivan coined the term object-oriented CSS (OOCSS)194 for her method of creating self-contained chunks of HTML (modules) that can be reused anywhere in the page or site and that any class can be applied to. Some of the main principles of OOCSS are:

  • using primarily classes instead of IDs
  • creating default classes with multiple, more specific classes added on to elements
  • avoiding dependent selectors and class names that are location-specific
  • leaving dimensions off module styles so the modules can be moved anywhere and fit
  • styling containers separately from content

OOCSS aims to make your CSS development more efficient, as well as to make the CSS itself more modular and less redundant, which reduces file sizes and loading speed.

CSS Generation Link

When it comes to writing CSS quickly, what could be quicker than having some piece of software write it for you? Now, please don’t think that I’m advocating not learning CSS and having a tool write a complete style sheet for you. That is a bad, bad idea. But, there are some quality tools out there that can give you a headstart with your CSS, just to shave a little time off the front of your CSS development process. Most good CSS generators are focused on creating styles for one particular area of your design, such as the layout structure or type styles, not the whole style sheet.

There are far too many tools to link to individually here, so remember when you’re finding your own tools to carefully review the CSS it outputs. If it’s invalid, bloated, or just plain ugly, don’t use the tool! Here are some articles that include lists of and links to CSS generators:

CSS Performance

Aids in: efficiency

Your efficiently created CSS-based web sites also need to perform as efficiently as possible for your users. Many of the CSS3 techniques we’ve covered can reduce file sizes and HTTP requests to increase the speed of your pages. There are some additional CSS techniques you can use to boost performance.

CSS Compression Link

Writing clean CSS that takes advantage of shorthand properties, grouped selectors, and other efficient syntax is nothing new, but it remains very important for improving performance. There are also tricks some CSS developers employ to further reduce CSS file sizes, such as writing each rule on one line to reduce all the line breaks. Although you can do some of this manually, there are a number of tools that can optimize and compress your CSS for you.

For more on methods and tools to optimize and compress your CSS, see:

CSS Sprites Link

CSS Sprites is a CSS technique named by Dave Shea209 of combining many (or all) of your site’s images into one big master image and then using background-position to shift the image around to show only a single image at a time. This greatly improves your pages’ performance because it greatly reduces the number of HTTP requests to your server. This is not a new technique, but it’s becoming increasingly important in modern CSS-based web sites as page performance becomes more and more important.


The Apple site211 uses CSS sprites for various states of its navigation bar.

For details, see:

Not everyone is a fan of CSS sprites, however. For some opposing arguments, as well as alternative methods of reducing image HTTP requests, see:

Font Embedding and Replacement

Aids in: progressive enhancement, rich typography

Until recently, web designers were limited to working with the fonts on their end users’ machines. We now have a number of techniques and technologies that make unique but still readable and accessible text possible.

The @font-face Rule Link

The @font-face rule217, part of CSS3, allows you to link to a font on your server, called a “web font,” just as you can link to images, and displays text on your site in this font. You can now make use of your beautiful, unique fonts instead of just the fonts that most people already have installed on their machines. Fortunately, @font-face has good browser support. But alas, it’s not as simple as that. Different browsers support different types of fonts, different platforms and browsers anti-alias very differently, you can get a flash of unstyled text before the font loads, your font may not allow @font-face embedding in its license, and on and on it goes. To break through the confusion, see these articles:

Sam Howat’s site225 uses @font-face to get attractive non-standard fonts into the headings and intro blocks of text.

Blue Sky Resumes227 uses @font-face extensively in headings, feature copy, and the main nav bar of the site.

Other Font Embedding and Replacement Techniques Link

If the pure CSS solution of @font-face is making your head spin, you can use a font embedding service or font replacement technique.

  • Font embedding services: There are a number of third-party font embedding services available that make use of @font-face, such as Typekit228 and Kernest229, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal. Most of these services are not free, but some have free options that give you access to a limited set of fonts.
  • Font replacement techniques: These free techniques, such as sIFR and Cufón230, do not make use of @font-face, but instead use scripting and/or Flash to display fonts that are not on the user’s machine. None of them directly address the licensing issue, but none of them link directly to ready-to-use fonts, so copyright legality is not clear-cut.

For links to these services and techniques, see:


You’re now equipped with the basic knowledge and a slew of links to create modern CSS-based web pages that are progressively enriched, adaptive to diverse users, modular, efficient, and typographically rich. Go out and create great, modern work!

Footnotes Link

  1. 1
  2. 2 #moderncss-css3
  3. 3 #moderncss-html5
  4. 4 #moderncss-ie
  5. 5 #moderncss-flexible
  6. 6 #moderncss-grids
  7. 7 #moderncss-efficient
  8. 8 #moderncss-performance
  9. 9 #moderncss-fonts
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185
  186. 186
  187. 187
  188. 188
  189. 189
  190. 190
  191. 191
  192. 192
  193. 193
  194. 194
  195. 195
  196. 196
  197. 197
  198. 198
  199. 199
  200. 200
  201. 201
  202. 202
  203. 203
  204. 204
  205. 205
  206. 206
  207. 207
  208. 208
  209. 209
  210. 210
  211. 211
  212. 212
  213. 213
  214. 214
  215. 215
  216. 216
  217. 217
  218. 218
  219. 219
  220. 220
  221. 221
  222. 222
  223. 223
  224. 224
  225. 225
  226. 226
  227. 227
  228. 228
  229. 229
  230. 230
  231. 231
  232. 232
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Zoe Mickley Gillenwater is a freelance graphic and web designer, developer and consultant. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS and the video training title Web Accessibility Principles for, and is working on the upcoming book Stunning CSS3: A Project-based Guide to the Latest in CSS. Zoe is currently a member of the Web Standards Project (WaSP) Adobe Task Force and was previously a moderator of the popular css-discuss mailing list. Find out more about Zoe on her blog and portfolio site or follow her on Twitter.

  1. 1

    Thomas McGee

    May 6, 2010 5:35 am

    Very nice article, there were many things listed here for CSS3 I did not know about yet. Good to know! Now if only all of the browser supported them all . . .

    Thanks for the info!

  2. 2

    very good article this session!! all in one!!
    now IE supporting come to well so, this article -“All is Well”

    thanks buddy!!

  3. 3

    Great read.

  4. 4

    Gerd Wippich

    May 6, 2010 5:55 am

    Wow, great post. Good lists of links, a very useful article. Thank you, Zoe!

  5. 5

    Great article.

    One suggestion: a chart showing what works with what browser mow, or when it’s expected to work.

  6. 6

    I’m surprised there is no mention of using CSS metalanguages like SASS or LESS. I use SASS now on every project and I can’t imagine writing CSS without it. The ability to “program” your CSS and make it truly object oriented is a real life saver. Using variables and functions for groups of styles lets you push CSS harder than you ever thought. If you are a serious designer I would give these languages a look.

  7. 7

    Joe Critchley

    May 6, 2010 6:48 am

    Modernizr doesn’t add support for missing IE features (like IE7-JS), it just detects support for them…

  8. 8

    This is an impressive article with many usefull resources and i will surely go through it in detail and get as much info out of it as possible. So thanks for that!

    However, i have some rather big questions about whether or not it is actually already advisable to use HTML5 and CSS3 in all new projects. I know we designers and developers all like the idea of using new technologies, why know why they’re better, we adapt quickly and have our browsers up to date with the latest developments. As i result i would have no problem using HTML5 and CSS3 in personal projects, or in projects specifically targetted to a design-oriented community and the likes.

    However… I run a website for a large organisation, we have a very varied and wide target audience. When i look at the site’s statistics, i see that over half of my visitors use IE, a quarter runs FF, 6% of users each for Safari and Chrome and the rest (none over 0.5%) is a mix of Opera, Linux and browsers on portable devices. I would to read something about how feasable it is to do a complete modern design using the latest shiny HTML and CSS tricks on a site with such a varied user base. Would it be worth it or would the problems getting the design to work for the majority of the users vastly outweigh the benifits of using the latest technologies?

    I guess what i’m asking for is not just a state of the very latest technologies and how to use, but an insight into how well adopted these technologies are by the general users and what you can expect when trying to use them on general sites.

  9. 9

    CMT Studio

    May 6, 2010 7:18 am

    @SlowX: Try those links:

    Browser support for CSS3 and HTML5
    When can I use…

    You can also have in mind something like Modernizr.

  10. 10

    (I just thought it’d be cool to see feature-by-feature in the article as well.)

  11. 11

    Very thorough article. Thank you!

  12. 12

    Actually modernizer adds the html5 elements that are needed by IE. There is also a html5 IE shiv made by remi sharp.

    No offense but this article looks like a summary of other smashing magazine articles (with a few small additions).
    I have been coming to this site off and on for over 3 years.

    Quality of articles, not quantity!!

    I learn more from twitter these days.

  13. 13

    Oh wow. What an excellent post. Here goes my entire work day as I start reading through all this :-)


  14. 14

    Enjoyed this article, waiting for Modern CSS Layouts, Part 3.

  15. 15

    Very complete article! Saved in bookmarks, will make sure to read it all over again before starting my next CSS3 project ;) Thanks!

  16. 16

    Erland Flaten

    May 6, 2010 1:43 pm

    A Great article I will probably use many times.

    Do the browsers, like Safari 4, support the official new css e.g “border-radius” or do we still have to write with prefix “-webkit-border-radius”

    When will they support the standards as written?

  17. 17

    Great Article!

  18. 18

    great article!

  19. 19

    This is a Great article I will probably use many times. I enjoyed the article, waiting for Modern CSS Layouts, Part 3.

  20. 20

    great article..

  21. 21

    Awesome collection and thx for sharing, but waht’s up with things like Box-Reflect? Ok, it only works on webkit-browsers, but it’s modern ;o)

    “CSS Box-Reflect – Reflection without JavaScript or Photoshop”

  22. 22

    box-sizing is great.

    I always thought the box model was stupid because when you know the width of your div and you start testing different border and padding you are forced to modify your box width.

    In a way, IE6 had it right ;)

  23. 23

    Very great article I found ever.

    Thanks smashing

  24. 24

    Great Stuff, thank you – will be a good read.

  25. 25

    John Faulds

    May 7, 2010 4:23 am

    Would it be worth it or would the problems getting the design to work for the majority of the users vastly outweigh the benifits of using the latest technologies?

    If you use the new features carefully enough, those with capable browsers will get a better experience, and those who don’t, won’t know that they’re missing anything.

  26. 26

    Awsome! Even more than usual.

  27. 27


    May 7, 2010 5:57 am

    very, very, very awesome!

  28. 28

    Great Article. These new techniques are exciting to think about and will be fun to implement. I especially enjoy the transform feature from the beer site. And you can certainly see the differences in IE8 and FF in regards to the fonts being used on this site as well.
    Thank you Zoe.

  29. 29

    The article is pretty good but I don’t think CSS3 is quite where you are talking like it is. For instace “By removing the need for JavaScript and plug-ins, you can make your pages work on a wider variety of devices and for a wider variety of users.” This isn’t true and won’t be for quite some time. The current versions of browsers don’t support half of this stuff and most people don’t update their browser everytime there’s an update. So it will be a good while before you can use all of the features here. For now and for a good time to come, if you want your pages to work on a wider variety of devices for a wider variety of users you should be using javascript over CSS3. Anyway this is a nice compilation of info. Good stuff.

  30. 30

    They are supporting “the standards as written”. Vendor prefixes are part of the W3C standards for CSS properties.

  31. 31

    Thanks for this great article! There is one question that I have concerning CSS3:

    If I use a gradient, I can specify fallbacks (the background color and a background image) for non-supporting browsers. Assume I use a supporting browser (e.g. Safari) will it just use the gradient and not request the fallback image from the server?


  32. 32

    An article too complete, very good examples and there are also many links to expand knowledge.
    Thanks! His articles are great and your page is for my daily reading.

  33. 33

    May 8, 2010 3:22 am

    Hey can i get reference to more examples related to all these essential techniques mentioned in this post.. ??

  34. 34

    thanks zoe
    Very great article !

  35. 35

    Erland Flaten

    May 8, 2010 6:44 am

    Thanks! So this means we have write the rules 3 times (example under) or more until official CSS3 without the prefixes is suported? When do you guess that will be?

    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;

  36. 36


    May 10, 2010 1:36 am

    Nice Stuff :)

  37. 37

    “Hey here’s a bunch of stuff that’s not supported.” Thanks. More crap required by companies when interviewing for a job. AWESOME!!!!!

  38. 38

    very useful information. thanks,

  39. 39

    balaji lakal

    May 13, 2010 4:42 am

    Nice artilce

  40. 40

    I’ve got a very good knowledge after reading this article..
    Keep up the good work.. :)


↑ Back to top