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ısayolu özelliğinin davranışını güncelledi. Bu değişiklikle birlikte, background kısayol mülkü, kısayol beyanında ayarlanmamışsa background-size değerini varsayılan auto auto değerine sıfırlayacaktır. Bu değişiklik, Chrome ve diğer WebKit tarayıcılarını spesifikasyona uygun hale getirir ve Firefox, Opera ve Internet Explorer'ın davranışıyla eşleşir.

Android için Chrome, WebKit'teki mevcut düzeltmelere geçiş yaptığından bu değişiklik Android'de kullanıma sunuluyor. Bu, webkit'te yapılan bir düzeltme olduğundan, birden fazla tarayıcıda test edilen siteler muhtemelen etkilenmez.

Eskiden yapılan işlemler

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

background kısaltma mülkü herhangi bir beden özelliği içermez ve bu nedenle background-size'yi varsayılan değeri olan auto auto olarak sıfırlar.

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'te, background kısalığında bir background-size belirtmek için önce position (%0), ardından eğik çizgi ve background-size (50px 40px) belirtilmesi gerekir.

Mevcut kodda yapılan düzeltmeler

Bu sorunu kolayca çözmenizi sağlayacak birkaç seçenek vardır:

  • background kısayolu yerine background-image kullanın.
  • background-size'ü, söz konusu öğede background'yi ayarlayan diğer CSS kurallarına kıyasla daha yüksek bir özgünlükle en son ayarlayın ve :hover kurallarını kontrol etmeyi unutmayın.
  • !important özelliğini background-size'a uygulayın.
  • Boyutlandırma bilgilerini background kısaltması mülküne taşıyın.

Bonus: Arka plan resmi ofsetleri

Bu değişikliğin yanı sıra, resmi arka planda konumlandırma konusunda daha fazla esneklik elde edebilirsiniz. Geçmişte yalnızca sol üst köşeye göre resim konumunu belirtebiliyordunuz. Artık kapsayıcının kenarlarına göre bir ofset belirtebilirsiniz. Örneğin, background-position: right 5px bottom 5px; ayarlandığında resim sağ kenardan 5 piksel ve alttan 5 piksel mesafeye konumlandırılır. JSBin'deki bu örneğe göz atın.