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

Pete LePage

Plus tôt cette année, WebKit a mis à jour le comportement de la propriété abrégée CSS background. Avec cette modification, la propriété de raccourci background réinitialise background-size à sa valeur par défaut (auto auto) s'il n'est pas défini dans la déclaration abrégée. Grâce à cette modification, Chrome et les autres navigateurs WebKit sont conformes à la spécification et au comportement de Firefox, d'Opera et d'Internet Explorer.

Suite aux révisions actuelles de WebKit dans Chrome pour Android, ce changement est en cours de déploiement sur Android. Comme il s'agissait d'un correctif pour le Webkit, les sites testés dans plusieurs navigateurs ne seront probablement pas affectés.

Ancienne façon de faire

// 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 à sa valeur par défaut, auto auto.

Méthode correcte pour spécifier la taille d'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 une background-size dans le raccourci background, vous devez d'abord spécifier position (0%), suivi d'une barre oblique, puis de background-size (50 px 40 px).

Correctifs pour le code existant

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

• Utilisez background-image au lieu de la propriété abrégée background.
• Définissez la 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 dans la propriété de raccourci background.

Bonus: décalages des images de fond

En plus de ce changement, vous pouvez désormais positionner l'image de façon plus flexible en arrière-plan. Auparavant, vous ne pouviez spécifier que la position de l'image par rapport à l'angle supérieur gauche. Désormais, vous pouvez 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.