- 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!
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.
div
öğesinin hâlâ mevcut olduğuna dikkat edin.
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
veHSLA
ileRGB
veRGBA
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!