CSS-achtergrondafkorting komt naar mobiele WebKit-browsers

Pete LePage

Eerder dit jaar heeft WebKit het gedrag van de CSS- background steno-eigenschap bijgewerkt. Met deze wijziging zal de eigenschap background -steno de background-size opnieuw instellen op de standaardwaarde auto auto als deze niet is ingesteld in de steno-declaratie. Deze wijziging zorgt ervoor dat Chrome en andere WebKit-browsers voldoen aan de specificatie en overeenkomen met het gedrag van Firefox, Opera en Internet Explorer.

Nu Chrome voor Android vooruitgaat met de huidige herzieningen op WebKit, wordt deze wijziging nu uitgerold in Android. Omdat dit een oplossing voor webkit was, worden sites die in meerdere browsers hebben getest waarschijnlijk niet getroffen.

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 shorthand bevat geen enkele eigenschap size en zal daarom de background-size resetten naar de standaardwaarde auto auto .

Correcte manier om de afbeeldingsgrootte op te geven

// 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 eerst de position (0%), gevolgd door een schuine streep en vervolgens de background-size (50px 40px).

Oplossingen voor bestaande code

Er zijn verschillende opties die hiervoor een eenvoudige oplossing bieden:

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

Bonus: offsets van achtergrondafbeeldingen

Naast deze verandering is er nu meer flexibiliteit bij het positioneren van de afbeelding op de achtergrond. In het verleden kon u alleen de afbeeldingspositie relatief vanaf de linkerbovenhoek opgeven, nu kunt u een offset vanaf de randen van de container opgeven. Bijvoorbeeld background-position: right 5px bottom 5px; de afbeelding wordt 5px vanaf de rechterrand en 5px vanaf de onderkant geplaatst. Bekijk dit voorbeeld op JSBin