Baru di Chrome 65

Pete LePage

• CSS Paint API memungkinkan Anda membuat gambar secara terprogram.
• Dengan Server Timing API, server web dapat memberikan informasi 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 apa yang baru untuk developer di Chrome 65.

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

API CSS Paint

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 cat 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 ekstra untuk membuat efek riak pada tombol bergaya material, Anda dapat menggunakan API paint.

Alat ini juga merupakan metode polyfill fitur CSS yang andal yang belum didukung di browser.

Surma memiliki postingan yang bagus dengan beberapa demo dalam penjelasannya.

API Waktu Server

Sebaiknya Anda menggunakan API pengaturan waktu resource dan navigasi untuk melacak performa situs bagi pengguna sungguhan. Hingga saat ini, belum ada cara mudah bagi server untuk melaporkan waktu performanya.

Server Timing API yang baru memungkinkan server Anda meneruskan informasi pengaturan waktu ke browser, sehingga Anda akan mendapatkan gambaran yang lebih baik tentang keseluruhan performa.

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"'

Laporan tersebut ditampilkan di Chrome DevTools, atau Anda dapat menariknya dari header respons dan menyimpannya dengan analisis performa yang lain.

display: contents

Properti display: contents CSS yang baru cukup rapi.

Saat ditambahkan ke elemen container, setiap turunan akan menggantikannya di DOM, dan pada dasarnya akan menghilang. Misalkan saya memiliki dua div, satu di dalam yang lainnya. div luar saya memiliki batas merah, latar belakang abu-abu, dan saya telah menyetel 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 dimuat di div luar.

Menambahkan display: contents ke div luar akan membuat div luar menghilang dan batasannya tidak lagi diterapkan ke div bagian dalam. Bagian dalam div kini memiliki lebar 100%.

Ada banyak kasus di mana hal ini mungkin 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 pada induknya.

Lihat postingan Rachel Andrew yang luar biasa, Vanishing box with display content, untuk detail selengkapnya dan contoh lainnya.

Dan lainnya.

Ini hanyalah beberapa perubahan di Chrome 65 bagi developer, tentu saja, masih banyak lagi.

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

Pastikan untuk memeriksa Baru di Chrome DevTools untuk mempelajari apa yang baru di DevTools di Chrome 65. Selain itu, jika Anda tertarik dengan Progressive Web App, lihat serial video PWA Roadshow yang baru. Kemudian, klik tombol subscribe di channel YouTube kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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