Has anyone seen these CSS attributes?

[Storyman]

I've been handed a site to clean up the CSS. The guy who did the work previously used attributes that I haven't seen before and was hoping someone could clue me in on their use.

1) .sample[class]{
What is the purpose of using brackets around the word class '[class]'?

2) .sampleclass {
position: relative; /* this is understable */
filter: Alpha(opacity=95); /* is this used by any current browsers?*/
_background: #FFF;
_position: static; /* why use an underscore? and what would be the point of defining position twice? Is it some sort of hack? */

3) .samplebasic {
position:absolute;
*position:static;
/* Again, is the asterick a hack? Which browsers does it effect? */
*opacity:1; /* Really? */

I'm thinking that either I'm way behind the curve or that this guy has gotten his hands on some book that discusses great new CSS 3 attributes.

Thanks for your help.

[Setek]

1) .sample[class]{
What is the purpose of using brackets around the word class '[class]'?

This is what’s called an “attribute selector”. It is saying “find me an element with classname sample that has the attribute class.” It’s basically useless in this instance, however, there are times when it is useful:

a[href^='http']:after { content: ' (external link)';
font-size: 0.9em; }

… which will place a short bit of text letting people know it’s an external link.

Possibly, the reason this attribute selector was used was to separate it from IE 6 and below—as they do not support it, this rule will safely only be applied by IE 7, and standards-compliant browsers.

filter: Alpha(opacity=95); /* is this used by any current browsers?*/
...
_position: static; /* why use an underscore? and what would be the point of defining position twice? Is it some sort of hack? */

The filter is a proprietary property that allows IE (I’m not sure of the versions, I think 5.5 and up) to set the opacity (amongst other filters, such as alpha image loader, or transparent imagery) of an element. The proprietary hack predated the standardised

opacity

property, so that's why it exists in the first place.

The underscore is a hack; it means “if you're IE 5.5 and up apply this property, otherwise ignore it.”

It’s most likely used because there was a buggy error when relative positioning was used; possibly a guillotine bug or peek-a-boo bug (that doesn’t affect standards-compliant browsers, only IE 6 and possibly other versions of IE.)

3) .samplebasic {
position:absolute;
*position:static;
/* Again, is the asterick a hack? Which browsers does it effect? */
*opacity:1; /* Really? */

Yes, it is a hack, it’s the star hack, it works for IE 5/mac, IE 5.15/mac, IE 5.21/mac, IE 5.0/Win, IE 5.5/Win, and IE 6/Win (and I believe IE 7/Win.)

It’s somewhat interesting that they would hack the opacity property for IE flavours only—seeing as opacity doesn’t work with IE 6 and below. And I'm assuming it’s trying to “reset” the opacity from a parent element, if it had opacity set to 0.5 (which, I believe, so far doesn’t work terribly well. Apparently the fix is to multiply it until it hits your target value, so if your parent had 0.5 and you wanted a full fill, you would use

opacity: 2;

rather than 1. Last I checked this didn't work anyway.)

For that last point, I have no idea what it was they were trying to do… it seems rather pointless to me, but I haven't inspected the rest of the code.

Basically, they’re a bunch of ugly hacks… which could have been achieved in a much nicer manner, such as conditional comments.

[edited by: Setek at 2:27 am (utc) on April 12, 2007]

[Storyman]

Hi Setek,

Thank you for the detailed info. I prefer to avoid hacks whenever possible--seems like some people have an affinity for them.

After your posting I feel better in dumping all of that cheap trick code.

[Robin_reala]

For what it's worth the underscore hack was fixed in IE7 (in standards compliant mode at least).