- CSS Paint API memungkinkan Anda membuat secara terprogram gambar.
- Server Timing API memungkinkan server web untuk menyediakan informasi pengaturan waktu performa melalui header HTTP.
- properti
display: contents
CSS yang 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 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.
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%.
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
danHSLA
, sertaRGB
danRGBA
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!