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

Pete LePage

Ранее в этом году WebKit обновил поведение свойства CSS background shorthand. С этим изменением свойство background shorthand сбрасывает background-size к его значению по умолчанию auto auto если оно не установлено в объявлении shorthand. Это изменение приводит 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 не содержит свойства size и поэтому сбросит 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 (50px 40px).

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

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

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

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

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

Pete LePage

Ранее в этом году WebKit обновил поведение свойства CSS background shorthand. С этим изменением свойство background shorthand сбрасывает background-size к его значению по умолчанию auto auto если оно не установлено в объявлении shorthand. Это изменение приводит 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 не содержит свойства size и поэтому сбросит 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 (50px 40px).

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

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

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

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

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