Take Your Design To The Next Level With CSS3

Advertisement

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

Please also consider reading our previous, related article:

Using Browser-Specific Properties

To use most CSS3 properties today, we have to use vendor-specific extensions together with the original properties. The reason is that until now, browsers have only partially implemented new CSS3 properties. Unfortunately, some properties may not even become W3C recommendations in the end, so it’s important to target browser-specific properties by differentiating them from standard properties to (and then replacing them with the standardized ones when they become superfluous).

The disadvantages to this approach are, of course, a messy style sheet and inconsistent design across Web browsers. After all, we do not want to revive the need for proprietary browser hacks in our style sheets. Internet Explorer’s infamous <marquee>, <blink> and other tags were employed in many style sheets and became legendary in the 1990s; they still make many existing websites inconsistent or even unreadable. And we don’t want to put ourselves in the same situation now, right?

However, websites do not have to look exactly the same in all browsers. And using browser-specific properties to achieve particular effects in certain browsers sometimes makes sense.

The most common extensions are the ones used for Webkit-based browsers (for example, Safari), which start with -webkit-, and Gecko-based browsers (for example, Firefox), which start with -moz-. Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) have their own proprietary extensions.

As professional designers, we have to bear in mind that using these vendor-specific properties will make our style sheets invalid. So putting them in the final version of a style sheet is rarely a sound idea for design purists. But in some cases, like when experimenting or learning, we can at least consider including them in a style sheet together with standardized CSS properties.

Useful Links

1. Selectors

CSS Selectors are an incredibly powerful tool: they allow us to target specific HTML elements in our markup without having to rely on unnecessary classes, IDs and JavaScripts. Most of them aren’t new to CSS3 but are not as widely used as they should be. Advanced selectors can be helpful if you are trying to achieve a clean, lightweight markup and better separation of structure and presentation. They can reduce the number of classes and IDs in the markup and make it easier for designers to maintain a style sheet.

Attribute selectors

Three new kinds of attribute selectors are a part of CSS3 specs:

  • [att^="value"]
    Matches elements to an attribute that starts with the specified value.
  • [att$="value"]
    Matches elements to an attribute that ends with the specified value.
  • [att*="value"]
    Matches elements to an attribute that contains the specified value.

tweetCC targeted link

tweetCC uses an attribute selector to target links that have a title attribute ending in the words “tweetCC”:

a[title$="tweetCC"] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    display: block; 
    width: 140px; 
    height: 140px; 
    text-indent: -9999px; 
    }

Browser support: The only browser that doesn’t support CSS3 attribute selectors is IE6. Both IE7 and IE8, Opera and Webkit- and Gecko-based browsers do. So using them in your style sheet is definitely safe.

Combinators

The only new kind of combinator introduced in CSS3 is the general sibling selector. It targets all siblings of an element that have the same parent.

For example, to add a gray border to all images that are a sibling of a particular div (and both the div and the images should have the same parent), defining the following in your style sheet is enough:

div~img {
	border: 1px solid #ccc;
	}

Browser support: All major browsers support the general sibling selector except our favorite: Internet Explorer 6.

Pseudo-Classes

Probably the most extensive new addition to CSS are new pseudo-classes. Here are some of the most interesting and useful ones:

  • :nth-child(n)
    Lets you target elements based on their positions in a parent’s list of child elements. You can use a number, a number expression or the odd and even keywords (perfect for Zebra-style table rows). So, if you want to match a group of three elements after the forth element, you can simply use:
    name="code">:nth-child(3n+4) { background-color: #ccc; }
  • :nth-last-child(n)
    Follows the same idea as the previous selector, but matches the last children of a parent element. For example, to target the last two paragraphs in a div, we would use the following selector:
    name="code">div p:nth-last-child(-n+2)
  • :last-child
    Matches the last child of a parent, and is equivalent to
    name="code">:nth-last-child(1)
  • :checked
    Matches elements that are checked; for example, checked boxes.
  • :empty
    Matches elements that have no children or are empty.
  • :not(s)
    Matches all elements that do not match the specified declaration(s). For example, if we want to make all paragraphs that aren’t of the class “lead” to appear black, we would write:
    name="code">p:not([class*="lead"]) { color: black; }

    .

On his website, Andrea Gandino uses the :last-child pseudo-selector to target the last paragraph of each blog post and apply a margin of 0 to it:

Andrea Gandino uses the :last-child pseudo-element on his blog post paragraphs

#primary .text p:last-child { 
    margin: 0; 
    }

Browser support: Webkit-based and Opera browsers support all new CSS3 pseudo-selectors. Firefox 2 and 3 (Gecko-based) only support :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled and :disabled, but Firefox 3.5 will have wide support of CSS3 selectors. Trident-based browsers (Internet Explorer) have virtually no support of pseudo-selectors.

Pseudo-Elements

The only pseudo-element introduced in CSS3 is ::selection. It lets you target elements that have been highlighted by the user.

Browser support: No current Internet Explorer or Firefox browsers support the ::selection pseudo-element. Safari, Opera and Chrome do.

Useful Links

2. RGBA And Opacity

RGBA lets you specify not only the color but the opacity of an element. Some browsers still don’t support it, so it’s good practice to specify before the RGBa color another color without transparency that older browsers will understand.

Tim Van Damme's hover effects
Tim Van Damme uses RGBA colors on hover effects on links

On his website, Tim Van Damme uses RGBA colors on hover effects; for example, on the network links on his home page:

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

When setting an RGBA color, we must specify the red, blue and green values either with an integer value between 0 and 255 or with percentages. The alpha value should be between 0.0 and 1.0; for example, 0.5 for a 50% opacity.

The difference between RGBA and opacity is that the former applies transparency only to a particular element, whereas the latter affects the element we target and all of its children.

Here is an example of how we would add 80% opacity to a div:

div { 
	opacity: 0.8; 
	}

Browser support: RGBA is supported by Webkit-based browsers. No Internet Explorer browser supports it. Firefox 2 does’t support it either, but Firefox 3 does, as does Opera 9.5. Opacity is supported by Opera and Webkit- and Gecko-based browsers, but is not supported by either IE release.

Useful Links

3. Multi-Column Layout

This new CSS3 selector lets you achieve multi-column layouts without having to use multiple divs. The browser interprets the properties and create the columns, giving the text a newspaper-like flow.

tweetCC's home page
tweetCC uses CSS3 multi-column selector on its home page

tweetCC displays introductory text in four columns on its home page. The four columns aren’t floated divs; instead, the Web designer uses the CSS3 multi-column layout as follows:

.index #content div { 
    -webkit-column-count : 4; 
    -webkit-column-gap : 20px; 
    -moz-column-count : 4; 
    -moz-column-gap : 20px; 
    }

We can define three things with this selector: the number of columns (column-count), the width of each column (column-width, not used in the example) and the gap between columns (column-gap). If column-count is not set, the browser accommodates as many columns that fit in the available width.

To add a vertical separator between columns, we can use the column-rule property, which functions pretty much as a border property:

div {
    column-rule: 1px solid #00000;
    }

Browsers that don’t support these properties render the content as simple text, as if there were no columns.

Related properties: column-break-after, column-break-before, column-span, column-fill.

Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+.

Useful Links

4. Multiple Backgrounds

CSS3 lets you apply multiple layered backgrounds to an element using multiple properties such as background-image, background-repeat, background-size, background-position, background-origin and background-clip.

The easiest way to add multiple backgrounds to an element is to use the shorthand code. You can specify all of the above properties in a single declaration, but the most commonly used are image, position and repeat:

div {
	background: url(example.jpg) top left no-repeat, 
		url(example2.jpg) bottom left no-repeat, 
		url(example3.jpg) center center repeat-y;
	}

The first image will be the one “closest” to the user.

A more complex version of the same property would be:

