Bu sayfa, Cloud Translation API ile çevrilmiştir.

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.

Rachel Andrew

Kararlı tarayıcı sürümleri

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

Bağımsız dönüşümler

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

Kaynak

Yeni medya sorgu söz dizimi

Chrome 104, medya sorgusu aralık söz dizimini de içerir. Bu uzantı, Firefox tarafından zaten gönderildi 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

Kaynak

Kapsayıcı sorguları

Chrome 105, uzun süredir 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

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()'ten 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. :has() aile seçici bölümünden daha fazla bilgi edinebilirsiniz.

Tarayıcı desteği

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, dışındaki öğelerle tüm etkileşimleri hariç tuttuğu durumdaki bir öğeyle eşleşir. Örneğin, showModal() API ile bir <dialog> açıldı.

Tarayıcı Desteği

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

Kaynak

Beta tarayıcı sürümleri

Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümünde kullanıma sunulacak özelliklerin önizlemesini sunar. Dünya henüz piyasaya sürülmeden sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmenin tam zamanı.

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