CSS-Hintergrund-Abkürzung für mobile WebKit-Browser

Pete LePage

Anfang des Jahres hat WebKit das Verhalten der CSS-Kurzschreibweise background aktualisiert. Durch diese Änderung wird background-size in der Kurzschreibweise background auf den Standardwert auto auto zurückgesetzt, wenn er nicht in der Kurzschreibweise festgelegt ist. Durch diese Änderung entsprechen Chrome und andere WebKit-Browser der Spezifikation und verhalten sich wie Firefox, Opera und Internet Explorer.

Da Chrome für Android auf die aktuellen WebKit-Versionen umgestellt wird, wird diese Änderung jetzt in Android eingeführt. Da es sich um eine Korrektur für WebKit handelt, sind Websites, die in mehreren Browsern getestet wurden, wahrscheinlich nicht betroffen.

Alte Arbeitsweise

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

Die Kurzform background enthält keine Größeneigenschaft und setzt background-size daher auf den Standardwert auto auto zurück.

Richtige Angabe der Bildgröße

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

Wenn Sie in fooB eine background-size in der Kurzform background angeben möchten, müssen Sie zuerst die position (0%) angeben, gefolgt von einem Schrägstrich und dann der background-size (50 px 40 px).

Fehlerkorrekturen für vorhandenen Code

Es gibt mehrere Möglichkeiten, dieses Problem einfach zu beheben:

• Verwenden Sie background-image anstelle der Kurzform background.
• Legen Sie die background-size als letztes fest und achten Sie darauf, dass sie spezifischer ist als alle anderen CSS-Regeln, die background für dieses Element festlegen. Prüfen Sie auch die :hover-Regeln.
• Wenden Sie die Property !important auf background-size an.
• Verschieben Sie die Informationen zur Größe in das Kurzformat-Attribut background.

Bonus: Hintergrundbild-Abweichungen

Zusätzlich zu dieser Änderung können Sie das Bild jetzt flexibler im Hintergrund platzieren. Bisher konnten Sie die Bildposition nur relativ zum linken oberen Eckpunkt angeben. Jetzt können Sie einen Versatz von den Rändern des Containers angeben. Wenn Sie beispielsweise background-position: right 5px bottom 5px; festlegen, wird das Bild 5 Pixel vom rechten Rand und 5 Pixel vom unteren Rand entfernt positioniert. Beispiel in JSBin ansehen