CSS-achtergrondafkorting komt naar mobiele WebKit-browsers

Pete LePage

Eerder dit jaar heeft WebKit het gedrag van de CSS-eigenschap background bijgewerkt. Met deze wijziging wordt de background teruggezet naar de standaardwaarde auto auto als deze niet is ingesteld in de stenodeclaratie. Deze wijziging zorgt ervoor background-size Chrome en andere WebKit-browsers voldoen aan de specificatie en overeenkomt met het gedrag van Firefox, Opera en Internet Explorer.

Nu Chrome voor Android overstapt naar de huidige revisies van WebKit, wordt deze wijziging nu ook in Android uitgerold. Omdat dit een oplossing voor WebKit was, worden sites die in meerdere browsers zijn getest, waarschijnlijk niet beïnvloed.

Oude manier van doen

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

De eigenschap background ' bevat geen eigenschap 'grootte' en zal daarom de background-size opnieuw instellen op de standaardwaarde ' auto auto .

Correcte manier om de afbeeldingsgrootte te specificeren

// 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 vereist het opgeven van een background-size in de background dat eerst de position (0%) wordt opgegeven, gevolgd door een slash en vervolgens de background-size (50px 40px).

Oplossingen voor bestaande code

Er zijn verschillende opties die dit probleem eenvoudig kunnen oplossen:

• Gebruik background-image in plaats van de afkorting background .
• Stel de background-size als laatste in, met een hogere specificiteit dan alle andere CSS-regels die background voor dat element instellen. Vergeet ook niet om de :hover -regels aan te vinken.
• Pas de eigenschap !important toe op background-size .
• Verplaats de maatinformatie naar de eigenschap in de background .

Bonus: achtergrondafbeeldingsoffsets

Naast deze wijziging is er nu meer flexibiliteit bij het positioneren van de afbeelding binnen de achtergrond. Voorheen kon je de positie van de afbeelding alleen relatief ten opzichte van de linkerbovenhoek opgeven, maar nu kun je een offset vanaf de randen van de container opgeven. Bijvoorbeeld, door background-position: right 5px bottom 5px; wordt de afbeelding 5px vanaf de rechterrand en 5px vanaf de onderkant geplaatst. Bekijk dit voorbeeld op JSBin.