div {
	background: url(example.jpg) top left (100% 2em) no-repeat, 
		url(example2.jpg) bottom left (100% 2em) no-repeat, 
		url(example3.jpg) center center (10em 10em) repeat-y;
	}

In this case, (100% 2em) is the background-size value; the background image in the top-left corner would stretch the full width of the div and be 2em high.

Because very few browsers support it, and because not displaying backgrounds on a website can really impair a website’s visual impact, this is not a widely used CSS3 property. However, it could greatly improve a Web designer’s workflow and significantly reduce the amount of markup that would otherwise be needed to achieve the same effect.

Browser support: multiple backgrounds only work on Safari and Konqueror.

Useful Links

5. Word Wrap

The word-wrap property is used to prevent long words from overflowing. It can have one of two values: normal and break-word. The normal value (the default) breaks words only at allowed break points, like hyphens. If break-word is used, the word can be broken where needed to fit the given space and prevent overflowing.

WordPress admin area
The WordPress admin area uses word-wrap in data tables.

In the WordPress admin area, the word-wrap property is used for elements in tables; for example, in lists on Posts and Pages:

.widefat * {
    word-wrap: break-word;
    }

Browser support: word-wrap is supported by Internet Explorer and Safari. Firefox will support it in version 3.5.

Useful Links

6. Text Shadow

Despite existing since CSS2, text-shadow is not a widely used CSS property. But it will very likely be widely adopted with CSS3. The property gives designers a new cross-browser tool to add dimension to designs and make text stand out.

You need to make sure, though, that the text in your design is readable in case the user’s browser doesn’t support advanced CSS3 properties. Give the text and background color enough contrast in case the text-shadow property isn’t rendered or understood properly by the browser.

Beak uses the text-shadow-property of CSS 3
Beakapp uses the text-shadow property on its website: for the content area.

BeakApp.com uses the text-shadow property for the content area, adding depth and dimension to the text and making it stand out without the use of an image replacement technique. This property is visible only in Safari and Google Chrome.

The CSS for the website’s main navigation shows the following:

.signup_area p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Here, we have the shadow color (using RGBA, see above), followed by the right (x coordinate) and bottom (y coordinate) offset, and finally the blur radius.

To apply multiple shadows to a text, separate the shadows with a comma. For example:

p {
    text-shadow: red 4px 4px 2px, 
		yellow -4px -4px 2px, 
		green -4px 4px 2px;
    }

Browser support: Webkit-based browsers and Opera 9.5 support text-shadow. Internet Explorer doesn’t support it, and Firefox will only support it in version 3.5.

Useful Links

7. @font-face-Attribute

Despite being one of the most highly anticipated CSS3 features (even though it’s been around since CSS2), @font-face is still not as widely adopted on the Web as other CSS3 properties. This is due mainly to font licensing and copyright issues: embedded fonts are easily downloaded from the Web, a major concern to type foundries.

However, a solution to the licensing issues seems to be on the way. TypeKit promises to come up with a solution that would make it easier for designers and type foundries to agree on licensing issues that would significantly enrich the typography in Web design and make the @font-face attribute usable in practice.

Mozilla Labs JetPack font
Mozilla Labs JetPack website resorts to the font-face rule to use the DroidSans typeface

One of the few websites that use the property is the new JetPack MozillaLabs.

@font-face{
    font-family: 'DroidSans'; 
    src: url('../fonts/DroidSans.ttf') format('truetype');
    }

To use embedded fonts on your websites, you have to declare each style separately (for example, normal, bold and italic). Make sure to only use fonts that have been licensed for such use on the Web and to give the designer credit when required.

After the @font-face rule, you can call the font with a normal font-family property in your style sheet:

p {
    font-family: "DroidSans";
    }

If a browser doesn’t support @font-face, it will revert to the next font specified in the font-family property (CSS font stacks). This may be okay for some websites, if the @font-face font is a luxury for supported browsers; but if the font plays a major role in the design or is a key part of the visual identity of the company, you will probably want to use another solution, such as sIFR or Cufón. Bear in mind, though, that these tools are more appropriate for headings and short passages of text, and copying and pasting this kind of content is difficult and not user-friendly.

Font embedding on MezzoBlue.com
Wouldn’t it be nice to have such type for body copy on the Web? Dave Shea experiments with Cufón and Museo Sans. Beautiful!

Browser support: @font-face is supported by Safari 3.1+. Internet Explorer supports it if EOT fonts are used. Opera 10 and Firefox 3.5 should support it.

Useful Links

8. Border Radius

Border-radius adds curved corners to HTML elements without background images. Currently, it is probably the most widely used CSS3 property for the simple reason that rounded corners are just nice to have and aren’t critical to design or usability.

Instead of adding cryptic JavaScript or unnecessary HTML markup, just add a couple of extra properties in CSS and hope for the best. The solution is cleaner and more efficient and can save you from having to spend a couple of hours finding clever browser workarounds for CSS and JavaScript-based rounded corners.

Sam Brown's blog categories
Sam Brown’s blog using border-radius on headings, categories and links.

On his website, Sam Brown uses the border-radius property heavily on headings, links and divs. Achieving this effect with images would be time-consuming. This is one of the reasons why using CSS3 properties in our projects is such an important step towards efficiency in Web development.

To add rounded corners to category links, Sam uses the following CSS snippet:

h2 span { 
	color: #1a1a1a; 
	padding: .5em; 
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px; 
	}

We can go one step further and add the original CSS3 property and Konqueror proprietary extension, making it:

h2 span {
    color: #1a1a1a;
    padding: .5em; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -khtml-border-radius: 6px; 
    border-radius: 6px; 
    }

If we want to apply the property to certain corners of our element, we can target each corner separately:

div {	
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }

Browser support: border-radius is supported by Webkit- and Gecko-based browsers but not by any version of Internet Explorer or Opera.

Useful Links

9. Border Image

The border-image property allows you to specify an image for the border of an element, freeing you from the usual solid, dotted and other border styles. This property gives designers a better tool with which to consistently style the borders of design elements, being better than the background-image property (for advanced designs) or rigid default border styles. We can also explicitly define how a border should be scaled or tiled.

SpoonGraphics blog's border-image
The SpoonGraphics blog uses the border-image property for its images borders

On the SpoonGraphis blog, border-image is used for the images borders as follows:

#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
    }

To define the border-image, we must specify the image location, which part of the image should be cropped and used for each side of the element and how the image should be scaled and tiled.

To create a div that uses the image below as its border, we would use the following code (we will add in the Opera and Konqueror extensions for this example):

Image used as border-image

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
	}

The last value of this property can be stretch (default), round (only a whole number of repeated images will fit the space allowed) or repeat. In our example, the top, bottom, left and right border images are stretched. If we want only the top and bottom sides to stretch, we would use this CSS:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
	}

We can also target each corner separately if we want to use a different image for each:

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

If a browser doesn’t support the border-image property, it will ignore it and only apply the other defined border properties, such as border-width and border-color.

Browser support: border-image is currently only supported by Webkit-based browsers. Support in the next release of Firefox is not certain.

Useful Links

10. Box Shadow

The box-shadow property adds shadows to HTML elements without extra markup or background images. Like the text-shadow property, it enhances the detail of a design; and because it doesn’t really affect the readability of content, it could be a good way to add that extra touch.

10to1 navigation
10to1 uses the box-shadow property for its navigation background and hover states.

10to1 adds a simple shadow to its navigation area and uses the property for a hover effect on the navigation links:

#navigation {
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	}
	#navigation li a:hover,
	#navigation li a:focus {
	-webkit-box-shadow: 0 0 5px #111;
	-moz-box-shadow: 0 0 5px #111;
	}

The box-shadow property can have multiple values: horizontal offset, vertical offset, blur radius, spread radius and shadow color. Horizontal and vertical offset and shadow color are the most commonly used.

To apply a red shadow positioned four pixels to the right and bottom of a div, with no blur, we would need the following code:

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

