Responsive(uyumlu) web kodlarken en büyük yardımcımız olan medya sorguları hakkında güzel bir gelişme var. Responsive(uyumlu) web kodlarken kullandığımız minimum genişlik ve maksimum genişlik kullanımının sonuna geldik, zaten kullanırken de çoğu zaman kafa karışıklığına neden oluyorlardı.

Artık javascript’te kullandığımız matematiksel işaretler yardımı ile genişlik sorgularını kullanabiliyoruz. Bu işaretler şunlar;

  • <
  • <=
  • >
  • >=
  • =

Şimdi eski veyi karşılaştırması için örneklere bakalım.

Eskiden;

@media (min-width: 1100px)  {
	// bir şeyler yaz
}

Cihaz genişliği 1100 piksel ve üzeri olduğunda CSS devreye giriyor. Yeni kullanım

@media (width >= 1100px)  {
  // bir şeyler yaz
} 

böylelikle kafa karışıklığı da olmayacaktır.

Bir diğer kullanım şekli de;

@media (max-width: 480px)  {
  // bir şeyler yaz
}

Cihaz genişliği 480 piksel ve altında olduğunda CSS devreye giriyor. Yeni kuralla birlikte

@media  (width <= 480px)  {
  // bir şeyler yaz
}

Son olarak bir aralığı belirtmek için

@media (min-width: 480px) and (max-width: 1100px) {
  // bir şeyler yaz
}

Cihaz genişliği 480 piksel ile 1100px arasında olduğunda CSS devreye giriyor. Yeni kuralla birlikte

@media (480px <= width <= 1100px) {
  // bir şeyler yaz
}

Süper.

Tarayıcı Desteği

Yeni yeni çıkmasına rağmen yüzdesi gayet güzel.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+117 + +

Sonuç

Sonuç olarak yeni tanımlar daha basit ve anlaşılabilir. Bence CSS bir sorununu daha düzeltti ve geliştirdi. Zamanında yavaşlıklarından dolayı eleştirdiğim W3C’yi tebrik ediyorum.

Kalın sağlıcakla.

Kaynaklar

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.