Referans değer, caniuse.com'a geliyor. Bu yayında, entegrasyon hakkında bilgi edinebilir ve 2023'te Temel'in bir parçası haline gelen özelliklerden bazılarını keşfedebilirsiniz.
Referans değerinin yeni tanımı ile birlikte, bir özelliğin yaşam döngüsünde iki aşama vardır: Yeni kullanıma sunulduğu aşama ve 30 ay sonra genel kullanıma sunulduğu aşama. Bir özellik, aşağıdaki tarayıcılarda birlikte çalışabilir hale geldiğinde yeni Temel düzeyin bir parçası olur:
- Safari (macOS ve iOS)
- Firefox (masaüstü ve Android)
- Chrome (masaüstü ve Android)
- Edge (masaüstü)
Referans, Can I Use'a (Kullanabilir miyim?) yönlendiriyor
Özellik kullanılabilirliğini netleştirmenin bir sonraki adımı olarak, Temel Bilgiler özelliği bugünden itibaren Kullanabilir miyim? sayfasında gösterilmeye başlıyor. Can I Use'daki bazı sayfaları ziyaret ettiğinizde, özelliğin Temel sürümünde yaygın olarak kullanılıp kullanılamadığını belirten bir rozet görürsünüz.
Temel sürümde yeni kullanıma sunulan özelliklerde, kullanıma sunuldukları yılla birlikte bir rozet de gösterilir. Bu yıl temel tarayıcı grubunda birlikte çalışabilir hale gelen her şey 2023 Temel'in bir parçasıdır.
Bu yayının geri kalanında, 2023'te bu hedefe ulaşan özellikler hakkında bilgi edinebilirsiniz. Bu özelliklerin tümü, yeni kullanıma sunulan Baseline 2023'te yer alıyor.
Boyut kapsayıcı sorguları ve kapsayıcı sorgu birimleri
Boyut kapsayıcı sorguları, medya sorgularının görüntü alanının boyutunu sorgulamasına benzer şekilde bir öğenin boyutunu sorgulamanıza olanak tanır. Yerleştirildikleri alanın boyutuna göre tepki veren bileşenler oluşturmanıza olanak tanıyarak yeniden kullanılabilir bileşenler oluşturmayı çok daha kolay hale getirirler.
Aşağıdaki kartın tasarımı, bileşenin genişliğine göre değişir. Daha fazla bilgi için Kapsayıcı sorguları kararlı tarayıcılara eklendi başlıklı makaleyi inceleyin.
Yeni renk alanları ve işlevleri
CSS artık sRGB gamutunun dışındaki renklere erişmenize olanak tanıyan renk alanlarını destekliyor. Bu sayede, HD (yüksek çözünürlüklü) ekranları HD renk gamlarından renkleri kullanarak destekleyebilirsiniz.
Yeni renk modelleri
Artık Baseline'da lch()
, lab()
, oklch()
ve oklab()
renk işlevleri LCH, Lab, OKLCH ve OKLab renk modellerine erişim sağlıyor.
![Pembeden maviye canlı bir degrade içeren gradient.style düzenleyicisinin ekran görüntüsü.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=8&hl=tr)
color-mix()
işlevi
Ayrıca, yeni renk işlevleri de Temel Çizgi'nin bir parçası oldu. color-mix()
işlevi, renk alanlarından herhangi birinde bir rengin başka bir renkle karıştırılmasını sağlar.
Aşağıdaki CSS'de mavi rengin% 25'i srgb renk uzayında beyaza karıştırılı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, renkleri R, G ve B kanallarıyla belirten tüm renk alanları için kullanılabilir. color()
önce bir renk alanı parametresi, ardından RGB için bir dizi kanal değeri ve isteğe bağlı olarak bazı alfa değerleri alır. srgb
,
srgb-linear
, display-p3
, a98-rgb
, prophoto-rgb
, rec2020
, xyz
,
xyz-d50
ve xyz-d65
seçeneklerinden birini kullanabilirsiniz. Ö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 çözünürlüklü renk kılavuzu, yeni renk alanlarını ve işlevlerini daha fazla örnekle gösterir. Ayrıca, hangilerinin ne zaman kullanılacağı hakkında bilgi verir.
Sıkıştırma akışları
Compression Streams API, veri akışlarını sıkıştırmak ve sıkıştırılmış verileri açmak için kullanılan bir JavaScript API'sidir. Bu yerleşik sıkıştırmayı kullanan uygulamaların artık bir sıkıştırma kitaplığı eklemesi gerekmez.
Sıkıştırılmış akışlar artık tüm tarayıcılarda destekleniyor başlıklı makalede daha fazla bilgi edinebilirsiniz.
Ekran dışında tuval
OffscreenCanvas'tan önce, kanvas çizim özellikleri <canvas>
öğesine bağlıydı. Bu da doğrudan DOM'a bağlı olduğu anlamına geliyordu. OffscreenCanvas, kanvası ekrandan uzaklaştırarak DOM'u Canvas API'den ayırır.
Bu ayırma işlemi sayesinde, OffscreenCanvas'ın oluşturulması DOM'dan tamamen ayrılır. Bu nedenle, ikisi arasında senkronizasyon olmadığından normal kanvaya kıyasla bazı hız iyileştirmeleri sunar. Ayrıca, DOM mevcut olmasa bile oluşturma işini bir Web İşleyici'ye taşımak için de kullanılabilir. Bu sayede ana iş parçacığı serbest bırakılır ve uygulama daha duyarlı hale gelir.
OffscreenCanvas: Web işleyiciyle tuval işlemlerinizi hızlandırın başlıklı makalede daha fazla bilgi edinin.
Modül önceden yükleme
Modülleri önceden yüklemek, indirme ve işleme süresini kısaltabilir. Bir JavaScript modülüne atıfta bulunan bağlantı öğesine rel="modulepreload"
eklediğinizde tarayıcı modülü alır, ayrıştırır ve derleyip sonuçları yürütülmeye hazır modül haritasına yerleştirir.
Modülleri önceden yükleme başlıklı makalede daha fazla bilgi edinin.
CSS'de trigonometrik fonksiyonlar
2023'te CSS Değerleri ve Birimleri 4. Seviye spesifikasyonundaki trigonometrik işlevler birlikte çalışabilir hale geldi. Bu, sin()
, cos()
, tan()
, asin()
, acos()
, atan()
ve atan2()
işlevlerinin 2023 Temel Çizelgesi'nin bir parçası olduğu anlamına gelir.
Bu işlevleri kullanmayı öğrenin ve CSS'de trigonometrik fonksiyonlar başlıklı makalede bazı kullanım alanlarını keşfedin.
inert
özelliği
Bir DOM öğesini inert
olarak işaretlediğinizde öğenin hareketini veya etkileşimini kaldırırsınız. inert
özelliği, tarayıcının öğeyi yoksaymasına neden olur:
- Kullanıcı öğeyi tıkladığında
click
etkinliği tetiklenmez. - Öğeye odaklanılmaz.
- Öğe ve içeriği, erişilebilirlik ağacından hariç tutulur.
Bu özelliği, ekran dışında veya başka bir şekilde gizli olan öğelere ekleyin. Daha fazla bilgi için inert
özelliği başlıklı makaleyi inceleyin.
CSS ızgara düzeninde alt ızgara
grid-template-columns
ve grid-template-rows
için subgrid
değeri, üst ızgara üzerinde tanımlanan parçaları iç içe yerleştirilmiş ızgaralarda kullanmanıza olanak tanır. Bu sayede, ayrı iç içe yerleştirilmiş ızgaralardaki öğeleri birbirine göre hizalayabilirsiniz.
CSS alt ızgarası başlıklı makalede, alt ızgara kullanım alanlarını vurgulayan bazı örnekler ve diğer birçok makale ve örneğin bağlantılarını bulabilirsiniz.
NumberFormat V3
Intl.NumberFormat V3, 2023'te Baseline'ın bir parçası haline gelen Intl.NumberFormat için yeni özelliklerden oluşan bir pakettir. Ek özellikler şunlardır:
- Sayı aralıklarını biçimlendirmek için üç yeni işlev:
formatRange
,formatRangeToParts
veselectRange
- Gruplandırma enum
- Yeni yuvarlama ve hassasiyet seçenekleri
- Yuvarlama önceliği
- Dizeleri ondalık sayı olarak yorumlama
- Yuvarlama modları
- İşaret negatif görüntüleniyor
NumberFormat V3 teklifinde bu yeni özelliklerin her biri ayrıntılı olarak açıklanmıştır.
Tam Ekran API'si
Tam ekran API'si, requestFullscreen()
yöntemini çağırarak <video>
gibi bir öğeyi tam ekran moduna yerleştirmenize olanak tanır. Ayrıca, bir öğenin tam ekran modunda olup olmadığını ve belgenin tam ekran modu isteğinde bulunmanıza izin veren bir durumda olup olmadığını algılamak için yöntemler sağlar.
Daha fazla bilgi için MDN'deki Tam Ekran API Kılavuzu'na bakın.
CSS :has()
seçici
:has()
seçici, 19 Aralık'ta Firefox 121'de kullanıma sunulacak olan 2023 Temel Çizgi'ye dahil edildi. Bu seçici, diğer kullanımlarının yanı sıra üst öğe seçici olarak da çalışır ve içinde bulunan öğelere göre bir öğe seçmenize olanak tanır. Örneğin, bir öğenin içinde resim olup olmadığına bağlı olarak farklı CSS'ler uygulayabilirsiniz.
Daha fazla bilgi için :has(): aile seçici başlıklı makaleyi inceleyin.
Bu yıl Baseline'a eklenen diğer özellikler
Bu yıl Baseline'a eklenen diğer özellikler şunlardır:
- Oluşturulabilir Stil Sayfaları
- CSS'de n. çocuk seçicileri
- Medya sorguları için aralık söz dizimi
- Haritalar'ı içe aktarma
- CSS görüntüleme için birden fazla değer
- @counter-style
counter-set
CSS mülkülinear()
yumuşatma işlevi- Kaynak Özel Dosya Sistemi (OPFS)
- Gevşek ayrıştırma ekleyen değişiklik de dahil olmak üzere CSS iç iç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
verlh
CSS satır yüksekliği birimleri
Bu özelliklerin çoğu, Interop 2023'te yapılan ortak çalışmalar sayesinde birlikte çalışabilir hale geldi. Özelliklerin bu süreçte nasıl kullanılabileceğini ve yeni kullanıma sunulduğunda Baseline'a nasıl eklenebileceğini görmek heyecan verici. Bu, özelliklerin geniş çapta kullanıma sunulması için zamanlayıcıyı başlatır. Bu sayede, kendi projelerinizin özelliklerini ne zaman kullanacağınıza karar verirken daha net bir yol izlenebilir.