Modern CSS Layouts, Part 2: The Essential Techniques

Advertisement

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

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

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.

Screenshot13
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 image22 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-clip23 and background-origin24 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 property25. 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 spec26, 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-property27 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 property28, which also allows you to control how the images scale and tile.

Screenshot29
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 site30)

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 property48 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.

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

The text-shadow property51 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:

Transforms
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.”61 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.

Screenshot62
The BeerCamp SXSW 2010 site63 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 transitions73 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 animations80 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

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 columns88 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 harmful89,” 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-wrap93 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-wrap94 property gives you a number of options for where breaks may and may not occur between words in your text. The CSS2 white-space95 property has now in CSS3 become a shorthand property for the new white-space-collapse96 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 queries105 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.

Screenshot106

Screenshot107
This demo file from Opera108 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 2009123.

Improving Efficiency Through CSS3

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-sizing124 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.

Screenshot
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 support125, 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 selectors128 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:

HTML5

Although this article is focused on modern CSS techniques, you can’t have great CSS-based web pages without great markup behind them. Although HTML5140 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

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 Sharp141.

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 validators142. 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

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 ExplorerCanvas158 script.

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

Screenshot161
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 page162)

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 comments173 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 CSS174.
  • 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-js175, Modernizr176, and ie-css3.js177134.

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.

Screenshot191
All of the content of The New York Times site192 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

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)

Nicole Sullivan coined the term object-oriented CSS (OOCSS)218 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

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

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

CSS Sprites is a CSS technique named by Dave Shea235 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.

Screenshot236

The Apple site237 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

The @font-face rule244, 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:

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

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

Other Font Embedding and Replacement Techniques

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 Typekit256 and Kernest257, 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 sIFR258 and Cufón259, 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:

