如何在使用CSS Hacks时导入带有Safari和Opera的CSS？

Question

下面文件中的U变量是一个常量，之前(在我包含这个文件之前)定义为http://example.com/。P常量变量被定义为物理文件路径，如/var/www/example.com/。(我必须使用U和P进行绝对路径的原因是因为我通过Apache RewriteRule使用了漂亮的URL，这会搞乱相对路径。)

如你所见，我使用了"link rel“技术来加载一个默认的样式表，一个用于IE，另一个用于IE6。但是对于Safari和Opera，我尝试了linkrel CSS hack技术，但失败了-- FF正在加载和解释Opera和Safari样式表，而我认为在linkrel标记上可能会失败。因此，我不得不将其切换为内联CSS并使用@import url()调用，但这失败了，因为Opera和Safari无法解释@import url()调用。因此，我别无选择，只能将上下文切换回PHP，并使用require()语句内联加载它。

好吧，下面文件中的当前排列是有效的，但这意味着Opera和Safari的样式表在所有浏览器中都是加载的(只是除了Opera和Safari之外没有解释)。

相反，我想知道如何让linkrel或@import在Opera和Safari上工作。

<?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

我假设您已经尝试过对webkit/ff/opera使用相同的样式表，并且这是最后的手段，因为您正在做一些奇怪的事情？

无论如何，Opera确实支持@import。(必须如此，在6.79% of all stylesheets中使用@import。)

此外，Opera CSS之前的媒体查询将永远不会在Opera中运行，因为您在规则中使用了(-webkit-min-device-pixel-ratio:10000)。根据Media query specs error handling rules：“当指定的媒体特征之一未知时，用户代理将忽略媒体查询。”我怀疑Opera是否尊重-webkit供应商的媒体功能。

有关Opera支持和不支持的完整列表，请查看the Opera feature chart

Answer 2

@imports must preceed all other rules。

您必须将媒体查询放在@import本身上：

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

还有，Firefox doesn't support media queries yet (they're coming in 3.1)。我认为这意味着它现在只是忽略link元素的media属性中的未知媒体类型，并愉快地加载文件。

你得小心点。事实上，你对Opera作品的媒体查询很可能意味着一旦支持媒体查询，它也将在Firefox上工作。