The Bright (Near) Future of CSS

Advertisement

This article is an excerpt from Eric Meyer’s recent book Smashing CSS1, published by Wiley in cooperation with Smashing Magazine.

In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.

Accordingly, be careful not to get cut! A number2 of3 useful4 sites5 can help you figure out the exact syntaxes and patterns you need to use these techniques.

Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5. Some are very narrowly focused on certain browser families, whereas others are more broadly meant to allow support in all known browsers. These can be useful in cases where your visitors haven’t quite caught up with the times but you don’t want them to miss out on all the fun. (Some of these libraries are CSS3 PIE6, cssSandpaper7, :select[ivizr]8, ie7-js9, eCSStender10).

There are also a good many CSS enhancements available as plug-ins for popular JavaScript libraries such as jQuery. If you’re a user of such a library, definitely do some digging to see what’s been created. Again: Be careful! While these techniques are powerful and can deliver a lot of power to your pages, you need to test them thoroughly in the browsers of the day to make sure you didn’t just accidentally make the page completely unreadable in older browsers.

Styling HTML 5

Styling HTML 5 is really no different than styling HTML 4. There are a bunch of new elements, but styling them is basically the same as styling any other element. They generate the same boxes as any other div, span, h2, a, or what have you.

The HTML 5 specification is still being worked on as of this writing, so this may change a bit over time, but the following declarations may be of use to older browsers that don’t know quite what to do with the new elements.

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {
	display: inline;
}

You may have noticed that I left out two fairly important new elements: audio and video. That’s because it’s hard to know exactly how to treat them. Block? Inline? All depends on how you plan to use them. Anyway, you can place them in the declaration that makes the most sense to you.

But what about really old browsers, like IE6? (Note I said “old,” not “unused.” In an interesting subversion of popular culture, browser popularity has very little to do with age.) For those, you need to use a bit of JavaScript in order to get the browser to recognize them and therefore be able to style them. There’s a nice little script11 that auto-forces old versions of IE to play nicely with HTML 5 elements. If you’re going to use and style them, you should definitely grab that script and put it to use.

Once you’ve gotten your browser ducks in a row and quacking “The Threepenny Opera,” you can get down to styling. Remember: There’s really nothing new about styling with these new elements. For example:

figure {
	float: left;
	border: 1px solid gray;
	padding: 0.25em;
	margin: 0 0 1.5em 1em;
}
figcaption {
	text-align: center;
	font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}
<img src="splash.jpg" alt="A toddler’s face is obscured by a rippled and dimpled wall of water thrown up by her hands slapping into the surface of the swimming pool in whose waters she sits.">
SPLASH SPLASH SPLASH!!!

12
Figure 7-1: A styled HTML 5 figure and figure caption.

Classing like HTML 5

Perhaps you like the new semantics of HTML 5, but you’re just not ready to take your sites to full-on HTML 5. Maybe your site’s user base is mostly older browsers and you’d rather stick to known quantities like HTML 4 or XHTML. Not to worry: You can have the best of both worlds with the venerable class attribute.

This approach was documented by Jon Tan in his article13. The basic idea is to use old-school elements like div and span, and add to them classes that exactly mirror the element names in HTML 5. Here’s a code example.

.figure {
	float: left;
	border: 1px solid gray;
	padding: 0.25em;
	margin: 0 0 1.5em 1em;
}
.figcaption {
	text-align: center;
	font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}
<img src="spring.jpg" alt="A small child with twin pigtail braids, her back to the camera, swings away from the camera on a playground swingset while the late afternoon sun peeks over the crossbar of the swingset."> <div class="figcaption">Swinging into spring.</div>

14
Figure 7-2: A styled HTML 4-classed figure and figure caption.

If you compare the styles there to those found in the preceding section, you’ll see that the only difference is that the names figure and figcaption are preceded by periods — thus marking them as class names. The markup is a little different, of course, though it’s the same basic structure.

The advantage of this approach is that if you have these styles in place at the point when you decide you can convert to HTML 5, then all you need to do is change your markup to use HTML 5 elements instead of classed divs and then strip off the periods to turn the class selectors into element selectors. That’s it. Easy as cake!

Media Queries

This could honestly be its own article, or possibly even its own book. Thus, what follows will necessarily be just a brief taste of the possibilities. You should definitely follow up with more research, because in a lot of ways this is the future of Web styling.

The point of media queries is to set up conditional blocks of styles that will apply in different media environments. For example, you could write one set of styles for portrait displays and another for landscape displays. You might change the colors based on the bit depth of the display. You could change the font based on the pixel density of display. You might even rearrange the page’s layout depending on the width or number of pixels available in the display.

Figure 7-3: A basic three-column layout.15
Figure 7-3: A basic three-column layout.

How? Consider some basic layout styles for a three-column layout:

body {
	background: #FFF;
	color: #000;
    font: small Arial, sans-serif;
}
.col {
	position: relative;
    margin: 3em 1%;
    padding: 0.5em 1.5%;
    border: 1px solid #aaa;
    border-width: 1px 1px 0 1px;
	float: right;
	width: 20%;
}
#two {
	width: 40%;
}
#footer {
	clear: both;
}

As nice as this might be (in a minimalist sort of way), it is likely to run into trouble on smaller—which is to say, narrower—displays. What if you could magically change to a two-column layout on such displays?

Well, you can. First, restrict the three-column layout to environments that are more than 800 pixels across. This is done by splitting the layout bits into their own declarations:

body {
	background: #fff;
	color: #000;
    font: small Arial, sans-serif;
}
.col {
	position: relative;
    margin: 3em 1%;
    padding: 0.5em 1.5%;
    border: 1px solid #aaa;
    border-width: 1px 1px 0 1px;
}
#footer {
	clear: both;
}
.col {
	float: right;
	width: 20%;
}
#two {
	width: 40%;
}

Then wrap those last two declarations in a media query:

@media all and (min-width: 800px) {
    .col {
    	float: right;
    	width: 20%;
    }
    #two {
    	width: 40%;
    	}
}

What that says is “the rules inside this curly-brace block apply in all media that have a minimum display width of 800 pixels.” Anything below that, no matter the medium, and the rules inside the block will be ignored. Note the parentheses around the min-width term and its value. These are necessary any time you have a term and value (which are referred to as an expression).

At this point, nothing will really change unless you shrink the browser window until it offers fewer than 800 pixels across to the document. At that point, the columns stop floating altogether.

Figure 7-4: What happens below 800 pixels.16
Figure 7-4: What happens below 800 pixels.

What you can do at this point is write another media-query block of layout rules that apply in narrower conditions. Say you want a two-column layout between 500 and 800 pixels):

@media all and (min-width: 500px) and (max-width: 799px) {
    .col {
    	float: left;
    	width: 20%;
    }
    #two {
    	float: right;
    	width: 69%;
    }
    #three {
    	clear: left;
    	margin-top: 0;
    }
}

Figure 7-5: The reworked layout, which shows between 500 and 800 pixels.17
Figure 7-5: The reworked layout, which shows between 500 and 800 pixels.

And finally, you can apply some single-column styles for any medium with fewer than 500 pixels of display width:

@media all and (max-width: 499px) {
    #one {
    	text-align: center;
    }
    #one li {
    	display: inline;
    	list-style: none;
		padding: 0 0.5em;
		border-right: 1px solid gray;
		line-height: 1.66;
	}
    #one li:last-child {
    	border-right: 0;
    }
    #three {
    	display: none;
    }
}

