2023 referans değeri

Rachel Andrew

Baseline özelliği caniuse.com'da kullanıma sunuluyor. Bu yayında ve Google Analytics'in bir parçası haline gelen bazı özellikleri 2023'teki referans değer.

Yeni Referans Değer tanımıyla Bir özelliğin yaşam döngüsünde iki aşama vardır: yeni kullanıma sunulduğunda ve 30 ay sonra genel kullanıma sunulduğunda da yeniden sunulacak. Bir özellik, Aşağıdakilerde birlikte çalışabilir hale geldiğinde yeni kullanıma sunulan Referans Değer tarayıcı:

• Safari (macOS ve iOS)
• Firefox (masaüstü ve Android)
• Chrome (masaüstü ve Android)
• Edge (masaüstü)

Temel alınan hedefler, Kullanabilir miyim?

Özellik kullanılabilirliğini netleştirmenin bir sonraki adımı olarak Baseline, "Kullanabilir miyim?" sorusuna geldik. Kullanabilir miyim? sayfasındaki bazı sayfaları ziyaret ettiğinizde Özelliğin Referans Değer'de genel kullanıma sunulup sunulmadığını belirten bir rozet gösterilir.

Yeni kullanıma sunulan Referans Değer'de yer alan özelliklerde, abonelerin yanında bir rozet ve kullanıma sunuldukları yıl. Farklı platformlarda birlikte çalışabilir hale gelen bu yıl ayarlanan temel tarayıcı, Baseline 2023'ün bir parçası.

Bu gönderinin geri kalanında, bu dönüm noktasına ulaşmanızı sağlayan özellikleri öğrenin artış olduğunu gördük. Bu özelliklerin tümü Referans Değer 2023: Yeni kullanıma sunuldu.

Container sorgularını ve kapsayıcı sorgu birimlerini boyutlandırma

Kapsayıcı sorgularını boyutlandırma Medya sorgularıyla aynı şekilde bir öğenin boyutunu sorgulamanızı sağlar. görüntü alanının boyutunu sorgulamanızı sağlar. Yeniden kullanılabilir bileşenler, alanın boyutuna tepki veren bileşenler oluşturmanıza olanak tanıyarak çok daha kolay yerleştirilir.

Tarayıcı Desteği

• . 105
• . 105
• . 110
• . 16

Kaynak

Aşağıdaki kartın tasarımı, bileşenin genişliğine bağlı olarak değişir. Kapsayıcı sorguları kararlı tarayıcılarda açılır bölümünden daha fazla bilgi edinebilirsiniz.

Yeni renk alanları ve işlevleri

CSS artık sRGB gamının dışındaki renklere erişmenize olanak tanıyan renk alanlarını destekliyor. Bu, HD (yüksek çözünürlüklü) ekranları HD renkleri kullanarak destekleyebileceğiniz anlamına gelir oluşturur.

Yeni renk modelleri

Artık Referans Değer'de renk lch(), lab(), oklch() ve oklab() işlevlerine sahip LCH, Lab, OKLCH ve OKLab renk modellerine erişim verir.

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

gradient.style özelliğini kullanarak yeni renk alanlarını deneyin.

color-mix() işlevi

Ayrıca, yeni renk işlevleri Referans Değer'in bir parçası haline geldi. color-mix() işlevi, herhangi bir renk alanında bir rengin başka bir renkle karıştırılmasını sağlar. Aşağıdaki CSS'de, mavinin% 25'i sxls renk alanında beyaza karıştırıldı.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

color-mix() hakkında daha fazla bilgi edinin.

color() işlevi

color() fonksiyonu R, G ve B ile renkleri belirten herhangi bir renk alanı için kullanılabilir kanallar. color() önce bir renk alanı parametresi, ardından ve isteğe bağlı olarak bazı alfalar için kanal değerlerini görüntüler. Şunlardan herhangi birini kullanabilirsiniz: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 ve xyz-d65. Örneğin:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS yüksek tanımlı renk kılavuzu size yeni renk alanları ve işlevleriyle ilgili daha fazla örnek sunar. ne zaman kullanılacağına dair bilgilere

