Raccourci CSS Background bientôt disponible dans les navigateurs WebKit pour mobile

Pete LePage

En début d'année, WebKit a mis à jour le comportement de la propriété abrégée CSS background. Avec cette modification, la propriété abrégée background réinitialise background-size sur sa valeur par défaut, auto auto, si elle n'est pas définie dans la déclaration abrégée. Cette modification rend Chrome et les autres navigateurs WebKit conformes à la spécification et correspond au comportement de Firefox, Opera et Internet Explorer.

Chrome pour Android passant aux versions actuelles de WebKit, ce changement est désormais déployé sur Android. Comme il s'agit d'un correctif pour WebKit, les sites testés dans plusieurs navigateurs ne sont probablement pas concernés.

L'ancienne méthode

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

La propriété abrégée background ne contient aucune propriété de taille et réinitialise donc background-size sur sa valeur par défaut, auto auto.

Méthode correcte pour spécifier la taille de l'image

// 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;
}

Dans fooB, pour spécifier un background-size dans l'abréviation background, vous devez d'abord spécifier position (0%), suivi d'une barre oblique, puis de background-size (50 px 40 px).

Corrections du code existant

Plusieurs solutions permettent de résoudre facilement ce problème:

• Utilisez background-image au lieu de la propriété abrégée background.
• Définissez background-size en dernier, avec une spécificité plus élevée que toute autre règle CSS qui définit background sur cet élément. N'oubliez pas de vérifier les règles :hover.
• Appliquez la propriété !important à background-size.
• Déplacez les informations de dimensionnement vers la propriété abrégée background.

Bonus: décalages d'images de fond

En plus de cette modification, vous pouvez désormais positionner l'image dans l'arrière-plan plus facilement. Auparavant, vous ne pouviez spécifier que la position de l'image par rapport à l'angle supérieur gauche. Vous pouvez désormais spécifier un décalage par rapport aux bords du conteneur. Par exemple, si vous définissez background-position: right 5px bottom 5px;, l'image sera positionnée à 5 pixels du bord droit et à 5 pixels du bas. Consultez cet exemple sur JSBin.