How Do I Import CSS With Safari and Opera When Using CSS Hacks?

Question

I have a tough one here, but I think the benefit will be great...

I'm using the following CSS hack with PHP. The U variable in the file below is a constant, previously defined (before I include this file) as the URL such as http://example.com/. The P constant variable is defined as the physical file path like /var/www/example.com/. (The reason I have to use U and P for absolute pathing is because I use pretty URLs via Apache RewriteRule and it messes up the relative pathing.)

As you can see, I'm using the "link rel" technique to load a default style sheet, and for one for IE, and then another one for IE6. But for Safari and Opera, I tried the linkrel CSS hack technique and it failed -- FF was loading and interpreting the Opera and Safari stylesheets when I thought it might fail on the linkrel tag. So, I had to switch it to an inline CSS and use an @import url() call, but that failed because Opera and Safari wouldn't interpret the @import url() call. So, I had no choice but to switch context back to PHP and load it inline with a require() statement.

Well, the current arrangement in the file below works, but it means that the stylesheet for Opera and Safari is loading with all browsers (it's just not interpreted except by Opera and Safari).

I'd like to know how to get the linkrel or the @import working for Opera and Safari, instead.

<?php ?>
<? /*
***************************************************
  DEFAULT STYLING (AND FIREFOX)
***************************************************  
*/ ?>
<link rel="stylesheet" media="all" href="<?= U ?>css/default.css"/>
<style type='text/css'>

<? /*
***************************************************
  SAFARI & GOOGLE CHROME STYLING (WEBKIT STYLING)
***************************************************  

NOTE A LINKREL WILL GET INTERPRETED BY FF IF YOU DO IT LIKE THIS...

<link rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio:0)" 
href="<?= U ?>css/safari.css"/>

...SO THAT CAN'T WORK. ALSO, IF YOU USE AN @import url('<?= U ?>css/safari.css'); TO
REPLACE WHERE I HAVE THE require() BELOW, THAT WON'T WORK EITHER BECAUSE 
OPERA AND SAFARI DON'T SEEM TO UNDERSTAND THE @import DIRECTIVE IN CSS.

*/ ?>
@media screen and (-webkit-min-device-pixel-ratio:0){
<? require(P . 'css/safari.css'); ?>
}

<? /*
***************************************************
  OPERA STYLING
*************************************************** 
*/ ?>
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
<? require(P . 'css/opera.css'); ?>
}
</style>

<? /*
***************************************************
  IE (ALL) STYLING
***************************************************  
*/ ?>
<!--[if IE]>
<link rel="stylesheet" media="all" href="<?= U ?>css/ie.css"/>
<![endif]-->

<? /*
***************************************************
  IE6 STYLING
***************************************************  
*/ ?>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" href="<?= U ?>css/ie6.css"/>
<![endif]-->

Answer 1

I'm going to assume you've tried using the same stylesheets for webkit/ff/opera allready, and that this is the last resort because you're doing something strange?

Anyway, Opera does indeed support @import. (It has to, @import is used in 6.79% of all stylesheets.)

In addition, the media query that precedes the Opera CSS will never run in Opera because you're using (-webkit-min-device-pixel-ratio:10000) in the rule. According to the Media query specs error handling rules: "User agents are to ignore a media query when one of the specified media features is unknown.". I doubt Opera honours -webkit vendor media features.

For a full list of what Opera does and doesn't support, look at the Opera feature chart

Answer 2

The @import wasn't working because @import can't go inside an @media rule. @imports must preceed all other rules.

You have to put the media query on the @import itself:

@import url('<?= U ?>css/safari.css') screen and (-webkit-min-device-pixel-ratio:0);

Also, Firefox doesn't support media queries yet (they're coming in 3.1). I presume that means it just ignores unknown media types in the media attribute on the link element now and happily loads the file.

You'll have to be careful. Media queries aren't meant to be used for browser sniffing. The fact that your media query for Opera works could very well mean it'll end up working for Firefox too once that supports media queries. Or it'll stop working for Opera in its next version.