Conclusion

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

  1. 1 http://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/
  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 http://www.w3.org/TR/css3-color/#rgba-color
  11. 11 http://www.w3.org/TR/css3-color/#hsla-color
  12. 12 http://dev.opera.com/articles/view/color-in-opera-10-hsl-rgb-and-alpha-transparency/
  13. 13 http://www.24ways.org/
  14. 14 http://www.24ways.org/
  15. 15 http://24ways.org/2009/working-with-rgba-colour
  16. 16 http://css-tricks.com/rgba-browser-support/
  17. 17 http://buildinternet.com/2010/02/flexible-color-schemes-in-layouts-with-rgba/
  18. 18 http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock
  19. 19 http://www.lateralcode.com/playing-with-css3-colors/
  20. 20 http://dev.opera.com/articles/view/color-in-opera-10-hsl-rgb-and-alpha-transparency/
  21. 21 http://www.zenelements.com/blog/css3-hsl-hsla-color-opacity/
  22. 22 http://www.w3.org/TR/css3-background/#layering
  23. 23 http://www.w3.org/TR/css3-background/#the-background-clip
  24. 24 http://www.w3.org/TR/css3-background/#the-background-origin
  25. 25 http://www.w3.org/TR/css3-background/#background-size
  26. 26 http://dev.w3.org/csswg/css3-images/#gradients-
  27. 27 http://www.w3.org/TR/css3-background/#the-border-radius
  28. 28 http://www.w3.org/TR/css3-background/#border-images
  29. 29 http://www.stunningcss3.com/
  30. 30 http://www.stunningcss3.com/
  31. 31 http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/
  32. 32 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  33. 33 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
  34. 34 https://developer.mozilla.org/web-tech/2009/08/04/background-images-no-longer-restricted-to-original-size-explore-the-space-with-background-size/
  35. 35 http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
  36. 36 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/
  37. 37 https://developer.mozilla.org/en/Using_gradients
  38. 38 http://css-tricks.com/css3-gradients/
  39. 39 http://westciv.com/tools/gradients/index.html
  40. 40 http://westciv.com/tools/radialgradients/index.html
  41. 41 http://gradients.glrzad.com/
  42. 42 http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/
  43. 43 http://www.the-art-of-web.com/css/border-radius/
  44. 44 http://muddledramblings.com/table-of-css3-border-radius-compliance
  45. 45 http://ejohn.org/blog/border-image-in-firefox/
  46. 46 http://www.lrbabe.com/sdoms/borderImage/index.html
  47. 47 http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/
  48. 48 http://www.w3.org/TR/css3-background/#the-box-shadow
  49. 49 http://www.becherry.be/
  50. 50 http://www.becherry.be/
  51. 51 http://www.w3.org/TR/css3-text/#text-shadow
  52. 52 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  53. 53 http://hacks.mozilla.org/2009/06/moz-box-shadow/
  54. 54 http://placenamehere.com/article/372/CSS3TrialsBoxShadowAndMore
  55. 55 http://placenamehere.com/article/384/CSS3BoxShadowinInternetExplorerBlurShadow
  56. 56 https://developer.mozilla.org/en/CSS/text-shadow
  57. 57 http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
  58. 58 http://www.admixweb.com/2009/12/04/using-text-shadow-in-htmlcss/
  59. 59 http://westciv.com/tools/boxshadows/index.html
  60. 60 http://westciv.com/tools/shadows/index.html
  61. 61 http://www.w3.org/TR/css3-3d-transforms/
  62. 62 http://sxsw.beercamp.com/
  63. 63 http://sxsw.beercamp.com/
  64. 64 http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  65. 65 http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
  66. 66 http://www.the-art-of-web.com/css/css-animation/
  67. 67 https://developer.mozilla.org/en/CSS/-moz-transform
  68. 68 http://24ways.org/2009/going-nuts-with-css-transitions
  69. 69 http://snook.ca/archives/html_and_css/css-text-rotation
  70. 70 http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/
  71. 71 http://webkit.org/blog/386/3d-transforms/
  72. 72 http://westciv.com/tools/transforms/index.html
  73. 73 http://www.w3.org/TR/css3-transitions/
  74. 74 http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  75. 75 http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
  76. 76 http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
  77. 77 http://www.webdesignerdepot.com/2010/01/css-transitions-101/
  78. 78 http://www.the-art-of-web.com/css/timing-function/
  79. 79 http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/
  80. 80 http://www.w3.org/TR/css3-animations/
  81. 81 http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  82. 82 http://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/
  83. 83 http://24ways.org/2009/css-animations
  84. 84 http://webkit.org/blog/324/css-animation-2/
  85. 85 http://trentwalton.com/2010/03/22/css3-in-transition/
  86. 86 http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
  87. 87 http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation
  88. 88 http://www.w3.org/TR/css3-multicol/
  89. 89 http://www.456bereastreet.com/archive/200509/css3_multicolumn_layout_considered_harmful/
  90. 90 http://webdesignernotebook.com/css/remembering-the-css3-multi-column-layout-module/
  91. 91 http://www.quirksmode.org/css/multicolumn.html
  92. 92 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  93. 93 http://www.w3.org/TR/css3-text/#word-wrap
  94. 94 http://www.w3.org/TR/css3-text/#text-wrap
  95. 95 http://www.w3.org/TR/css3-text/#white-space
  96. 96 http://www.w3.org/TR/css3-text/#white-space-collapse
  97. 97 https://developer.mozilla.org/en/CSS/word-wrap
  98. 98 https://developer.mozilla.org/En/CSS/white-space
  99. 99 http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
  100. 100 http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/
  101. 101 http://safalra.com/web-design/html-and-css/white-space-property/
  102. 102 http://www.css3.com/css-text-overflow/
  103. 103 http://www.electrictoolbox.com/ellipsis-html-css/
  104. 104 http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
  105. 105 http://www.w3.org/TR/css3-mediaqueries/
  106. 106 http://devfiles.myopera.com/articles/1541/mediaqueries-example-basic.html
  107. 107 http://devfiles.myopera.com/articles/1541/mediaqueries-example-basic.html
  108. 108 http://devfiles.myopera.com/articles/1541/mediaqueries-example-basic.html
  109. 109 http://hacks.mozilla.org/2009/06/media-queries/
  110. 110 http://dev.opera.com/articles/view/safe-media-queries/
  111. 111 http://helephant.com/2008/07/the-bleeding-edge-of-web-media-queries/
  112. 112 http://www.unintentionallyblank.co.uk/2007/11/27/media-queries-and-css3-experiments-varying-columns/
  113. 113 http://reinholdweber.com/css/css3-a-big-storm-is-coming/
  114. 114 http://mindgarden.de/combining-css3-media-queries-and-multi-columns
  115. 115 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  116. 116 http://virtuelvis.com/gallery/mediaqueries/
  117. 117 http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/
  118. 118 http://carsonified.com/blog/mobile/coding-for-the-mobile-web/
  119. 119 http://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/
  120. 120 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html
  121. 121 http://www.alexgdesign.co.uk/articles/mobile-optimised-websites-using-css3-media-queries/
  122. 122 http://www.thecssninja.com/css/iphone-orientation-css
  123. 123 http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
  124. 124 http://www.w3.org/TR/css3-ui/#box-sizing
  125. 125 http://a.deveria.com/caniuse/#eat=css3-boxsizing
  126. 126 http://helephant.com/2008/10/css3-box-sizing-attribute/
  127. 127 http://jhop.me/css/css3/the-css3-box-sizing-concept-a-solution-to-a-longstanding-problem
  128. 128 http://www.w3.org/TR/css3-selectors/
  129. 129 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  130. 130 http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
  131. 131 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  132. 132 http://kimblim.dk/css-tests/selectors/
  133. 133 http://dev.l-c-n.com/CSS3-selectors/browser-support.php
  134. 134 http://www.keithclark.co.uk/labs/ie-css3/
  135. 135 http://24ways.org/2009/cleaner-code-with-css3-selectors
  136. 136 http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
  137. 137 http://forabeautifulweb.com/blog/about/image_management_naming_and_attribute_selectors/
  138. 138 http://dev.opera.com/articles/view/css-3-attribute-selectors/
  139. 139 http://webdesignernotebook.com/css/styling-a-poem-with-advanced-css-selectors/
  140. 140 http://dev.w3.org/html5/spec/Overview.html
  141. 141 http://remysharp.com/2009/01/07/html5-enabling-script/
  142. 142 http://html5.validator.nu/
  143. 143 http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
  144. 144 http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
  145. 145 http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
  146. 146 http://boblet.tumblr.com/post/60552152/html5
  147. 147 http://boblet.tumblr.com/post/141239118/html5-structure4
  148. 148 http://html5doctor.com/the-header-element/
  149. 149 http://html5doctor.com/the-section-element/
  150. 150 http://html5doctor.com/aside-revisited/
  151. 151 http://html5doctor.com/nav-element/
  152. 152 http://html5doctor.com/the-footer-element-update/
  153. 153 http://boblet.tumblr.com/post/130610820/html5-structure1
  154. 154 http://boblet.tumblr.com/post/134732913/html5-structure3
  155. 155 http://boblet.tumblr.com/post/134276674/html5-structure2
  156. 156 http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
  157. 157 http://www.brucelawson.co.uk/2009/marking-up-a-blog-with-html-5-part-2/
  158. 158 http://code.google.com/p/explorercanvas/
  159. 159 http://dev.w3.org/html5/spec/Overview.html#video
  160. 160 http://dev.w3.org/html5/spec/Overview.html#audio
  161. 161 http://www.456bereastreet.com/lab/html5-input-types/
  162. 162 http://www.456bereastreet.com/lab/html5-input-types/
  163. 163 http://www.alistapart.com/articles/get-ready-for-html-5/
  164. 164 http://diveintohtml5.org/forms.html
  165. 165 http://24ways.org/2009/have-a-field-day-with-html5-forms
  166. 166 http://code.google.com/p/webforms2/
  167. 167 http://carsonified.com/blog/dev/html-5-dev/how-to-draw-with-html-5-canvas/
  168. 168 https://developer.mozilla.org/en/Canvas_tutorial
  169. 169 http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  170. 170 http://html5doctor.com/the-video-element/
  171. 171 http://dev.opera.com/articles/view/introduction-html5-video/
  172. 172 http://html5doctor.com/native-audio-in-the-browser/
  173. 173 http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
  174. 174 http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/
  175. 175 http://code.google.com/p/ie7-js/
  176. 176 http://www.modernizr.com/
  177. 177 http://www.keithclark.co.uk/labs/ie-css3/
  178. 178 http://www.smashingmagazine.com/2009/12/01/how-to-support-internet-explorer-and-still-be-cutting-edge/
  179. 179 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
  180. 180 http://mondaybynoon.com/2009/09/21/aggressive-graceful-degradation/
  181. 181 http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/
  182. 182 http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
  183. 183 http://www.quirksmode.org/css/condcom.html
  184. 184 http://perishablepress.com/press/2007/07/18/wrapping-your-head-around-downlevel-conditional-comments/
  185. 185 http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/
  186. 186 http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
  187. 187 http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
  188. 188 http://www.themaninblue.com/writing/perspective/2006/01/19/
  189. 189 http://fortes.com/projects/dynamiclayout/
  190. 190 http://www.zackgrossbart.com/hackito/slidegrid/
  191. 191 http://www.nytimes.com/
  192. 192 http://www.nytimes.com/
  193. 193 http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  194. 194 http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/
  195. 195 http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
  196. 196 http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-preface
  197. 197 http://www.alistapart.com/articles/fluidgrids
  198. 198 http://designinformer.com/grid-based-web-design-simplified/
  199. 199 http://www.thegridsystem.org/
  200. 200 http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html
  201. 201 http://www.webdesigntoolslist.com/2009/07/webmastertools/roundup-of-css-grid-generators-css-grid-layout-generators/
  202. 202 http://www.designbygrid.com/
  203. 203 http://www.grid-based.com/
  204. 204 http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
  205. 205 http://www.cssnewbie.com/css-frameworks-described/
  206. 206 http://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/
  207. 207 http://www.webdirections.org/resources/kevin-yank-css-frameworks/
  208. 208 http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html
  209. 209 http://www.alistapart.com/articles/frameworksfordesigners/
  210. 210 http://www.w3avenue.com/2009/04/01/guidelines-for-developing-your-own-css-framework/
  211. 211 http://arbent.net/blog/creating-a-time-saving-css-template
  212. 212 http://warpspire.com/features/css-frameworks/
  213. 213 http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/
  214. 214 http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/
  215. 215 http://24ways.org/2008/making-modular-layout-systems
  216. 216 http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/
  217. 217 http://www.bestwebframeworks.com/css/
  218. 218 http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/
  219. 219 http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/
  220. 220 http://www.typesett.com/2010/01/object-oriented-css-oocss-the-lowdown/
  221. 221 http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/
  222. 222 http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
  223. 223 http://www.smashingmagazine.com/2009/06/25/35-css-lifesavers-for-efficient-web-design/
  224. 224 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  225. 225 http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
  226. 226 http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/
  227. 227 http://www.w3avenue.com/2009/05/04/list-of-really-useful-tools-for-css-developers/
  228. 228 http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
  229. 229 http://www.smashingmagazine.com/2009/07/19/how-to-automate-optimization-and-deployment-of-static-content/
  230. 230 http://speckyboy.com/2009/11/20/10-online-tools-and-apps-to-help-optimize-and-format-css/
  231. 231 http://vandelaydesign.com/blog/css/clean-css-code/
  232. 232 http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development-environments/
  233. 233 http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html
  234. 234 http://orderedlist.com/our-writing/blog/articles/single-line-css/
  235. 235 http://www.alistapart.com/articles/sprites
  236. 236 http://www.apple.com/
  237. 237 http://www.apple.com/
  238. 238 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  239. 239 http://css-tricks.com/css-sprites/
  240. 240 http://www.project83.com/blog/case-study-the-power-of-css-sprites/
  241. 241 http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/
  242. 242 http://kaioa.com/node/99
  243. 243 http://robertnyman.com/2010/01/15/how-to-reduce-the-number-of-http-requests/
  244. 244 http://www.w3.org/TR/css3-fonts/#the-font-face-rule
  245. 245 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  246. 246 http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
  247. 247 http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
  248. 248 http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
  249. 249 http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
  250. 250 http://www.fontsquirrel.com/fontface
  251. 251 http://www.fontsquirrel.com/fontface/generator
  252. 252 http://samhowat.com/
  253. 253 http://samhowat.com/
  254. 254 http://www.blueskyresumes.com/
  255. 255 http://www.blueskyresumes.com/
  256. 256 http://typekit.com/
  257. 257 http://www.kernest.com/
  258. 258 http://wiki.novemberborn.net/sifr3/
  259. 259 http://cufon.shoqolate.com/generate/
  260. 260 http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/
  261. 261 http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/