Browser support: box-shadow is currently supported only by Webkit-based browsers, but the upcoming Firefox 3.5 will very likely support it as well.

Useful Links

11. Box Sizing

According to CSS 2.1 specifications, when calculating the overall dimensions of a box, the borders and padding of the element should be added to the width and height. But legacy browsers are well known for interpreting this specification in their own and quite creative ways. The box-sizing property lets you specify how the browser calculates the width and height of an element.

WordPress input and textarea tags
WordPress uses the border-box property in all input fields (text type) and text area elements in the admin panel.

The WordPress admin area demonstrates this property in all its input tags with a text type and textarea tags (among other elements):

input[type="text"],
	textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}

The third property (-ms-box-sizing) only works in Internet Explorer 8. With other selectors, the WordPress style sheet also adds the Konqueror property: -khtml-box-sizing.

The box-sizing property can have one of two values: border-box and content-box. Content-box renders the width as specified in CSS 2.1. Border-box subtracts the padding and border from the specified width and height (as done by legacy browsers).

Browser support: box-sizing is supported by IE8, Opera and Gecko- and Webkit-based browsers.

Useful Links

12. Media Queries

Media queries let you define different styles for different devices based on their capabilities. For example, you may want your website’s sidebar to appear under the main content when viewed on devices with a viewport narrower than 480 pixels, in which case it shouldn’t be floated and displayed on the right side:

#sidebar {
	float: right;
	display: inline; /* IE Double-Margin Bugfix */
	}
	
@media all and (max-width:480px) {
	#sidebar {
		float: none;
		clear: both;
		}
	}

You can also target devices with color screens:

a {
	color: grey;
	}
	
@media screen and (color) {
	a {
		color: red;
		}
	}

The possibilities are endless. This property is useful because you no longer have to write separate style sheets for different devices, nor do you have to use JavaScript to determine the capabilities and properties of each user’s browser. A more popular JavaScript-based solution to achieve a flexible layout would be to use an adaptive fluid layout, making the layout more responsive to the user’s browser resolution.

Browser support: Media queries are supported by Webkit-based browsers and Opera. Firefox plans to support them in version 3.5. Internet Explorer currently doesn’t support them and doesn’t plan to support them in upcoming versions.

Useful Links

13. Speech

The speech module in CSS3 lets you specify the speech style of screen readers. You can control various aspects of the speech, such as:

  • voice-volume
    Set a volume using a number from 0 to 100 (0 being silence), percentages or a keyword (silent, x-soft, soft, medium, loud and x-loud).
  • voice-balance
    Control which channel sound comes from (if the user’s sound system supports stereo).
  • Speak
    Instruct the screen reader to spell out particular words, digits or punctuation. Available keywords are none, normal, spell-out, digits, literal-punctuation, no-punctuation and inherit.
  • Pauses and rests
    Set a pause or rest before or after an element’s content is spoken. You can use either time units (for example, “2s” for 2 seconds) or keywords (none, x-weak, weak, medium, strong and x-strong).
  • Cues
    Use sounds to delimit particular elements and control their volume.
  • voice-family
    Set specific types of voices and voice combinations (as you do with fonts).
  • voice-rate
    Control the speed at which elements are spoken. This can be defined as a percentage or keyword: x-slow, slow, medium, fast and x-fast.
  • voice-stress
    Indicate any emphasis that should be applied, using different keywords: none, moderate, strong and reduced.

For example, to tell a screen reader to read all h2 tags in a female voice, from the left speaker, in a soft tone and followed by a particular sound, set the CSS as follows:

h2 {
	voice-family: female;
	voice-balance: left;
	voice-volume: soft;
	cue-after: url(sound.au);
	}

Unfortunately, this property has very little support now but is definitely worth keeping in mind so that we might improve the accessibility of our websites in future.

Browser support: Currently, only Opera browsers for Windows XP and 2000 support some of the speech module properties. To use them, use the -xv- prefix; for example, -xv-voice-balance: right.

Useful Links

Conclusion

CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced features and CSS styling.

In this regard, keep in mind that educating our clients is both useful and necessary: websites don’t have to look exactly the same in every browser, and if a difference doesn’t negatively affect the aesthetics or usability of a website, it should be considered. If we continue to waste valuable time and money making every detail pixel-perfect (instead of adopting more flexible and future-oriented solutions), users won’t have an incentive to upgrade their browsers, in which case we would have to wait a long time before older browsers become legacy browsers and robust modern browsers become the standard.

The earlier we experiment with and adapt new CSS3 properties, the earlier they will be supported by popular browsers and the earlier we’ll be able to use them widely.

Further Reading And References

(al)

↑ Back to top

