Ağustos 2022'de kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
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.
Bireysel dönüştürme işlemleri
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.
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.
}
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.
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.
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>
.
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.
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