2023 referans değeri

Referans değer caniuse.com'da kullanıma sunuluyor! Bu yayında entegrasyon hakkında bilgi edinecek ve 2023'te Referans Değer'e dahil olan özelliklerden bazılarını keşfedin.

Referans'ın yeni tanımında, bir özelliğin yaşam döngüsünde iki aşamadan oluşur: yeni kullanıma sunulduğunda ve 30 ay sonra genel kullanıma sunulduğunda. Bir özellik, aşağıdaki tarayıcılarda birlikte çalışabilir hale geldiğinde Baseline'ın yeni bir parçası haline gelir:

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

"Kullanabilir miyim?" sorusuna göre taban çizgisi

Özellik kullanılabilirliğini netleştirmenin bir sonraki adımı olarak, Referans Değer, bugünden itibaren "Kullanabilirim" bölümüne başlıyor. Kullanabilir miyim? sayfasındaki bazı sayfaları ziyaret ettiğinizde, özelliğin Temel Düzey'de yaygın olarak mevcut olup olmadığını belirten bir rozet görürsünüz.

Baseline'da yeni kullanıma sunulan özelliklerde, kullanıma sunuldukları yılla birlikte bir rozet de gösterilir. Bu yıl temel tarayıcı kümesinde birlikte çalışabilir hale gelen her şey, Temel 2023'ün bir parçası haline gelmiştir.

Bu yayının geri kalanında, 2023'te bu dönüm noktasına ulaşan özellikler hakkında bilgi edinebilirsiniz. Bu özelliklerin hepsi, kısa süre önce kullanıma sunulan Baseline 2023 kapsamındadır.

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

Boyut kapsayıcı sorguları, medya sorgularının görüntü alanının boyutunu sorgulamanıza olanak tanımasıyla aynı şekilde bir öğenin boyutunu sorgulamanıza olanak tanır. Bu öğeler, yerleştirildikleri alanın boyutuna tepki veren bileşenler oluşturmanıza olanak tanıyarak yeniden kullanılabilir bileşenleri çok daha kolay bir şekilde oluşturmanızı sağlar.

Aşağıdaki kartın tasarımı, bileşenin genişliğine bağlı olarak değişir. Daha fazla bilgi için Kapsayıcı sorguları kararlı tarayıcılara yönlendiriliyor.

Yeni renk alanları ve işlevler

CSS artık sRGB gamı dışındaki renklere erişmenizi sağlayan renk alanlarını destekliyor. Bu, HD gamlarındaki renkleri kullanarak HD (yüksek tanımlı) ekranları destekleyebileceğiniz anlamına gelir.

Yeni renk modelleri

Artık Baseline'da bulunan lch(), lab(), oklch() ve oklab() renk işlevleri LCH, Lab, OKLCH ve OKLab renk modellerine erişim sağlar.

color-mix() işlevi

Bunlara ek olarak, yeni renk işlevleri Referans Değeri'nin bir parçası haline geldi. color-mix() işlevi, herhangi bir renk alanında bir rengin bir başka renkle karıştırılmasına olanak tanır. Aşağıdaki CSS'de srgb renk alanında mavinin% 25'i beyazla karıştırılmıştır.

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

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

color() işlevi

color() işlevi R, G ve B kanallarında renkleri belirten herhangi bir renk alanı için kullanılabilir. color() önce renk alanı parametresini, ardından RGB için bir dizi kanal değerini ve isteğe bağlı olarak bir miktar alfa değerini alır. Ş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ılavuzunda, yeni renk alanları ve işlevleriyle ilgili çok daha fazla örnek ve bunları hangi durumlarda kullanacağınızla ilgili bilgiler bulabilirsiniz.

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

Sıkıştırma Akışları API, veri akışlarını sıkıştırmak ve açmak için kullanılan bir JavaScript API'sidir. Bu yerleşik sıkıştırma yöntemini kullanan uygulamaların artık bir sıkıştırma kitaplığı içermesine gerek yoktur.

Sıkıştırma akışları artık tüm tarayıcılarda desteklenmektedir başlıklı makaleden daha fazla bilgi edinebilirsiniz.

Ekran dışı tuval

OffscreenCanvas'tan önce tuval çizim özellikleri <canvas> öğesine bağlıydı, yani doğrudan DOM'ye bağlıydı. OffscreenCanvas, kanvası ekranın dışına taşıyarak DOM'yi Canvas API'den ayırır.

Bu ayırma sayesinde OffscreenCanvas oluşturma işlemi DOM'den tamamen ayrılmış. Bu sayede, ikisi arasında herhangi bir senkronizasyon olmadığından normal tuval üzerinde bazı hız iyileştirmeleri sunuluyor. Ayrıca, DOM bulunmamasına rağmen oluşturma çalışmasını bir Web Çalışanına taşımak için de kullanılabilir. Böylece ana iş parçacığı serbest kalır ve uygulamayı daha duyarlı hale getirir.

OffscreenCanvas: Bir web çalışanı ile tuval işlemlerinizi hızlandırın bölümünden daha fazla bilgi edinebilirsiniz

