Chrome 65'teki yenilikler

Pete LePage

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.

İçimde olan biriyim <div>

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.

DOM'u incelemek için Geliştirici Araçları'nı kullanın ve dış 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 ve HSLA değerlerinin yanı sıra RGB ve RGBA 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.