18
Figure 7-6: Single-column layout, which shows below 500 pixels.

Note that in all these queries, layout styles are defined in relation to the display area of the browser window. More generically, they are defined in relation to the display area available to the document in any medium in which it is rendered. That means that if a printer, for example, is used to print the document and it has an available display area 784 pixels wide, then the two-column layout will be for printing.

To restrict the column shifting to screen media only, alter the queries, like so:

@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}

But what if you want the three-column layout used in some non-screen media, like print and TV displays? Then add in those media using commas, like so:

@media print, tv, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}

The commas here act as logical ORs, so the first query reads “use these styles on print media OR TV media OR a display area on a screen medium where the display area is 800 pixels or more.”

And if you want the three-column layout used in all non-screen media? Add a statement to the first query using the not modifier saying “anything that isn’t screen.”

@media not screen, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}

As before, the comma joins the two in an OR statement, so it reads as “anything not on a screen medium OR a display area on a screen medium where the display area is 800 pixels or more.”

There is also an only modifier, so that a query can say something like only print or only screen and (color). As of this writing, not and only are the only modifiers in media queries.

You aren’t restricted to pixels for the previous queries, by the way. You can use ems, centimeters, or any other valid length unit.

Table 7-1: The base media query terms

Term Description
width The width of the display area (e.g., a browser window).
height The height of the display area (e.g., a browser window).
device-width The width of the device’s display area (e.g., a desktop monitor or mobile device display).
device-height The height of the device’s display area.
orientation The way the display is oriented; the two values are portrait and landscape.
aspect-ratio The ratio of the display area’s width to its height. Values are two integers separated by a forward slash.
device-aspect-ratio The ratio of the device display’s width to its height. Values are two integers separated by a forward slash.
color The color bit-depth of the display device. Values are unitless integers which refer to the bit depth. If no value is given, then any color display will match.
color-index The number of colors maintained in the device’s “color lookup table.” Values are unitless integers.
monochrome Applies to monochrome (or grayscale) devices.
resolution The resolution of the device display. Values are expressed using units dpi or dpcm.
scan The scanning type of a “TV” media device; the two values are progressive and interlace.
grid Whether the device uses a grid display (e.g., a TTY device). Values are 0 and 1.

Table 7-1 shows all the query terms that can be used in constructing media queries. Note that almost all of these terms accept min- and max- prefixes (for example, device-height also has min-device-height and max-device-height cousins). The exceptions are orientation, scan, and grid.

Styling Occasional Children

There are times when you may want to select every second, third, fifth, eighth, or thirteenth element in a series. The most obvious cases are list items in a long list or rows (or columns) in a table, but there are as many cases as there are combinations of elements.

Consider one of the less obvious cases. Suppose you have a lot of quotes that you want to float in a sort of grid. The usual problem in these cases is that quotes of varying length can really break up the grid.

A classic solution here is to add a class to every fourth div (because that is what encloses each quote) and then clear it. Rather than clutter up the markup with classes, though, why not select every fourth div?

.quotebox:nth-child(4n+1) {
	clear: left;
}

19
Figure 7-7: The problem with floating variable-height elements.

20
Figure 7-8: Clearing every fourth child.

A quick explanation of the 4n+1 part:

  • 4n means every element that can be described by the formula 4 times n, where n describes the series 0, 1, 2, 3, 4… .That yields elements number 0, 4, 8, 12, 16, and so on. (Similarly, 3n would yield the series 0, 3, 6, 9, 12… .)
  • But there is no zeroth element; elements start with the first (that is, element number 1). So you have to add + 1 in order to select the first, fifth, ninth, and so forth elements.

Yes, you read that right: the :nth-child() pattern starts counting from 0, but the elements start counting from 1. That’s why + 1 will be a feature of most :nth-child() selectors.

The great thing with this kind of selector is that if you want to change from selecting every fourth element to every third element, you need only change a single number.

.quotebox:nth-child(3n+1) {
	clear: left;
}

21
Figure 7-9: Clearing every third child.

That might seem pretty nifty on its own, but it gets better. If you combine this approach with media queries, you get an adaptable grid-like layout.

@media all and (min-width: 75.51em) {
    .quotebox:nth-child(5n+1) {
    	clear: left;
    }
}
@media all and (min-width: 60.01em) and (max-width: 75em) {
    .quotebox:nth-child(4n+1) {
    	clear: left;
    }
}
@media all and (min-width: 45.51em) and (max-width: 60em) {
    .quotebox:nth-child(3n+1) {
    	clear: left;
    }
}
@media all and (min-width: 30.01em) and (max-width: 45.5em) {
    .quotebox:nth-child(2n+1) {
    	clear: left;
    }
}
@media all and (max-width: 30em) {
    .quotebox {
    	float: none;
    }
}

22
23

Figure 7-10: Two views of an adaptable floated grid.

Note that this particular set of queries is based on the width of the display area of the browser as measured in ems. That helps make the layout much more adaptable to changes of text size and browser window.

If you’re interested in selecting every other element — let’s say, every other table row — there are some more human alternatives to 2n+1. You can select even-numbered or odd-numbered children using :nth-child(even) and :nth-child(odd), as in this example.

tr:nth-child(odd) {
	background: #eef;
}

Styling Occasional Columns

It’s easy enough to select alternate table rows for styling, but how about table columns? Actually, that’s just as easy, thanks to the :nth-child and :nth-of-type selectors.

In a simple table with rows consisting of nothing but data cells (those are td elements), you can select every other column like so:

td:nth-child(odd) {
	background: #fed;
}

24
Figure 7-11: Styling the odd-numbered columns.

Want to fill in the alternate ones!

td:nth-child(odd) {
	background: #fed;
}
td:nth-child(even) {
	background: #def;
}

If you’re after every third, fourth, fifth, or similarly spaced-out interval, then you need the n+1 pattern.

td:nth-child(3n+1) {
	background: #edf;
}

25
Figure 7-12: Styling both odd- and even-numbered columns.

26
Figure 7-13: Styling every third data column.

That’s all relatively straightforward. Now, what happens when you put a th at the beginning of each row? In one sense, nothing. The columns that are selected don’t change; you’re still selecting the first, fourth, seventh, and so on children of the tr elements. In another sense, the selected columns are shifted, because you’re no longer selecting the first, fourth, seventh, and so on data columns. You’re selecting the third, sixth, and so on data columns. The first column, which is composed of th element, doesn’t get selected at all because the selector only refers to td elements.

27
Figure 7-14: Disrupting the pattern with row headers.

To adjust, you could change the terms of the :nth-child selector:

td:nth-child(3n+2) {
	background: #edf;
}

Alternatively, you could keep the original pattern and switch from using :nth-child to :nth-of-type:

td:nth-of-type(3n+1) {
	background: #fde;
}

28
Figure 7-15: Restoring the pattern by adjusting the selection formula.

29
Figure 7-16: Restoring the pattern with :nth-of-type.

This works because it selects every nth element of a given type (in this case, td elements) that shares a parent element with the others. Think of it as :nth-child that also skips any elements that aren’t named in the :nth-child selector.

RGB Alpha Color

