Article
About the Author
Tim Wright
Tim has been a web developer and web standards fanatic since 2004. He currently runs CSSKarma and keeps all his project notes in a book labeled "Stories of a CSS Ninja." Tim dies a little inside everytime he sees a table-based layout.
Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know
With all the hype over new and upcoming browser support for advanced CSS features, developers can be confused about the CSS they can include in web projects today. Many of the more advanced features aren't widely supported by the dominant browsers, but some very useful ones are -- including newer features from CSS3.
Every morning when I go through my RSS feeds I glance through news articles, tutorials, and blog postings about the great strides the web standards community has been making, how there's great browser support on the horizon, and how there's a huge amount of power built into CSS2.1 and CSS3. This is all true, and it's fantastic for the Web, but what about me? What about the web developer who reads all this great news, and sits down to implement the new CSS only to find that 90% of users can't see it because they don't use a state-of-the-art browser? While all the press is very good, and will ultimately lead to great advances in CSS, accessibility, and the Web in general, it can be hard for a developer to stay grounded. This is the reality of the current state of CSS support.
If you're like me, as soon as you discover something new in CSS, you immediately want to try it, experiment with it, and see what it can do. But a lot of the time, you discover that support for the particular CSS feature isn't widespread, and you have to limit yourself to a particular browser to see the new effect. That new knowledge sits on the shelf, and you end up forgetting about it because you can't really use it on a large scale in your everyday development tasks. This sort of thing happens all the time.
Which Browsers Should Guide Your Decisions About CSS?
A number of browsers are available right now, some of which are very standards compliant, some aren't. Each works off a rendering engine that translates your code into what you see when you visit a web page. So, how do you know which ones to adapt your development strategies to?
The most popular web browsers are currently Internet Explorer 6, Internet Explorer 7, Firefox, and Safari. I call them "the big four" -- they're the browsers I use to make my development decisions. My testing suite includes a few more browsers, but I make choices about CSS usage based on the big four.
Advanced CSS You Can Use with Confidence
When you're choosing to use advanced CSS features, the considerations you take into account will extend beyond the availability of browser support, because you're not going to have default support for everything you want to use (if you did, there wouldn't be much of a decision to make). The list below outlines the criteria I used to choose each of the CSS features displayed in the table below.
- Does the feature have enough browser support to justify its use?
- Is the feature useful?
- What happens if a browser doesn't support it? If a browser doesn't support the feature, will it degrade gracefully (that is, will it degrade without causing display problems)?
- Does it help to make the job of writing semantic markup easier?
If you answered yes, yes, yes, and yes to these questions, you may feel confident to go for it. This table lists the advanced CSS features you can use right now.
| IE6 | IE7 | Firefox | Safari | |
|---|---|---|---|---|
| Attribute selectors | No | Yes | Yes | Yes |
| Child selector | No | Yes | Yes | Yes |
| :first-child pseudo-class | No | Yes | Yes | Yes |
| :first-line pseudo-element | Yes | Yes | Yes | Yes |
| :first-letter pseudo-element | Yes | Yes | Yes | Yes |
| Multi-column layout | No | No | Yes | Yes |
| Border Radius | No | No | Yes | Yes |
| :target | No | No | Yes | Yes |
Let's step through this table, discussing each of the features in more detail.
You can use seven different operators with an attribute selector. All of them are supported in some form (buggy or fully) by IE7, Firefox, and Safari, and can be considered "safe" to use. Attribute selectors are among the most useful of components of advanced CSS, as they allow you to selectively apply CSS to elements using common HTML attributes, rather than having to use extra HTML markup.
Operator: none
Description: Using an attribute selector with no operator will select all the elements that contain that attribute. In this example, the CSS rule will color any link element with a rel attribute orange, and remove its underline. (CSS 2.1)
CSS:
a[rel] {
color: orange;
text-decoration: none;
}
HTML:
<a href="http://www.example.com" rel="external">dolor</a>
Operator: =
Description: Using the equals sign as an operator will allow the selector to match an element with the given value of an attribute. In this case, all links with rel="external" will be appended with an icon indicating an externally linked web site. (CSS 2.1)
CSS:
a[rel="external"] {
padding: 0 20px 0 0;
background: #fff url(icon_external-site.gif) no-repeat right center;
}
HTML:
<a href="http://www.example.com" rel="external">dolor</a>
Operator: ~=
Description: This operator allows the selector to match elements with an attribute that contains a space-separated list of words in which the specified value is present. In this case, the link is a rel value of "external friend tag" and we want to show it as an external link, ignoring the other values. This selector is also useful for selecting elements on the basis of their class values when you're using multiple classes on elements. (CSS 2.1)
CSS:
a[rel~="external"] {
padding: 0 20px 0 0;
background: #fff url(icon_external-site.gif) no-repeat right center;
}
HTML:
<a href="http://www.example.com" rel="external friend tag">dolor</a>