Ağustos ayında web platformunda yeni

Kararlı tarayıcı sürümleri #

Ağustosda, Firefox 104, krom 104Ve krom 105 kararlı hale geldi.

Bireysel dönüşümler #

Chrome 104, CSS Dönüşümleri için ayrı özellikler içerir. özellikler scale, rotateVe translatebir dönüşümün bu kısımlarını ayrı ayrı tanımlamak için kullanabilirsiniz.

Bunu yaparak Chrome, bu özellikleri zaten destekleyen Firefox ve Safari’ye katılır.

Yeni medya sorgusu sözdizimi #

Chrome 104 şunları da içerir: medya sorgu aralığı sözdizimi. Bu, Firefox tarafından zaten gönderilmiştir ve medya sorgularını kolaylaştırmaya yardımcı olur. Örneğin, aşağıdaki medya sorgusu:

TheComedicComedian (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:

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

Kapsayıcı sorguları #

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

Kapsayıcı sorguları kullanmak için, container-type mülk.

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

ayarlamak container-type ile inline-size ebeveynin satır içi boyutunu sorgular. İngilizce gibi latin dillerinde, metin satır içinde soldan sağa doğru aktığı için bu, kartın genişliği olacaktır.

Şimdi, bu kapsayıcıyı kullanarak çocuklarından herhangi birine stiller uygulamak için kullanabiliriz. @container:

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

Gönderide kapsayıcı sorguları hakkında daha fazla bilgi bulabilirsiniz. @container ve :has(): Chromium 105’e eklenen iki güçlü yeni duyarlı API.

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

Yukarıda belirtilen yazı da bahsediyor :has(). Bu yeni sözde sınıf CSS :has() sözde sınıfı, size koşullara göre ana öğeyi ve kardeşleri hedeflemenin bir yolunu sunar. Daha fazla bilgi edinin :has() aile seçici.

Temizleyici API’sı #

Ayrıca Chrome 105’te Temizleyici API’sı. Bu API, siteler arası komut dosyası çalıştırma güvenlik açıklarının kaldırılmasına yardımcı olmak için platformda temizleme oluşturur.

Ayrıca Chrome 105’te :kip CSS sözde sınıfı. Bu, kendi dışındaki öğelerle tüm etkileşimi dışladığı bir durumda olan bir öğeyle eşleşir. Örneğin, bir &LTdialog> ile açıldı showModal() API.

findLast() ve findLastIndex() yöntemleri #

Firefox 104, yöntemler için bir bayrağın arkasına destek ekler Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast()Ve TypedArray.prototype.findLastIndex(). Bunlar, sağlanan bir test işleviyle eşleşen bir Array veya TypedArray içindeki 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, size tarayıcının bir sonraki kararlı sürümünde olacak şeylerin bir önizlemesini sunar. Dünya bu sürümü almadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırmaları test etmek için harika bir zaman.

Ayın hemen dışına denk gelen çıkış tarihleri ​​nedeniyle, Ağustos ayındaki tek yeni beta, Firefox 105şu anda ayrıntılara ışık tutuyor.

Haziran ayında bahsedilen Safari 16 beta da halen devam ediyor.