Color values are probably one of the most familiar things in all of CSS; some people are to the point of being able to estimate a color’s appearance based on its hexadecimal representation. (Go on, try it: #e07713.) It’s not quite as common to use the rgb() notation for colors, but they’re still pretty popular.

In CSS 3, the rgb() notation is joined by rgba() notation. The a part of the value is the alpha, as in alpha channel, as in transparency. Thus you can supply a color that is partly see-through:

.box1 {
	background: rgb(255,255,255);
}
.box2 {
	background: rgba(255,255,255,0.5);
}

30
Figure 7-17: Boxes with opaque and translucent RGB backgrounds.

You can also use the percentage form of RGB color values in RGBA:

.box1 {
	background: rgb(100%,100%,100%);
}
.box2 {
	background: rgba(100%,100%,100%,0.5);
}

The alpha value is always represented as a number between 0 and 1 inclusive, with 0 meaning “no opacity at all” and 1 meaning “fully opaque.” So half-opaque (and thus half-transparent) is 0.5. You can’t put a percentage in there for historical reasons that are too messy to get into here.

If you supply a number outside the 0 to 1 range, it will (in the words of the specification) be “clamped” to the allowed range. So if you give an alpha value of 4.2, the browser will treat it as if you’d written 1. Also, it isn’t clear what should happen when an alpha of 0 is used. Since the color is fully transparent, what will happen to, say, invisible text? Can you select it? If it’s used on a link, is the link clickable? Both are interesting questions with no definitive answers. So be careful.

RGBA colors can be used with any property that accepts a color value, such as color and background-color. To keep older browsers from puking on themselves, it’s advisable to supply a non-alpha color before the alpha color. That would take a form like so:

{
	color: #000;
	color: rgba(0,0,0,0.75);
}

The older browsers see the first value and know what to do with it. Then they see the second value and don’t know what to do with it, so they ignore it. That way, at least older browsers get black text. Modern browsers, on the other hand, understand both values and thanks to the cascade, override the first with the second.

Note that there is no hexadecimal form of RGBA colors. Thus, you cannot write #00000080 and expect half-opaque black.

HSL and HSL Alpha Color

A close cousin to RGBA values are the HSLA values, and an even closer cousin to them are HSL colors. These are new to CSS 3, and will be a delightful addition to many designers.

For those not familiar with HSL, the letters stand for Hue-Saturation-Lightness. Even if you didn’t know the name, you’ve probably worked with HSL colors in a color picker.

31
Figure 7-18: An HSL color picker.

The hue is represented as a unitless number corresponding to the hue angle on a color wheel. Saturation and lightness are both percentages, and alpha is (as with RGBA) a number between 0 and 1 inclusive. In practice, you can use HSL colors anywhere a color value is accepted. Consider the following rules, which create the equivalent effect.

.box1 {
	background: hsl(0,0%,100%);
}
.box2 {
	background: hsla(0,0%,100%,0.5);
}

32
Figure 7-19: Various HSL color tables.

33
Figure 7-20: Boxes with opaque and translucent HSL backgrounds.

You can do old-browser fallbacks with regular RGB values, though having to specify an RGB color and then HSL color does sort of detract from the point of using HSL in the first place. HSL allows you to get away from RGB altogether.

Shadowy Styles

Ah, drop shadows. Remember drop shadows? In the mid-90’s, everything had a drop shadow. Of course, back then the shadows were baked into images and constructed with tables even more tortuously convoluted than usual. Now you can relive the glory days with some fairly simple CSS. There are actually two properties available: text-shadow and box-shadow.

Take the former first. The following CSS will result:

h1 {
	text-shadow: gray 0.33em 0.25em 0.1em;
}

The first length (0.33em) indicates a horizontal offset; the second (0.25em), a vertical offset. The third is a blur radius, which is the degree by which the shadow is blurred. These values can use any length unit, so if you want to do all your shadow offsets and blurs in pixels, go to town. Blurs can’t be negative, but offsets can: A negative horizontal offset will push the shadow to the left, and a negative vertical offset will go upward.

34
Figure 7-21: Dropping shadows from a heading.

You can even have multiple shadows! Of course, whether you should, is a matter of opinion.

h1 {
	text-shadow: gray 0.33em 0.25em 0.1em, -10px 4px 7px blue;
}

Note that the color of a shadow can come before all the lengths or after them, whichever you prefer. Note also that the CSS 3 specification says that the first shadow is “on top,” which is closest to you. Shadows after that are placed successively further away from you as you look at the page. Thus, the gray shadow is placed over the top of the blue shadow. Now to shadow boxes. It’s pretty much the same drill, only with a different property name.

h1 {
	box-shadow: gray 0.33em 0.25em 0.25em;
}

35
Figure 7-22: A heading with multiple shadows.

36
Figure 7-23: Shadowing the element box of a heading.

Even though there’s no obvious element box for the h1, a shadow is generated anyway. It’s also drawn only outside the element, which means that you can’t see it behind/beneath the element, even when the element has a transparent (or, with RGBA colors, semi-transparent) background. The shadows are drawn just beyond the border edge, so you’re probably better off putting a border or a visible background (or both) on any shadowed box.

You can have more than one box shadow, just like you can with text shadows:

h1 {
	box-shadow: gray 0.33em 0.25em 0.25em, -10px 2px 6px blue;
}

37
Figure 7-24: Multiple shadows on the element box of a heading.

Here’s where I have to admit a small fib: The previous examples are the ideal cases. As of this writing, they wouldn’t actually work in browsers. As of mid-2010, to make the single-shadow example work, you’d actually need to say:

h1 {
	-moz-box-shadow: gray 0.33em 0.25em 0.25em;
	-webkit-box-shadow: gray 0.33em 0.25em 0.25em;
	box-shadow: gray 0.33em 0.25em 0.25em;}

That will cover all modern browsers as of mid-2010. Over time, the need for the prefixed properties (-moz- and –webkit-) will fade and you’ll be able to just write the single box-shadow declaration. When exactly will that happen? It all depends on your design, your site’s visitors, and your own sense of comfort.

If you also want to get drop shadows on boxes in older versions of Internet Explorer, then you’ll need to add in the IE-only Shadow filter. Read here38 to find out more.

Multiple Backgrounds

One of the really nifty things in CSS 3 is its support for multiple background images on a given element. If you’ve ever nested multiple div elements just to get a bunch of background decorations to show up, this section is for you.

Take, for example, this simple set of styles and markup to present a quotation:

body {
	background: #c0ffee;
	font: 1em Georgia, serif;
	padding: 1em 5%;
}
.quotebox {
	font-size: 195%;
	padding: 80px 80px 40px;
	width: 16em;
	margin: 2em auto;
	border: 2px solid #8d7961;
	background: #fff;
}
.quotebox span {
	font-style: italic;
	font-size: smaller;
	display: block;
	margin-top: 0.5em;
	text-align: right;
}
One’s mind has a way of making itself up in the background, and it suddenly becomes clear what one means to do. —Arthur Christopher Benson

39
Figure 7-25: Setting up the quotation’s box.

Now, adding a single background image is no big deal. Everyone has done it about a zillion times.

.quotebox {
	background: url(bg01.png) top left no-repeat;
	background-color: #fff;
}

40
Figure 7-26: Adding a single background.

But what if you want a little quarter-wheel in every corner? Previously, you would have nested a bunch of divs just inside the quotebox div. With CSS 3, just keep adding them to the background declaration:

.quotebox {
      background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat;
      background-color: #fff;
}

41
Figure 7-27: Applying two backgrounds to the same element.

Commas separate each background value to get multiple backgrounds:

.quotebox {
background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat,
             url(bg03.png) bottom right no-repeat,
             url(bg04.png) bottom left no-repeat;
      background-color: #fff;
}

42
Figure 7-28: Applying four backgrounds to a single element.

The effect here is extremely similar to nesting a bunch of divs. It’s just that with CSS 3, you don’t have to bother any more.

That similarity extends into the way background are composited together. You may have noticed that I split out the background-color declaration in order to have a nice flat white behind all the images. But what if you wanted to fold it into the background declaration? Where would you put it? After all, each of these comma-separated values sets up its own background. Put the color in the wrong place, and one or more images will be overwritten by the color.

As it turns out, the answer is the last of the values:

.quotebox {
background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat,
             url(bg03.png) bottom right no-repeat,
             #fff url(bg04.png) bottom left no-repeat;
}

That’s because the multiple background go from “highest”—that is, closest to you as you look at the page—to “lowest”—furthest away from you. If you put the color on the first background, it would sit “above” all the others.

This also means that if you want some kind of patterned background behind all the others, it needs to come last and you need to make sure to shift any background color to it.

.quotebox {
background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat,
             url(bg03.png) bottom right no-repeat,
             url(bg04.png) bottom left no-repeat,
             #fff url(bgparch.png) center repeat;
}

43
Figure 7-29: One element, five backgrounds.

Because of the possible complexities involved, I prefer to split any default background color into its own declaration, as shown earlier. Thus I’d write the preceding as:

.quotebox {
	background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat,
             url(bg03.png) bottom right no-repeat,
             url(bg04.png) bottom left no-repeat,
             url(bgparch.png) center repeat;
      background-color: #fff;
}

When you use the separate property, the color is placed behind all the images and you don’t have to worry about shifting it around if you reorder the images or add new images to the pile.

You can comma-separate the other background properties such as background-image. In fact, an alternate way of writing the preceding styles would be:

.quotebox {
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png), url(bgparch.png);
    background-position: top left, top right, bottom right, bottom left, center;
    background-color: #fff;
}

