- CSS Paint API, programatik olarak görüntü oluşturmanıza olanak tanır.
- Server Timing API, web sunucularının HTTP üstbilgileri aracılığıyla performans zamanlama bilgisi sağlamasına olanak tanır.
- yeni CSS
display: contents
özelliği kutuların kaybolmasına neden olabilir.
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? 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 tıpkı bir 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.
Aynı zamanda, henüz tarayıcıda desteklenmeyen CSS özelliklerini çoklu doldurma için de etkili bir yöntemdir.
Surma'nın açıklamasında birkaç demo olan güzel bir gönderi var.
Server Timing API'si
Sitenizin gerçek kullanıcılar için performansını izlemek amacıyla gezinme ve kaynak zamanlama API'lerini kullandığınızı umuyoruz. Şimdiye kadar sunucunun performans zamanlamasını rapor etmesi için 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 Server-Timing
başlığı ekleyerek veritabanı okuma süreleri, başlatma süresi veya sizin için önemli olan her şeyi istediğiniz kadar izleyebilirsiniz:
'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'
Bunlar, Chrome Geliştirici Araçları'nda gösterilir veya bunları yanıt başlığından çıkarıp 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 temelde kaybolur. Diyelim ki biri diğerinin içinde iki div
var. div
dış belgemin kırmızı bir kenarlığı ve gri bir arka planı var ve genişliği 200 piksel olarak ayarladım. İç 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.
Dış div öğesine display: contents
eklendiğinde dış div
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 faydalı olabileceği pek çok durum vardır ancak en yaygın olanı flexbox'tır. 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'te değişikliklerden yalnızca birkaçı. Elbette daha pek çok şey var.
- Renk özelliği için
HSL
veHSLA
ileRGB
veRGBA
koordinatlarını belirtmek için kullanılan söz dizimi artık CSS Renk 4 spesifikasyonuyla 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'te Geliştirici Araçları'ndaki yenilikleri öğrenmek için Chrome Geliştirici Araçları'ndaki yenilikler bölümüne göz atmayı unutmayın. 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ıkladığınızda yeni bir video yayınladığımızda bir e-posta bildirimi alırsınız.
Ben Pete LePage. Chrome 66 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak istiyorum!