Comment puis-je importer CSS avec Safari et Opera lors de l'utilisation CSS Hacks?

Question

J'ai un dur ici, mais je pense que le bénéfice sera grand ...

J'utilise le CSS CSS avec PHP. La variable U dans le fichier ci-dessous est une constante, précédemment définie (avant d'inclure ce fichier) comme l'URL telle que http://example.com/. La variable constante P est définie comme le chemin physique du fichier, comme /var/www/example.com/. (La raison pour laquelle je dois utiliser U et P pour le chemin absolu est parce que j'utilise de jolies URL via Apache RewriteRule et cela gâche le chemin relatif.)

Comme vous pouvez le voir, j'utilise la technique "link rel" pour charger une feuille de style par défaut, et pour un pour IE, puis un autre pour IE6. Mais pour Safari et Opera, j'ai essayé la technique du hack CSS linkrel et elle a échoué - FF chargeait et interprétait les feuilles de style Opera et Safari quand je pensais que ça pourrait échouer sur la balise linkrel. Donc, j'ai dû passer à un CSS en ligne et utiliser un appel @import url(), mais cela a échoué car Opera et Safari n'interpréteraient pas l'appel @import url(). Donc, je n'avais pas d'autre choix que de replacer le contexte dans PHP et le charger en ligne avec une instruction require(). Eh bien, l'arrangement actuel dans le fichier ci-dessous fonctionne, mais cela signifie que la feuille de style pour Opera et Safari est en cours de chargement avec tous les navigateurs (elle n'est simplement pas interprétée sauf par Opera et Safari). Je voudrais savoir comment obtenir le linkrel ou le @import fonctionnant pour Opera et Safari, à la place.

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

Je vais supposer que vous avez essayé d'utiliser les mêmes feuilles de style pour webkit/ff/opéra allready, et que c'est le dernier recours parce que vous faites quelque chose d'étrange? En tout cas, Opera prend en charge @import. (Il doit, @import est utilisé dans 6.79% of all stylesheets.)

En outre, la requête des médias qui précède le CSS Opera jamais course dans Opera parce que vous utilisez (-webkit-min-device-pixel-ratio:10000) dans la règle. Selon le Media query specs error handling rules: "Les agents utilisateurs doivent ignorer une requête de support lorsque l'une des fonctionnalités de support spécifiées est inconnue.". Je doute des honneurs d'Opera - les fonctions de médias de vendeur de Web.

Pour une liste complète de ce que fait Opera et ne supporte pas, regardez the Opera feature chart

Answer 2

Le @import ne fonctionnait pas parce @import ne peut pas aller à l'intérieur d'une règle @media. @imports must preceed all other rules.

Vous devez mettre la requête multimédia sur le @import lui-même:

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

En outre, Firefox doesn't support media queries yet (they're coming in 3.1). Je suppose que cela signifie qu'il ignore simplement les types de médias inconnus dans l'attribut media sur l'élément link maintenant et charge le fichier avec bonheur.

Vous devrez faire attention. Les requêtes média ne sont pas destinées à être utilisées pour le reniflage de navigateur. Le fait que votre requête média pour Opera fonctionne pourrait très bien signifier qu'il finira par fonctionner aussi pour Firefox une fois qu'il supportera les requêtes média. Ou ça va cesser de fonctionner pour Opera dans sa prochaine version.