Skróty CSS w przeglądarkach mobilnych WebKit

Pete LePage

W tym roku WebKit zaktualizował zachowanie właściwości skrótu CSS background. Dzięki tej zmianie właściwość background w skrócie spowoduje przywrócenie wartości domyślnej background-size (auto auto), jeśli nie została ona określona w deklaracji skróconej. Ta zmiana sprawia, że Chrome i inne przeglądarki WebKit są zgodne ze specyfikacją i działają tak samo jak Firefox, Opera i Internet Explorer.

Chrome na Androida przechodzi na najnowsze wersje WebKit, więc ta zmiana jest teraz wprowadzana na Androida. Ponieważ była to poprawka dla webkit, prawdopodobnie nie wpłynie ona na witryny testowane w kilku przeglądarkach.

Stary sposób wykonywania zadań

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

Właściwość background w skrótowej formie nie zawiera żadnej właściwości rozmiaru, więc spowoduje zresetowanie wartości background-size do wartości domyślnej auto auto.

Prawidłowe określanie 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 background-size w skrócie background wymaga użycia najpierw wartości position (0%), a następnie ukośnika i wartości background-size (50 pikseli 40 pikseli).

poprawki w dotychczasowym kodzie;

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

  • Zamiast właściwości background o krótkim zapisie użyj właściwości background-image.
  • Ustaw background-size jako ostatnią, z większą specyficznością niż inne reguły CSS, które ustawiają background dla tego elementu. Nie zapomnij też sprawdzić reguł :hover.
  • Zastosuj właściwość !important do background-size.
  • Przenieś informacje o rozmiarze do właściwości background w skrótowym formacie.

Bonus: przesunięcia obrazu tła

Oprócz tej zmiany możesz teraz łatwiej ustawić obraz na tle. Wcześniej można było określić tylko położenie obrazu względem lewego górnego rogu, a teraz można określić przesunięcie względem krawędzi kontenera. Jeśli na przykład ustawisz wartość background-position: right 5px bottom 5px;, obraz będzie znajdować się 5 pikseli od prawej krawędzi i 5 pikseli od dołu. Sprawdź ten przykład w JSBin.