Baru di Chrome 65

• Dengan CSS Paint API, Anda dapat membuat image secara terprogram.
• Server Timing API memungkinkan server web memberikan informasi pengaturan waktu performa melalui header HTTP.
• properti display: contents CSS baru dapat membuat kotak menghilang.

Dan masih ada banyak lagi.

Saya Pete LePage. Mari kita selami dan lihat hal-hal baru untuk developer di Chrome 65.

Ingin daftar lengkap perubahan? Lihat daftar perubahan repositori sumber Chromium.

API Paint CSS

CSS Paint API memungkinkan Anda membuat gambar secara terprogram untuk properti CSS seperti background-image atau border-image.

Daripada mereferensikan gambar, Anda dapat menggunakan fungsi paint baru untuk menggambar gambar - seperti elemen kanvas.

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

Misalnya, daripada menambahkan elemen DOM tambahan untuk membuat efek ripple pada tombol dengan gaya material, Anda dapat menggunakan paint API.

Selain itu, metode ini juga merupakan metode polyfill untuk fitur CSS polyfill yang belum didukung di browser.

Surma memiliki postingan bagus dengan beberapa demo dalam penjelasannya.

API Waktu Server

Semoga Anda menggunakan API navigasi dan pengaturan waktu resource untuk melacak performa situs Anda bagi pengguna sungguhan. Sampai sekarang, belum ada cara mudah bagi server untuk melaporkan waktu performanya.

Server Timing API baru memungkinkan server Anda meneruskan informasi waktu ke browser sehingga memberi Anda gambaran yang lebih baik tentang performa Anda secara keseluruhan.

Anda dapat melacak metrik sebanyak yang diinginkan: waktu baca database, waktu mulai, atau apa pun yang penting bagi Anda, dengan menambahkan header Server-Timing ke respons:

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

Peristiwa utama ditampilkan di Chrome DevTools, atau Anda dapat menariknya keluar dari header respons dan menyimpannya dengan analisis performa lainnya.

display: contents

Properti display: contents CSS yang baru cukup keren.

Saat ditambahkan ke elemen penampung, setiap turunan mengambil tempatnya di DOM, dan pada dasarnya akan hilang. Misalkan saya punya dua div, satu di dalam yang lain. div luar saya memiliki batas merah, latar belakang abu-abu, dan saya telah menetapkan lebar 200 piksel. div bagian dalam memiliki batas biru, dan latar belakang biru muda.

.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;
}

Secara default, div bagian dalam terdapat di div luar.

Menambahkan display: contents ke div luar, akan membuat div luar hilang dan batasannya tidak lagi diterapkan ke div bagian dalam. Lebar div bagian dalam sekarang 100%.

Ada banyak kasus di mana hal ini mungkin dapat membantu, tetapi yang paling umum adalah dengan flexbox. Dengan flexbox, hanya turunan langsung dari container fleksibel yang akan menjadi item fleksibel.

Namun, setelah Anda menerapkan display: contents ke turunan, turunannya akan menjadi item fleksibel dan ditata menggunakan aturan yang sama yang akan diterapkan ke induknya.

Lihat postingan Rachel Andrew yang sangat bagus Vanishing box with display content untuk detail selengkapnya dan contoh lainnya.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 65 untuk developer, tentu saja masih banyak yang lainnya.

• Sintaksis untuk menentukan koordinat HSL dan HSLA, serta RGB dan RGBA untuk properti warna kini cocok dengan spesifikasi CSS Color 4.
• Ada kebijakan fitur baru yang memungkinkan Anda mengontrol XHR sinkron melalui header HTTP atau atribut allow iframe.

Pastikan untuk melihat Baru di Chrome DevTools, untuk mempelajari fitur baru untuk DevTools di Chrome 65. Dan, jika Anda tertarik dengan Progressive Web App, lihat serial video PWA Roadshow yang baru. Lalu, klik tombol subscribe di channel YouTube kami, dan Anda akan menerima notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 66 dirilis, saya akan memberi tahu Anda apa yang baru di Chrome!