- 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%.
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 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
danHSLA
, serta koordinatRGB
danRGBA
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!