Different format, same result. This probably looks more verbose, and in this case it really is, but not always. If you drop the parchment background, then you could simplify the first declaration quite a bit:

.quotebox {
    background-repeat: no-repeat;
    background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png);
    background-position: top left, top right, bottom right, bottom left;
    background-color: #fff;
}

44
Figure 7-30: Similar background, alternate syntax.

Given those styles, none of the background images would be repeated, because the single no-repeat is applied to all the backgrounds that are assigned to the element. The only reason you had to write out all the repeat values before was that the first four have one value and the fifth had another.

And if you were to write two values for background-repeat?

.quotebox {
    background-repeat: no-repeat, repeat-y;
    background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png);
    background-position: top left, top right, bottom right, bottom left;
    background-color: #fff;
}

In that case, the first and third images would not be repeated, whereas the second and fourth images would be repeated along the y axis. With three repeat values, they would be applied to the first, second, and third images, respectively, whereas the fourth image would take the first repeat value.

2D Transforms

If you’ve ever wanted to rotate or skew an element, border, and text and all, then this section is definitely for you. First, though, a word of warning: In order to keep things legible, this section uses the unprefixed version of the transform property. As of this writing, doing transforms in a browser actually would require multiple prefixed declarations, like so:

-webkit-transform: …;
-moz-transform: …;
-o-transform: …;
-ms-transform: …;
transform: …;

That should cease to be necessary in a year or two (I hope!) but in the meantime, keep in mind as you read through this section that it’s been boiled down to the unprefixed version for clarity.

Time to get transforming! Possibly the simplest transform to understand is rotation:

.box1 {
	-moz-transform: rotate(33.3deg);
}
.box2 {
	-moz-transform: rotate(-90deg);
}

45
Figure 7-31: Rotated element boxes. The red dashes show the original placement of the elements before their rotation.

In a sense, transforming is a lot like relative positioning: The element is placed normally and then transformed. You can transform any element at all, and in the case of rotation can use any real-number amount of degrees, radians, or grads to specify the angle of rotation. If you’ve ever wanted to rotate your blog by e radians or 225 grads, well, now’s your chance.

As you no doubt noticed, the boxes in the preceding example were rotated around their centers. That’s because the default transformation origin is 50% 50%, or the center of the element. You can change the origin point using transform-origin:

.box1 {
	transform: rotate(33.3deg);
	transform-origin: bottom left;
}
.box2 {
	transform: rotate(-90deg);
	transform-origin: 75% 0;
}

46
Figure 7-32: Elements rotated around points other than their centers.

Two notes: First, negative angles can be equivalent to positive angles. Thus, 270deg is equivalent to –90deg in the final positioning of the element, just as 0deg and 360deg are the same. Second, you can specify angles greater than the apparent maximum value. If you declare 540deg, the element’s final rotation will look exactly the same as if you’d declared 180deg (as well as –180deg, 900deg, and so on). The interim result may be different if you also apply transitions (see next section), but the final “resting” state will be equivalent.

Almost as simple as rotation is scaling. As you no doubt expect, this scales an element up or down in size, making it larger or smaller. You can do this consistently along both axes, or to a different degree along each axis:

.box1 {
	transform: scale(0.5);
}
.box2 {
	transform: scale(0.75, 1.5);
}

47
Figure 7-33: Scaled elements.

One scale() value means the element will be scaled by that amount along both the x and y axes. If there are two values, the first specifies the horizontal (X) scaling, and the second, the vertical (Y) scaling. Thus, if you want to leave the horizontal axis the same and only scale on the y axis, do this:

.box1 {
	transform: scale(0.5);
}
.box2 {
	transform: scale(1, 1.5);
}

Alternatively, you can use the scaleY() value:

.box1 {
	transform: scale(0.5);
}
.box2 {
	transform: scaleY(1.5);
}

Along the same lines is the scaleX() value, which causes horizontal scaling without changing the vertical scaling.

.box1 {
	transform: scaleX(0.5);
}
.box2 {
	transform: scaleX(1.5);
}

48
Figure 7-34: Two scaled elements, one scaled only on the Y axis.

49
Figure 7-35: Two scaled elements, one scaled only on the X axis.

When writing CSS yourself, it seems most convenient to just stick with scale() and fill in a 0 for the horizontal any time you want a purely vertical scaling. If you’re programmatically changing the scaling via DOM scripting, it might be easier to manipulate scaleX() and scaleY() directly.

As with rotation, you can affect the origin point for scaling. This allows you, for example, to cause an element to scale toward its top-left corners instead of shrink down toward its center:

.box1 {
	transform: scale(0.5);
	transform-origin: top left;
}
.box2 {
	transform: scale(1.5);
	transform-origin: 100% 100%;
}

50
Figure 7-36: Two scaled elements, each with a different scaling origin.

Similarly simple is translation. In this case, it isn’t changing the language from one to another, but “translating” a shape from one point to another. It’s an offset by either one or two length values.

.box1 {
	transform: translate(50px);
}
.box2 {
	transform: translate(5em,10em);
}

51
Figure 7-37: Translated elements.

Again, this is very much like relative positioning. The elements are placed normally and then transformed as directed. When there’s only one length value in a translate() value, it specifies a horizontal movement and the vertical movement is assumed to be zero. If you just want to translate an element up or down, you have two choices. First is to simply give a length of 0 for the horizontal value.

.box1 {
	transform: translate(0,50px);
}
.box2 {
	transform: translate(5em,10em);
}

The other is to use the value pattern translateY():

.box1 {
	transform: translateY(50px);
}
.box2 {
	transform: translate(5em,10em);
}

