Chrome 112'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 112'nin geliştiriciler için sunduğu yenilikleri inceleyelim.

İç içe yerleştirme için CSS desteği.

En sevdiğimiz CSS ön işlemci özelliklerinden biri de artık dilin içinde yer alıyor: iç içe yerleştirme stili kuralları.

İç içe yerleştirmeden önce her seçicinin birbirinden ayrı ve açık bir şekilde bildirilmesi gerekiyordu. Bu da tekrara, stil sayfasında yığına ve dağınık yazma deneyimine yol açar.

Önce
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

İç içe yerleştirmeden sonra seçicilere devam edilebilir ve bunlarla ilgili stil kuralları içinde gruplandırılabilir.

Sonra
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

İç içe yerleştirme, seçicileri tekrarlama ihtiyacını azaltarak geliştiricilere yardımcı olur ve ilgili öğelerin stil kurallarını bir arada sunar. Ayrıca stillerin hedefledikleri HTML ile eşleşmelerine de yardımcı olabilir.

Örnekteki .nesting bileşeni projeden kaldırıldıysa ilgili seçici örnekleri için dosyalarda arama yapmak yerine grubun tamamını silebilirsiniz.

İç içe yerleştirme şu konularda yardımcı olabilir:

  • Düzen:
  • Dosya boyutunu küçültme.
  • Yeniden düzenleme.

CSS iç içe yerleştirmeden en iyi şekilde yararlanmayla ilgili ipuçları için bu makaleye göz atın. Geliştirici araçlarında iç içe yerleştirme desteğini de burada bulabilirsiniz.

<dialog> başlangıç odağı için algoritma güncellemesi.

HTML <dialog> öğesi, bir iletişim kutusunu veya kapatılabilir bir uyarı ya da alt pencere gibi bir web sayfasındaki diğer tüm içeriğin üstünde gösterilmesi gereken başka etkileşimli bileşenleri temsil etmenin standart bir yoludur.

Özellikleri daha iyi ve tutarlı kullanılabilirlik ve erişilebilirlik sağlamak üzere tasarlandığından bu HTML öğesi, bu tür içerik oluşturmak için önerilen yoldur.

Bu özelliklerden biri, iletişim kutusu açıldığında hangi öğenin odaklandığını işlemektir. Bu sürümde, söz konusu öğeyi seçen algoritma güncellenmiştir.

Şu andan itibaren:

Diyalog odaklanma adımları, odaklanılabilir öğeler yerine klavyeye odaklanılabilir öğelere bakar Otomatik odaklama özelliği ayarlanmışsa <dialog> öğesinin kendisi odaklanır

Odak, <body> öğesine "sıfırlanması" yerine <dialog> öğesinin kendisine yedek olarak odaklanır.

<dialog> öğesiyle ilgili daha fazla ayrıntı için dokümanları okuyun.

Service Worker'ın işlemsiz getirme işleyicileri atlanıyor.

Chrome 112'den itibaren bir kullanıcı aracısı, Service Worker'ın tüm getirme işleyicilerinin işlemsiz olduğunu belirlerse Service Worker'ın başlatılması ve dinleyicinin gezinme kritik yolundan yaptığı dinleyici atlanır.

Bu özellik, bu sayfalarda daha hızlı gezinmenizi sağlar.

Getirme işleyicisinin olması, bir web uygulamasının yüklenebilir olması için PWA gereksinimlerinden biriydi. Bazı sitelerin aslında boş bir getirme işleyicisinin olmasının nedeni olabileceğinden şüpheleniyoruz. Ancak bir hizmet çalışanı başlatmak ve işlemsiz bir dinleyiciyi yürütmek yalnızca ek yük getirir. Ancak doğru hizmet çalışanıyla, önbelleğe alma veya çevrimdışı özellikler gibi uygulanabilecek hiçbir avantaj sağlanmaz. Bu nedenle Chrome, gezinmeyi iyileştirmek için artık bunları atlıyor.

Bu değişiklik kapsamında Chrome, hizmet çalışanının tüm getirme dinleyicileri işlemsizse konsol uyarıları gösterecek ve geliştiricileri bu getirme işleyicilerini kaldırmaları konusunda teşvik edecektir.

Boş hizmet çalışanı getirme işleyicileri için Geliştirici Araçları&#39;nda uyarılar.

Diğer ölçütler

Elbette dahası da var.

  • document.domain için setter desteği sonlandırıldı.
  • Web Görünümü'nde X-Requested-With header desteğinin sonlandırılması için bir kaynak denemesi bulunmaktadır
  • Geliştirici Araçları'ndaki kaydedici artık parça seçicilerle kayıt yapabilir.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 112'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 113 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!