Как импортировать CSS с Safari и Opera при использовании CSS-хаков?

Question

У меня сложный вопрос, но я думаю, что выгода будет великой ...

Я использую следующий CSS-хак с PHP. Переменная U в приведенном ниже файле является константой, предварительно определенной (до того, как я включу этот файл) в качестве URL-адреса, например http://example.com/. Переменная-константа P определяется как физический путь к файлу, например / var / www / example. ком /. (Причина, по которой я должен использовать U и P для абсолютного пути, заключается в том, что я использую красивые URL-адреса через Apache RewriteRule, и это портит относительный путь.)

Как вы можете видеть, я использую технику "link rel" для загрузки таблицы стилей по умолчанию, и одной для IE, а затем еще одной для IE6. Но для Safari и Opera я попробовал технику взлома linkrel CSS, и она потерпела неудачу - 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. (Должно быть, @import используется в 6,79% всех таблиц стилей .)

Кроме того, медиазапрос, предшествующий Opera CSS, никогда не будет выполняться в Opera, поскольку в правиле используется (-webkit-min-device-pixel-ratio:10000). Согласно правилам обработки ошибок в медиа-запросах : «Пользовательские агенты должны игнорировать медиа-запрос, когда одна из указанных медиа-функций неизвестна». Я сомневаюсь, что Opera отдает должное медиа-возможностям вендоров.

Полный список того, что 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) . Я предполагаю, что это означает, что он просто игнорирует неизвестные типы носителей в атрибуте media элемента link и успешно загружает файл.

Вы должны быть осторожны. Медиа-запросы не предназначены для использования в браузере. Тот факт, что ваш медиа-запрос для Opera работает, вполне может означать, что он в конечном итоге будет работать и для Firefox, если он поддерживает медиа-запросы. Или он перестанет работать на Opera в следующей версии.