Modül önceden yüklemesi

Modüllerin önceden yüklenmesi, indirme ve işleme süresini azaltabilir. JavaScript modülüne referans veren bağlantı öğesine rel="modulepreload" ekleyin. Tarayıcı, modülü alır, ayrıştırır ve derler ve sonuçları, çalıştırılmaya hazır şekilde modül haritasına yerleştirir.

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

CSS'deki trgonometrik işlevler

2023'te, CSS Değerleri ve Birim Düzey 4 spesifikasyonundan alınan trigonometrik fonksiyonlar birlikte çalışabilir hale geldi. Bu nedenle sin(), cos(), tan(), asin(), acos(), atan() ve atan2() işlevleri 2023 referans çizgisinde yer alıyor.

Bu işlevleri kullanmayı öğrenin ve CSS'de trigonometrik işlevler ile ilgili bazı kullanım alanlarını keşfedin.

inert özelliği

Bir DOM öğesini inert olarak işaretlediğinizde bu öğeden hareketi veya etkileşimi kaldırmış olursunuz. inert özelliği, tarayıcının öğeyi yoksaymasına neden olur:

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

Bu özelliği, ekran dışındaki veya başka bir şekilde gizli olan öğelere ekleyin. Daha fazla bilgi edinmek için Inert özelliği bölümüne bakın.

CSS ızgara düzeninde alt ızgara

grid-template-columns ve grid-template-rows için subgrid değeri, üst ızgarada tanımlanan kanalları iç içe yerleştirilmiş ızgaralarda kullanabilmenizi sağlar. Bu, iç içe yerleştirilmiş ayrı ızgaralardaki öğeleri birbirleriyle hizalayabileceğiniz anlamına gelir.

CSS alt ızgarasında, alt ızgaranın kullanım alanlarını vurgulayan birçok diğer yayın ve örneklerin bağlantılarını bulabilirsiniz.

SayıBiçimi V3

Intl.NumberFormat V3, 2023'te Referans Değeri'nin bir parçası haline gelen Intl.NumberFormat için bir dizi yeni özelliktir. Ek özellikler şunlardır:

• Sayı aralıklarını biçimlendirmek için üç yeni işlev eklendi: formatRange, formatRangeToParts ve selectRange
• Gruplandırma sıralaması
• Yeni yuvarlama ve hassasiyet seçenekleri
• Yuvarlama önceliği
• Dizeleri ondalık sayılar olarak yorumlama
• Yuvarlama modları
• Görüntüyü negatif olarak işaretle

NumberFormat V3 teklifinde bu yeni özelliklerin her biri ayrıntılı olarak açıklanmaktadır.

Tam Ekran API'sı

Tam Ekran API'si, requestFullscreen() yöntemini çağırarak <video> gibi bir öğeyi tam ekran moduna yerleştirebilmenizi sağlar. Ayrıca bir öğenin tam ekran modunda olup olmadığını ve dokümanın tam ekran modu isteğinde bulunmanıza izin veren bir durumda olup olmadığını algılamak için yöntemler de sunar.

MDN'deki Tam Ekran API'si Kılavuzu'ndan daha fazla bilgi edinebilirsiniz.

CSS :has() seçici

:has() seçicisi Baseline 2023 olarak ayarlandı. Bu bölüm, 19 Aralık'ta Firefox 121'de kullanıma sunulacak. Bu seçici, diğer kullanımların yanı sıra, bir öğeyi içindeki şeylere dayanarak seçebilmenizi sağlayan üst seçici görevi görür. Örneğin, bir öğenin içinde resim olup olmadığına bağlı olarak farklı CSS'ler uygulayabilirsiniz.

Daha fazla bilgiyi :has(): aile seçici bölümünde bulabilirsiniz.

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

Bu yıl Baseline'a dahil olan diğer özellikler arasında şunlar yer alıyor:

• Oluşturulabilir Stil Sayfaları
• CSS'de karmaşık n'inci alt seçiciler
• Medya sorguları için aralık söz dizimi
• Haritaları İçe Aktarma
• CSS görüntülü reklam için birden fazla değer
• @sayaç-tarzı
• counter-set CSS özelliği
• linear() yumuşak geçiş işlevi
• Kaynak Özel Dosya Sistemi (OPFS)
• Esnek ayrıştırma ekleyen değişiklik dahil olmak üzere CSS İç İçe Yerleştirme.
• 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 (19 Aralık'ta Firefox 121'de kullanıma sunulacak)
• lh ve rlh CSS satır yüksekliği birimleri

Bu özelliklerin birçoğu, Interop 2023'teki ortak çalışma sayesinde birlikte çalışabilirliğe ulaştı. Özelliklerin bu süreçte nasıl getirilebileceğini ve yeni kullanıma sunuldukça Baseline'a nasıl getirileceğini görmek heyecan verici. Böylece, özellikleri kendi projelerinizde ne zaman benimseyeceğinize dair kararlar için daha net bir yol belirir.