CSS, JavaScript and XHTML Explained

CSS Browser Support (iPhone, IE8, IE7 Compliance Mode, FF 3.5 beta & Safari 4 Beta included) February 24, 2009

Note: This article is about CSS selectors. I also have a post on All CSS2.1 Properties and Values, and Broswer Support (huge file, but worth the download time)

Update 6/30/09: Firefox 3.5 was released today. Like Safari 3.1 and newer (including Safari 4 beta), Opera 9.64 and newer and Google Chrome all support ALL CSS2.1 and CSS3 selectors. Here is a breakdown of all the browsers I’ve tested:

• Green / √ means current support.
• Orange / Δ means that the browsers have some support for the selector.
• Red / Χ means that the browser is non-compliant.

CSS Selectors and Browser Support

See also: CSS Properties & Values

	iPhn		Windows XP											Mac OSX
Selector	Saf 3.2	Saf 3.0	goog chrm	FF 3.5	FF 3.0	FF 2.0	FF 1.5	Op 9.0	Saf 3.0	IE8	IE7 in IE8	IE7	IE6	Saf 4 beta	Saf 3.2	Saf 3.1	Saf 1.3	Op 9.64	FF 3	FF 2	NS 7.1
*	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√
E	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√
.class	√	√	√	√	√	√	√	√	√	√	√	√	Δ	√	√	√	√	√	√	√	√
#id	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√
E F	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√
E > F	√	√	√	√	√	√	√	√	√	√	√	√	Χ	√	√	√	√	√	√	√	√
E + F	√	√	√	√	√	√	√	√	√	√	√	√	Χ	√	√	√	√	√	√	√	√
E[attr]	√	√	√	√	√	√	√	√	√	Δ	Δ	Δ	Χ	√	√	√	√	√	√	√	Δ
E[attr=val]	√	Δ	√	√	√	Δ	Δ	Δ	Δ	√	√	√	Χ	√	√	√	Δ	√	√	Δ	Δ
E[attr~=val]	√	Δ	√	√	√	Δ	Δ	√	Δ	√	Δ	Δ	Χ	√	√	√	Δ	√	√	Δ	Δ
E[attr|=val]	√	Δ	√	√	√	Δ	Δ	√	Δ	√	Δ	Δ	Χ	√	√	√	Δ	√	√	Δ	Δ
:first-child	√	Δ	√	√	√	Δ	Δ	Δ	Δ	√	Δ	Δ	Χ	√	√	√	Δ	√	√	Δ	√
:link	√	√	√	√	√	√	√	Χ	√	√	√	√	√	√	√	√	√	√	√	√	√
:visited	√	√	√	√	√	√	√	Χ	√	√	√	√	√	√	√	√	√	√	√	√	√
:lang()	√	√	√	√	√	√	√	Δ	√	√	Χ	Χ	Χ	√	√	√	Χ	√	√	√	√
:before	√	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	√	√	√	√	√	√	√	Χ
::before	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	Χ	√	√	√	√	√	√	√	Χ
:after	√	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	√	√	√	√	√	√	√	Χ
::after	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	Χ	√	√	√	√	√	√	√	Χ
:first-letter	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	Χ
::first-letter	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	√	√	√	√	√	√	√	√	Χ
:first-line	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	Χ
::first-line	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	√	√	√	√	√	√	√	√	Χ
The following selectors are new to CSS3 (above were in previous versions)
E[attr^=val]	√	Δ	√	√	√	Δ	Δ	Χ	Δ	√	Χ	Χ	Χ	√	√	√	Δ	√	√	Δ	Δ
E[attr$=val]	√	Δ	√	√	√	Δ	Δ	Χ	Δ	√	Χ	Χ	Χ	√	√	√	Δ	√	√	Δ	Δ
E[attr*=val]	√	Δ	√	√	√	Δ	Δ	√	Δ	√	Χ	Χ	Χ	√	√	√	Δ	√	√	Δ	Δ
E ~ F	√	√	√	√	√	√	√	√	√	√	√	√	Χ	√	√	√	Χ	√	√	√	Χ
:root	√	√	√	√	√	√	√	Χ	√	Χ	Χ	Χ	Χ	√	√	√	√	√	√	√	√
:last-child	√	Χ	√	√	√	Δ	Δ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	√	Δ	Δ
nly-child	√	Χ	√	√	√	Δ	Δ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	√	Δ	Χ
:nth-child()	√	Χ	√	√	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
:nth-last-child()	√	Χ	√	√	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
:first-of-type	√	Δ	√	√	Χ	Χ	Χ	Χ	Δ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
:last-of-type	√	Χ	√	√	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
nly-of-type	√	Χ	√	√	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
:nth-of-type()	√	Χ	√	√	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
:nth-last-of-type()	√	Χ	√	√	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	Χ	Χ	Χ
:empty	√	Χ	√	√	√	Δ	Δ	Χ	Χ	Χ	Χ	Χ	Χ	√	√	√	Χ	√	√	Δ	Δ
:not()	√	√	√	√	√	√	√	Χ	√	Χ	Χ	Χ	Χ	√	√	√	√	√	√	√	√
:target	√	√	√	√	√	√	√	Χ	√	Χ	Χ	Χ	Χ	√	√	√	√	√	√	√	√
:enabled	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	Χ	√	√	√	Χ	√	√	√	Χ
:disabled	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	Χ	√	√	√	Χ	√	√	√	Χ
:checked	√	√	√	√	√	√	√	√	√	Χ	Χ	Χ	Χ	√	√	√	Χ	√	√	√	√

