Baru di Chrome 65

Pete LePage

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 untuk membuat gambar secara terprogram untuk properti CSS seperti background-image atau border-image.

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

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

Misalnya, sebagai ganti menambahkan elemen DOM ekstra ke membuat efek riak pada tombol bergaya material, Anda bisa menggunakan API cat.

Ini juga merupakan metode andal untuk mem-polyfill fitur CSS yang tidak didukung di browser.

Surma memiliki postingan bagus dengan beberapa demo dalam penjelasan ini.

API Waktu Server

Mudah-mudahan Anda menggunakan API waktu sumber daya dan navigasi untuk melacak performa situs untuk pengguna yang sebenarnya. Sampai sekarang, tidak ada kemudahan cara yang tepat bagi server untuk melaporkan waktu kinerjanya.

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

Anda dapat melacak metrik sebanyak yang Anda inginkan: waktu baca {i>database<i}, 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"'

Peringatan tersebut ditampilkan di Chrome DevTools, atau Anda dapat menariknya dari 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 lainnya. div luar saya memiliki batas merah, latar belakang abu-abu, dan saya telah menyetel lebar berukuran 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.

Saya adalah lapisan dalam <div>

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

Gunakan DevTools untuk memeriksa DOM, dan perhatikan bahwa div luar masih ada.

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

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

Lihat postingan yang luar biasa dari Rachel Andrew Kotak hias dengan konten tampilan untuk detail lebih lanjut dan contoh lainnya.

Dan banyak lagi!

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

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

Pastikan untuk melihat Baru di Chrome DevTools, untuk mempelajari apa yang baru di DevTools di Chrome 65. Jika Anda tertarik, Progressive Web App, lihat Serial video Roadshow PWA. Lalu, klik tombol subscribe di channel YouTube, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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