Sıkıştırma akışları

Sıkıştırma Akışları API'si Veri akışlarını sıkıştırmak ve açmak için kullanılan bir JavaScript API'dir. Uygulamalar artık bir sıkıştırma kitaplığı eklenmesine gerek yoktur.

Tarayıcı Desteği

• . 80
• . 80
• . 113
• . 16,4

Kaynak

Daha fazla bilgi edinmek için Sıkıştırma akışları artık tüm tarayıcılarda destekleniyor başlıklı makaleyi inceleyin.

Ekran dışındaki tuval

OffscreenCanvas'tan önce, tuval çizim özellikleri <canvas> ile bağlantılıydı öğesi, yani doğrudan DOM'ye bağlıydı. Ekran dışıCanvas ayırmaları tuvali ekran dışına taşıyarak Canvas API'sinden DOM'yi geri yükleyebilirsiniz.

Bu ayırma sayesinde, OffscreenCanvas'ın oluşturulması, Bu da normal tuvale göre bazı hız iyileştirmeleri sunuyor çünkü ikisi arasında senkronizasyon olmaz. Ayrıca hareket etmek için de bir DOM olmasa bile, işlemi web çalışanı olarak ve uygulamayı daha duyarlı hale getirir.

Tarayıcı Desteği

• . 69
• . 79
• . 105
• . 16,4

Kaynak

Daha fazla bilgi edinmek için OutscreenCanvas: tuval işlemlerinizi bir web çalışanıyla hızlandırın

Modül önceden yüklemesi

Modüllerin önceden yüklenmesi indirme ve işlem süresini azaltabilir. Ekle rel="modulepreload" JavaScript modülüne referans veren bağlantı öğesine gider; tarayıcı modülünü ayrıştırıp derler ve sonuçları modül haritasına hazır duruma getirir gerekir.

Tarayıcı Desteği

• . 66
• . ≤79
• . 115
• . 17

Kaynak

Modülleri önceden yükleme bölümünden daha fazla bilgi edinebilirsiniz.

CSS'deki trigonometrik fonksiyonlar

2023'te CSS değerleri ve 4. birimlerden alınan trigonometrik fonksiyonlar birlikte çalışabilir hale geldi. Yani sin(), cos(), tan(), asin(), acos(), atan() ve atan2(), Temel 2023'ün bir parçasıdır.

Tarayıcı Desteği

• . 111
• . 111
• . 108
• . 15,4

Kaynak

Bu demoda, öğeleri merkezi bir nokta etrafında dairesel bir yol üzerinde taşımak için trigonometrik fonksiyonlar kullanılmıştır.

Bu işlevlerin nasıl kullanılacağını öğrenin ve CSS'deki trigonometrik fonksiyonlar.

Inert özelliği

Bir DOM öğesini inert olarak işaretlediğinizde, somut olarak ortaya koyar. Inert özelliği, tarayıcının öğeyi yoksaymasına neden olur:

• Kullanıcı öğeyi tıklarsa click etkinliği tetiklenmez.
• Öğeye odaklanmaz.
• Öğe ve içeriği, erişilebilirlik ağacından hariç tutulur.

Tarayıcı Desteği

• . giriş
• . giriş
• . 112
• . 15,5

Kaynak

Bu özelliği, ekran dışı veya başka bir şekilde gizlenmiş öğelere ekleyin. Daha fazla Eylemsiz özellik konusuna bakın.

CSS ızgara düzeninde alt tablo

grid-template-columns ve grid-template-rows için subgrid değeri, iç içe yerleştirilmiş ızgaralar üzerinde, üst ızgarada tanımlanan kanalları kullanırsınız. Bu da size öğeleri, iç içe yerleştirilmiş ayrı ızgaralarda hizalayabilirsiniz.

