首页 文章

使用CSS Hacks时如何使用Safari和Opera导入CSS？

提问于
浏览 次
0

我在这里有一个艰难的，但我认为好处将是巨大的......

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

正如你所看到的，我正在使用“link rel”技术加载一个默认样式表，一个用于IE，另一个用于IE6 . 但是对于Safari和Opera，我尝试了linkrel CSS hack技术并且它失败了 - 当我认为它可能在linkrel标签上失败时，FF正在加载和解释Opera和Safari样式表 . 因此，我不得不将其切换为内联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]-->
css

2 回答

  • 1

    我打算假设你已经尝试过使用相同的webkit / ff / opera样式表，这是最后的选择，因为你做了一些奇怪的事情？

    无论如何，Opera确实支持 @import . （必须，@ import用于6.79% of all stylesheets . ）

    此外，在Opera CSS之前的媒体查询将在Opera中运行，因为您在规则中使用了 (-webkit-min-device-pixel-ratio:10000) . 根据Media query specs error handling rules："User agents are to ignore a media query when one of the specified media features is unknown." . 我怀疑Opera荣誉--webkit供应商媒体功能 .

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

    回复于
  • 0

    @import 无效，因为 @import 无法进入 @media 规则 . @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 . 或者它将在下一个版本中停止为Opera工作 .

    回复于

相关问题