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

Pete LePage

Anfang des Jahres hat WebKit das Verhalten der CSS-Kurzform-Eigenschaft background aktualisiert. Durch diese Änderung wird die Kurzform-Eigenschaft background auf den Standardwert auto auto zurückgesetzt, wenn sie nicht in der Kurzform-Deklaration festgelegt ist.background-size Durch diese Änderung werden Chrome und andere WebKit-Browser mit der Spezifikation in Einklang gebracht. Das Verhalten entspricht dem von Firefox, Opera und Internet Explorer.

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

Bisherige Vorgehensweise

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

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

Bildgröße richtig angeben

// 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 Kurzschreibweise background angeben, muss zuerst position (0%) und dann ein Schrägstrich und die background-size (50px 40px) angegeben werden.

Korrekturen für vorhandenen Code

Es gibt mehrere Optionen, mit denen sich dieses Problem leicht beheben lässt:

  • Verwenden Sie background-image anstelle der Kurzform-Property background.
  • Legen Sie background-size zuletzt fest. Die Spezifität muss höher sein als bei allen anderen CSS-Regeln, mit denen background für dieses Element festgelegt wird. Vergessen Sie nicht, die Regeln für :hover zu prüfen.
  • Wenden Sie das Attribut !important auf background-size an.
  • Verschieben Sie die Größeninformationen in die Kurzform background.

Bonus: Hintergrundbild-Offsets

Zusätzlich zu dieser Änderung ist es jetzt flexibler möglich, das Bild im Hintergrund zu positionieren. Bisher konnten Sie die Bildposition nur relativ zur oberen linken Ecke 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 auf JSBin ansehen