Menu Search
Jump to the content X

Take Your Design To The Next Level With CSS3


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 Link

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

1. Selectors Link

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 Link

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 link6

tweetCC277 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 Link

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 Link

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
  • :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 Gandino8 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 selectors9. Trident-based browsers (Internet Explorer) have virtually no support of pseudo-selectors.

Pseudo-Elements Link

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.

2. RGBA And Opacity Link

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 effects18
Tim Van Damme uses RGBA colors on hover effects on links

On his website, Tim Van Damme19 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.

3. Multi-Column Layout Link

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 page26
tweetCC uses CSS3 multi-column selector on its home page

tweetCC277 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+.

4. Multiple Backgrounds Link

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.

5. Word Wrap Link

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 area37
The WordPress admin area uses word-wrap in data tables.

In the WordPress8838 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.

6. Text Shadow Link

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 343
Beakapp uses the text-shadow property on its website: for the content area.

BeakApp.com44 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.

7. @font-face-Attribute Link

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. TypeKit52 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 font53
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 MozillaLabs54.

    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 sIFR55 or Cufón5856. 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.com57
Wouldn’t it be nice to have such type for body copy on the Web? Dave Shea experiments with Cufón5856 and Museo Sans59. 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.

8. Border Radius Link

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 categories67
Sam Brown’s blog using border-radius on headings, categories and links.

On his website, Sam Brown68 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.

9. Border Image Link

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-image74
The SpoonGraphics blog uses the border-image property for its images borders

On the SpoonGraphis blog75, 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.

10. Box Shadow Link

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 navigation81
10to1 uses the box-shadow property for its navigation background and hover states.

10to182 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.

11. Box Sizing Link

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 tags87
WordPress uses the border-box property in all input fields (text type) and text area elements in the admin panel.

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

	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.

12. Media Queries Link

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 layout92, 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.

13. Speech Link

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

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.

Conclusion Link

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 Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110

↑ Back to top Tweet itShare on Facebook

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!

  2. 2

    Massive fan of this post! =D


  3. 3

    Easy to say to change the old standard of the browser, hard to implement, tho I a not a designer. is my example of “too time consuming” project to change from CSS2 to CSS3.

  4. 4

    Looks like more toys and cleaner code. Very happy!

  5. 5

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

  6. 6

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



  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!

  8. 8

    Amazing article. Thanks for the in-depth review!

  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

  10. 10

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

  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.

  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.

  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.

  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.

  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.

  16. 16


  17. 17 uses round corners and text-transform to rotate text. With a mix of jquery too.

  18. 18

    The Brisbane Line

    June 15, 2009 2:44 am

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

  19. 19

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

  20. 20

    Excellent, i love the CSS3 Elements


  21. 21

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

  22. 22

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

  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.

  24. 24

    Very very good.
    Thank you!

  25. 25

    Vive la revolution! Kill the old browsers dammit!!

  26. 26

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

  27. 27

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

    Why? For a new “optimized for …”?

  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.

  29. 29

    Very nice, and usefull post!

  30. 30

    Great article…thanks for sharing.


↑ Back to top