Chrome 111'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 111'in ayrıntılarına girelim ve geliştiricilere yönelik yenilikleri görelim.

Transitions API'yi görüntüleyin.

Web'de sorunsuz geçişler oluşturmak karmaşık bir iştir. View Transitions API'nin amacı, görünümlerin anlık görüntüsünü sağlayıp DOM'un durumlar arasında herhangi bir çakışma olmadan değişmesini sağlayarak şık geçişlerin oluşturulmasını kolaylaştırır.

View Transition API ile oluşturulan geçişler. Demo sitesini deneyin: Chrome 111 ve sonraki sürümleri gerekir.

Varsayılan görünüm geçişi bir ç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() öğesine iletilen callback çağrılır. DOM burada değiştirilir. Ardından, API, sayfanın yeni durumunu yakalar.

API'nın Tek Sayfalı Uygulamalar (SPA'lar) için kullanıma sunulduğunu, ancak diğer model desteğinin de uygulanmaya başladığını unutmayın.

Bu API ile ilgili birçok ayrıntı bulunmaktadır. Örnekler ve ayrıntıların yer aldığı makalemizden daha fazla bilgi edinebilir veya MDN'deki Geçişleri görüntüleme belgelerini inceleyin.

CSS Renk Düzeyi 4.

CSS renk düzeyi 4 sayesinde CSS artık yüksek tanımlı ekranları destekleyerek HD gamlardan renkleri belirtir ve uzmanlıkları olan renk alanları sunar.

Özetle, %50 daha fazla renk seçeneği! 16 milyon rengin kulağa çok hitap ettiğini düşündün. Ben de öyle düşündüm.

Geniş ve dar renk gamları arasında geçiş yapan bir dizi resim, renklerin canlılığını ve efektlerini gösteriyor.
Kendiniz deneyin

Uygulama color() işlevini içerir. R, G ve B kanallarındaki renkleri belirten herhangi bir renk alanı için kullanılabilir. color() önce bir 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.

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 kullanarak yüksek tanımlı renklerden tam olarak faydalanmayla ilgili daha fazla doküman için bu makaleye göz atın.

Yeni renk geliştirme araçları.

Geliştirici Araçları, css renk düzeyi 4 spesifikasyonunu destekleyen yeni özelliklere sahiptir.

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

CSS renk tanımlarıyla ilgili örnekler.

Bir rengin belirli bir yüzdesinin başka bir renkle karıştırılmasını sağlayan color-mix() özelliğini kullanırken nihai renk çıktısını Hesaplanan bölmesinde görüntüleyebilirsiniz rengi karıştırma sonucunu görebilirsiniz.

Ayrıca renk seçici daha fazla özellik içeren tüm yeni renk alanlarını destekler. Örneğin, renk kartelasını(display-p3 1 0 1) tıklayın. Seçtiğiniz renk gamının daha net bir şekilde anlaşılması için sRGB ve display-p3 gamlarını ayıran bir gam sınır çizgisi de eklendi. Gamut sınır çizgisi.

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

Renkleri renk biçimleri arasında dönüştürme.

Geliştirici Araçları'ndaki renklerle ve diğer yeni özelliklerle ilgili hata ayıklama hakkında daha fazla bilgi edinmek için bu yayına göz atın.

Diğer ölçütler

Elbette dahası da var.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 111'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Adriana Jara. Chrome 112 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!