There is also a translateX(), which does about what you’d expect: moves the element horizontally!

52
Figure 7-38: Two differently translated elements.

While you can declare a transform-origin in cases where you’re just translating, it doesn’t matter all that much whether you do so. After all, whether an element’s center or top-left corner is pushed 50 pixels to the right doesn’t really matter. The element will end up in the same place either way. But that’s only true if all you’re doing is translating. If you do anything else at the same time, like rotate or scale, then the origin will matter. (More on combining transforms in a bit.)

The last type of transformation, skewing, is slightly more complex, although the method of declaring it is no more difficult than you’ve seen so far.

Skewing an element distorts its shape along one or both axes:

.box1 {
	transform: skew(23deg);
}
.box2 {
	transform: skew(13deg,-45deg);
}

If you provide only a single value for skew(), then there is only horizontal (X) skew, and no vertical (Y) skew. As with translations and scaling, there are skewX() and skewY() values for those times you want to explicitly skew along only one axis:

.box1 {
	transform: skewX(-23deg);
}
.box2 {
	transform: skewY(45deg);
}

53
Figure 7-39: Two skewed elements.

54
Figure 7-40: Two elements, each one skewed along a different axis.

Here’s how skewing works: Imagine there are two bars running through the element, one along each of the X and Y axes. When you skew in the X direction, the Y axis is rotated by the skew angle. Yes, the Y (vertical) axis is the one that rotates in a skewX() operation. Positive angles are counterclockwise, and negative angles are clockwise. That’s why the first box in the preceding example appears to tilt rightward: The Y axis was tilted 33.3 degrees clockwise.

The same basic thing happens with skewY(): The X axis is tilted by the specified number of degrees, with positive angles tilting it counterclockwise and negative angles tilting clockwise.

The interesting part here is how the origin plays into it. If the origin is in the center and you provide a negative skewX(), then the top of the element will slide to the right of the origin point while the bottom will slide to the left. Change the origin to the bottom of the element, though, and the whole thing will tilt right from the bottom of the element.

.box1 {
	transform: skewX(-23deg);
}
.box2 {
	transform: skewY(-23deg);
	transform-origin: bottom center;
}

55
Figure 7-41: Two skewed elements, each with a different skewing origin.

Similar effects happen with vertical skews.

So those are the types of transforms you can carry out. But what if you want to do more than one at a time? No problem! Just list them in the order you want them to happen.

.box1 {
	transform: translateX(50px) rotate(23deg);
}
.box2 {
	transform: scale(0.75) translate(25px,-2em);
}

56
Figure 7-42: Multiple transforms in action.

In every case, the transforms are executed one at a time, starting with the first. This can make a significant difference. Consider the differing outcomes of the same transforms in different orders.

.box1 {
	transform: rotate(45deg) skew(-45deg);
}
.box2 {
	transform: skew(-45deg) rotate(45deg);
}

There is one more transformation value type to cover: matrix(). This value type allows you to specify a transformation matrix in six parts, the last two of which define the translation. Here’s a code example:

.box1 {
	transform: matrix(0.67,0.23,0,1,25px,10px);
}
.box2 {
	transform: matrix(1,0.13,0.42,1,0,-25px);
}

57
Figure 7-43: The differences caused by transform value ordering.

58
Figure 7-44: Matrix transforms.

Basically, the first four numbers are a compact form of expressing the end result of rotating, skewing, and scaling an element, and the last two translate that end result. If you understand matrix-transformation math, then you’ll love this. If you don’t, don’t worry about it overmuch. You can get to the same place with the other transform values reviewed in this chapter.

If you’d like to learn about matrix transforms, here are two useful resources:

About the book

Smashing CSS61

Smashing CSS62 takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. This book is for developers who already have some experience with CSS and JavaScript and are ready for more advanced techniques.

(vf) (ik)

table.terms {
border: 1px solid #ccc;
border-collapse: collapse;
margin-top: 5px;
}
.terms thead {
background-color: #ccc;
font-weight: bold;
}
.terms td {
padding: 6px 8px;
}
.terms tr {
border-bottom: 1px solid #ccc;
}

↑ Back to topShare on Twitter

