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şlevlerinden en iyi şekilde yararlanmak için stil panelindeki yeni araçları keşfedin.
• Bunun gibi çok daha fazla özellik var.

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

Görüntü Geçişi 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 desteğin de devam ettiğini hatırlatmak isteriz.

Bu API ile ilgili pek çok ayrıntı vardır. Örnekleri ve ayrıntıları içeren makalemizden daha fazla bilgi edinebilir veya MDN'de Geçişler dokümanlarını görüntüleme başlıklı makaleye göz atabilirsiniz.

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.

Özetlemek gerekirse, artık% 50 daha fazla renk arasından seçim yapabilirsiniz. 16 milyon rengin çok fazla olduğunu düşünüyordunuz. Ben de öyle düşünüyorum.

Renk canlılığını ve etkilerini gösteren geniş ve dar renk gamları arasında geçiş yapan bir dizi resim gösterilmektedir.
Kendiniz 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ılması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 makaleye göz atın.

Yeni renk geliştirme araçları.

Devtools, css renk düzeyi 4 spesifikasyonunu destekleyen yeni özelliklere sahiptir.

Stiller bölmesi artık spesifikasyonda belirtilen 12 yeni renk alanını ve 7 yeni renk gamını desteklemektedir. Burada color(), lch(), oklab() ve color-mix() işlevlerini içeren CSS renk tanımlarına örnekler 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, renklerin renk biçimleri arasında dönüştürülmesini de destekler.

Geliştirici araçlarındaki renk hata ayıklaması ve diğer yeni özellikler hakkında daha fazla bilgi için bu yayına göz atın.

Diğer özellikler

Tabii ki çok daha fazlası 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 (Belge Resim İçinde Resim API'si) kaynak deneme sürümündedir
• previousslide ve nextslide işlemleri artık Media Session API'nin bir parçası. 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ı'ndaki 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.