условная таблица стилей Firefox (Gecko) - PullRequest
Новая
       21

условная таблица стилей Firefox (Gecko)

2 голосов
/ 11 июля 2009

сегодня я пытаюсь оптимизировать свой сайт для лучшего рендеринга в Firefox! Мои проблемы связаны со свойствами text-shadow и font-weight ... Я хотел бы установить пользовательские значения только для Firefox (мой веб-сайт совместим только с Mac, поэтому мне не нужна совместимость с IE), но я не хочу использовать отдельные таблица стилей только для этих двух свойств !!! Есть ли способ сделать это? Или я должен использовать php-скрипт для фильтрации пользовательского агента и загрузки настроенных таблиц стилей для Firefox?

Заранее спасибо!

Ответы [ 4 ]

6 голосов
/ 25 ноября 2011

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

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                background-color:blue;
                width: 100px;
                height: 100px;
            }

            @-moz-document url-prefix()
            {
                #myDiv
                {
                    background-color: red;
                }
            }
        </style>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>
2 голосов
/ 11 июля 2009

Вы можете использовать Выбор браузера CSS .

2 голосов
/ 12 июля 2009

Похоже, вы хотели бы поддерживать ТОЛЬКО браузеры, поддерживающие text-shadow, так почему же только Firefox? Ваш подход должен состоять в том, чтобы изменить font-weight только для тех браузеров, которые поддерживают text-shadow. Но это легче сказать, чем сделать.

Анализаторы браузера не будут работать, если они не смогут различить Firefox 3.5 и более ранние версии. Тот, на который ссылается KahWee, не достиг бы этого, но я бы не рекомендовал браузеру перехватывать данные - это не лучшая практика.

Вместо этого я бы порекомендовал установить font-weight на то, что предназначено для использования с text-shadow, а затем включить условный IE для сброса большинства браузеров посетителей обратно в исходный, без тени font-weight.

Пример: 

<style type="text/css" media="screen">
    .some-text {
        color: #fff;
        font-weight: bold;
        text-shadow: #000 0.1em 0.1em 0.2em;
    }
</style>

<!--[if IE]>
<style type="text/css" media="screen">
    .some-text {
         font-weight: normal;
         text-shadow: none; /* Does nothing now, but explicitly define NONE
            for future IE versions as that is what is intended */
    }
</style>
<![endif]-->

С этим вы достигнете text-shadow при правильном font-weight в следующих браузерах:

  • Firefox 3.5 +
  • Опера 9,5 +
  • Safari 1.1+ (с 2003 года!)
  • Chrome 2.0 +
  • Konqueror 3.4 +

И если вам нужна тень в IE, вы можете использовать filter выражений с DropShadow(), но я лично не рекомендую использовать проприетарные расширения CSS.

Таким образом, ваша единственная реальная "потеря" - это неправильное font-weight для более старых браузеров без IE, таких как Firefox 3.0 и ниже, а также Opera 9.2x и ниже.

Так стоит ли анализировать браузер JavaScript или PHP, чтобы изменить font-weight для очень ограниченного подмножества старых браузеров?

Если ответ все еще положительный, то есть снифферы браузера PHP, такие как , этот .

1 голос
/ 11 июля 2009

Условные обозначения только для IE, извините. Может быть, некоторые из этих функций могут вам помочь, они работают только в браузерах Gecko: Расширения Mozilla css

...