Chrome 65'teki yenilikler

Filiz LePage

Ve çok daha fazlası da var!

Adım Pete LePage. Şimdi Chrome 65'teki geliştiricilere yönelik yenilikleri görelim!

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

CSS Paint API'sı

CSS Paint API, background-image veya border-image gibi CSS özellikleri için programatik olarak görüntü oluşturmanıza olanak tanır.

Bir resme referans vermek yerine, resmi çizmek için tıpkı bir tuval öğesine benzer şekilde yeni boyama işlevini kullanabilirsiniz.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Örneğin, malzeme stiline sahip bir düğmede dalga efekti oluşturmak için fazladan DOM öğeleri eklemek yerine paint API'yi kullanabilirsiniz.

Ayrıca, henüz bir tarayıcıda desteklenmeyen CSS özelliklerini çoklu doldurmak için güçlü bir yöntemdir.

Surma'nın açıklayıcısında çeşitli demolar içeren harika bir gönderi var.

Sunucu Zamanlaması API'sı

Sitenizin performansını gerçek kullanıcılar için izlemek amacıyla gezinme ve kaynak zamanlama API'lerini kullandığınızı umuyoruz. Şu ana kadar sunucunun performans zamanlamasını bildirmesinin kolay bir yolu yoktu.

Yeni Server Timing API, sunucunuzun zamanlama bilgilerini tarayıcıya iletmesini sağlayarak genel performansınızla ilgili daha iyi bir görünüm sunar.

Yanıtınıza bir Server-Timing başlığı ekleyerek veritabanı okuma süreleri, başlatma süresi veya sizin için önemli olan tüm metrikleri izleyebilirsiniz:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Bu sonuçlar, Chrome Geliştirici Araçları'nda gösterilir. Dilerseniz yanıt başlığından çıkarıp diğer performans analizlerinizle birlikte kaydedebilirsiniz.


display: contents

Yeni CSS display: contents özelliği oldukça kullanışlı.

Bir kapsayıcı öğesine eklendiğinde, DOM'daki alt öğeler onun yerini alır ve öğe tamamen kaybolur. Diyelim ki biri içinde diğerinin içinde iki div var. Dış div öğemde kırmızı bir kenarlık ve gri arka plan var. Genişliği 200 piksel olarak ayarladım. İç div aksesuarının mavi bir sınırı ve açık mavi arka planı vardır.

.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 bulunur.

Benim içim var <div>

Dış div öğesine display: contents eklenmesi, dış div öğesinin kaybolmasını sağlar ve kısıtlamaları artık iç div'a uygulanmaz. İç div artık% 100 genişlikte.

DOM'u incelemek için Geliştirici Araçları'nı kullanın. Dış div öğesinin hâlâ mevcut olduğunu fark edin.

Bu özelliğin faydalı olabileceği pek çok durum vardır, ancak en yaygın olanı flexbox'tır. flexbox ile, bir esnek kapsayıcının yalnızca hemen alt öğeleri esnek öğe haline gelir.

Ancak display: contents bir çocuğa uygulandığında, alt öğeleri esnek öğelere dönüşür ve ebeveynleri için geçerli olacak kurallar kullanılarak düzenlenir.

Daha fazla ayrıntı ve diğer örnekler için Rachel Andrew'in mükemmel gönderisine göz atın Ekranlı süsleme kutuları ve diğer örnekler için.

Diğer ölçütler

Bunlar, Chrome 65'te geliştiriciler için yapılan değişikliklerden sadece birkaçı tabii ki çok daha fazlası.

  • Renk özelliğinin HSL ve HSLA ile RGB ile RGBA koordinatlarını belirtmek için kullanılan söz dizimi artık CSS Renk 4 spesifikasyonuyla eşleşir.
  • 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ı bulunmaktadır.

Chrome 65'teki Geliştirici Araçları yeniliklerini öğrenmek için Chrome Geliştirici Araçları'ndaki yenilikler sayfasına 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ıklayın. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 66 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.