Opera Filters or CSS Hacks, if you prefer.

There are several hacks to either hide CSS from IE or show it only to IE, but what if you want to show Opera something different from what you show Mozilla Gecko browsers (which include Netscape 6+ and Firefox), KHTML browsers (which include Konqueror and Safari), and IE5/Mac different rules?

Opera 7+, Safari 3+, and Firefox 3.5+ support CSS3's Media Queries. http://www.w3.org/TR/css3-mediaqueries/#media0

#example { color: #000; }
@media screen and (min-width: 0px){
   #example { color: #c00; }
This text will be red if your browser supports this

Opera 9.2x and older don't support :root, but Opera 9.5+, Firefox, Netscape 6+, Konqueror 3, Safari, and IE5/Mac do. http://www.w3.org/TR/css3-selectors/#root-pseudo

#example2 { color: #000; }
:root #example2 { color: #c00; }
This text will be red if your browser supports this

Since these two filters are based on which browser engine supports what, unlike many other CSS hacks that rely on CSS parser bugs in certain browsers, and they are being used to filter the newest versions browser engines, it is likely that in the not so distant future newer versions of one or both engines will support both the :root pseudo element and the Media Queries.

Neither IE8 nor iCab support either of those.

Related Links:

Last update: 2009-07-03