Chrome 111'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

• View Transitions API ile tek sayfalık uygulamanızda şık geçişler oluşturun.
• CSS Renk Düzeyi 4 desteğiyle renkleri bir üst seviyeye taşıyın.
• Yeni renk işlevinden en iyi şekilde yararlanmak için stil panelindeki yeni araçları keşfedin.
• Bunun gibi çok daha fazla özellik var.

Adım Adriana Jara. Chrome 111'de geliştiriciler için neler yeni olduğuna göz atalım.

Geçişler API'sini görüntüleyin.

Web'de sorunsuz geçişler oluşturmak karmaşık bir işlemdir. Görünüm Geçişleri API'si, görünümlerin anlık görüntüsünü alarak ve DOM'un durumlar arasında çakışma olmadan değişmesine izin vererek kusursuz geçişler oluşturmayı kolaylaştırır.

View Transition API ile oluşturulan geçişler. Demo sitesini deneyin: Chrome 111 veya sonraki sürümler gereklidir.

Varsayılan görüntüleme geçişi, çapraz geçiştir. Aşağıdaki snippet bu deneyimi uygular.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

.startViewTransition() çağrıldığında API, sayfanın mevcut durumunu yakalar.

Bu işlem tamamlandıktan sonra .startViewTransition() işlevine iletilen callback çağrılır. DOM burada değiştirilir. Ardından API, sayfanın yeni durumunu yakalar.

API'nin tek sayfalı uygulamalar (SPA'lar) için kullanıma sunulduğunu ancak diğer modeller için de destek sunulduğunu unutmayın.

Bu API ile ilgili birçok ayrıntı vardır. Örnekler ve ayrıntılar içeren makalemizi inceleyebilir veya MDN'deki Görünüm Geçişleri belgelerini inceleyebilirsiniz.

CSS Renk Düzeyi 4.

CSS renk düzeyi 4 ile CSS artık yüksek çözünürlüklü ekranları destekliyor, HD renk gamlarından renkleri belirtiyor ve uzmanlıklara sahip renk alanları sunuyor.

Özetle, aralarından seçim yapabileceğiniz% 50 daha fazla renk var. 16 milyon rengin çok fazla olduğunu düşünüyordunuz. Ben de öyle düşünüyorum.

Geniş ve dar renk gamları arasında geçiş yapan bir dizi resim gösterilir. Bu resimler, renk canlılığını ve etkilerini gösterir.
Siz de deneyin

Uygulama, color() işlevini içerir. Bu işlev, 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.

Aşağıda, renk işlevinin farklı renk alanlarıyla kullanımına ilişkin bazı örnekler verilmiştir.

.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'yi kullanarak yüksek çözünürlüklü renklerden tam olarak yararlanmak için daha fazla doküman için bu makaleyi inceleyin.

Yeni renk geliştirme araçları.

Devtools, css renk seviyesi 4 spesifikasyonunu destekleyen yeni özelliklere sahiptir.

Stiller bölmesi artık spesifikasyonda belirtilen 12 yeni renk alanını ve 7 yeni renk gamını destekliyor. Aşağıda, color(), lch(), oklab() ve color-mix() içeren CSS renk tanımları örnekleri verilmiştir.

Bir rengin yüzdesini başka bir renkle karıştırmayı sağlayan color-mix()'ü kullanırken nihai renk çıktısını Hesaplanmış bölmesinde görüntüleyebilirsiniz.

Ayrıca renk seçici, daha fazla özellikle tüm yeni renk alanlarını destekler. Örneğin, renk(display-p3 1 0 1) kartelasını tıklayın. Ayrıca, seçtiğiniz rengin gamutunu daha net bir şekilde anlamak için sRGB ve display-p3 gamutları arasında ayrım yapan bir gamut sınır çizgisi de eklendi.

Renk seçici, renkleri renk biçimleri arasında dönüştürmeyi de destekler.

Renklerle ilgili hata ayıklama ve devtools'deki diğer yeni özellikler hakkında daha fazla bilgi için bu yayını inceleyin.

Diğer özellikler

Elbette daha birçok seçenek var.

• CSS, trigonometrik fonksiyonlar, ek kök yazı tipi birimleri ve n. alt öğeyi genişleten sözde seçici ekledi.
• Document Picture in Picture API kaynak deneme sürümündedir
• previousslide ve nextslide işlemleri artık Media Session API'nin bir parçasıdır. Demoyu buradan inceleyebilirsiniz.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 111'deki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

• Chrome Geliştirici Araçları'nda yenilikler (111)
• Chrome 111'de desteği sonlandırılan ve kaldırılan özellikler
• Chrome 111 için ChromeStatus.com güncellemeleri
• Chromium kaynak deposu değişiklik listesi
• Chrome sürüm takvimi

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Adriana Jara. Chrome 112 sürümü kullanıma sunulduğunda Chrome'daki yenilikleri size buradan bildireceğim.