2023 referans değeri

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ü)

Ö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.

CSS ızgara düzeninde yaygın olarak kullanılabilir rozeti bulunan Kullanabilir miyim? ekran görüntüsü.

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.

Container sorgularında yeni kullanıma sunulan Kullanabilir miyim? rozetinin ekran görüntüsü.

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.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Pembeden maviye canlı bir degrade içeren gradient.style düzenleyicisinin ekran görüntüsü.
gradient.style özelliğini kullanarak yeni renk alanlarını deneyin.

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);
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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.

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

Bu demoda, öğeleri merkezi bir noktanın etrafında dairesel bir yörüngede hareket ettirmek için trigonometrik fonksiyonlar kullanılır.

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.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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 ve selectRange
  • 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

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

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.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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:

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.