- CSS Paint API, programlı olarak resim oluşturmanıza olanak tanır.
- Server Timing API, web sunucularının HTTP üstbilgileri aracılığıyla performans zamanlama bilgileri sağlamasına olanak tanır.
- yeni CSS
display: contents
özelliği kutuların kaybolmasını sağlayabilir.
Daha birçok özellik de var.
Adım Pete LePage. Chrome 65'te geliştiriciler için neler yeniye göz atalım.
Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.
CSS Paint API'si
CSS Paint API, background-image
veya border-image
gibi CSS özellikleri için programatik olarak bir görüntü oluşturmanıza olanak tanır.
Bir resme referans vermek yerine, resmi çizmek için yeni boya işlevini kullanabilirsiniz. Bu işlev, tuval öğesine benzer.
<style>
.myElem { background-image: paint(checkerboard); }
</style>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
Örneğin, materyal stiline sahip bir düğme üzerinde dalga efekti oluşturmak için fazladan DOM öğeleri eklemek yerine paint API'sini kullanabilirsiniz.
Ayrıca, henüz tarayıcıda desteklenmeyen CSS özelliklerini çoklu dolguyla doldurmak için güçlü bir yöntemdir.
Surma'nın açıklamasında birkaç demo içeren harika bir gönderi var.
Server Timing API
Sitenizin gerçek kullanıcılar için performansını izlemek amacıyla gezinme ve kaynak zamanlama API'lerini kullandığınızı umuyoruz. Sunucunun performans zamanlamasını bildirmesi için şimdiye kadar kolay bir yol yoktu.
Yeni Server Timing API, sunucunuzun zamanlama bilgilerini tarayıcıya iletmesini sağlayarak genel performansınıza ilişkin daha iyi bir fikir sunar.
Yanıtınıza bir Server-Timing
üst bilgisi ekleyerek istediğiniz kadar metrik (ör. veritabanı okuma süreleri, başlatma süresi veya sizin için önemli olan herhangi bir şey) izleyebilirsiniz:
'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'
Bunlar Chrome DevTools'da gösterilir veya yanıt başlığından alıp diğer performans analizlerinizle birlikte kaydedebilirsiniz.
display: contents
Yeni CSS display: contents
özelliği oldukça kullanışlı.
Bir kapsayıcı öğeye eklendiğinde, DOM'daki yerini alt öğeleri alır ve öğe temelde kaybolur. Birbirinin içinde iki div
olduğunu varsayalım. div
dış belgemin kırmızı bir kenarlığı ve gri bir arka planı var ve genişliği 200 piksel olarak ayarladım. İç div
'ün kenarı mavi, arka planı açık mavidir.
.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.
Dış div'e display: contents
eklendiğinde dış div
kaybolur ve kısıtlamaları artık iç div
'e uygulanmaz. İç div
artık% 100 genişlikte.
div
öğesinin hâlâ mevcut olduğunu fark edin.
Bunun yararlı olabileceği birçok durum vardır ancak en yaygın olanı flexbox'tur. Flexbox ile, yalnızca bir flex container'ın en yakın alt öğeleri Esnek öğeler haline gelir.
Ancak display: contents
öğesini bir alt öğeye uyguladığınızda, alt öğeleri esnek öğelere dönüşür ve üst öğesine uygulanacak kuralların aynısı kullanılarak oluşturulur.
Daha ayrıntılı bilgi ve diğer örnekler için Rachel Andrew'un Görüntülü Reklam Ağı'nda kaybolan kutular konulu harika gönderisine göz atın.
Diğer özellikler
Bunlar, geliştiriciler için Chrome 65'teki değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.
- Renk mülkü için
HSL
veHSLA
değerlerinin yanı sıraRGB
veRGBA
koordinatlarının belirtilme söz dizimi artık CSS Color 4 spesifikasyonunu eşleşiyor. - Eş zamanlı XHR'leri bir HTTP başlığı veya iframe
allow
özelliği aracılığıyla kontrol etmenize olanak tanıyan yeni bir özellik politikası vardır.
Chrome 65'teki DevTools'taki yenilikleri öğrenmek için Chrome DevTools'ta yeni başlıklı makaleyi inceleyin. Progresif Web Uygulamaları ile ilgileniyorsanız yeni PWA Roadshow video serisine göz atın. Ardından, YouTube kanalımızdaki abone ol düğmesini tıklayın. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.
Adım Pete LePage. Chrome 66 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.