L'abbreviazione del contesto CSS sarà disponibile sui browser WebKit per dispositivi mobili

Pete LePage

All'inizio di quest'anno, WebKit ha aggiornato il comportamento della proprietà abbreviata background del CSS. Con questa modifica, la proprietà abbreviata background reimposterà il valore predefinito di background-size per il campo auto auto se non è impostato nella dichiarazione sintetica. Grazie a questa modifica, Chrome e altri browser WebKit sono conformi alle specifiche e si adegua al comportamento di Firefox, Opera e Internet Explorer.

Con Chrome per Android che passa alle revisioni attuali su WebKit, questa modifica viene ora implementata in Android. Poiché questa era una correzione del metodo webkit, è probabile che i siti testati in più browser non siano interessati.

Vecchio modo di fare le cose

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

La proprietà abbreviata background non contiene alcuna proprietà di dimensione e pertanto verrà reimpostata la proprietà background-size sul valore predefinito di auto auto.

Metodo corretto per specificare le dimensioni delle immagini

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

In fooB, per specificare un background-size nella forma abbreviata background è necessario specificare prima position (0%), seguito da una barra e poi da background-size (50 px e 40 px).

Correzioni del codice esistente

Esistono diverse opzioni che consentono di risolvere facilmente il problema:

• Usa background-image anziché la proprietà abbreviata background.
• Imposta l'ultimo background-size, con una specificità più elevata rispetto a qualsiasi altra regola CSS che imposta il valore background su quell'elemento, senza dimenticare di controllare le :hover regole.
• Applica la proprietà !important a background-size.
• Sposta le informazioni sulle dimensioni nella proprietà abbreviata background.

Bonus: offset dell'immagine di sfondo

Oltre a questa modifica, c'è ora una maggiore flessibilità nel posizionamento dell'immagine all'interno dello sfondo. In passato, potevi specificare la posizione dell'immagine in relazione solo dall'angolo in alto a sinistra, mentre ora puoi specificare un offset dai bordi del container. Ad esempio, impostando background-position: right 5px bottom 5px; l'immagine verrà posizionata a 5 px dal bordo destro e a 5 px dal bordo inferiore. Guarda questo esempio su JSBin