↑ Back to topShare on Twitter

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 lynda.com, 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.

Advertising
  1. 1

    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!

    0
  2. 2

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

    thanks buddy!!

    0
  3. 3

    Great read.

    0
  4. 4

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

    0
  5. 5

    Great article.

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

    0
  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.

    2
  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…

    0
  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.

    1
  9. 9

    @SlowX: Try those links:

    Browser support for CSS3 and HTML5
    When can I use…

    You can also have in mind something like Modernizr.

    0
  10. 10

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

    -1
  11. 11

    Very thorough article. Thank you!

    0
  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.

    0
  13. 13

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

    Dee

    0
  14. 14

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

    0
  15. 15

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

    0
  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?

    0
  17. 17

    Great Article!

    0
  18. 18

    great article!

    0
  19. 19

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

    0
  20. 20

    great article..

    0
  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” http://webstandard.kulando.de/post/2010/03/19/css-box-reflect-spiegelung-ohne-javascript-und-photoshop

    0
  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 ;)

    0
  23. 23

    Very great article I found ever.

    Thanks smashing

    0
  24. 24

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

    0
  25. 25

    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.

    0
  26. 26

    Awsome! Even more than usual.

    0
  27. 27

    adelacreative

    May 7, 2010 5:57 am

    very, very, very awesome!

    0
  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.

    0
  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.

    0
  30. 30

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

    0
  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?

    thanks!

    0
  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.

    0
  33. 33

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

    0
  34. 34

    thanks zoe
    Very great article !

    0
  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;

    0
  36. 36

    Nice Stuff :)

    0
  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!!!!!

    0
  38. 38

    very useful information. thanks,

    0
  39. 39

    Nice artilce

    0
  40. 40

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

    0
  41. 41

    its really helpfull for web designers….

    0
  42. 42

    This is amazing! Thank you! I appreciate all of the smashing articles, but this one is especially useful to me since I’m a web design student.

    0
  43. 43

    Cre8ive Commando

    May 20, 2010 10:44 pm

    Wow, nice round up. Should keep me busy for a while … :-)

    0
  44. 44

    webagencyfirenze.info

    May 31, 2010 11:48 am

    tank u, wonderful article about css design

    0
  45. 45

    Great article Zoe. Thanks for your work.

    0
  46. 46

    Perhaps you have thought to be putting additional video clips in your blog posts to keep your readers more interested? I mean I just read during the entire article of yours and it was really very good but since I’m more of a visual learner,I discovered that to become more useful. Just my my idea, Good luck

    0
  47. 47

    thanks,i thinks it’s help me for my assignment..
    ^_^

    0

↑ Back to top