Eric Meyer is an internationally recognized expert on the subjects of HTML, CSS, and Web standards, and has been working on the Web since 1993. Smashing CSS is for developers who already have some experience with CSS and JavaScript and are ready for more advanced techniques. You can follow him on Twitter or visit his blog.

  1. 1

    ahhh yes what a bright future it has ;) Thanks for the great article

    0
  2. 2

    Grrr, we need to fast forward time to use this. Thanks for the article. Bookmarked!

    0
    • 3

      Progressive enhancement mate.

      0
      • 4

        I am working with overseas clients, how the hell they know/see the progressive enhancement I had worked on several hours if they are using IE? They dnt even know what is Firefox.

        For now, there are workarounds to do the same effects without using html5/css3 and no need for graceful degradation as well.

        Dont get me wrong, I love html5/css3 as much as you do. But I cannot tell my clients which browser to use, and they are like 95%

        0
        • 5

          I know this may be easier said than done for you but personally Id be dropping any client where the main requirement is IE support. I’m all for graceful degradation but not support for browsers that were never right in the first place.

          0
          • 6

            But, if you are in a situation like Archie, where 95% of your country and prospective clientele are using obsolete versions of IE, denying them is only an ignorant decision that will empty out your bank account rather than filling it. Part of working in this industry actually revolves around actually having the “work” part.

            You know, I always hear people crying about how they “don’t want to code/design for IE” or “IE sucks why won’t it die,” or “tell your clients they are dumb if they use IE”…. wah wah. Then why did you become a web designer? Isn’t Problem solver and loves a challenge part of the job description?

            Sure I loath IE sometimes and adore valid semantics as much as the next guy, but it’s challenges like these that thins out the competition and keeps you getting jobs. If web design was easy, you wouldn’t have a job… well perhaps you might, but you and your skills wouldn’t be worth as as much as they are now.

            I love challenges that’s why I am in this field. IE is just another challenge. I would love to see IE<9 die, and they will. But expect some other thorn to grow in it's place. Until then, stop crying, educate your clients and code for the present while keeping the future in mind.

            0
          • 7

            Which is why I now charge extra for IE6 dev. And I will start charging extra for IE7 soon.

            Making stuff work on outdated browsers costs me a lot of time.
            Time = money.

            I use it to discourage my clients from using older browsers.

            I try to make my sites degrade as gracefully as possible, but shadows, rounded corners and rbga transparency are now limited to modern browsers.

            0
  3. 8

    A must read for web designers of 2030!

    0
    • 9

      *facepalm*

      0
    • 10

      Good article… but in real word things are different.
      Who advocate pure HTML5 and CSS3 for today, is because don’t have real clients or work in a niche market that allow them to do that. But who lives from web development, knows that HTML5 is far away to become the next standard.

      0
    • 11

      Gave me a chuckle, haha. If only it were not true :(.

      0
  4. 12

    It seems like there has been less new content from Smashing since the beginning of the year. Are all of your writers on one of those “prolonged European Holiday Vacations.”

    0
  5. 13

    Archie and David – You just don’t get it, do you? Just learn to combine these new techniques with older ones, it’s not that hard. If that seems impossible to you, I wish you all the best with coding for deprecated browsers for another 20 years. Sounds like a lot of fun too.

    0
    • 14

      IF IE6 CAN’T DO IT THAN NEITHER WILL I!

      JK. I’m all about progressive coding with good fall-backs. I love CSS3 and feel pity for those that view the web on older versions of any browser, not just IE.

      0
    • 15

      PixelTunnelVision

      February 11, 2011 3:47 pm

      That’s kinda the point, at least regarding why some people aren’t so excited to jump and use this stuff yet. The “progressive enhancement” you and Jordan are preaching is kinda overkill sometimes. Want a fancy effect? Use HTML5, then css3. Done. Wait…it doesn’t work in [insert 20 situations here]. So you have to use tons of javascript to make it work. Then you have to make sure it all degrades for people who can’t handle all that fancy javascript. All that just to use the new stuff. You coulda had just as good a solution, for now, using xhtml/css to being with. And you’d probably end up with equal or less code and far more widespread compatibility.

      0
      • 16

        There is a difference between progressive enhancement and graceful degradation, you know. In a PE scenario, you reward better browsers with extras, whilst having a more basic, yet still working experience in older browsers. The point of PE is exactly NOT to get everything to look and work the same in all browsers. The complaint you describe having to provide a lot of workarounds for all older browsers is not PE.

        0
        • 17

          Kinda is, as they conceptually go hand-in-hand. You can’t provide the latest stuff for newer browsers without implementing degradation. Therefore, by implementing PE you’re in turn obligated to degrade. It’s a tie-in.

          0
          • 18

            Yeah because using a cdn to link an already existing js file and targeting some stuff with the injected classes is so hard…

            0
      • 19

        Totally agree with you here.
        Only people who never used CSS3 on a real live website think this is cool.
        CSS3 is a bigger pain in the as$ than IE6.

        0
        • 20

          Vanea Alexander Bell

          June 4, 2011 1:43 pm

          Catalin, lasa-ma cu IE6, ca ma ia durerea de cap! Si ce daca IE6 nu citeste bine?? Cine vrea un browser bun, destinat exclusiv navigarii in bune conditii, va folosi Google Chrome! Cine nu, se va abtine!

          0
      • 21

        Vanea Alexander Bell

        June 4, 2011 1:37 pm

        @PixelTunnelVision:
        -That’s why we all should use GOOGLE Chrome, mate! Because IE sucks totally and Opera sucks partially! Grrr…

        0
    • 22

      Oh, I do get it more than you think. Don’t convince me, convince the whole population to shift to Firefox (or IE9).

      Nobody cares about html5/css3 other than web designers and alike. Have you heard “I dnt care, just make it work!”

      0
  6. 23

    Nice tactical overview of the emerging standard. People can start using this today. It just depends on your target audience. What you need to ask: Whats the browser share for your visitors?

    0
  7. 24

    I’ve read so many articles about CSS3, but this by far is the easiest to understand, yet covers a lot more than just the basics

    0
  8. 25

    Eric, thanks. This is awesome. Some of these I already use and teach to my class. Even though full support is a ways off I am buying the book today.

    0
  9. 26

    Great read. I’m already using all of this TODAY, with fallbacks where some of these styles don’t play nice in older browsers.

    As professionals, we need to accept that all browsers will not implement the same feature sets at the same time. So, the day of expecting layouts to look 100% the SAME across each browser is a thing of the past.

    As professionals, we should be educating our clients, teammates and overlords to accept that older browsers get the best possible design for their capabilities, while newer browsers get the best possible design for their capabilities. That doesn’t have to mean making eleventy thousand comps for eleventy thousand browsers/versions. It means using our noodles to do some creative thinking and strategic planning for graceful fallbacks, where applicable.

    0
    • 27

      PixelTunnelVision

      February 11, 2011 6:14 pm

      Only problem is…most of those “graceful” fallbacks end up meaning more javascript and more code/time/work, when the same solution in xhtml/css would have been sufficient. You’re putting a rocket engine into a small car just because it’s “the future,” and then you have to bend over twice as much to service it. When using the same old car engine for now and then working on the rocket engine in the garage for later would be ideal.

      0
      • 28

        Graceful degradation means putting the rocket engine in cars that can handle it, and to not put it in the old car. The whole idea of progressive enhancement is to reward better browsers, not to reward all browsers at all costs. Therefore, you analogy is broken and old school thinking.

        0
        • 29

          Didn’t I try to negate that? No. You just reworded what I said. In your analogy of cars, new cars take new engines, old cars take older engines. Bad analogy. On the web, one site is viewed by multiple browsers. It’s one engine and multiple cars. So you have to make it as-is for newer cars, then spend a zillion extra hours fitting on makeshift parts so it’ll kinda run in older cars. I suggest continued use of old engines made the best they can be, while building old engines in the garage and studying it ad nauseum without using it widespread just yet. You keep saying “rewarding newer browsers.” I say you’re just jumping on a bandwagon and being impatient.

          0
          • 30

            Out of interest where do you get these values of “5 hours applying fixes” & “zillion extra hours” – I honestly do not understand why anyone would need to do this and how you have got these numbers?

            “By jumping on the bandwagon and being impatient” – I am developing websites faster than I was before, they look great (in my opinion), the code is lean and semantically correct and Im having so much fun.

            0
  10. 31

    As is inevitable when any CSS3 article is published, we see people commenting who are convinced they can’t use the techniques described.

    This is what’s been holding our industry back for years now (moreso than browsers’ lack of support).

    If people don’t use CSS3 then what incentive is there for browser makers to implement it? It’s up to the designers to drive demand for support. Sure, for the time being it requires more work – we need to have fallbacks in place for browsers that can’t handle the latest techniques – but if you’re using these techniques as the ONLY way of delivering information then you’re not doing your job properly. Just like if you’re still designing table-based layouts.

    The key is graceful degradation. Design for capable browsers first, but have a solid alternative in place for older machines, or use a bolierplate solution (such as Andy Clarke’s Universal IE6 Stylesheet) for the most archaic.

    NEVER rely on eyecandy as the only way of delivering your message. Start with clear information, with semantic, clean markup, and build on top of it. Don’t block people out (unless you’re doing something deliberately experimental). Use little CSS3 tricks to enhance designs (I regularly use text-shadow and box-shadow on otherwise traditional sites – a nice touch for those who see it but those with older browsers won’t know what’s missing).

    Push the envelope of your craft; take pride in what you’re doing and don’t worry about being pixel-perfect across all browsers. This is the way forward.

    And stop using tables for layout. You know who you are.

    0
    • 32

      Who cares? Us savvy designers/developers will continue to implement these cutting-edge techniques while the lesser-qualified wallow in their own ineptitude and say things like “well until browser support is universal….”

      0
      • 33

        PixelTunnelVision

        February 11, 2011 6:11 pm

        I may not be freely deploying a lot of html5/css3 yet, but you better freaking believe I am learning it. And I want it to grow, I want it to become standard and work everywhere. I am pushing for it. But I am also rational enough to know you shouldn’t go gaga over something that’s still baking in the oven, overuse it and say you’re awesome just because you do. There’s no need to act like you’re some forward-thinking beacon of genius while anyone who thinks HTML5/CSS3 browser acceptance and market education should be just a tad bit more widespread is some luddite moron who lives in a cave. You say they’re daft? I could just as easily say you’re a hype-following, trendy conformist who just rehashing slogans and doesn’t really weigh the pros of both sides.

        0
    • 34

      I completely agree with you. And for the people using table layouts–ah, that just makes my head spin. Looking at the code for table layouts makes my brain hurt at this point. I’m not sure how I did it over the years….

      I certainly wish I had more time to fit in these new techniques (I still obviously use early CSS3 techniques like border-radius, box-shadow, RGBA, etc…). But with most of our clients reviewing our sites on early versions of IE–we target those browsers first before we target Chrome and Firefox. If it works in IE 6-8, it’ll work just fine in Chrome and Firefox.

      0
  11. 35

    FANTASTIC article, bookmarking as I’m sure I will want to reference it in the near future!

    0
  12. 36

    Maybe I’m missing something but in this code:


    figure {
    float: left;
    border: 1px solid gray;
    padding: 0.25em;
    margin: 0 0 1.5em 1em;
    }

    figcaption {
    text-align: center;
    font: italic 0.9em Georgia, "Times New Roman", Times, serif;
    }

    <em>SPLASH SPLASH SPLASH!!!</em>

    I’m seeing a conflict between figcaption in the css and the em in the html.

    0
    • 37

      Figcaption is not a CSS element it is part of the HTML5 specification. Both figcaption and em serve different purposes.

      0
  13. 38

    Audrius Jankauskas

    February 11, 2011 9:21 am

    Great things to come. Multiple background is one of the key elements that will let to have clean and clear HTML. One more step to have more semantics. In addition, still waiting for the CSS style that would force auto-wrapping instead of using tag.

    0
  14. 39

    Nice article, always good to have an overview/roundup of the latest techniques. Two points:

    1. The audio and video elements are neither ‘inline’ or ‘block’ – they are ‘inline-block’, like images and objects. So they should go in their own declaration:
    audio, video { display: inline-block; }

    2. Do you really need that much description in image alt attributes? For example, why even mention that the girl on the swing has pigtails? That’s the least important part of the photograph. And on the first photo, the alt attribute provides MORE information than the image itself does!

    0
    • 40

      The alt attribute is there for accessibility reasons, like people with visual impairment. Yes, they need a descriptive tag.

      0
      • 41

        I don’t think you actually read my post properly. Alt attributes should describe the content of the image for those that cannot see it.

        There is no indication in the first image that the child is in a swimming pool or that the water was “thrown up by her hands”. It’s completely pointless to mention those things in the description.

        Similarly for the second image, I don’t see what relevance the girl’s pigtails has. Why not also mention her pink top, the grass next to the play area, the large area of tarmac, or the trees and houses in the distance?

        0
        • 42

          Actually, Scott, a proper set of ‘alt’ text would indeed describe all those things. However, I had to balance the length and depth of the text with the demands of print publishing and teaching. Writing a paragraph or two of “real” ‘alt’ text (describing the trees, houses, tarmac, clothing, etc.), while more proper, would obscure the point being taught and chew up a lot of ink and paper. Thanks for expanding on what constitutes good ‘alt’ text, though; it’s always good to have that reminder for those who might not give it the thought it deserves!

          0
  15. 43

    Love the ability to have multiple backgrounds with CSS3! Finally no more nested divs!

    0
  16. 44

    not to close an image tag is not a good way of coding it should be

    0
    • 45

      Your code isn’t showing but actually you don’t need to self-close image tags in HTML5. The XHTML syntax was always a misguided attempt to make code ‘symmetrical’. HTML is very well-defined and there is no problem with ‘unclosed’ img tags.

      0
      • 46

        PixelTunnelVision

        February 11, 2011 6:17 pm

        “The XHTML syntax was always a misguided attempt” – Right. And before HTML5 saw the light of day, you and everyone else were saying XHTML was king, close tags, be strict, validate, tisk tisk. All the XHTML bashing didn’t surface until HTML5 hit. Just like table bashing didn’t start until someone said “Use Divs,” and everyone followed. Not saying the path isn’t leading to a different place. Just saying people act too much like sheep sometimes.

        0
        • 47

          I totally agree with what you are saying, however I disagree with the comment about people being like sheep.

          Personally I was all about the strict XHTML and closing tags etc but after attending a few talks about HTML5 and speaking to people like Bruce Lawson, I feel more educated about how browsers actually work and that they don’t care if tags are open or closed. So I don’t see it as being a sheep, I see it as having more knowledge on browsers and how they work.

          However, I use HTML5 always now but I always just continue to close all my tags just from habit and how I work.

          0
          • 48

            “I totally agree with what you are saying, however I disagree with the comment about people being like sheep.” – To be fair, it’s certainly not everyone. But it is a lot of them. ‘Group Think’ is a surprisingly powerful thing. Most of what you’re saying, how you’re learned and changed due to knowledge, is what people said about xhtml. Now they’re casting it away like a tumor calling it a sad/failed effort. If they weren’t group thinkers they’d probably be more along the lines of, “Xhtml seemed awesome, but this seems maybe better. Oh well. I’ll move on. Fairwell, Xhtml! We had some good times together!”

            0
          • 49

            So what you are saying is that we should never better ourselves? We should never move on and start using new technologies? Just stick with what we know?

            I have absolutely no problem with anyone who thinks its not time to move on from XHTML, thats entirely there choice. What does drive me up the wall is people making out that I am in the wrong or “impatient” for moving on when I have no problems with using HTML5, my clients have no problem with it.

            0
          • 50

            Also, just thought I would mention I have no problems with XHTML at all, I happen to think it is great. It certainly moved the industry forward in terms of pressing home the idea of standards and producing validate code.

            I just see HTML5 as the next step forward.

            0
  17. 51

    Great article, so simple, and so many new info.

    0
  18. 52

    Great article, thanks for the info. +1 for multiple backgrounds!

    0
  19. 53

    PixelTunnelVision

    February 11, 2011 3:43 pm

    Awesome article. However, almost everything discussed within is why I’m learning/loving this new stuff, but also why I’m NOT deploying it yet. Ironic, since the article discusses how to use it now even though it’s still not done baking. You have to do too much to get what is still too little, IMO. If you’re going to load up on javascript and other crutches, might as well just do xhtml/css. Spending 5 extra hours making sure your fancy html5/css3 degrades in all the browsers that have varying levels of support just seems like a headache, and all just so you can say you’re using the “new stuff.” In the end, will having an article tag be more semantic than a div tag? Maybe. Is it really going to boost your site into space today? No. You can call it progressive enhancement. You can also call it overkill because of not wanting to wait. Pros and cons to both. I’m loving, learning, embracing…but not freely and fully deploying just yet.

    0
    • 54

      I must say it normally drives me potty when I see comments like yours who say these techniques can not be used right now. But you make such a good argument and you do it in a nice way and like you just because you personally do not feel ready to use them there is nothing stopping you from using them.

      I do disagree when you say ’5 extra hours making sure you html5/css3 degrades’ – I now use HTML5 & CSS3 as a standard in all my work (be it for me or clients) and I to be honest I am developing websites faster now I use these techniques. I don’t have to load up lots of Javascript to patch holes in older browsers all I use is Modernizr and do the rest with CSS, but seriously I am actually working faster and more efficiently now.

      But like I say, nice comment! :D

      0
    • 55

      My take is to use these techniques where it does not hurt to not have them in older browsers. Rounded corners is a nice example. Looks better in browsers that understand them, looks boxy but still functional in IE.

      Placeholders and autofocus in forms, nice little enhancement for better forms, not vital if IE does not have it. Shadows, text-shadows and subtle gradient backgrounds: nice to decorate a design, not that bad in IE if you have solid fallback colors.

      It is true that you cannot use everything, but you can definitely cherry pick a few things for which you do not have to provide a fallback in older browsers, thus you do not have the extra work. It will also create a positive momentum for people to use better browsers, their experience will improve.

      The mindset of providing fallbacks for everything needs to go, although in a sensible matter. Come to think of it, we do not even have baseline standards anymore (they are “living”), so there is no point of waiting for things to officially be supported, because that moment will never come. In fact, there never was such a thing, browser implementers have never complied with baseline web standards, they always implemented the latest version of it.

      0
  20. 56

    Amazing article Eric !!
    So much to learn and as we knowledge should be free, so when we gonna have that book for free ;)

    Thanks !!

    0
  21. 57

    Nicolas Gallagher wrote about a CSS2 alternative to CSS3 multiple background images. I’m all for using CSS3 wherever I can but http://caniuse.com/ shows browser support for generated content at 81.4% as opposed to 46.6% for multiple bg-images, so the CSS2 option seems the better way to go for now.

    And on the styling occasional children grid example, I realise the point is to demonstrate CSS3 techniques, but for what you’re trying to accomplish there, wouldn’t using inline-block instead of floats be better? Then you don’t have to worry about clearing each nth item. Using nth() can be useful for removing margins or padding from items on the left or right side of the grid, but I’ve found you can get away with using a negative margin on the parent element instead in many cases.

    0
  22. 58

    this is awesome.
    I am just waiting for use this, When my client allow me to use it…
    they still like IE. :(

    0
  23. 61

    Hi Smashing Magazine,
    I love your posts, CSS3, & HTML5.
    But…. Could you please please please write a tutorial post on the BEST possible way of modernizing techniques for HTML5 and CSS3 to work cross-browser like?

    Even to give and example of an HTML page using all elements shown here which would work cross-browser,
    and then we could all just “view source” to see under the hood which scripts and hacks you used to work the magic?

    There are so many “modernizer scripts” out there, but which ones really work, and in what sort of combination of scripts and hacks that are friendly also to other scripts?

    I know there isnt only one solution. But which is best?

    Thanks a lot!

    0
  24. 64

    I’ve written a post about a conceptual framework for grids using media queries that makes at least my life a lot easier when I do my HTML and CSS :) (http://www.significantpixels.com/2010/12/10/responsive-grid-systems/)

    0
  25. 65

    Thanks for the article Eric! It’s always nice to stay up to date on these new techniques. I’ve been following along with HTML5 and CSS3 best practices so some of this is just a nice refresher. I liked how thorough you were with each element and property you covered. Your examples really make it easy to understand how to use each of them. I especially liked your examples for multiple backgrounds and nth-child vs nth-of-type.

    0
  26. 66

    Hi Smashing magazine!
    I have a question – do you plan to sell on your shop Smashing Magazine Book Series:
    Smashing HTML5
    Smashing CSS
    Smashing jQuery,
    etc.

    BR!

    0
  27. 67

    Its very interesting learning about whats possible with HTML 5, and seeing the chatter happening within the web design community. However the key reason I wont be using HTML5 in most of my professional projects for the forseeable future is because the HTML5 spec still isnt finished, and I think HTML 4/xHTML will be around for at least another decade. I say this because although I have xHTML and CSS have been around since 2001, I am still in 2011 seeing people designing websites using tables and the image slicing function in photoshop, and there are many designers who have problems with html semantics, using divs for anything and everything. Until HTML5 just works I just see no point using it for day today work, although it is good to get up to speed on all the main techniques now so I can offer the best experiences for the user and ultimately the client.

    0
  28. 68

    IE6 shouldn’t even be mentioned anymore. I put in my contracts that I support IE7 plus, and that certain styles may be different in any version of IE. Instead of just accepting that clients use IE or even worse IE6, take the 3 second to inform them that there are better options out there. And if they come back to me and complain that the site is messed up in IE6 I refer to the the contract which states that I can debug the website for IE6 “at my hourly rate”.. or they could always just UPDATE THEIR BROWSER FOR FREE.

    point being, all the latest techniques of html5 & css3 can’t be used on all sites, but if we as web designers and developers don’t start to use these in our websites and EDUCATE our clients then technology on the web will never move forward.

    And to anyone that left a comment on this thread such as “this will be useful in 2030″, or “waah, but i love IE6″.. please sell your dell laptop, throw away your vistaprint free business cards, drive away in your 1986 ford escort, and stop tainting the industry by calling yourself a professional.

    -mike i. ‘Beantown Design’

    0
  29. 69

    Fantastic article…and from the master himself. We should stop whining about what we can’t use because of technologically out-dated customers ( i know i have some) and stop practicing HTML5 and CSS3. Even if we can’t put them to work today, the day will come and it will be sooner than we think. Otherwise we will never get rid of those old browsers.

    0
  30. 70

    Future Is Bright! And indeed: future-is-bright.com ;)

    Great article. Thanks!

    0
  31. 71

    Even though the customers using old browsers, we should practice new technologies like HTML5 & CSS3 to give out innovative ideas. Don’t worry about the people who use old browsers, we can use fall back for them to just have the content with less user experience.

    Always welcome & practice new technologies….and make web a better place to work…

    Good and very useful post.. and keep on posting….

    0
  32. 72

    Very useful article. Thanks for sharing it.

    0
  33. 73

    tools will come and go. ultimately its the designers creativity that will prevail in past, present and future.

    besides, there are automated tools that can generate css code out of psd’s. why are we pulling our hair over all these. the purpose of technology ultimately is to get advanced enough so that we can forget about it and enjoying doing what we do without pulling our hair over all these technical stuff. is css3 doing that? i don’t think do

    0
    • 74

      If your design can be generated using html generators… then it probably wasn’t all that hard to create custom anyways. HTML generators are horrible at advanced themeing and proper cross browser styling.

      0
  34. 75

    i have created a forum with php and css…it is open source software…i know a little about css….my current theme has a page link,,,it is here http://haffow.com/downloads/ i want to know,how can i remove this from my theme????i dont know much about css…please help….how to remove this page link from my theme

    0
  35. 76

    These articles are always the hardest to follow if you don’t have an ongoing project that requires all the points covered but, we seem to be getting closer to the point where the capabilities of html and css will match what designers expect to be possible without having to resort to hacks.

    0
  36. 77

    Eh, I wish the future was now. Unfortunately most of these things won’t be available for a while :(

    I really look forward to multiple backgrounds… finally a reliable and relatively painless solution for advanced single elements. No more hacking to get great looking sites to look, work, and expand properly.

    0
  37. 78

    This article was awesome! Very inspiring to read all the great features of CSS3, especially the advanced usage of media queries and background handling. Thanks!

    0
  38. 79

    What an excellent post!

    With IE9 around the corner all designers will soon have a little more weight behind them when they talk of building the site in HTML5 and CSS3.

    I also build from IE7 up but I also have a set hourly rate outside of the contract if they need older browser support. The main point is I choose to build for modern browsers and degrade for the older ones. When I say this method is 30-40% cheaper I tend to get few complaints :)

    0
  39. 80

    Excellent article!

    About rbga background color and the non-alpha fallback for older browers… I’ve found it best to find a point at which older browsers would either show a fall back color or just be transparent. For example:

    If alpha >= 0.4, use non-alpha fallback. Full color background displayed.
    If alpha < 0.4, don't use fallback. rbga ignored and background is fully transparent.

    0
  40. 81

    Good post, inspiring to read all the great features of CSS3

    0
  41. 82

    Great article thanks for the info. +1 for multiple backgrounds!

    0

↑ Back to top