使用CSS技巧时，如何通过Safari和Opera导入CSS？

Question

我在这里很难受，但我认为这样做的好处是巨大的。

我将以下CSS hack与PHP结合使用。 以下文件中的U变量是一个常量，该常量先前已定义为URL，例如http://example.com/ 。 P常量变量定义为物理文件路径，如/var/www/example.com/。 （我必须使用U和P进行绝对路径的原因是因为我通过Apache RewriteRule使用了漂亮的URL，并且弄乱了相对路径。）

如您所见，我正在使用“链接相关性”技术来加载默认样式表，对于IE，使用一个样式表，对于IE6，使用另一个样式表。 但是对于Safari和Opera，我尝试了linkrel CSS hack技术，但失败了-当我以为FF在linkrel标签上可能会失败时，FF正在加载和解释Opera和Safari样式表。 因此，我不得不将其切换到内联CSS并使用@import url（）调用，但这失败了，因为Opera和Safari无法解释@import url（）调用。 因此，我别无选择，只能将上下文切换回PHP并使用require（）语句内联加载。

好吧，下面文件中的当前排列有效，但是这意味着Opera和Safari的样式表正在与所有浏览器一起加载（Opera和Safari不会解释）。

我想知道如何获取适用于Opera和Safari的linkrel或@import。

<?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％中使用@import。）

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

有关Opera支持和不支持的功能的完整列表，请查看Opera功能表

Answer 2

@import无效，因为@import不能进入@media规则。 @import必须先于所有其他规则 。

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

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

另外， Firefox还不支持媒体查询（它们将在3.1中推出） 。 我想这意味着它现在只会忽略link元素上media属性中的未知媒体类型，并愉快地加载文件。

您必须要小心。 媒体查询并非旨在用于浏览器嗅探。 您对Opera的媒体查询有效的事实可能意味着，一旦支持媒体查询，它最终也将在Firefox中运行。 否则它将在下一个版本中停止为Opera运行。