CSS arka planı kısayolu mobil WebKit tarayıcılarına geliyor

Pete LePage

Bu yılın başlarında WebKit, CSS background kısayol özelliğinin davranışını güncelledi. Bu değişiklikle birlikte, kısayol bildiriminde ayarlanmamışsa background kısayol özelliği, background-size değerini varsayılan auto auto değerine sıfırlar. Bu değişiklik, Chrome ve diğer WebKit tarayıcılarını spesifikasyon ile uyumlu hale getirmekte ve Firefox, Opera ve Internet Explorer'ın çalışma biçimiyle eşleşmektedir.

Android için Chrome'un WebKit'teki mevcut düzeltmelere geçişle birlikte bu değişiklik Android'de kullanıma sunuluyor. Bu, webkit için yapılan bir düzeltme olduğundan, birden çok tarayıcıda test edilen siteler muhtemelen bundan etkilenmemiştir.

Eski yöntem

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

background kısayol özelliği herhangi bir boyut özelliği içermediğinden background-size, varsayılan auto auto değerine sıfırlanır.

Resim boyutunu belirtmenin doğru yolu

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

fooB ürününde, background kısayolunda bir background-size belirtmek için önce position (%0), ardından bir eğik çizgi ve background-size (50 piksel 40 piksel) belirtilmesi gerekir.

Mevcut kodla ilgili düzeltmeler

Bu sorunu kolayca çözecek birkaç seçenek vardır:

• background kısayol özelliği yerine background-image özelliğini kullanın.
• background-size öğesini en sonda, bu öğede background özelliğini ayarlayan diğer tüm CSS kurallarına göre daha yüksek bir spesifiklikle ayarlayın. Ayrıca :hover kurallarını kontrol etmeyi unutmayın.
• !important özelliğini background-size öğesine uygulayın.
• Boyut bilgilerini background kısayol özelliğine taşıyın.

Bonus: arka plan resmi ofsetleri

Bu değişikliğe ek olarak, artık resmin arka planda konumlandırılmasında daha fazla esneklik var. Eskiden, yalnızca sol üst köşeden resmin konumunu belirleyebiliyordunuz. Artık kapsayıcının kenarlarına olan uzaklığı belirleyebiliyordunuz. Örneğin, background-position: right 5px bottom 5px; ayarını yaparsanız resim sağ kenardan 5 piksel ve alttan 5 piksel konumlandırılır. JSBin'deki bu örneğe göz atın.