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 ile yükleniyor animasyonu yapmak

CSS ile yükleniyor animasyonu yapmak Devamını oku

CSS scroll-snap

20 November 2023 tarihinde yayınlandı.

CSS ile buzlu cam efekti yapmak

13 November 2023 tarihinde yayınlandı.