Inayaili de León is a London-based Portuguese web designer, specialist in cross-browser, semantic HTML and CSS, and clean, functional design. She writes frequently for well-known online and print publications and also on her own web design blog, Web Designer Notebook. In May 2011, she published a book, Pro CSS for High Traffic Websites, and she speaks frequently at local and international web conferences and meetups. She is currently working as a web designer on Canonical's Design team.

  1. 1

    Cool. Thanks for sharing! First!

    0
  2. 2

    Massive fan of this post! =D

    x

    1
  3. 3

    Easy to say to change the old standard of the browser, hard to implement, tho I a not a designer.

    http://rockbunch.com/ is my example of “too time consuming” project to change from CSS2 to CSS3.

    0
  4. 4

    Looks like more toys and cleaner code. Very happy!

    0
  5. 5

    And then there’s advanced print media support in CSS3.

    0
  6. 6

    Very good, been looking for a concise listing for CSS3 elements.

    Excellent

    Tim

    0
  7. 7

    Fantastic that someone else has done all the homework as to what does what and what supports what :)

    Cheers for well-written article and useful article!

    0
  8. 8

    Amazing article. Thanks for the in-depth review!

    1
  9. 9

    Richard Francis Kay

    June 15, 2009 1:44 am

    It’s brilliant to see that there are a lot of Dutchies getting noticed in the web o’stratosphere :-D

    0
  10. 10

    Great article, thanks but I think to wait that the most of browsers support CSS3 totaly to develop websites for my clients.

    0
  11. 11

    Great article. Does it need a kind of common banner to put on CSS3 sites to declare them as what they are to push CSS3? I am always afraid people who do use non-conform browsers just note that your site is not working but not the reason why. – just a spontaneous thought.

    0
  12. 12

    I HOPE css3 will be standard in the near future, right now you cant really use anything of it ’cause not every browser supports it.

    -2
  13. 13

    Important ones you’ve missed:

    * The standard container grid,giving all siblings a standard margin (so the parent decides how its siblings are set):
    .parent>child {margin:1em:}

    * using css content for separators (horizontal nav with separators):
    li:before {content:”|”;}
    li:first-child:before {content:”";}

    It’s an interesting list, but too focused on “frills” and not enough on ways to improve flexibility and make css more robust.

    0
  14. 14

    No doubt that CSS3 is exciting stuff, and this post is full is interesting tidbits, but until the specification is properly tied down, and it is more widely and consistent adopted, I do wonder whether using it is worth the extra effort.

    So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting?

    - because IE 6-8 have roughly 30-40% of the browser market share and don’t support the majority of the new selectors, properties, etc. Webkit browsers on the other hand make up only about 7%. It’s not fear but simple economics that is holding people back. When I’m working on a project, should I spent time adding styles that can only be seen by a few end users and then more time checking that it still works okay for the rest? Probably not, unless my target audience is other web designer types, or my client doesn’t mind me charging them for the additional hours.

    Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

    - There’s little point educating clients if 1000′s of visitors to their site are still using IE6. Once CSS3 is widespread there is no doubt that it will slim down markup and make jumping back a forth between image and text editors less frequent. But at present, maintaining two sets of stylesheets, one for CSS2.1 only, and one with all the extra CSS3 candy sounds like more work to me.

    0
  15. 15

    There’s a lot of additions in CSS3 that will save your time. But I’m still having problems with browser compatibility in Opera.

    0
  16. 16

    Fabulous!

    0
  17. 17

    http://Karrun.co.uk uses round corners and text-transform to rotate text. With a mix of jquery too.

    0
  18. 18

    The Brisbane Line

    June 15, 2009 2:44 am

    interesting read. it seems css3 is adding more complications though.

    0
  19. 19

    Great article, I cant wait to try some of these babies out.

    0
  20. 20

    Excellent, i love the CSS3 Elements

    Peter

    0
  21. 21

    I hope this will be standardized asap. It’s like working in inDesign. Thxfpst !

    0
  22. 22

    Nice article!
    I wrote my thesis about CSS3, hope the main browsers will support it very soon.

    0
  23. 23

    Great things to look forward to, and fun to play with on personal blogs and portfolios, but with corporate clients I won’t be touching most of this for a while. The sad reality is that many are still stuck on IE6, and often it is corporate networks who still refuse to upgrade because they rely on too many intranet apps that were coded specifically for IE6. W3schools still puts the IE6 user share at over 14%, which dwarfs both Safari’s share (3%) and the IE8 share (5%). Until IE6 is finally put to bed, and until these things are standardized across more browsers, unfortunately much of this just creates a nightmare scenario for developers and testers. Shame, isn’t it.

    0
  24. 24

    Very very good.
    Thank you!

    0
  25. 25

    Vive la revolution! Kill the old browsers dammit!!

    0
  26. 26

    Only trouble with using browser specific CSS is it that doesn’t validate, but saying that I used border radius on Superdrug.com, it was that or a shed load of background images!

    0
  27. 27

    “And using browser-specific properties to achieve particular effects in certain browsers sometimes makes sense.”

    Why? For a new “optimized for …”?

    0
  28. 28

    :last-child isn’t supported by IE browsers, but :first-child is, so you can achieve the same effect but by thinking in reverse. Rather than removing bottom margins/padding/borders with :last-child, add the properties to the top and remove them from the :first-child instead.

    0
  29. 29

    Very nice, and usefull post!

    0
  30. 30

    Great article…thanks for sharing.

    0
  31. 31

    Maxime Perron Caissy

    June 15, 2009 4:26 am

    I love CSS3, and the power of all it’s features. It would be so much fun if all browsers would be up to date.

    I find it very sad to look at statistics and find out that there are between 5% and 15% of people still using browsers like IE6. I have already stoped taking care of those users on some of the sites that I’m working on. Old browsers users will be stuck in a corner and will at some point need to grab a decent web browser.

    I’m at least glad that jQuery understands CSS3 selectors in all browsers, that is quite useful in my everyday work.

    2c

    0
  32. 32

    Unfortunately I have to code for the browsers people are using, not the browsers I want them to use. The vast majority of people in non-computer related industries are still using outdated software… my last site showed ~86% using IE, with over half of that being IE6. I’ve even had a few clients tell me they refuse to upgrade their browser because “it works just fine”.
    So until people stop using older browsers, I’m stuck coding with CSS2 :-(

    0
  33. 33

    Great Article…learned a lot.
    Thanks.

    0
  34. 34

    great, greater, sm! nice & helpful, thanks

    0
  35. 35

    This looks really exciting! a little to learn but these effects look really useful. Although the negative part of me says “what about IE6? what about IE7?” *sigh*

    0
  36. 36

    Firefox does not support ::selection but it supports ::-moz-selection since version 1.0. This pseudo-element has exactly the same purpose. More info is available here on the Mozilla Developer Center. And border images will be supported in Firefox 3.5.

    0
  37. 37

    Unfortunately, it’s not easy trying to convince the clients that the browser they’re using, that has no CSS3 support, is outdated.

    0
  38. 38

    I spot an Onderhond at no. 13! :3

    This is a very nice article, but shame about the lack of support of many of these features, most notably border-radius, of which I’d love to see pass the W3C-CSS-feature finals or whatever they’re called. :3

    0
  39. 39

    Great article! I`m slowly making way for CSS3 into my work too.

    0
  40. 40

    <blink> was netscape, not ie: http://en.wikipedia.org/wiki/Blink_element

    nevermind :)

    0
  41. 41

    This is so cool guys, thanx!

    Some of it a bit advance for me, but I can’t wait to start giving it a try.

    I just hope all browsers could start supporting more and more of css in general.
    Specially talking about IE which is still one of the most popular browsers among users (I don’t understand why people?, you should be using Firefox!) and won’t support many of the css coding.

    P.S. Have I tell you how much I love the editing comment box option you guys have in here? It rocks! More blogs and websites should have this when one is commenting. Sometimes one writes so fast all of the sudden, that ended up realizing about a typo or mistake after one posted already the comment :p

    0
  42. 42

    as many have already said, there is one reason we are stuck in CSS yester-year, IE 6
    Whilst so many users are stuck using it, and we have to accommodate it, we are working with one hand tied behind our backs.
    It would be nice to see people being able to use Firefox as well as IE6 in the corporate world.
    We realise they have products they need IE6, but they need to the option to use a proper browser for everything else, bad enough companies have built such poor products they only run in IE 6, but for them to be holding up the web, its just wrong.

    0
  43. 43

    Nice article, but I have to agree with some of the posters about IE support. CSS3 let alone some CSS 2.1 standards aren’t fully adopted by IE6 and IE7. Whilst a substantial majority of users use these browsers. Sadly there’s no way around this obstacle, which in my opinion sits at the root of webdesign growth or better yet the lack thereof. However much i’d love to use border radius and opacity and show my clients how wonderfull there site looks… the truth is the majority of their clients (thus in turn my clients) will only get to see the downgraded version. And that again is also an important note.. CSS3 is nice and nifty but it’s always important to make sure your site breaks apart neatly for those browsers which don’t support the extra functionality.

    But apart from that.. it’s good to see that people are still keeping tabs on the development of CSS3. How about an article about HTML5 vs XHTML 2.0 :-)

    0
  44. 44

    Fellow developers, We make the web, and the W3C give us the lovely standards that make everything work smoothly, let’s force all the users to upgrade to W3C standards compliant web browsers, simply block all users using IE and all of its buggy versions (yes all of them), with a nice and cute message like this:

    Warning: Your web browser is not W3C standards compliant.
    Click here to view a list of reliable web browsers available for free.

    If you work in a company(or anywhere else) and you don’t do your job you get fired. Then why do we keep fighting with a Jurassic web browser that doesn’t get the job done? why do we insist in coding wrong CSS for a wrong browser? why to go through version 8 with the same poor coding of previous versions?

    Let’s get IE out of the picture and invest time in real usability challenges not hacking our stylesheets to support users that are bound to a built-in web browser they can get rid of with a couple clicks and for free, let’s guide them into real web browsing.

    0
  45. 45

    Krazy post ! nice to see em coming. Eventhough the browser supports are wide now, i’m still not sure when is the right time to start implementing these new rules.

    0
  46. 46

    This is what I realized I like about Chrome. It updates in the background, forcing you to use the newest version (and why not?). If only Internet Explorer users were pressured more to upgrade….

    Of course people generally don’t like things happening behind their backs, but the people who don’t upgrade usually don’t do it because they don’t even know what a browser is. Could be opt-out and it would significantly reduce usage of old browsers. Just a dream though.

    0
  47. 47

    CSS 3 rocks. Unfortunately we need to stay at least 5 more years with CSS 2.1 if we want to offer the same design to each user (what in most ‘commercial’ projects is necessarily).

    0
  48. 48

    really interresting! thanks for sharing!!

    0
  49. 49

    I’m with most of the others, while CSS3 is great and looks like some of it could be really helpful for work flow, until IE6 dies out, there isn’t much point in going forward.

    How many browsers does one have to test just CSS2.1, IE6 – > 8, FF and maybe if you’re lucky Safari. I mean really testing for all the browser to make sure everything is working correctly is just crazy.

    I think till every browser is somewhat close to being the same (render wise), we’ll be stuck working to get the lowest common css version working.

    0
  50. 50

    yeah it’s all pointless, you still have to use css1 and tables to cover the wide range of users and devices.

    3 years until you’ll be happy to use css3 fully without worrying about browser issues too much.

    0
  51. 51

    Great article, I can’t wait to use CSS3 in a real project. Unfortunately I’m going to be stuck with things as they are for the time being as I wait for my clients to catch up. I expect this will be the case for most designers for the time being.

    0
  52. 52

    Great article!
    More like this instead of galleries and the such would be greatly appreciated :)

    0
  53. 53

    A lot of useful features like the multi-column layout!

    0
  54. 54

    I can’t wait for the amazing creations that will pop-up from people being able to use these new features. I would bet that hundreds of kBs will be saved in HTML, JS, and CSS rules while still achieving the same effects.

    0
  55. 55

    Fuck you Internet Explorer.

    0
  56. 56

    All those CSS3 tricks are indeed very cool, but what you have to remember is that you have to support legacy browsers (and yes, when using CSS3, Firefox 2 is already a legacy browser) which will be a pain until the not supporting browsers die naturally or will be killed by designers by dropping support – which won’t happen very fast.

    0
  57. 57

    Disposable_Hero

    June 15, 2009 7:45 am

    @ Matt – “This is what I realized I like about Chrome. It updates in the background, forcing you to use the newest version (and why not?). If only Internet Explorer users were pressured more to upgrade….”

    Until about a year ago I hadn’t been doing very much web design at all, and had been using Firefox since it first started gaining popularity, so I had no reason to ever use IE. I also figured that due to IE being built-in to Windows, and the rest of Windows automatically updating when necessary, that IE auto-updated. It wasn’t until I started doing a lot more web design and had a need to test in IE that I realized I had been running IE 5 this whole time.

    Instead of us small designers trying to take a stand and force people to upgrade their browsers, what needs to happen is some of the major websites need to stop supporting IE 6. If some of the most widely used websites stopped supporting old browsers, it would force people to either switch to a competitor that still supported their stubborn ways, or upgrade. Seriously, how many people would update their Flash player if websites didn’t require it? So if we want things to change, more pressure needs to be put on the sites that have more of a say on the web.

    0
  58. 58

    The only browser that doesn’t support CSS3 attribute selectors is IE6. [...] So using them in your style sheet is definitely safe.

    On the college website I manage, IE6 has dropped in the past year from 25% of traffic to 15%. But that’s still too big a group for me to ignore completely. I’d call this “safe” only in certain, non-critical aesthetic contexts. I don’t plan on getting in the habit of using attribute selectors extensively until IE6 is down in the mid-single-digits, and I won’t be totally comfortable with using them until it’s even lower than that.

    0
  59. 59

    I’m actually a little surprised about how much hype there is around CSS3 at this point, considering it conflicts directly with W3C standards and validation. I keep wondering when I’m going to have to make the transition, but with the browser specific problems, it doesn’t look like CSS3 is actually going to be usable for client projects for at least another 5 years. Considering how much trouble the development industry is having getting rid of IE6 (which is actually used by all Canadian gov’t offices at this point!!), I wonder how long it will be until the majority of users are browsing the web with browsers that will support and validate CSS3.

    0
  60. 60

    A great post there…!
    Looking forward web browers to change their standards mainly for blind people, this will increase accesibility by 200%.

    Thanks for sharing mate…

    0
  61. 61

    To those who think they can’t use CSS3 because it’s not approved, yet: Neither is CSS2.1, but you use it.

    To those who think they can’t use any part of CSS3 because all browsers don’t support every part of it: Neither is CSS1 but you use it.

    The idea that all websites must look exactly the same, pixel for pixel in every browser is absurd. IE can’t round corners, can’t drop shadows, can’t show translucent background colors? So what? Since when does that affect the functionality of the site?

    Use the CSS, and let IE owners see the square corners and everyone else get the gracefully rounded ones with good shadows. From my experience, IE users won’t care (if they cared about things like that, they’d not be using the least capable browser on the planet). If your client is arguing for that point, tell them the price difference between writing one line of CSS and developing a set of graphics, combined with twisting and inflating the code to achieve that effect, and tell them the cost in download time for the extra code and resources that have to be delivered to achieve it. You might be surprised at how little value they place on rounded corners, after all.

    Your job, as expert in the field of web design, is to try and educate your clients on the realities of the web. So educate.

    Obviously, if the client is dense enough to persist, deliver what the client wants, but be aware; you’ll have trouble later from that client about something. Inflexible people are like that.

    0
  62. 62

    A great article that will cause me to experiment with CSS3 more.

    0
  63. 63

    Great article, I can’t wait to start using the new CSS3 standard, but I don’t think we can start just yet. Especially when IE isn’t supported in some of these. According to my site tracking IE users are dropping, but it’ll definitely be at least a couple more years until we can switch over to CSS3

    0
  64. 64

    I cannot wait to get my hands dirty with CSS3 – I can only imagine the wonderful things designers will bring to the web in the near future. viva la css!

    0
  65. 65

    this is a brilliant article. thank you for your hard work, research and effort. articles like these make me keep coming back to smashing magazine UURRday!

    what was particularly nice was how many features Inayaili covered, how well each feature was elaborated on and, of course, the beautiful examples that were provided.

    kudos to you Inayaili!

    you did a smashing job!

    please create an in-depth follow up and i’ll be sure to read it!

    0
  66. 66

    CSS3 looks really good however because of IE it will be long time before I start using it

    0
  67. 67

    It seems many people hate Internet Explorer and this is good but, why is there so much hate and so less changes? Believe it or not, this is all caused by Windows Vista! Let me explain : Can any one tell me what is the version of IE shipped with Windows XP? Yes! IE 6.

    Many people used the “Vista is slow” excuse to not upgrade because they where not able to get a good working copy of it on p2p networks. So they’ve kept their good old cracked XP. Then, here’s the problem. Mirosoft prohibit the use of Windows update AND Microsoft update for non genuine WINDOWS users. As a result, these users can’t even install IE 7. Ho yes, they could install an other browser but the fact is that most of them don’t even know what is a web browser, they just use The Internet Explorer.

    See? A mix of file sharing, security protections and lack of knowlege cause this masive user base of Internet Explorer. I propose two solutions :

    First, forcing Microsoft to remove Internet Explorer from Windows. This is probably not a very good solution. It would indeed force people to learn what is a web browser but then, how would they get one? You can’t just open IE and then go to the Firefox/Apple/Google/Opera/etc. website since you don’t have a web browser. The only solution would be to provide users with an in-store CD version of the browser that would cost a fortune to produce. Removing IE form Windows would also require an extensive rewrite of the OS since it is using IE’s engine about everywhere. And worse, to keep the market fair, Apple who’s shipping Safari with is OS would have to remove it and the same with Linux/Firefox too!

    Second, removing the need for a genuine version of Windows to upgrade to newer version of Internet Explorer, forcing the browser to look for update each week and installing those silently without anyway to abord the installation. This solution is much more simpler, doesn’t require a big bunch a money and would help killing old web browser like IE 6.

    Since many companie still require IE 6 (like every medical facility in the Quebec province that, beileve it or not, still use Windows XP SP0!) there sould be a way using Group Policy to disable or limit the updating process to let’s say version x and less.

    Now you’re thinking : “Why provide a bypass solution when you just said that there souldn’t have anyway to abord the process? Instead, souldn’t we force those companie to upgrade their web-software?” NO! The idea is to provide the big majority of people with no way to bypass the update process and provide a way to the IT administrators, who know what they are doing, to keep things working in their Intranet if needed.

    It’s all about making money here and I think the second solution is the best to expect.

    0
  68. 68

    Really great article!
    I’m using Opera 9.64 and it supports @font-face, and Opera 10 BETA supports it too.

    0
  69. 69

    SM – good article!
    you should add a poll:

    when we can start using css3 ?
    a-2012
    b-2015
    c-never, it will be replaced by new standard before it becomes popular

    0
  70. 70

    wow this is great, i really like this, we can make our work easier and faster… thanks you sm you always surprise us with your great artcles:D

    0
  71. 71

    Considering that half the population still uses IE6, I won’t be implementing CSS3 anytime soon.

    0
  72. 72

    As you’ve referenced my work a few times in the article, I thought I’d respond to those who have commented that CSS3 properties can’t or shouldn’t be used because of legacy browsers or non-compatibility across all browsers.

    I’m disappointed that so many people continue to cling on to the outdated idea that web sites should look the same in all browsers. This notion is not only wrong, as Yahoo promote through their own graded browser support, it’s holding the web back at a time when we should be pushing forward. I’m disappointed and surprised, particularly that this ridiculous idea is still being tolerated by web designers who should understand that their job is not to hack around old browsers but to design around their differences.

    What I am talking about is creating a visual design that looks best to people who are using modern software, while at the same time thinking carefully about what a person using less capable software will see. This is an approach based around designing alternatives. It’s little different to the way that I hope we have been taught to think about web accessibility.

    I know that in my business, I would rather ask my clients to spend their money wisely on things that will improve their business, than to waste it on hours of unnecessary development. How far you take this will depend on several factors and your own circumstances. I have my limits too.

    I also know that it is highly unlikely that every browser will ever support every CSS property at the same time. You should learn to live with that. When you explain the issues to them clearly, your clients will learn to live with that too and will stop asking you for cross-browser pixel-perfection long before that utopian day when all browsers render a design the same way.

    Given the choice between spending their money on fixes for a diminishing browser or more design time, more functionality or more features, any client (usually the ones that you assume will expect cross-browser perfection) will choose the latter. I think this will be particularly true in today’s challenging economy.

    You might want to read:
    http://forabeautifulweb.com/blog/about/five_css_design_browser_differences_i_can_live_with/
    http://forabeautifulweb.com/blog/about/time_to_stop_showing_clients_static_design_visuals/
    http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/

    Andy Clarke

    0
  73. 73

    Nice article. Perfect facilities! But IE is … ((

    0
  74. 74

    A great article. love the multiple background thngy.. way too cool.. IE.. sure some solution will come up for that…

    0
  75. 75

    great post showing off css3 but although i love it, we all have to compensate for the devil IE

    0
  76. 76

    Naysayers: yes, it is a shame that this stuff isn’t supported by some browsers, and lots of people will continue to use these browsers for a while, but that doesn’t matter. A website will look readable and mostly similar all over the place, even if some extra-special bits are not shown in all browsers. A website will never look the same in every browser, and that’s okay. So what if Internet Explorer users don’t see your rounded corners? I believe the term “progressive enhancement” – or is it “graceful degradation”? – is something relevant.

    0
  77. 77

    Um, @kawazoe?

    It’s not Vista’s fault. MS is delivering IE8 to XP systems today via the auto-upgrade mechanism. It’s only people that have refused to upgrade their XP systems since 2004 (even while staying with XP) that can’t upgrade beyond IE6. (IE7 requires a version of XP current with upgrades to Aug 2004.)

    We’re talking about letting people and institutions which have refused to move for a half-decade hold us back. No question, we owe it to them to give them a functional, usable website. That’s not the discussion. We most certainly do *not* owe it to them to impose their preference for intertia on the rest of the world.

    As long as web developers keep enabling this sort of behavior, we’ll *never* be able to do real design on the web. It’s time to get with “progressive enhancement,” the approach that says inept browsers get a fully-functional and pleasant experience on the web, but we feed the more-capable browsers things they are capable of handling.

    The things in this article are perfect examples of that: items that add to the viewing(listening?) pleasure but if, absent, do not prevent the user from accomplishing the required task on the page.

    0
  78. 78

    This mostly just makes me sad because I can’t use 90% of these rules :(

    0
  79. 79

    It’s been a while since I last saw such a good article on SM, compliments to the author!

    @AndyClarke: I could not agree with you more, finally someone who understands it.

    As for IE6, we as web community are to actively destroy the market share that remains. If you can get away with it, don’t support it. Tell users to upgrade. Give them warning messages that they should upgrade, etc. IE6 is a liability to the web in many ways, it has caused tremendous frustration, confusion and unneeded costs to the world of web development. Why be so gentle with users who are using a decade-old browser for a platform (the web) that is moving as quickly as it is?

    0
  80. 80

    I can’t wait for CSS3 to be a standard. I’m already using advanced selectors, rounded corners and shadows in my site. Because of this article I tried out columns in my site for the first time and they look great! Thank you so much for putting together such a wonderful article.

    0
  81. 81

    The only browser that doesn’t support CSS3 attribute selectors is IE6. Both IE7 and IE8, Opera and Webkit- and Gecko-based browsers do. So using them in your style sheet is definitely safe.
    Keeping in mind this would fail on the 20 plus percent of IE6 users still on the market.

    0
  82. 82

    CSS3 + visual examples = Great post! Thank you. Love your blog!!!

    0
  83. 83

    CSS3 hit it hard – in many years….
    If any browser can show it correctly then it becomes userfull atm you have to work things out.
    Examples for round corners und opacity
    letsgetvip.de

    0
  84. 84

    @AndyClarke and Arlen

    My concern is not so much that websites need to look the same in every browser, but after spending so long teaching myself to create code that validates, why is there suddenly a move away from that practice? One of the main reasons I focus on valid code is because its the only standard I have to go by in the web design industry. It’s a benchmark I can guarantee.

    As far as educating clients, it’s often not the clients who have problems with websites not looking the same in different browsers – its the end user, and it’s very hard to educate end users.

    I should mention – my fulltime work is on web software which is used regularly on IE6 because that’s just what our clients use. I wish they would update, but that’s not my call. We’re trying to sell software, not restrict the use of our software to people who only use up-to-date browsers.

    0
  85. 85

    It’s gonna be so awesome creating CSS3 websites in about ten years (when finally all browsers are supporting it).

    0
  86. 86

    Love this articel, but gosh dang, what the f%$/ is Microsoft doing?

    0
  87. 87

    What about Safari support?????

    0
  88. 88

    Thibaut Allender

    June 15, 2009 1:37 pm

    One of the best articles I’ve read here since a few months… It’s well written and detailed.
    It was a little bit scary to read it tho: IE6 is still so widely used I don’t even care about all these new properties and selectors (even CSS2.1 is not well supported in IE6 or 7!) and I was just thinking to myself: what a waste! I really have to dig it CSS3 to be ready when it’s really OK to use it.

    Thanks!

    0
  89. 89

    Thanks for all your comments! :)

    Some notes I’d like to add:

    @Michaël (#36): Thanks for that handy information, it’s good to know.

    @Silver Bullet (#49): “until IE6 dies out, there isn’t much point in going forward” – I believe that we, as web designers, should always make an effort to go forward. If a handful of web designers hadn’t done that a few years ago, I guess we would still think that using tables for layout is OK because it works cross-browser. It doesn’t have to be a sudden change, but a gradual, subtle one :)

    @todd (#50): “you still have to use css1 and tables to cover the wide range of users and devices” – which devices do you have to use tables for?

    @Disposable_Hero (#57): “how many people would update their Flash player if websites didn’t require it?” – true

    @Kawazoe (#66): I’m not absolutely sure, but I think MS removed the need of having a genuine Windows to upgrade to IE7 a few months ago.

    @Andy Clarke (#71): “web designers who should understand that their job is not to hack around old browsers but to design around their differences” – I’m a bit disappointed to see that so many people still work exclusively around the lowest denominator. Thanks for your comment and for helping us push our boundaries when it comes to CSS.

    @Les James (#79): Good for you! I’m glad the article helped you in some way :)

    @kelly (#82): I have to say I don’t agree with “it’s often not the clients who have problems with websites not looking the same in different browsers – its the end user”. I myself, as a Firefox user, don’t realize some details that I’m missing for not using Safari 4, for example. You don’t have to restrict the use of your software to people with older browsers, but present the rest with a more colourful version of your products instead :)

    @Mike (#85): Safari support is sometimes referred as “Webkit”. Hope it helps.

    I understand that these properties are not yet a standard, but neither is CSS 2.1 and we generally don’t have a problem using it.

    I’m not advocating that people that use older browsers should have a lesser experience of the web, or be completely locked out, but once we start experimenting with these properties it’s really easy to understand why we should push them, and how they can improve our jobs.

    Every profession evolves over time, and it’s the job of the professionals of presenting the advances and innovations to the general public, otherwise we would never know about them.

    0
  90. 90

    Wow, thanks so much! Looks like we will soon have some new tools in our box.

    0
  91. 91

    I have worked in this industry for ten years, seen highs and lows. But nothing has depressed me more than reading the comments on this post today.

    I really fear for this industry: http://forabeautifulweb.com/blog/about/fearful/

    0
  92. 92

    IE6 can lick my hairy @$$ crack.

    0
  93. 93

    Brandon Martinez

    June 15, 2009 3:02 pm

    For those naysayers: a lot of these elements can be applied to a site, then have them degrade *gracefully* for the old, crappy browsers. I just put together a site with a few of these features, and it works across the board (IE6 simply doesn’t show them); besides, most of my time was devoted to making it work in IE6 at all! It takes less time to implement these from the beginning. Use them! Support your industry!

    0
  94. 94

    Superb article – very informative!

    I was also shocked to see that 14% of users are still using IE6 – local councils maybe? The IT staff of those establishments should be round up and put in a museum.

    Anyway heres a thought – what if, say Facebook or Google stopped supporting IE6? hmmm!

    Right I’m off to the museum to see if there is any space next to cromagnum man….

    0
  95. 95

    Another cool post, worth reading IMO. Thanks!

    0
  96. 96

    Lovely, thank you. I will be referencing this a lot!

    0
  97. 97

    Great article it couldn’t be any better… 5 stars! * * * * *

    0
  98. 98

    Tiago Pastorello

    June 15, 2009 4:27 pm

    nice =D

    0
  99. 99

    Browser support: word-wrap is supported by Internet Explorer and Safari. Firefox will support it in version 3.5.

    -what IE version?

    0
  100. 100

    wow.. great post btw.. I never knew Opera has a speech module. Must try it! :D

    0
  101. 101

    nice article – thnx for sharing

    0
  102. 102

    Thumbs up to this post. I wounder when all the browser will give full support for CSS3

    0
  103. 103

    Um, Kelly? Can we talk a little about just what valid code is?

    -webkit-box-shadow: rgba(0, 0, 0, 0.498039) 15px 10px 5px;
    box-shadow: rgba(0, 0, 0, 0.498039) 15px 10px 5px;
    -webkit-border-top-right-radius: 20px;
    border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border-bottom-left-radius: 20px;
    -moz-border-radius: 0 20px 20px 20px;

    These are all valid. Check section 4.1.2.1 of the spec, “Vendor-specific extensions); the spec itself says this is how the vendor-specific properties should be written, so we’re following the spec when we write that.

    You see, I think there’s a basic confusion here about what “valid” means. Valid means following the spec, writing code in line with the instructions there on how to write code. It doesn’t mean “a seal of approval bestowed by computer program.” In my opinion, though they’re extraordinarily good at highlighting suspicious areas, computer programs make bad courts of final appeal.

    Using the validators is a good way to *begin* to write valid code. But check every “error” your “validator” comes up with, because while some will be real errors, others will not be. Understanding the spec well enough to be able to tell the difference is the beginning of mastery. The spec is the benchmark, not a computer program.

    I’ll admit your situation of having end-users complain about it not looking the same in all browsers is a new one on me: I don’t think even 0.01% of the end users of a site I’ve worked on have even *looked* at the site in more than the one browser, much less made detailed comparisons.

    I’m unclear from your comment whether the software you’re talking about is used only on IE6, or the people using IE6 are the ones signing off on the build, but in either case, please note I’ve never suggested the site shouldn’t work in IE6; just that it doesn’t have to look the same, unless the clients refuse to budge. But before they opt for immobility, you need to document for them just how much extra money they’re spending in order to have that happen. If they find out it’ll cost 15% less if they let you deliver a pleasant, functional site in IE6 and the full beauty of the design in current browsers, you might be surprised which way they jump.

    0
  104. 104

    only danger to css3 is that most mobile browsers do not yet support them

    0
  105. 105

    I dig the automatic column layouts!
    That will really give way to a new breed of CSS templates and will certainly mean changes for things like the 960 layout.

    0
  106. 106

    why is it taking so long. I want to be able to use it already on actual projects not just in my basement design lab.

    0
  107. 107

    IE 6 isn’t much of a problem, by June 2010, there will be pratically no one using it. BUT, even IE7 is lacking support… it’s hard to understand why Microsoft is doing so badly even with all their funds.

    0
  108. 108

    its good to use the css 3
    but just ban IE 6. before that

    0
  109. 109

    Nice list!

    Unfortunately, it’s unusable in the event that not all browsers support these CSS3 properties. We’ll have to wait again to apply them!

    0
  110. 110

    António Cardoso

    June 16, 2009 12:34 am

    Great article. 5 stars.
    However IE6 “kill” CSS 3. IE6 it’s a big problem today too.
    Many times I have to do some adjusts for my styles because IE6 (and some times IE7)

    0
  111. 111

    CSS 3 is all well and good, but until I no longer have to develop for IE7 (and until recently, IE6), things aren’t going to change. Why? Because I work with large orgs. that have IE7 only!

    Corporations don’t care about their browser, bottom-line.

    I can see CSS 3 being widely used but only on non-mission-critical apps. This means that these users are more likely to embrace CSS3 first:

    – individual site owners (hobbyists with enough time for tinkering)
    – the Open Source Community (their user-base just doesn’t use IE so they don’t bother)
    – savvy startups with a view to show-case their product using the latest in browser tech.

    Unfortunately that is still only a small portion of the web. However, those three types of users are the ones linked to in the above article.

    0
  112. 112

    Come on people!
    We should be using this now! Who cares if not all browsers support them?
    Progressive Enhancement is the way forward.
    If we all start using these techniques now, people will be encouraged to upgrade their older browsers and the web will move forward quicker.
    The attitude of “wait for the browsers to catch up” is just holding the web back.

    0
  113. 113

    As much as I love the advancements, as always its a shame that the main browser your clients or clients customers are likely to be using wont be able to integrate them.

    But a great article none the less.

    0
  114. 114

    The point some of your “learned” readers fail to realise is that you can use these standards now in the most modern browsers. Older browsers will simply ignore the CSS3 rules and render something slightly different. This is called progressive enhancement – welcome to the modern age you bunch of dumbasses.

    1
  115. 115

    I like to use CSS3 capabilities but if you’re working for a commercial company, it’s very difficult to include these CSS3 styling/attributes to a site because most commercial companies still have IE6 installed in their machine. I just hope that IE6 disappears completely on this planet, or rather IE itself.

    0
  116. 116

    @ Tay and rest who saying go ahead and use it and ignore IE*:

    Go explain to managers and CEOs who using IE: Why this looks crappy on IE and great in Firefox & Chrome?

    0
  117. 117

    Thanks for the great article…

    0
  118. 118

    Disposable_Hero

    June 16, 2009 7:27 am

    @Rob “The point some of your “learned” readers fail to realise is that you can use these standards now in the most modern browsers. Older browsers will simply ignore the CSS3 rules and render something slightly different. This is called progressive enhancement – welcome to the modern age you bunch of dumbasses.”

    The point you’ve obviously missed, is that the “something slightly different” the older browser renders could potentially throw off your entire design, depending on what you’re trying to do. Take the multi-column layout feature, for example:

    “Browsers that don’t support these properties render the content as simple text, as if there were no columns.”

    Take away the columns in a page you designed to have columns? Yeah, that seems like a design disaster. So, that leaves us with 2 options:
    1) Write a lot of browser-specific code, taking much longer to finish the project, which if you’re a contract designer could end up costing the client more money.
    2) Wait until browsers decide they want to support it and it becomes the new standard.

    The issue is, we are in the modern age, we’ve just been waiting for Microsoft to catch up. Thanks for joining the rest of us “dumbasses” =)

    0
  119. 119

    Very excited about CSS3…only wish that all the properties were supported by all browsers. Great post!

    0
  120. 120

    Thanks for sharing. Great work!

    0
  121. 121

    Thank you Inayaili. Awesome post and great guide.

    0
  122. 122

    I hate IE but most of client use IE, so I have to wait for CSS3

    0
  123. 123

    I want that~!!! . Thank you for sharing

    0
  124. 124

    There needs to be a movement by web developers to push people away from IE 6. It’s just not dying fast enough. Something unobtrusive, but pushes the point on multiple fronts.

    0
  125. 125

    IE6 is alive. Despite attempts from Microsoft, people are still not upgrading. I am forced to design first for Firefox then go in and tweak everything to the will of IE6.

    It’s a high percentage. Pretty much every local computer lab has IE6, and until they upgrade, I can’t be sure.

    0
  126. 126

    Wow, great article!

    0
  127. 127

    Thanks for the css3.0 but my question is that after css3.0 implementation on our website we have to forget IE6?As many properties of CSS3.0 is not supporting in the IE6.!!

    0
  128. 128

    I’ll be bookmarking this as it’s a great over view of CSS3 but won’t be using it until it’s standard unfortunately.

    I think we can mainly blame MS for this but when CSS3 is brought in as standard it will he a happy day!

    0
  129. 129

    @Disposable_Hero still trying to get pixel perfect design in every browser? Wake up and realise the world has moved on. Browsers should not render every website exactly the same and we certainly should not wait for MS to catch up with the pack. We should push the boundaries and use progressive enhancement techniques – that’s the point. Burying our collective heads on the sand and say “Ooo it won’t work in some cases” is just stupid.

    0
  130. 130

    This article is grrrrrrrrrrreat

    Just shows I’m too lazy to find CSS3 advantages myself, but hell, this is a really nice bit

    0
  131. 131

    Cool post on CSS.
    Learned lot from this post.

    0
  132. 132

    @r_jake:
    “because IE 6-8 have roughly 30-40% of the browser market share”

    You wish… Don’t think your own stats represent the whole web. It’s more like at least 70%.

    0
  133. 133

    The ::selection pseudo-element was dropped from Selectors Level 3 following the WG’s Feb meeting, and as such, isn’t present in the recently published Last Call Working Draft

    0
  134. 134

    Great post, food for thought

    Having already decided to charge my clients extra to get sites to work for IE6 I think this is the next logical step, might be a year or so off yet before we can use the really good stuff.

    0
  135. 135

    These new additions to CSS are great but I hate that they aren’t standardized. I have not used any of the new styles because older browsers will not support them.

    The selectors will really come in handy I have done some test with using these selectors and they can solve a lot of problems. Making shadows, rounded corners and opacities really opens up a lot of doors design wise. I can’t wait for these to be a standard and for IE 6 to finally die.

    0
  136. 136

    very helpful! thanks! Ü

    0
  137. 137

    Excellent post with great details – Thanks

    0
  138. 138

    Diego Potapczuk

    June 18, 2009 7:10 pm

    Awesome, just that :)

    0
  139. 139

    Hey, I will use this post in my study work – thank you!

    0
  140. 140

    nice work! just missing a couple of new things like text buttons on the fly via css

    0
  141. 141

    Charles Xavier A.K.A DFS

    0
  142. 142

    Great list, you forgot about the :target pseudo-class though. I created a proof of concept about it Link

    0
  143. 143

    “Browser support: border-image is currently only supported by Webkit-based browsers. Support in the next release of Firefox is not certain.”

    That surprised me. It *will* be in 3.5, and was already there before the first beta.

    0
  144. 144

    Thanks to this great article.
    It’s so interresting that I made a French version of it : on my blog.
    Thanks to SM that allow me to do it.

    0
  145. 145

    this is one of the best CSS3 articles I’ve read, good job SM. and the comments are always entertaining.
    @Andy Clark – excellent points!

    0
  146. 146

    My philosophy with my ecommerce site is to support only the current and last version of IE, FF & Safari. IE6? I don’t care – anyone who won’t upgrade their browser probably can’t afford my products anyway. I applaud the designers who say move forward. I wish MS would just abandon their browser in the interest in saving the world untold amounts of wasted development time.
    Ed

    0
  147. 147

    CSS3 rocks ^_^ m/

    0
  148. 148

    bajki dla dzieci

    July 21, 2009 3:07 am

    It’s very complete and interesting summary of new abilities given by css3. I’ve read (almost ;)) the whole article and I must say that I was really interested in what You have to say. Nice post.

    0
  149. 149

    Mamunur Rahman Khan

    August 4, 2009 10:43 pm

    This was a very nice tutorial in CSS3. I’m very much impressed. This will help me lot when implementing in sites. Thanks for your valuable effort.

    0
  150. 150

    2007 issues 1950 major oscillation led last

    0
  151. 151

    Dominic Zukiewicz

    August 12, 2009 12:57 am

    Thanks for your hard work putting this together. I can only imagine the number of hours spent putting this together.

    A fantastic overview of CSS 3.0 and the best current resource there is for it!

    Thanks again

    0
  152. 152

    what is wrong with people? Why can’t they take the two minuets it takes to download and install better browsers?
    Most programs look for and get updates automatically anyway???? And what’s with software developers not implementing all of the latest features (such as those responsible for designing IE – do they ever go on the internet?), that is what is holding us back?

    The sooner css3 is commonplace the better!

    thanks for this one :-)

    0
  153. 153

    great post! thanks!

    0
  154. 154

    great post. thnx

    0
  155. 155

    CSS3 rules!

    0
  156. 156

    Amazing!!!Ever green article for CSS3…thanks a million….hope you continue your journey in this way and give us this types of article again and again.

    0
  157. 157

    I’d like to see an update to this, including which are supported in Chrome.

    0
  158. 158

    Well as every one has alredy thanks for sharing, I wish one day I could help others with webdesigning as you doing there. Inayaili.

    0
  159. 159

    Wow!!…Cool information…..very useful
    I love it..:)

    0
  160. 160

    Good article thank you

    0
  161. 161

    Massive, Amazing features in CSS3, I love it…
    Thanks for sharing…

    0
  162. 162

    Awesome article… everything is covered here…

    1
  163. 163

    Nice article. :) Really want to upgrade with CSS3.

    0
  164. 164

    Great article. Thanks! Although I’m just starting with CSS3 I think it has enough powerful features to revolutionize front end coding trend.

    0
  165. 165

    so beautiful Inayaili de Leon…eh
    so amazing article :D

    0
  166. 166

    Thank you very much for this article!

    Kind Regards,

    Fabian

    0
  167. 167

    It has been sometime since i have commented on someone elses work, luckily this is positive though. Wonderful post, i will likely be reading this blog more within the future.

    0
  168. 168

    its lands with a stampede,though browser specification yet is itching.a promising future though.what of css3 tags for animation?

    0
  169. 169

    awesome.consider content for css3 for animation

    0
  170. 170

    This post is like gold. Thanks!

    0
  171. 171

    Fantastic post, definitely worth a book mark and frequent visit.

    0

↑ Back to top