Making CSS visible for Opera 7 only

There is lots and lots of CSS hackery out there to hide CSS from certain browsers. But what about the times when you want to _show_ CSS only to certain browsers.


h3. CSS3 Media Queries
This trick, using “CSS3 Media Queries”:http://www.w3.org/TR/css3-mediaqueries/ makes styles invisible to any browser, but Opera 7. The explanation is simple: A browser should, when it encounters an @media rule it doesn’t recognize, ignore the entire rule. In CSS2, you can specify that a portion of a stylesheet should only be available for a certain media type, for instance @media print { } that will make the rules contained within only valid for printout.
In CSS3, this feature will be greatly expanded, so that you can query not only which media a style should be available to, but also which capabilities should be supported. An example:
==

body { background: green; }
@media screen and (min-width: 550px){
body { background: red; }
}

==
The example above will make the body background red for normal screen media when the width of the canvas is 550 pixels or wider, and green when is is narrower. As I have demonstrated earlier, Opera 7, as the only known browser, has “experimental support”:http://virtuelvis.com/gallery/mediaqueries/ for these queries, and we will use this feature to create stylesheets only Opera can see.
h3. Opera 7-compatible example
The following rule enables the style rules to Opera:
==

@media all and (min-width: 0px){
[ Normal CSS rules here ]
}

==
What happens here, is that a browser with media-query capabilities will match the rules inside @media for _all_ media, as long as the viewable area of this media is wider than zero pixels, which it usually is.
The “stylesheet on this site”:http://virtuelvis.com/styles/screen.css contains the following rule:
==

@media all and (min-width: 0px){
div.pagefooter:hover:after {
position: absolute;
right: 30%;
width: 265px;
height: 131px;
bottom: 3.5em;
z-index: 0;
content: url(/images/ghostgirl.png);
}
}

==
If you are using Opera 7, and you hover the page footer on this site, you will see an image appear. If this rule was visible to other browsers, like Mozilla, it would choke, since it uses the CSS 2.1 feature absolute positioning of generated content, using the pseudo element :after. However, since Mozilla behaves as it should when encountering a CSS rule it doesn’t understand, all of the content is ignored, and Mozillians, Safari users and users of other browsers, can see the page without breakage, and without the visual bonus Opera users get.
Use the technique as you wish, but keep in mind that neither CSS 2.1 or CSS 3 are final recommendations yet, so the syntax of the rules and techniques within here may change.
h3. Update
Before you use this method, you _should_ read “this message”:http://archivist.incutio.com/viewlist/css-discuss/53146 from Jonny Axelsson of Opera Software.

2 Comments

  1. Arve,
    I fully appreciate this method. A moon ago, mijnheer Schenk nudged me to analyze your media queries experiments. Immediately, I thought of background stretch, something that may be achievable with CSS3 bg properties in the future, but Grand Moose knows when.
    So I thought of serving various background images to people with different resolutions. I wrote about this in my atom feed in December, but I haven’t yet written a Destroy page with description of the two tests I made. Namely Opera’s support for media queries is limited with respect to binding styles with documents. I posted two bug reports to BTS.
    In general, I think that we should discriminate as much as we can. I do so with success, all the time. I code to standards, and if I need, I smooth the wrinkles for Gecko, and sometimes forbid certain styles from IE. The method is that Opera gets the ornamentative cake, whilst others get what they can grok, or plain content. The one drawback that there is – is that IE users will never know what they miss!
    On the other hand, I would be wary of popularizing an “Opera hack”. I know that what you propose isn’t quite that, but those with no scruples know no better. People quickly take to hacks, living in a smug comfort that they don;t need to research the problem behind, and can hack away in peace.
    I’d like to see you write about the potential of this method, once the dust settles, and time comes to thinking of applications. I humbly propose background stretch (I am already dead in the purists’ books, so I’ll abuse the notation anyway).
    Looking forward to reading your thoughts,
    Ivan Moosevich Karamazov

  2. Any chance of a front view of the ghost girl? 😀