Chrome 65'teki yenilikler

Pete LePage

Ç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? 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.

İçimdeki kişi benim <div>

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.

DOM'yi incelemek için Geliştirici Araçları'nı kullanın ve dış 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 ve HSLA ile RGB ve RGBA 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!