Skróty CSS w przeglądarkach mobilnych WebKit

Pete LePage

Na początku tego roku firma WebKit zaktualizowaliśmy działanie właściwości skróconej CSS background. W ramach tej zmiany skrócona właściwość background resetuje wartość domyślną elementu background-size do wartości auto auto, jeśli nie została ona ustawiona w deklaracji skróconej. Dzięki tej zmianie Chrome i inne przeglądarki WebKit są zgodne ze specyfikacją oraz działają tak samo jak Firefox, Opera i Internet Explorer.

Chrome na Androida jest obecnie wprowadzany w kolejnych wersjach w WebKit, a teraz wprowadzamy tę zmianę w Androidzie. Ta poprawka dotyczyła strony webkit, która prawdopodobnie nie ma wpływu na witryny przetestowane w wielu przeglądarkach.

Dawny sposób robienia rzeczy

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

Skrócona właściwość background nie zawiera żadnej właściwości rozmiaru i dlatego resetuje background-size do wartości domyślnej, czyli auto auto.

Właściwy sposób określania rozmiaru obrazu

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

W fooB określenie elementu background-size w skrócie background wymaga najpierw określenia parametru position (0%), a po nim ukośnika prawego, a następnie background-size (50 pikseli 40 pikseli).

Poprawki istniejącego kodu

Można to łatwo naprawić na kilka sposobów:

  • Używaj pola background-image zamiast skróconej właściwości background.
  • Ustaw background-size na końcu z większą precyzją niż inne reguły CSS, które ustawiają dla tego elementu atrybut background. Nie zapomnij sprawdzić tych reguł i reguł :hover.
  • Zastosuj właściwość !important do elementu background-size.
  • Przenieś informacje o rozmiarze do skróconej właściwości background.

Dodatkowo: przesunięcia obrazu tła

Oprócz tej zmiany dostępna jest też większa elastyczność w umieszczeniu obrazu w tle. Wcześniej można było określać położenie obrazu tylko względem lewego górnego rogu, teraz możesz natomiast określić odsunięcie względem krawędzi kontenera. Na przykład przy ustawieniu background-position: right 5px bottom 5px; obraz zostanie umieszczony w odległości 5 pikseli od prawej krawędzi i 5 pikseli od dołu. Zobacz ten przykład w JSBin