Сокращение CSS Background появится в мобильных браузерах WebKit

Пит ЛеПейдж

Ранее в этом году WebKit обновил поведение свойства CSS-сокращения background . Благодаря этому изменению свойство сокращенной записи background сбросит background-size до значения по умолчанию auto auto , если оно не установлено в объявлении сокращенной записи. Это изменение приводит Chrome и другие браузеры WebKit в соответствие со спецификацией и соответствует поведению Firefox, Opera и Internet Explorer.

Поскольку Chrome для Android переходит к текущим версиям WebKit, это изменение теперь распространяется и на Android. Поскольку это исправление для webkit, сайты, протестированные в нескольких браузерах, скорее всего, не затронуты.

Старый способ ведения дел

// background-size is reset to auto auto by the background shorthand
.foo {
    background-size: 50px 40px;
    background: url(foo.png) no-repeat;
}

Сокращенное свойство background не содержит никакого свойства размера и поэтому сбрасывает background-size до значения по умолчанию auto auto .

Правильный способ указания размера изображения

// background-size is specified after background
.fooA {
    background: url(foo.png) no-repeat;
    background-size: 50px 40px;
}

// background-size is specified inline after position
.fooB {
    background: url(foo.png) 0% / 50px 40px no-repeat;
}

В fooB для указания background-size в сокращенной записи background необходимо сначала указать position (0%), затем косую черту, а затем background-size (50 пикселей 40 пикселей).

Исправления существующего кода

Есть несколько вариантов, которые помогут легко исправить эту проблему:

  • Используйте background-image вместо сокращенного свойства background .
  • Установите background-size в последнюю очередь, с более высокой специфичностью, чем любые другие правила CSS, которые устанавливают background для этого элемента, и не забудьте проверить правила и :hover .
  • Примените свойство !important к background-size .
  • Переместите информацию о размерах в свойство сокращенной записи background .

Бонус: смещения фонового изображения

В дополнение к этому изменению теперь появилась большая гибкость в размещении изображения на заднем плане. Раньше вы могли указать положение изображения только относительно верхнего левого угла, теперь вы можете указать смещение от краев контейнера. Например, установка background-position: right 5px bottom 5px; изображение будет расположено на расстоянии 5 пикселей от правого края и 5 пикселей от нижнего. Посмотрите этот образец на JSBin