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 CSS background. Con questa modifica, la proprietà di scorciatoia background reimposta background-size sul valore predefinito auto auto se non è impostato nella dichiarazione di scorciatoia. Questa modifica rende Chrome e altri browser WebKit conformi alla specifica e corrisponde al comportamento di Firefox, Opera e Internet Explorer.

Poiché Chrome per Android passerà alle revisioni correnti di WebKit, questa modifica è ora in fase di implementazione in Android. Poiché si tratta di una correzione di 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à size e reimposta quindi background-size sul valore predefinito auto auto.

Modo 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 scorciatoia background è necessario specificare prima position (0%), seguito da una barra e poi da background-size (50px 40px).

Correzioni per il codice esistente

Esistono diverse opzioni che consentono di risolvere facilmente il problema:

  • Utilizza background-image anziché la proprietà abbreviata background.
  • Imposta background-size per ultimo, con una specificità superiore a quella di qualsiasi altra regola CSS che imposta background su quell'elemento e non dimenticare di controllare le regole :hover.
  • Applica la proprietà !important a background-size.
  • Sposta le informazioni sulle dimensioni nella proprietà abbreviata background.

Bonus: offset delle immagini di sfondo

Oltre a questa modifica, ora è possibile posizionare l'immagine nello sfondo con maggiore flessibilità. In passato, potevi specificare solo la posizione dell'immagine rispetto all'angolo in alto a sinistra, ora puoi specificare un offset rispetto ai bordi del contenitore. Ad esempio, impostando background-position: right 5px bottom 5px;, l'immagine verrà posizionata a 5 pixel dal bordo destro e a 5 pixel dal basso. Dai un'occhiata a questo esempio su JSBin