Chrome 112'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Şimdi, Chrome 112'de geliştiriciler için sunulan yeniliklere göz atalım.

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

En sevdiğimiz CSS ön işlemci özelliklerinden biri artık dile yerleşik olarak sunuluyor: iç içe yerleştirme stili kuralları.

İç içe yerleştirmeden önce, her seçicinin teşvik eder. Bu durum tekrara, stil sayfası toplu olmasına ve dağınık şekilde yazma kullanımına yol açar. sahip olacaksınız.

Önce
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

İç içe yerleştirildikten sonra, seçiciler ilişkili, devam eden ve ilişkili stil kurallarını da gruplandırabilirsiniz.

Sonra
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

İç içe yerleştirme, hem seçicileri tekrarlama ihtiyacını azaltarak hem de ilgili öğeler için stil kurallarını birlikte konumlandırarak geliştiricilere yardımcı olur. Ayrıca, stillerin hedefledikleri HTML ile eşleşmesini de sağlayabilir.

Örnekteki .nesting bileşeni projeden kaldırıldıysa ilgili seçici örneklerini aramak yerine tüm grubu silebilirsiniz.

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

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

CSS iç içe yerleştirmeden en iyi şekilde yararlanmaya yönelik ipuçları için bu makaleyi inceleyin. Geliştirici Araçları'nda iç içe yerleştirme desteğine buradan ulaşabilirsiniz.

<dialog> ilk odak noktası için algoritma güncellemesi.

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

Bu HTML öğesinin özellikleri daha iyi ve tutarlı bir kullanılabilirlik ve erişilebilirlik sağlamak üzere tasarlandığından bu tür içerikler oluşturmak için önerilen yöntemdir.

Bu özelliklerden biri, iletişim kutusu açıldığında hangi öğenin odaklanacağını yönetmektir. Bu sürümde, öğeyi seçen algoritma güncellenmiştir.

Şu andan itibaren:

İletişim kutusuna odaklanma adımlarında, odaklanılabilir öğeler yerine klavyeye odaklanılabilir öğelere bakar Otomatik odaklama özelliği ayarlanmışsa <dialog> öğesinin kendisine odaklanır

<dialog> öğesinin kendisi, odaklanma "sıfırlama" yerine yedek olarak odaklanır ekleyin.<body>

<dialog> öğesi hakkında daha fazla ayrıntı için dokümanları okuyun.

Hizmet çalışanı işlemsiz getirme işleyicileri atlanıyor.

Kullanıcı aracısı, hizmet çalışanının tüm getirme işleyicilerinin işlemsiz olduğunu belirlerse Chrome 112'den itibaren hizmet çalışanı başlatma ve gezinme kritik yolundan dinleyici gönderme işlemi atlanır.

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

Getirme işleyicinin olması, bir web uygulamasının yüklenebilir olması için PWA gereksinimlerinden biriydi. Bazı sitelerin aslında boş bir getirme işleyiciye sahip olmasının nedeni bu olabilir. Ancak bir Service Worker başlatmak ve işlemsiz işleyici yürütmek yalnızca ek yük getirir. Bu durum, önbelleğe alma veya çevrimdışı özellikler gibi doğru hizmet çalışanıyla uygulanabilecek avantajları sağlamaz. Bu nedenle Chrome artık gezinmeyi iyileştirmek için bunları atlıyor.

Bu değişiklik kapsamında, Service Worker'ın tüm getirme işleyicileri işlemsizse Chrome, konsol uyarıları gösterecek ve geliştiricileri bu getirme işleyicileri 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 özellikler

Tabii ki çok daha fazlası var.

  • document.domain için setter artık desteklenmiyor.
  • WebView'da X-Requested-With header desteğinin sonlandırılması için bir kaynak denemesi bulunmaktadır.
  • Geliştirici Araçları'ndaki kaydedici artık pierce seçicilerle kayıt yapabilir.

Daha fazla bilgi

Bu bölümde, yalnızca bazı önemli noktalar yer alıyor. Aşağıdaki bağlantıları ziyaret ederek Chrome 112'deki ek değişiklikler.

Abone ol

Gelişmelerden haberdar olmak için şu yayına abone olun: Chrome Developers YouTube kanalı Yeni bir video yayınladığımızda size e-posta bildirimi göndereceğiz.

Ben Adriana Jara. Chrome 113 yayınlanır yayınlanmaz sizlerle Chrome'daki yenilikler neler?