Sharovatov’s Weblog

IE8b1 — attribute selectors, generated content

Posted in browsers, css, javascript by sharovatov on 6 May 2008

It's my first post after a great vacation in St.Petersburg — my first 2 weeks vacation in last 4 years. I've continued testing IE8 and found some new interesting stuff.

Attribute selectors

Both [class=myclass] and [className=myclass] work in IE7/IE8. The last one can be used as a CSS hack to target those browsers, but I would still recommend using conditional comments to target different IE versions.

If you look at the testcase, you will see that both [class=test1] and [classname=test2] selectors work. When I saw className working, I immediately tested other DOM properties like nodeName. Unfortunately, it didn't work there — here's the testcase. If it did, if there was such a way to access not HTML attribute but DOM properties from CSS selectors, it would be really weird but interesting.

Generated content

When I was testing it, I noticed that if you want to get element's class, you can't use content: attr(class) rule, you have to use content: attr(className). It's obvious that this is a DOM property name rather than HTML element's attribute.

This violates the standard which clearly says that attr(X) must return an attribute string value for the element matching the selector. It also violates the standard by returning null value for not existing attributes.

This behavior also gives us some strange options. Please see the testcase.

I don't know if it's a bug or a feature — none of the Microsoft documents on IE8 describes this behaviour, so I don't know if this is going to be fixed or not; but it may be used in some interesting ways.
E.g. using outerHTML IE-only DOM property I rebuilt the testcase for the attribute selectors bug mentioned above. If you have IE8, don't wait to have a look. And please have a look at another interesting thing — again it's IE8-only as it uses attr(nodeName) function to show every element's nodeName.

During testing I've noticed some more bugs with generated content:

  • text-transform doesn't work for generated content. Please see testcase
  • text-indent doesn't work for generated content. Here's the testcase
  • text-align doesn't work for generated content. The testcase

One Response

Subscribe to comments with RSS.

  1. […] Now about bugs that I blogged about here and here: […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: