Singkatan Latar Belakang CSS hadir di browser WebKit seluler

Pete LePage

Awal tahun ini, WebKit memperbarui perilaku properti singkatan background CSS. Dengan perubahan ini, properti singkatan background akan mereset background-size ke nilai defaultnya, yaitu auto auto, jika tidak ditetapkan dalam deklarasi singkatan. Perubahan ini membuat Chrome dan browser WebKit lainnya mematuhi spesifikasi dan cocok dengan perilaku Firefox, Opera, dan Internet Explorer.

Dengan Chrome untuk Android yang beralih ke revisi saat ini di WebKit, perubahan ini kini diluncurkan di Android. Karena ini adalah perbaikan untuk webkit, situs yang diuji di beberapa browser kemungkinan tidak terpengaruh.

Cara lama dalam melakukan sesuatu

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

Properti singkatan background tidak berisi properti ukuran apa pun, sehingga akan mereset background-size ke nilai defaultnya, yaitu auto auto.

Cara yang benar untuk menentukan ukuran gambar

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

Di fooB, menentukan background-size dalam singkatan background mengharuskan position (0%) ditentukan terlebih dahulu, diikuti dengan garis miring, lalu background-size (50px 40px).

Perbaikan untuk kode yang ada

Ada beberapa opsi yang akan memberikan perbaikan mudah untuk hal ini:

• Gunakan background-image, bukan properti singkatan background.
• Tetapkan background-size terakhir, dengan kekhususan yang lebih tinggi daripada aturan CSS lainnya yang menetapkan background pada elemen tersebut, dan jangan lupa untuk memeriksa dan aturan :hover.
• Terapkan properti !important ke background-size.
• Pindahkan informasi ukuran ke properti singkatan background.

Bonus: offset gambar latar

Selain perubahan ini, kini ada fleksibilitas yang lebih besar dalam memosisikan gambar dalam latar belakang. Sebelumnya, Anda hanya dapat menentukan posisi gambar relatif dari sudut kiri atas, sekarang Anda dapat menentukan offset dari tepi penampung. Misalnya, menyetel background-position: right 5px bottom 5px;, gambar akan diposisikan 5 px dari tepi kanan dan 5 px dari bawah. Lihat contoh di JSBin ini