the all too obvious underscore @media hack

@media, underscore hack, IE version targetting

[Komputist]

Common knowledge 1:

 selector{                                         
  property:ying;                  
#property:yong; /*IE7*/          
_property:yang; /*IE4,IE5,IE6*/  
}

Common knowledge 2:

There are many @media hacks. They are nice for targetting spesific browser versions.
However, they also have complicated syntax and gotchas ... Hard to learn and master.

2+ 2 =

 #@media all {  /*IE7*/                                
 selector { property: yong;}
 }
 _@media all {  /*IE4,IE5,IE6*/                        
 selector { property:yang; }
 }

(I have not seen this, rather obvious, solution mentioned on the many sites that discusses @media hacks. Please educate me if I have overlooked something.)

[edited by: Komputist at 5:05 am (utc) on Mar. 15, 2008]

[DrDoc]

Hacks and filters are two separate things.

I don't use hacks that depend on parsing errors. I still do maintain a few sites where the design is such that IE6 needs to be fed a different value (generally related to box-model fixes or one of the many IE bugs) ... in which cases the separate styles are filtered to IE6 by means of Conditional Comments. This ensures that I don't have to worry about specificity or possible rearrangements of rules within the code. It makes it easier to maintain and scrap unneeded rules.

But, in general, most IE bugs are easier to work around than to fix ... which means they are also quite forward safe.

But, whatever I do really is besides the point. It's up to each designer to do whatever they feel appropriate (unless you work for someone else). But the fact is that hacks which depend on exploiting parsing errors are not safe. They never have been and never will be. They may be thoroughly tested, but that doesn't mean they're safe to use.

Now, for non-IE browsers, we don't have much of a choice. But when tweaking things to suit IE (if needed), Conditional Comments is a guaranteed bullet proof solution. Everyone may not find CCs "easier" to use ... but at least they are arguably "safer".

[Komputist]

please do let us know how it gets on in […]

I posted this very early after I found out that it worked - eager as I am.

It now turns out that

_@media all  {}

is linked to QuirksMode. And this is in Internet Explorer 6.

[SuzyUK]

oh :(..

so does that mean it won't work unless in quirks mode? or what does "linked to" mean

do any of the other characters work or do they all the same thing?

[Komputist]

By "linked to" I meant that this "atHack" doesn't work - in IE6 – unless IE6 is in QuirksMode. (The page I used it on was in XHTML, with the XML declaration on top.)

If it only works in QuirksMode, then this should make it quite future safe though, should it not? ;)

I need to test it more before I can say too much more ... But it seemed as if

@media{selector{property:thing} }

worked in both modes. That is: Without any underscore or star. This is of course and illegal selector.

[DrDoc]

If it only works in QuirksMode, then this should make it quite future safe though, should it not?

... assuming the IE developers in the future do not accidentally introduce the same parsing error in the CSS engine.
... and, assuming that no other browser (known or unknown) exhibits a similar parsing error in its CSS engine.

So, no ... Never save. ;)

[Komputist]

DrDoc - that's ok. But actually we have to assume that future versions of IE will use CCs as well.

[MarkFilipak]

Re hacks and quirks mode...

I have never used any of the hacks discussed here. And I specify only standards mode (strict dtd). Perhaps I'm just naive but I seem to have done OK without hacks.

Suzy and Doc. I trust that you folks know what this is all about. I hesitate to task anyone, but it sure would be nice to see an overview of this issue. Links to external, authoritative sources would be fine of course. Otherwise, I feel like I came into the middle of a movie.

[SuzyUK]

yes I do know what this is about and I 'understand' that bit probably with too much passion or baggage but WYSIWYG.. Mark this may be the "middle of a movie" to you.. but you know that sometimes when you watch the end of a movie you still know what the plot/story was? - this could be one of those times.

Links to external, authoritative sources would be fine of course. Otherwise, I feel like I came into the middle of a movie.

but the authoritative sources are here, we can't link to ourselves it's not allowed ;).. you're getting this straight from the proverbial horses mouth.. your input is welcome because even this is not set in stone..

this, and I think/hope Komputist gets this too (though he may never forgive me for ranting in his thread), is what pushing CSS to its limits is all about - without the pushing IE would not have even got this far so that's why I respect entirely what his filter is trying to do

there is no right or wrong here, there's preference by those of us that have already had to make a choice but the important bit with CSS is that there has always ever been a choice..

[edited by: SuzyUK at 7:25 pm (utc) on Mar. 17, 2008]

[DrDoc]

I have never used any of the hacks discussed here. And I specify only standards mode (strict dtd). Perhaps I'm just naive but I seem to have done OK without hacks.

That is the goal for all of us. Many are there. Some are not. But eventually we all will be.

[Komputist]

Suzy, you are forever forgiven. I was "@rant" myself ;)

Btw, now I have tested IE8. Interesting. Firstly, I must say IE looks the same ;) Secondly, regarding @hack - quirks or not - neither _@ nor #@ worked in IE8.

And neither did it seem to work in IE7 emulation mode. So, IE7 emulation really is emulation - and not the real thing…

I did manage to find some @media things that - ahem - only work in IE, including IE8.