Chrome 65'teki yenilikler

Pete LePage

• CSS Paint API, programlı bir şekilde bir resim.
• Server Timing API, web sunucularının performans zamanlama bilgileri aracılığıyla sağlamanız gerekir.
• yeni CSS display: contents özelliği sayesinde kutular kaybolur!

Çok daha fazlası!

Ben Pete LePage. Şimdi, Chrome 65'te geliştiriciler için sunulan yeniliklere göz atalım.

Değişikliklerin tam listesini görmek ister misiniz? Şu bölüme göz atın: Chromium kaynak deposu değişiklik listesi.

CSS Paint API'si

CSS Paint API şunları yapmanıza olanak tanır: background-image gibi CSS özellikleri için programatik olarak bir resim oluşturun veya border-image.

Bir resme referans vermek yerine, yeni boya işlevini kullanarak bir tuval öğesine benzer.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Örneğin, aynı URL'ye ekstra DOM öğeleri eklemek yerine, dalga efektini oluşturma bir düğme üzerinde çalışırken paint API'sini kullanabilirsiniz.

Bu, desteklenmeyen CSS özelliklerini çoklu doldurma için de güçlü bir yöntemdir. bir tarayıcıda açın.

Surma'nın bu konuda paylaştığı demolar açıklamasına göz atın.

Server Timing API'si

sitenizin performansını daha iyi anlamanızı sağlar. Şimdiye kadar performans zamanlamasını raporlayabileceği bir yöntemdir.

Yeni Server Timing API tarayıcıya zamanlama bilgilerini iletecek sunucu; daha iyi bir resim sunuyor. yardımcı olur.

İstediğiniz kadar metriği izleyebilirsiniz: veritabanı okuma süreleri, başlatma süresi, ya da sizin için önemli olan her şeye, bir Server-Timing yanıt:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Bu notlar, Chrome Geliştirici Araçları'nda gösterilir veya bunları yanıtın dışında tutabilirsiniz. bunları diğer performans analizlerinizle birlikte kaydedebilirsiniz.

display: contents

Yeni CSS display: contents özelliği çok kullanışlı.

Bir kapsayıcı öğesine eklendiğinde, DOM'de tüm alt öğeler yerini alır. ve aslında kaybolur. Diyelim ki, biri içinde iki div var. diğer. div dışımın kırmızı bir kenarlığı ve gri bir arka planı var ve bir pikseldir. İç div kenarlığı mavi bir sınıra ve açık mavi arka plana sahiptir.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Varsayılan olarak iç div, dış div içinde yer alır.

display: contents, dış div öğesine eklendiğinde dış div öğesi kaybolur ve kısıtlamaları artık iç div öğesine uygulanmaz. İç div artık% 100 genişlikte.

Bunun yardımcı olabileceği birçok durum vardır ancak en yaygın olanı flexbox'tır. Flexbox ile, bir flex container'ın yalnızca en yakın alt öğeleri esnek öğelere dönüşür.

Ancak bir çocuğa display: contents uygulandığında alt öğeleri esnek hale gelir ve her bir kontrol için kullanılacak aynı kurallar baz alınarak anne veya babası olabilir.

Rachel Andrew'un mükemmel gönderisine göz atın Görüntü içeriği olan kaybolan kutular inceleyin.

Diğer özellikler

Bunlar, elbette geliştiriciler için Chrome 65'te yapılan değişikliklerden yalnızca birkaçıdır. çok daha fazlası var.

• HSL ve HSLA ile RGB ve RGBA koordinatlarını belirtmek için kullanılan söz dizimi renk özelliği için eşleştir CSS Renk 4 spesifikasyonu.
• İzin verilen yeni bir özellik politikası var. eşzamanlı XHR'leri bir HTTP başlığı veya iframe allow özelliği.

Chrome Geliştirici Araçları'ndaki yenilikler inceleyebilirsiniz. Programla ilgileniyorsanız Progresif Web Uygulamaları: yeni PWA Roadshow video serisi. Ardından YouTube kanalı ve yeni bir video sunduğumuzda size e-posta bildirimi göndereceğiz.

Ben Pete LePage. Chrome 66 yayınlanır yayınlanmaz Chrome'daki yeniliklerden bahsedeceğiz!