Hiding styles from browsers/platforms?

[earther]

I use the basic link and @import combo to hide certain rules from NN 4.79.

I have read elsehwere, in bits and pieces, that it is possible to exclude browsers on various platforms from reading styles by using the media attribute etc. Could someone please point me to a definitive list of configurations?

I'd also like some advice on the order of listing these exclusionary tricks. Would be nice to gather a comprehensive list all in one thread, don't you think?

Thanks.

Edit:

Oops. This should probably be posted in CSS. Guess I forgot where I was!

[vgarcia]

To hide style from NN4:

@import url(styles.css);

To hide from NN4 and IE4:

@import "styles.css";

To hide styles from NN4 and IE4-6:

@import "styles.css" screen;

To hide styles from all browsers except Opera 7 (using media queries):

@media screen {
  /*rules here*/
}

And to hide any style from IE5/Mac, just use single-quotes around your URL, since IE/Mac doesn't understand them (I prefer using no quotes to avoid confusing IE/Mac in my @imports and background url()s).

[Paul O'B]

Here's a couple of useful links.

http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://w3development.de/css/hide_css...wsers/summary/

Paul

[earther]

Thanks guys. That's exactly what I was looking for.

[brothercake]

Originally Posted by vgarcia

To hide styles from all browsers except Opera 7 (using media queries):

Last time I checked all modern browsers except mac/ie5 can see @media rules - I use it specifically for that - to hide styles from mac/ie5.

Here's a few others I like. This one hides rules from Safari, mac/ie5 and Konqueror:

@media ScReEn { ... }

This CSS3 selector shows rules to Safari, Konqueor, Mozilla 0.8+ and MSN (it's a substring-matching attribute selector):

selector[foo^="bar"]

This variation on a normal attribute selector exploits a now-fixed gecko bug - you can show rules to browsers that understand the selector (all except IE), except for gecko builds earlier than 1.3b:

selector/**/[foo="bar"]

And this combination hack differentiates Windows IE5.0 from 5.5 or later:

* html selector { ... } /* all versions of IE */
* html*selector { ... } /* 5.5+ only */

[Chevalric]

This is also a good resource about CSS browser filters:
http://www.centricle.com/ref/css/filters/

[brothercake]

And there's some more charts at http://www.dithered.com/css_filters/index.html

[Paul O'B]

*>html .targetelement {css rules only IE/mac can see}

[LunaC]

Pop your style sheets into the top of your javascript for an easy way to deliver an alternative style to Javascript enabled browsers:

document.write("<style type=\"text/css\" media=\"screen\">@import \"s/jsbrowser.css\";</style>");

Just make sure it comes after your non-javascript style.

[brothercake]

Originally Posted by Paul O'B

*>html .targetelement {css rules only IE/mac can see}

I've not seen that one ... could be very useful - is that documented anywhere?

[Paul O'B]

is that documented anywhere?

Here

http://www.l-c-n.com/IE5tests/hiding/

[brothercake]

Ta

[Vogelfrei]

Eric Meyer points out (from the article linked above):

You can also fool NN4.x by using combinations of media:

<link rel="stylesheet" type="text/css" href="advanced-styles.css"
media="screen, print">

Any style sheet (or link) you mark as applying only to screen media will be seen and used by NN4.x, so you might have to use other tricks (such as @import) to hide advanced styles from NN4.x.

The pitfall he observes here is that if you use media="all" or media="screen, print", you are applying advanced styles to media (such as 'print') where you may not want them. Most of the stuff I want to hide from Netscape 4 is intended for screen only (such as positioned elements or link borders).

But my initial tests suggest that you can get around this with a redundant screen specification. That is, if you want to hide a screen-only stylesheet from NN4, you can use

<link rel="stylesheet" type="text/css" href="advanced-styles.css"
   [b]media="screen, screen"[/b]>

I've never seen this documented anywhere, so it's possible I'm missing something, but it seems to do the trick on the Mac & Windows systems where I've tested it.

[jfitz]

Hi guys, I'm new to this forum so I don't want to get anybody's backs up but this has been bothering me for a while now.

Why dirty up your beautifully crafted css with all these hacks? My experience has been that you use one hack only to discover that it messes up in another browser.

Why not just pull out the user-agent field from the http header with php/jsp/asp and use an include to attach an appropriate style? Maybe I'm talking rubbish but it seems to be a more elegant solution. Most of the stable styles could go in a common sheet and the browser specific ones delivered as appropriate. Then just eliminate them as browsers comply over the next few years.

Mostly it would mean we don't have to clutter our brains with work arounds and get down to the business of providing usable, accessible, funky lookin' sites.

[Paul O'B]

Why dirty up your beautifully crafted css with all these hacks? My experience has been that you use one hack only to discover that it messes up in another browser.

I agree with the sentiment and avoid hacks unless they are necessary but would also say that sometimes you just don't have a choice. I would rather change the design than use a hack but sometimes even simple things can need changing for various browsers.

As for serving a different stylesheet for each browser I think that could be more of a headache in the long run. Most hacks are simple one line affairs that follow an existing style.

Consider this:

#test {
height:100%;
min-height:100%;
}
html>body #test {height:auto}

If the html>body was put in another stylesheet for mozilla then it would not work if it was called before the preceeding style as mozilla would get the auto overwritten by 100%. It would then mean that whole stylesheets would have to be separate for each browers in order to work correctly.

I don't know anything about getting user agent fields from http headers but I thought it was difficult as browsers tend not to identify themselves correctly (e.g. Opera ) (but I may be wrong )

Paul

[Chevalric]

Originally Posted by jfitz

Hi guys, I'm new to this forum so I don't want to get anybody's backs up but this has been bothering me for a while now.

Why dirty up your beautifully crafted css with all these hacks? My experience has been that you use one hack only to discover that it messes up in another browser.

I prefer not to use any hacks. The way I write my CSS is like this:
- write validating CSS that works in Mozilla Firefox (my browser of choice)
- test in Internet Explorer and correct any bugs and use hacks to filter it for IE only

I usually don't really bother with any other browsers, because they'll do a well enough job with the valid CSS. Older browsers get unstyled content.

Also, I only use filters that pass through the W3C validator.

Why not just pull out the user-agent field from the http header with php/jsp/asp and use an include to attach an appropriate style? Maybe I'm talking rubbish but it seems to be a more elegant solution. Most of the stable styles could go in a common sheet and the browser specific ones delivered as appropriate. Then just eliminate them as browsers comply over the next few years.

But what about the browsers that use other useragent identification, like Opera or Mozilla (with a plugin)? The problem with browsersniffing will always be there: you can't be 100% sure you get the right one.

[brothercake]

Originally Posted by Vogelfrei

if you use media="all" or media="screen, print", you are applying advanced styles to media (such as 'print') where you may not want them. Most of the stuff I want to hide from Netscape 4 is intended for screen only (such as positioned elements or link borders).

I generally declare screen styles as "screen, projection" - because Opera 7 in fullscreen mode uses projection-media CSS, not screen. And you get the ns4 benefit as well.

[mcg_sg]

How about MSIE's conditional comments?

I think they are pretty useful, since MSIE requires demonic hacks...

(And i hope that IE Longhorn has them to serve as our insurance..)

[Caterwomtious]

IE's conditional comments are okay if you just want to detect any version of IE.

If you want to differentiate between versions of IE you have to have your test versions running on separate copies of Windows. If you're using multiple versions of IE on one copy of Windows (http://www.skyzyx.com/archives/000094.php) then they all report the latest version on your system.

Paul made the point earlier - CSS hacks work even when browsers mis-report their identity.