Chrome 112'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Adım Adriana Jara. Chrome 112'de geliştiricilere yönelik yenilikleri inceleyelim.

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

En sevdiğimiz CSS önişleyici özelliklerinden biri olan iç içe yerleştirilmiş stil kuralları artık dile dahil edildi.

İç içe yerleştirmeden önce her seçicinin birbirinden ayrı olarak açıkça tanımlanması gerekiyordu. Bu da tekrara, stil sayfası toplu olmasına ve dağınık bir yazma deneyimine yol açar.

Önce
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

İç içe yerleştirme işleminden sonra seçiciler devam ettirilebilir ve 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ı birlikte konumlandırır. 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 dosyalarda aramak 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ştirme özelliğinden en iyi şekilde yararlanmayla ilgili ipuçları için bu makaleye göz atın. Geliştirici araçlarındaki iç içe yerleştirmeyle ilgili desteği burada bulabilirsiniz.

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

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

Bu HTML öğesi, özellikleri daha iyi ve tutarlı kullanılabilirlik ve erişilebilirlik sağlamak için 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ı belirlemektir. Bu sürümde, ilgili öğeyi seçen algoritma güncellendi.

Şu andan itibaren:

İletişim kutusu odaklama adımları, odaklanılabilir öğeler yerine klavyeyle odaklanılabilir öğeleri inceler. Otomatik odaklama özelliği ayarlanmışsa <dialog> öğesinin kendisi odaklanır.

Odak, <body> öğesine "sıfırlanmak" yerine yedek olarak <dialog> öğesine alınır.

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

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

Chrome 112'den itibaren, bir kullanıcı aracısı hizmet çalışanının tüm getirme dinleyicilerinin işlem yapmadığını belirlerse hizmet çalışanının başlatılması ve dinleyicinin kritik gezinme yolundan gönderilmesi atlanır.

Bu özellik, bu sayfalarda gezinmeyi hızlandırır.

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 hizmet çalışanını başlatmak ve işlemsiz bir dinleyiciyi yürütmek, doğru hizmet çalışanıyla uygulanabilecek önbelleğe alma veya çevrimdışı özellikler gibi avantajlardan hiçbirini sağlamadan yalnızca ek yük getirir. Bu nedenle Chrome, gezinmeyi iyileştirmek için bu sayfaları atlar.

Bu değişiklik kapsamında Chrome, servis çalışanının tüm getirme dinleyicileri işlem yapmazsa konsol uyarıları gösterir ve geliştiricileri bu getirme dinleyicilerini kaldırmaya teşvik eder.

DevTools&#39;da boş servis çalışanı getirme işleyicileri için uyarılar.

Diğer özellikler

Tabii ki çok daha fazlası var.

  • document.domain için setter artık kullanımdan kaldırıldı.
  • WebView'de X-Requested-With header desteğinin sonlandırılması için bir kaynak denemesi mevcuttur
  • Geliştirici araçlarındaki kaydedici artık pierce seçicileri ile kayıt yapabilir.

Daha fazla bilgi

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

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 113 sürümü kullanıma sunulduğunda Chrome'daki yenilikleri size buradan bildireceğim.