Как импортировать файл CSS только для Firefox, но не для других браузеров? - PullRequest
0 голосов
/ 16 марта 2012

У меня есть файл CSS, который я хочу видеть только в браузерах Firefox.Я подумал, что я супер-умный, придумав

@-moz-document url-prefix() {
    @import url("/a-large-css-file.css");
}

... только чтобы узнать, что директивы @ import не могут быть вложены таким образом .

Подробнее:

  • Файл тяжелый, поэтому я не могу включить его содержимое внутри «условного», поскольку я не хочу, чтобы он влиял на общий размер запроса для других браузеров
  • Файл содержит объявление font-face с самим шрифтом в кодировке base64.Почему ты спрашиваешь?Firefox не позволяет загружать шрифты с другого субдомена, и именно так размещается статический контент.Есть хороший обзор проблемы здесь и здесь
  • Если вы просмотрели ссылки в приведенном выше пункте, вы увидите предложение добавить Access-Control-Allow-Origin http заголовок - к сожалению, это не вариант для меня, учитывая наши процедуры настройки и развертывания инфраструктуры.

Еще больше деталей:

  • Статический контент размещается на URL-адресе, аналогичном resources.environmentN.domain.com , тогда как URL-адреса страниц похожи на environmentN.domain.com , где N отличается посреды.
  • У нас есть Apache Tomcat, на котором работает Liferay Portal.

На этом этапе я открыт практически для любого обходного пути :)

Редактировать

Возможно, мне следовало бы сформулировать это по-другому, но я должен упомянуть, что я, вероятно, не открыт для обходных путей javascript, причиной этого будет флэш-содержимое без стиля даже после успешного локального кэширования ресурса - этобыло бы так с решениями, предложенными до сих пор.

Мои извинения за путаницу!

Ответы [ 2 ]

4 голосов
/ 20 марта 2012

Вам действительно нужно просто прикусить пулю и исправить серверную сторону, поскольку http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction требует поведения Firefox, и другие браузеры обновятся до него в какой-то момент.

0 голосов
/ 16 марта 2012

Определите браузер с помощью JavaScript, затем добавьте ссылку на таблицу стилей, если это FireFox

$('head').append(' <link href="a-large-css-file.css.css" media="screen" rel="stylesheet" type="text/css" />');
...