моделировать стили CSS3 в IE8 - PullRequest
Новая
       66

моделировать стили CSS3 в IE8

2 голосов
/ 15 февраля 2012

У меня есть веб-сайт, который использует различные стили CSS3, который действительно был протестирован только в Firefox 10. Мне нужен какой-то способ имитировать различные стили CSS, которые изначально не поддерживаются при просмотре в IE8:

  • тень блока
  • тень текста
  • градиент фона
  • круглый угол
  • непрозрачность

Я пробовал использовать css3pie , но когда я включил файл .htc, он вызвал некоторые неприятные побочные эффекты.Я знаю, что есть плагины jQuery, которые могут добавлять тени элементов и закругленные углы к элементам в IE8, поэтому я рассматриваю возможность их использования внутри условного кодового блока, например, 

if ($.browser == 'msie' && $.browser.version.split('.')[0] < 9) {
    // call JQuery plugins to apply box shadows, round corners, etc.    
}

Я понимаю, что это несколько хрупкопотому что я использую обнаружение браузера, а не обнаружение функций, но я не могу найти способ обнаружить функции, такие как возможность скругления углов, используя jQuery.support .

Во-вторых, я 'Я знаю только о плагинах jQuery, которые могут имитировать некоторые свойства CSS3 (тени от квадратов и круглые углы), есть ли другие для градиента фона, непрозрачности и теней текста?

Наконец, если есть совершенно другой способ достижениямоя цель, тогда, пожалуйста, не стесняйтесь предложить альтернативу.

1 Ответ

2 голосов
/ 15 февраля 2012

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

Не хотелось бы упоминать об этом, но вы можете изучить фильтры для IE .Они будут имитировать некоторые из этих свойств - например, тень от блока и непрозрачность.Однако, будьте осторожны: фильтры снижают производительность и не будут отображаться так же хорошо, как нативный CSS.

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

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

Закругленные углы - мне еще предстоит найти отличное решение для этого.Пусть это будет.

Непрозрачность - есть фильтр непрозрачности для IE, который работает довольно хорошо (с теми же предостережениями).Если вы ищете поддержку RGBA, вам придется использовать прозрачный PNG для фона.

Я бы посоветовал, но вместо того, чтобы ориентироваться на IE8, использовать что-то вроде modernizr нацеливать браузеры на основе того, какие функции они поддерживают или не поддерживают.

Также: это .

...