Ağustos 2022'de kararlı ve beta web tarayıcılarında bulunan bazı ilgi çekici özellikleri keşfedin.
Kararlı tarayıcı sürümleri
Ağustos ayında Firefox 104, Chrome 104 ve Chrome 105 kararlı hale geldi.
Bağımsız dönüşümler
Chrome 104, CSS Dönüşümleri için bağımsız özellikler içerir. Dönüşümün bu bölümlerini ayrı ayrı tanımlamak için kullanabileceğiniz scale, rotate ve translate özellikleridir.
Böylece Chrome, bu özellikleri zaten destekleyen Firefox ve Safari'ye katılmıştır.
Yeni medya sorgusu söz dizimi
Chrome 104, medya sorgusu aralığı söz dizimini de içerir. Bu arayüz Firefox tarafından zaten gönderilmekte ve medya sorgularının daha kolay hale getirilmesine yardımcı olmaktadır. Örneğin, aşağıdaki medya sorgusu:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Bir karşılaştırma operatörü kullanılarak yazılabilir:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Kapsayıcı sorguları
Chrome 105, uzun süredir beklenen kapsayıcı sorgularının özelliğini web platformuna getiren heyecan verici bir sürümdür. Medya sorguları size görüntü alanının boyutuna göre sorgulama yapma imkanı sunarken kapsayıcı sorguları, kapsayıcının boyutuna göre sorgulama yapma yöntemi sunar.
Kapsayıcı sorgularını kullanmak için container-type özelliğini kullanarak kapsama almayı etkinleştirin.
.card-container {
container-type: inline-size;
}
container-type öğesinin inline-size olarak ayarlanması, üst öğenin satır içi yön boyutunu sorgular. İngilizce gibi Latin dillerinde, metin satır içi olarak soldan sağa doğru aktığı için kartın genişliği bu değer olur.
Şimdi, bu kapsayıcıyı @container kullanarak alt öğelerine stil uygulamak için kullanabiliriz:
.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'e açılan iki güçlü yeni duyarlı API yayınında bulabilirsiniz.
:has() üst sözde sınıfı
Yukarıda bahsedilen yayında :has()'dan da bahsediliyor. Bu yeni sözde sınıf CSS :has() sözde sınıfı, koşullara dayalı olarak üst öğeyi ve kardeş öğeleri hedeflemeniz için bir yol sunar. Daha fazla bilgi için :has() aile seçici bölümüne bakın.
Dezenfektan API'sı
Chrome 105'te Sanitizer API de mevcuttur. Bu API, siteler arası komut dosyası güvenlik açıklarını ortadan kaldırmaya yardımcı olmak için platforma temizleme işlemi uygular.
Chrome 105'te :modal CSS sözde sınıfı da kullanılır. Bu, dışındaki öğelerle tüm etkileşimleri hariç tuttuğu bir durumdaki bir öğeyle eşleşir. Örneğin, showModal() API ile açılmış bir <dialog>.
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şaretin arkasına destek ekler. Bunlar, sağlanan bir dizi veya TypedArray testi ile eşleşen son öğenin değerini ve dizinini (sırasıyla) bulmak için kullanılır.
Beta tarayıcı sürümleri
Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümünde olacak öğelerin önizlemesini sunar. Dünya bu sürümü almadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmenin tam zamanı.
Yayın tarihleri ayın hemen dışına denk geldiği için Ağustos'taki tek yeni beta sürümü Firefox 105 oldu. Ancak şu anda bu konuda yeterince ayrıntı yoktur.
Haziran ayında bahsedilen Safari 16 beta sürümü de hâlâ geliştirmektedir.
Web'de yeniler serisinin bir parçası