Ağustos ayında web platformundaki yenilikler

Ağustos 2022'de kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.

Ağustos ayında Firefox 104, Chrome 104 ve Chrome 105 kararlı sürüm olarak kullanıma sunuldu.

Chrome 104, CSS Dönüşümleri için ayrı özellikler içerir. scale, rotate ve translate özellikleri, dönüşümün bu bölümlerini ayrı ayrı tanımlamak için kullanabileceğiniz özelliklerdir.

Böylece Chrome, bu özellikleri zaten destekleyen Firefox ve Safari'ye katılmış oldu.

Tarayıcı desteği

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Kaynak

Yeni medya sorgu söz dizimi

Chrome 104, medya sorgusu aralığı söz dizimini de içerir. Bu özellik, Firefox tarafından zaten kullanıma sunulmuştur ve medya sorgularını kolaylaştırmaya yardımcı olur. Örneğin, aşağıdaki medya sorgusu:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Karşılaştırma operatörü kullanılarak yazılabilir:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Tarayıcı desteği

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Kaynak

Container sorguları

Chrome 105, uzun zamandır beklenen kapsayıcı sorguları özelliğini web platformuna getiren heyecan verici bir sürümdür. Medya sorguları, görüntü alanının boyutuna göre sorgu yapmanızı sağlarken kapsayıcı sorguları, kapsayıcının boyutuna göre sorgu yapmanızı sağlar.

Tarayıcı desteği

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Kaynak

Kapsayıcı sorgularını kullanmak için container-type mülkünü kullanarak kapsayıcıyı etkinleştirin.

.card-container {
  container-type: inline-size;
}

container-type değerini inline-size olarak ayarlamak, üst öğenin satır içi yön boyutunu sorgulamaya yarar. İngilizce gibi Latin dillerinde, metin soldan sağa doğru satır içi olarak aktığı için bu, kartın genişliği olur.

Artık bu kapsayıcıyı kullanarak @container ile alt öğelerinden herhangi birine stil uygulayabiliriz:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Kapsayıcı sorguları hakkında daha fazla bilgiyi @container ve :has(): Chromium 105'te kullanıma sunulan iki yeni güçlü duyarlı API başlıklı yayında bulabilirsiniz.

:has() üst öğe sözde sınıfı

Yukarıda bahsedilen gönderide :has()'den de bahsediliyor. Bu yeni sözde sınıf CSS :has() sözde sınıfı, üst öğeyi ve kardeş öğeleri koşullara göre hedeflemenize olanak tanır. Daha fazla bilgi için aile seçiciyi:has() başlıklı makaleyi inceleyin.

Tarayıcı desteği

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Kaynak

Sanitizer API

Chrome 105'te Sanitizer API de yer alıyor. Bu API, siteler arası komut dosyası çalıştırma güvenlik açıklarının kaldırılmasına yardımcı olmak için platforma temizleme özelliğini ekler.

Chrome 105'te :modal CSS sözde sınıfı da yer alıyor. Bu, kendi dışındaki öğelerle tüm etkileşimleri hariç tutan bir durumdaki bir öğeyle eşleşir. Örneğin, showModal() API'si ile açılan bir <dialog>.

Tarayıcı desteği

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Kaynak

findLast() ve findLastIndex() yöntemleri

Firefox 104, Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() ve TypedArray.prototype.findLastIndex() yöntemleri için bir işaretle destek ekler. Bu yöntemler, bir Array veya TypedArray'daki son öğenin, sağlanan test işleviyle eşleşen değerini ve dizesini (sırasıyla) bulmak için kullanılır.

Tarayıcı desteği

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4.

Kaynak

Beta tarayıcı sürümleri

Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümünde yer alacak özelliklerin önizlemesini sunar. Bu sürüm dünya genelinde kullanıma sunulmadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmek için mükemmel bir zamandır.

Yayınlanma tarihleri ayın sonuna denk geldiği için Ağustos ayındaki tek yeni beta sürümü Firefox 105 oldu. Bu sürümle ilgili ayrıntılar henüz net değil.

Haziran ayında bahsettiğimiz Safari 16 beta sürümü de hâlâ devam ediyor.

Web'de yeni olanlar serisi kapsamında