Tarayıcı Desteği

• . 117
• . 117
• . 71
• . 16

Kaynak

CSS alt ızgarasında bazı örnekler ve alt kılavuz kullanım alanlarını vurgulayan diğer birçok gönderi ve örneği inceleyin.

SayıBiçimi V3

Intl.NumberFormat V3, Intl.NumberFormat için kapsamında değerlendirilecektir. Ek özellikler şunlardır:

• Sayı aralıklarını biçimlendirmek için üç yeni işlev: formatRange, formatRangeToParts selectRange
• Gruplandırma sıralaması
• Yeni yuvarlama ve hassasiyet seçenekleri
• Yuvarlama önceliği
• Dizeleri ondalık sayı olarak yorumlama
• Yuvarlama modları
• Ekran negatifini imzala

Tarayıcı Desteği

• . 106
• . 106
• . 116
• . 15,4

Kaynak

NumberFormat V3 için teklif ayrıntılarıyla ortaya koyduk.

Tam Ekran API'si

Tam ekran API'si, <video> gibi bir öğeyi tam ekrana yerleştirmenize olanak tanır modu için requestFullscreen() yöntemini çağırın. Ayrıca ekip üyeleri için bir öğenin tam ekran modunda olup olmadığını ve dokümanın Bu ayar, tam ekran modunu istemenize olanak tanır.

Tarayıcı Desteği

• . 71
• . 79
• . 64
• . 16,4

Kaynak

Daha fazla bilgi için MDN'de Tam Ekran API Kılavuzu'na göz atın.

CSS :has() seçici

Baseline 2023 olarak ayarlanan :has() seçici, Firefox'ta açılır. olduğunu öğrenmiştiniz. Diğer kullanımların yanı sıra, bu seçici üst öğe seçici, bir öğeyi içindeki şeylere göre seçmenizi sağlar somut olarak ortaya koyar. Örneğin, mevcut bir CSS bulunup bulunmadığına bağlı olarak bir resim oluşturabilirsiniz.

Tarayıcı Desteği

• . 105
• . 105
• . 121
• . 15,4

Kaynak

Daha fazla bilgi için :has(): the familyattribute (aile seçici) bölümüne bakın.

Bu yıl Baseline'a katılan diğer özellikler

Bu yıl Temel çizgi kapsamında yer alan diğer özellikler şunlardır:

• Oluşturulabilir Stil Sayfaları
• CSS'de karmaşık n'inci alt seçiciler
• Medya sorguları için aralık söz dizimi
• Haritaları İçe Aktar
• CSS ekranı için birden fazla değer
• @sayaç-stili
• counter-set CSS mülkü
• linear() yumuşak geçiş işlevi
• Kaynak Gizli Dosya Sistemi (OPFS)
• CSS İç İçe Yerleştirme, Esnek ayrıştırma ekleyen değişiklik dahil.
• CSS :dir() sözde sınıf seçici
• CSS cap uzunluk birimi
• CSS maskeleme
• HTML video <source> öğeleri için medya sorgusu desteği
• HTML <search> öğesi
• <iframe> öğelerinin geç yüklenmesi (açılış) 19 Aralık'ta Firefox 121'de kullanıma sunuldu)
• lh ve rlh CSS satır yüksekliği birimleri

Bu özelliklerin çoğu ortak çalışma sayesinde birlikte çalışabilirliğe ulaştı. Interop 2023'te bulabilirsiniz. Özelliklerin proje yönetiminde bu süreç gerçekleştirilebilir ve yeni kullanıma sunulduğu zaman Baseline'a alınabilir. Bu da yaygın olarak kullanılabilmeleri için zamanlayıcıyı başlatır. Bu durumda ve özellikleri kendi projelerinizde ne zaman kullanacağınıza dair daha net kararlar verebilirsiniz.