Skróty CSS w przeglądarkach mobilnych WebKit

Pete LePage

W tym roku zmieniliśmy zachowanie właściwości skrótu CSS background. Dzięki tej zmianie, jeśli w deklaracji skrótu nie ma wartości, background zostanie przywrócona do domyślnej wartości auto auto.background-size 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, witryny, które zostały przetestowane w różnych przeglądarkach, prawdopodobnie nie zostały dotknięte.

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 position (0%), a następnie ukośnika i background-size (50 pikseli 40 pikseli).

poprawki w dotychczasowym kodzie;

Istnieje kilka opcji, które ułatwią rozwiązanie tego problemu:

  • Zamiast właściwości background o krótkim zapisie użyj właściwości background-image.
  • Ustaw background-size jako ostatnią z reguł CSS, z wyższą 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