IE8 CSS Selector Support

IE8 Supports the CSS2.1 selectors, including pseudoclasses but not pseudo elements. (See Double Colon Notation). IE8 has support for has support for Accessible Rich Internet Applications (ARIA)

To force IE8 to render your page in IE8 compliance mode, include the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

IE7 within IE8 CSS Selector Support

The CSS selector support of IE7 within IE8 (when IE8 displayes a page in IE7 compatibility mode) is identical to IE7 as a standalone. However, the CSS properties do render differently. I will have to blog about that in a seperate entry when I get around to garnering all the differences.

IE7 within IE8 understands the IE7 star hack. Because the CSS renders differently even though the selector support is the same, it may take a bit before I figure out the best filter.

iPhone

The original version of the iPhone came with a Safari browser that did not support all CSS3 selectors. The currently active version of Safari on the iPhone does support all CSS3 selectors. The grid below has been updated to reflect that. I have kept the old version of the iPhone CSS3 support just in case you want to support "unlocked" version of the iPhone, that do not get updated as often. Personally, I assume all iphones hitting my apps support all CSS3. For more information on iPhones, see iPhone CSS Support

Safari 4 Beta CSS Selector Support

Safari 4.0 Beta was released Feb. 24, 2008. Since Safari 3.2 supported all CSS selectors, this Safari 4 part of the post may be a bit mute. Safari 4 beta also supports ARIA and for CSS effects, animation and canvas. It also seems to have many more native debugging tools native to the application (or maybe what I see is a carry over from the tools I installed in my previous version of Safari). Safari 4 is Acid 3 compliant!

IE8 Notes:

• E[attr]Does not match the attribute when the attribute value is empty or not written correctly.

IE7 within IE8 Notes:

• E[attr] Same as IE8, does not match the attribute when the attribute value is empty or not written correctly.
• E[attr~=val]Only issue is that for this selector to work, the value of the attribute is case sensitive
• E[attr|=val]IE7 has some case sensitivity issues, but generally works.
• :first-child IE7 considers a comment or a text node as a first-child, when it shouldn’t: only elements should be considered children. So, IE7 matches the first comment instead of the first child. If it sees text or a comment as the first child, it will not consider the first element as the first child.

Canonical tag for SEO February 12, 2009

Google, Yahoo and Microsoft are now supporting the canonical meta tag as the standard for identifying the actual source of your content: the real URL that you want to recieve page rank for your key terms.

Many sites have the same content show up with different URLs due to search features, dynamically generated URLS, tags, etc. Google, Yahoo and other search engines have been knocking your sites for having duplicate content as if you were spamming your terms. In other words, having multiple URLs pointing to the same content has been hurting your page rank and your site.

Now you have a way to make sure that your multiple content helps you instead of hurts you.

Implementing the CANONICAL meta tag

1. Pick one URL for your page – “the pretty, preferred or canonical URL” (to quote Matt Cutts). For example, this page’s main, or canonical, URL is http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/, though you may find it thru http://www.evotech.net/blog/?p=69 or http://www.evotech.net/blog/?s=SEO, http://www.evotech.net/blog/category/seo/ or simply http://www.evotech.net/blog.
2. Figure out how to include your page’s main URL in pages that are dynamically generated. For example, I need to figure out how to include my primary URL – http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/- in the web page showing this content no matter which URL from the bullet point above is shown.
3. Once you know how to get the URL you picked in step 1 into your possible other pages feeding the content from your main URL, place the canonical link tag inside the tag with the main content’s URL. For this example, I would place: <link rel=”canonical” href=”http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/” /> in my header.

The syntax is similar to the stylesheet link tag:

<link rel=”canonical” href=”http://www.yourdomain.com/yourpage” />

The canonical tag is ONLY for webpages in the same domain. So, http://evotech.net/blog pointing to http://blog.evotech.net or http://www.evotech.net/blog is fine. However, I can’t point http://estelleweyl.com/blog to http://evotech.net/blog if I were to have that URL as an addon domain on this server.

Now I just have to figure out how to do step 2 so I can create canonical links for this blog.

Added Notes:

Lori basically figured it out for us: (copied from http://beedragon.com/wp-test-site/2009/02/13/add-canonical-link/). Thanks!

Add canonical link tag to head

<?php if ( is_single() || is_page() ) { ?>
<link  rel="canonical" href="<?php the_permalink(); ?>" />
<?php } ?>

Occurs to me now that you’d have to hardcode main url, then get the slug and other url info dynamically:

<?php if ( is_single() || is_page() ) { ?>
<link rel="canonical" href="http://mainurl.com/<?php echo the_time('Y'); ?>/<?php echo the_time('m'); ?>/<?php echo the_time('d'); ?>/<?php echo $post->post_name; ?>" />
<?php } ?>

There is probably a prettier and/or more efficient way to do that, but can’t think of one at the moment.