Поддерживаете свойство background-size в старых браузерах?

Question

Есть ли способ использовать свойство CSS3 «Background-Size», а затем использовать что-то вроде Modernizr, чтобы убедиться, что оно поддерживается в старых браузерах (в частности, я хочу использовать параметр «background-size: cover»)?

Я посмотрел на cssFx, который упоминается на веб-сайте Modernizr, но кажется, что он добавляет префиксы поставщиков только для браузеров, которым нужно, чтобы они использовали свойство, вместо того, чтобы разрешать браузерам, таким как IE8, поддерживать свойство размера фона.

Также посмотрел на CSS3Pie, но, похоже, в настоящее время он не поддерживает свойство background-size.

[10.11.2011 - в старых браузерах я думаю в основном о IE7 / 8, но в идеале я хотел бы рассмотреть FF3.6 и т. Д.]

Answer 1

Вы правы, что background-size не поддерживается в некоторых старых браузерах.

Типичное решение для этого - смоделировать его, используя дополнительный <div> или даже <img> элемент, расположенный за элементом, фон которого вы хотите.

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

Если вы хотите использовать свойство CSS для браузеров, которые его поддерживают, вы можете использовать немного Javascript для генерации вышеуказанной разметки, но только при необходимости. Это означает, что современные браузеры могут с радостью использовать background-size, и только старые браузеры будут использовать запасной вариант.

Существует несколько Javascript-решений для этого, доступных в Интернете (быстрый Google обнаружил следующее: http://css -tricks.com / 766-how-to-resizeable-background-image / среди прочего), но что более важно, вам нужно знать, как запустить его на основе браузера.

Это то место, где приходит Модернизр. Описание, которое вы дали Модернизру в вопросе, не совсем точно. Он создает набор CSS-классов в вашей HTML-разметке и соответствующие переменные в вашем Javascript, которые представляют все функции браузера. Это логические флаги, указывающие, поддерживает ли текущий браузер.

Таким образом, с помощью Modernizr вы можете проверить в Javascript, поддерживает ли браузер background-size или нет, и запускать альтернативную функцию javascript, только если она не поддерживает ее.

if(!Modernizr.backgroundsize) {
    //do stuff here to simulate the background-size property for older browsers.
}

Надеюсь, это поможет.

Answer 2

Вы можете увидеть поддержку background-size и его свойств по адресу: http://www.standardista.com/css3/css3-background-properties

Этот CSS поддерживает IE9 +, FireFox 3.6+, Safari, Chrome:

background-size: cover;
-moz-background-size: cover;

Для поддержки IE7 / 8, caniuse.com перечисляет этот polyfill: https://github.com/louisremi/background-size-polyfill

Answer 3

Прежде всего, есть простое исправление для Firefox 3.6.Существует префикс поставщика:

-moz-background-size

Что касается решения при использовании медиазапросов: вы можете использовать Modernizr для нацеливания на другое изображение, когда пользователи просматривают старые браузеры, это будет означать другой запрос браузера.Однако, вероятно, вы будете загружать меньшие изображения для каждого запроса, где размер экрана уменьшается.Поскольку Modernizr создаст ситуацию, когда эти запросы будут игнорироваться в новых браузерах, вы будете сокращать запросы к серверу для большинства людей, использующих новые браузеры.

Из любопытства я попробовал вышеуказанное решение, и оно сработало.Я применил следующие классы modernizr как: .no-backgroundsize для поддержки без фона, т.е. загруженный в новое изображение.Для всех других браузеров я добавил класс .backgroundsize и включил префикс, упомянутый вверху для FF.Это может быть повторено для каждого медиа-запроса с новым изображением для .no-background.Это один из способов решения проблемы.

- Я отредактировал это сообщение после того, как попробовал 12/15/12.

Answer 4

Лучший образец для лучшей поддержки:

  background-image: url(bg-image.png);

      -webkit-background-size: 100% 100%;           /* Safari 3.0 - Old Chrome - Old Android */
         -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
              background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

Не добавляйте это, потому что это создает проблемы в новых версиях Firefox:

-moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5)

Источник: mozilla.org

Answer 5

Другой вариант будет Размер фона Polyfill :

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Answer 6

Я думаю, что вы, вероятно, хотите использовать modernizr, чтобы проверить, поддерживается ли свойство в текущем браузере. Если нет, попробуйте найти альтернативный вариант отображения вашего сайта / приложения, который по-прежнему выглядит хорошо без использования свойства background-size.

Конечно, вы также можете попробовать другой подход, который вообще не включает это свойство, например, базовый div с изображением в нем (размер которого вы можете измерить) и контент, который перекрывает этот div. Удачи.