Baru di Chrome 90

Pete LePage

Berikut hal yang perlu Anda ketahui:

• Ada nilai baru untuk properti overflow CSS.
• Feature Policy API telah diganti namanya menjadi Permissions Policy.
• Selain itu, ada cara baru untuk menerapkan dan menggunakan Shadow DOM secara langsung di HTML.
• Saya memiliki beberapa jaket yang hampir persis seperti ini di tahun 1990-an.
• Dan, masih banyak fitur lainnya.

Saya Pete LePage, dan saya punya 411 untuk developer di Chrome 90, yang bergaya tahun 1990-an!

Cegah tambahan dengan overflow: clip

CSS adalah paket lengkap yang luar biasa! Namun, saya rasa setiap developer web pernah melihat dan mengalami sesuatu yang meluap-luap pada suatu saat. Ada postingan bagus di CSS Tricks tentang berbagai cara untuk menangani overflow, misalnya, menggunakan overflow: hidden, atau auto.

Dalam Spesifikasi Overflow CSS, ada properti clip baru yang berfungsi mirip dengan hidden.

.overflow-clip {
  overflow: clip;
}

Penggunaan overflow: clip memungkinkan Anda mencegah jenis scroll apa pun untuk kotak, termasuk scroll terprogram. Artinya, kotak tidak dianggap sebagai penampung scroll; kotak tidak memulai konteks pemformatan baru. Jika perlu, Anda dapat menerapkan pemangkasan ke satu sumbu melalui overflow-x dan overflow-y.

Oh, dan FYI - ada juga overflow-clip-margin, yang memungkinkan Anda memperluas batas klip. Hal ini berguna untuk kasus saat ada kelebihan tinta yang harus terlihat.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Lihat cara kerja overflow: clip di https://petele-css-is-awesome.glitch.me/

Kebijakan Fitur kini menjadi Kebijakan Izin

Di Chrome 74, kami memperkenalkan Feature Policy API, yang memungkinkan Anda mengaktifkan, menonaktifkan, dan memodifikasi perilaku API dan fitur web tertentu di browser secara selektif. Kebijakan ini adalah kontrak antara Anda dan browser. Intent memberi tahu browser tentang niat Anda.

Jika kode Anda, atau library pihak ketiga yang Anda gunakan melanggar aturan yang telah dipilih sebelumnya, browser akan mengganti perilaku dengan UX yang lebih baik atau hanya mengatakan, "talk to the hand", yang memblokir API sepenuhnya.

Mulai Chrome 90, Feature Policy API akan diganti namanya menjadi Permissions Policy, dan header HTTP telah diganti namanya. Pada saat yang sama, komunitas telah menyepakati sintaksis baru, berdasarkan Nilai Kolom Terstruktur untuk HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Jika Anda tertarik dengan cara menggunakan fitur ini di situs Anda, lihat Pengantar Kebijakan Fitur.

Shadow DOM Deklaratif

Shadow DOM, bagian dari standar Komponen Web, menyediakan cara untuk mencakup gaya CSS ke subhierarki DOM tertentu dan mengisolasi subpohon tersebut dari bagian lainnya dalam dokumen. Hingga saat ini, satu-satunya cara untuk menggunakan Shadow DOM adalah dengan membuat root bayangan menggunakan JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Ini berfungsi dengan baik untuk rendering sisi klien, tetapi tidak begitu baik dalam rendering sisi server karena tidak ada cara bawaan untuk mengekspresikan Shadow Roots di HTML yang dihasilkan server. Namun, mulai Chrome 90, dengan Shadow DOM Declarative, Anda sudah siap. Anda dapat membuat shadow root hanya dengan HTML.

Root Bayangan Deklaratif adalah elemen <template> dengan atribut shadowroot. Elemen ini terdeteksi oleh parser HTML dan langsung diterapkan sebagai root bayangan elemen induknya.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Memuat hasil markup HTML murni di hierarki DOM ini:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Hal ini memberi kita manfaat enkapsulasi dan proyeksi slot Shadow DOM dalam HTML statis. JavaScript tidak diperlukan untuk menghasilkan seluruh pohon, termasuk Root Bayangan.

Lihat Declarative Shadow DOM di web.dev untuk detail selengkapnya.

Dan lainnya

Dan tentu saja masih banyak lagi.

Untuk membantu meningkatkan privasi, dan bahkan kecepatan pemuatan bagi pengguna yang mengunjungi situs yang mendukung HTTPS, kolom URL Chrome akan menggunakan https:// secara default. Dan jika Anda belum menyiapkan pengalihan otomatis dari HTTP ke HTTPS, sekarang adalah saat yang tepat untuk melakukannya.

Selain itu, enkoder AV1 dikirimkan di desktop Chrome yang dioptimalkan secara khusus untuk konferensi video dengan integrasi WebRTC.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 90.

• Yang baru di Chrome DevTools (90)
• Penghentian & penghapusan Chrome 90
• Update ChromeStatus.com untuk Chrome 90
• Yang baru di JavaScript pada Chrome 90
• Daftar perubahan repositori sumber Chromium

Langganan

Ingin terus mendapatkan info terbaru tentang video kami, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 91 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.

Ucapan terima kasih khusus

Saya sangat senang merekam episode Baru di Chrome bertema tahun 1990-an ini. Terima kasih banyak kepada Sean Meehan atas idenya dan telah mengumpulkan orang-orang yang luar biasa yang membantu membuka time warp ke tahun 1990.

Dan tentu saja, Loren Borja, Lee Carruthers, dan Lukas Holcek yang mengerjakan semua video Baru di Chrome saya dan membuat saya terlihat jauh lebih baik daripada saya yang sebenarnya. TERIMA KASIH!