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 Kebijakan Izin.
  • Selain itu, ada cara baru untuk menerapkan dan menggunakan Shadow DOM secara langsung di HTML.
  • Saya memiliki beberapa jaket yang hampir sama persis seperti ini di tahun 1990-an.
  • Dan masih ada banyak lagi.

Saya Pete LePage, dan saya memiliki 411 untuk pengembang di Chrome 90, dengan gaya 1990-an!

Mencegah kelebihan muatan dengan overflow: clip

CSS KEREN

Semua itu disertai dengan CSS! Tapi, saya pikir setiap pengembang web telah melihat dan mengalami sesuatu yang terasa canggung pada saat tertentu. Ada postingan bagus tentang Trik CSS tentang berbagai cara untuk menangani tambahan, misalnya, menggunakan overflow: hidden, atau auto.

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

.overflow-clip {
  overflow: clip;
}
Kotak persegi dengan teks CSS sangat luar biasa, dengan luar biasa yang menonjol

Menggunakan overflow: clip memungkinkan Anda mencegah semua jenis scrolling untuk kotak, termasuk scroll terprogram. Artinya, kotak tersebut tidak dianggap sebagai penampung scroll karena tidak memulai konteks pemformatan baru. Jika perlu, Anda dapat menerapkan pemotongan ke satu sumbu melalui overflow-x dan overflow-y.

Oh, dan perlu diketahui - ada juga overflow-clip-margin, yang memungkinkan Anda memperluas batas klip. Hal ini berguna untuk kasus ketika ada kelebihan tinta yang seharusnya terlihat.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Kotak persegi dengan teks CSS sangat luar biasa, dengan luar biasa yang menonjol

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

Kebijakan Fitur kini menjadi Kebijakan Izin

Pada Chrome 74, kami memperkenalkan Feature Policy API, yang memungkinkan Anda mengaktifkan, menonaktifkan, dan mengubah perilaku API dan fitur web tertentu di browser secara selektif. Kebijakan ini adalah kontrak antara Anda dan browser. Tag tersebut memberi tahu browser tentang maksud Anda.

Jika kode Anda, atau salah satu library pihak ketiga yang Anda gunakan melanggar aturan yang telah dipilih sebelumnya, browser akan mengganti perilaku dengan UX yang lebih baik atau hanya mengatakan, "bicara langsung", memblokir API sama sekali.

Mulai Chrome 90, Feature Policy API akan berganti nama menjadi Kebijakan Izin, dan header HTTP juga telah diganti namanya. Pada saat yang sama, komunitas telah menentukan sintaksis baru, berdasarkan Nilai Kolom Terstruktur untuk HTTP.

Chrome 90 dan yang lebih baru

Permissions-Policy: geolocation=()

Chrome 89 dan yang lebih lama

Feature-Policy: geolocation 'none'

Jika Anda tertarik mengetahui cara menggunakannya di situs Anda, lihat Pengantar Kebijakan Fitur.

DOM Bayangan Deklaratif

Shadow DOM, bagian dari standar Komponen Web, menyediakan cara untuk menentukan cakupan gaya CSS ke subhierarki DOM tertentu dan mengisolasi subhierarki tersebut dari bagian dokumen lainnya. Sampai saat ini, satu-satunya cara untuk menggunakan Shadow DOM adalah dengan membuat shadow root 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 Root Bayangan dalam HTML yang dihasilkan server. Namun, mulai Chrome 90, dengan Declarative Shadow DOM, Anda sudah siap. Anda dapat membuat shadow root hanya dengan menggunakan HTML.

Root Bayangan Declaratif adalah elemen <template> dengan atribut shadowroot. Ini terdeteksi oleh parser HTML dan segera 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 dalam hierarki DOM ini:

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

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

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

Dan lainnya

Dan tentu 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. Jika Anda belum menyiapkan pengalihan otomatis dari HTTP ke HTTPS, sekarang adalah waktu yang tepat untuk melakukannya.

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

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 90.

Langganan

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

Saya Pete LePage, dan segera setelah Chrome 91 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!

Salam khusus

Saya sangat senang saat merekam episode bertema 1990-an Baru di Chrome. Terima kasih banyak kepada Sean Meehan atas idenya dan karena telah menyatukan orang-orang luar biasa yang membantu membuka time warp hingga 1990.

Desain GDS

  • Fola Akinola
  • Ikan Derek
  • Christopher Bodel
  • Nick Krusick
  • Chris Walker

Desain Suara & Musik Tambahan

  • Bryan Gilang

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