Yang baru di UI web

Bramus
Una Kravets

Dipublikasikan: 1 Juli 2026

Di Google I/O 2026, kami membagikan serangkaian info terbaru yang akan hadir di platform UI Web. Mulai dari menghormati preferensi pengguna hingga menerapkan interaksi alami, memandu navigasi, mengurangi kekacauan, dan beradaptasi dengan berbagai faktor bentuk, web modern menawarkan alat yang sangat canggih kepada developer untuk membangun pengalaman pengguna yang berkualitas tinggi dan terasa nyata.

Berikut adalah ringkasan komprehensif dari semua fitur yang disebutkan dalam sesi "Yang baru di UI web", yang disusun berdasarkan serangkaian prinsip UX inti kami.

Bagian 1: Menghormati preferensi pengguna

Personalisasi sangat penting untuk kegunaan web. API web modern mempermudah penyesuaian otomatis dengan pilihan tingkat sistem pengguna. Meskipun konsep ini terasa mendasar dan telah kita bahas selama bertahun-tahun, sebenarnya ada beberapa API dan pola baru yang mempermudah pembuatan personalisasi dinamis ini.

1. contrast-color()

Fungsi CSS contrast-color() mengambil warna input dan otomatis menampilkan black atau white, bergantung pada mana yang memiliki kontras lebih tinggi terhadap warna input berdasarkan algoritma kontras minimum WCAG AA. Hal ini memastikan keterbacaan tanpa harus mempertahankan pasangan warna teks dan latar belakang secara manual.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Pelajari lebih lanjut contrast-color()

2. light-dark()

Fungsi CSS light-dark() memungkinkan Anda menentukan dua nilai (warna atau gambar) yang berbeda untuk suatu properti, satu untuk mode terang dan satu untuk mode gelap, dalam satu deklarasi. Browser otomatis memilih warna kontras yang benar berdasarkan color-scheme aktif (yang harus ditetapkan ke light, dark, atau light dark di :root atau induk).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Yang baru di light-dark() adalah bahwa light-dark() tidak lagi terbatas hanya pada nilai warna. Mulai Chrome 150, kini juga menerima dua nilai gambar.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Fungsi kustom CSS (@function)

Aturan @function memungkinkan Anda menentukan fungsi kustom yang dapat digunakan kembali langsung dalam CSS native. Fungsi ini dapat menerima properti kustom cakupan lokal sebagai argumen, melakukan penghitungan, dan menampilkan nilai menggunakan deskriptor result, sehingga mengurangi kebutuhan akan praprosesor.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Jika digabungkan dengan kueri gaya penampung dan fungsi CSS if(), Anda dapat membuat fungsi --light-dark() kustom yang berfungsi dengan jenis nilai apa pun, seperti yang ditunjukkan dalam demo ini:

4. Kueri gaya penampung

Sebagai bagian dari Kueri Container CSS, kueri gaya memungkinkan developer menerapkan gaya ke elemen turunan berdasarkan nilai properti kustom yang dihitung dari container induk, sehingga memungkinkan komponen dinamis tanpa memerlukan penampungan ukuran eksplisit.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Dalam demo ini, kueri gaya digunakan untuk menetapkan warna berdasarkan properti kustom --theme.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Pelajari kueri gaya lebih lanjut

5. Fungsi if() CSS

Fungsi CSS if() menghadirkan logika kondisional inline langsung ke nilai properti CSS. Fungsi ini mengevaluasi serangkaian kondisi yang dipisahkan dengan titik koma (kueri gaya, kueri media, atau kueri fitur) dan memungkinkan Anda menetapkan nilai berbeda yang terkait dengan kondisi benar pertama, dengan penggantian else opsional.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

Dalam demo sebelumnya, fungsi if() digunakan untuk membuat dasar warna kontras bertema berdasarkan output fungsi contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

Fungsi CSS at-rule() untuk digunakan dengan @supports memungkinkan developer mendeteksi fitur apakah browser mengenali aturan @ tertentu, seperti @starting-style atau @view-transition.

Misalnya, untuk memeriksa dukungan @function, gunakan seperti berikut:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Penggunaan at-rule() hanya memungkinkan pemeriksaan dukungan dasar dari aturan @ itu sendiri dan tidak dapat digunakan untuk menguji deskriptor, pembuka, atau blok aturan @ lengkap tertentu. Ada solusi yang tersedia untuk mendeteksi fitur seperti kueri yang di-anchor atau kueri gaya.

Pelajari lebih lanjut @supports at-rule

7. <meta name="text-scale">

Tag meta HTML text-scale mengikutsertakan halaman agar ukuran font awal elemen root <html> diskalakan secara proporsional dengan setelan skala teks tingkat OS dan browser, yang sangat penting untuk platform seluler.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Jika diterapkan, ukuran font pada elemen html kini ditentukan oleh sistem operasi, sehingga Anda tidak perlu menetapkan font-size dasar. Jika Anda kemudian menggunakan panjang dengan unit relatif seperti em dan rem, nilai piksel yang dihitung didasarkan pada ukuran font dasar tersebut.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Dari tab rendering di DevTools, Anda dapat mengemulasi ukuran font pilihan. Gunakan dropdown untuk mengubah nilai.

Pelajari lebih lanjut <meta name=text-scale>

Bagian 2: Menerapkan interaksi alami

Gerakan fisik yang intuitif dan gestur alami adalah kunci untuk membuat pengalaman web terasa setaktil aplikasi native. CSS modern mempermudah Anda mencapainya.

8. Fungsi easing linear()

Fungsi easing linear() memungkinkan Anda membuat kurva transisi kustom yang kompleks (seperti pantulan, pegas, atau overshoot elastis) dengan menginterpolasi secara linear antara jumlah titik progres yang ditentukan tanpa batas.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

Dalam demo berikut, linear() digunakan untuk memberikan kemudahan alami pada dialog saat ditampilkan atau disembunyikan.

Pelajari lebih lanjut linear()

9. @starting-style

Aturan CSS @starting-style menentukan nilai awal untuk properti pada elemen yang ingin Anda transisikan dari saat elemen pertama kali dirender di DOM atau saat display-nya berubah dari none ke nilai yang terlihat, untuk mengaktifkan transisi masuk yang lancar.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Pada demo sebelumnya, parameter ini digunakan untuk menganimasikan <dialog> saat pertama kali terlihat.

10. transition-behavior: allow-discrete

Properti transition-behavior (sering digunakan sebagai allow-discrete dalam singkatan transition) memungkinkan Anda melakukan transisi properti diskrit seperti display atau overlay, sehingga memastikan elemen tetap terlihat selama animasi keluar sebelum disembunyikan.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() dan sibling-count()

Fungsi CSS sibling-index() dan sibling-count() menampilkan bilangan bulat yang masing-masing merepresentasikan posisi berbasis 1 elemen di antara elemen saudaranya dan jumlah total elemen saudaranya. Fungsi ini sangat cocok untuk menghitung penundaan animasi bertahap secara dinamis di CSS tanpa JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Dalam demo ini, isi dialog diatur secara bertahap menggunakan sibling-index() di animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Penutupan ringan dialog (atribut closedby)

Atribut closedby pada elemen <dialog> (dengan nilai any) memungkinkan Anda menggunakan perilaku "tutup ringan" deklaratif, yang secara otomatis menutup dialog modal saat mengklik di luar dialog atau menekan ESC, tanpa memerlukan JavaScript kustom.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Anda dapat mencobanya di demo sebelumnya.

13. corner-shape

Properti singkat corner-shape eksperimental memungkinkan developer mengubah sudut lengkung (dari border-radius) untuk membuat bentuk visual kustom seperti bevel, scoop, notch, atau squircle (melalui superellipse()). Batas, bayangan, dan garis fokus otomatis sesuai dengan bentuknya.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Bagian 3: Menyediakan navigasi terpandu

Memandu perjalanan pengguna membantu mempertahankan konteks dan memahami alur aplikasi, sehingga tidak ada pemuatan ulang yang membingungkan. Anda dapat melakukannya dengan beberapa cara, termasuk dengan transisi tampilan, yang baru-baru ini menerima beberapa update.

14. Transisi tampilan dokumen yang sama

Bagian dari View Transition API, transisi dokumen yang sama menyediakan mekanisme untuk membuat animasi antara status DOM dalam aplikasi satu halaman (SPA) dengan mengambil snapshot dan mentransisikannya menggunakan CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Pelajari lebih lanjut transisi tampilan dalam dokumen yang sama

15. Transisi tampilan lintas dokumen

Memperluas View Transition API ke aplikasi multi-halaman (MPA), sehingga Anda dapat membuat transisi beranimasi yang lancar saat berpindah antar-dokumen yang berbeda dengan mencocokkan elemen dengan view-transition-name yang sama di seluruh halaman.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Pelajari lebih lanjut transisi tampilan lintas dokumen

16. Transisi tampilan cakupan elemen

Diperkenalkan di Chrome 147, transisi tampilan cakupan elemen memungkinkan Anda menjalankan transisi tampilan hanya pada subpohon DOM tertentu (menggunakan element.startViewTransition()) sambil menjaga agar halaman lainnya tetap aktif dan interaktif.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Saat memulai transisi tampilan yang tercakup elemen, transisi akan berjalan secara terpisah: transisi hanya memindai subtree tersebut untuk mencari elemen dengan view-transition-name dan pseudo ::view-transition disisipkan ke root cakupan itu sendiri. Isolasi ini dapat dilakukan berkat penerapan otomatis view-transition-scope: all.

Hal ini memungkinkan beberapa transisi tampilan berjalan secara bersamaan, serta penyesuaian transisi tampilan: saat item dalam daftar ini diacak, Anda juga dapat menukar daftar itu sendiri.

Selain itu, pseudo grup secara otomatis disusun bertingkat dan overflow pseudo grup turunan yang melampirkan akan dipangkas jika diperlukan.

Transisi tampilan yang tercakup sempurna untuk interaksi mikro dan perubahan bentuk stateful dalam halaman, sehingga memberikan lebih banyak konteks kepada pengguna saat ada perubahan visual. Cara ini adalah cara yang bagus untuk meningkatkan kegunaan aplikasi Anda sekaligus meningkatkan tampilan dan nuansanya. Hal-hal kecil ini membuat perbedaan besar.

Pelajari lebih lanjut transisi tampilan cakupan elemen

17. Transisi tampilan dua fase

Ini adalah fitur eksperimental yang langsung memulai transisi tampilan lintas dokumen tanpa menunggu DOM baru siap, pertama-tama bertransisi ke layar kerangka perantara atau memuat UI, sebelum melanjutkan dengan transisi tampilan lintas dokumen.

Pelajari lebih lanjut transisi tampilan dua fase

18. Animasi berbasis scroll

Animasi berbasis scroll menautkan progres animasi CSS secara langsung ke posisi scroll dalam container scroll, sehingga developer dapat membuat antarmuka berbasis scroll seperti efek paralaks yang efisien dan indikator scroll.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Animasi yang dipicu scroll

Fitur baru di Chrome adalah animasi yang dipicu oleh scroll. Animasi yang dipicu scroll memicu animasi CSS berbasis waktu standar saat batas scroll dilewati (menggunakan timeline-trigger untuk menentukan pemicu dan animation-trigger untuk memutarnya), sehingga memberikan alternatif deklaratif untuk IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Mekanisme dasar untuk animasi yang dipicu scroll adalah pemicu linimasa yang aktif atau tidak aktif.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Aktifkan visualizer dalam demo berikut untuk melihat apa yang terjadi: rentang pertama adalah rentang aktivasi dan menentukan kapan pemicu menjadi aktif. Rentang kedua adalah rentang aktif yang menentukan berapa lama rentang tersebut harus tetap aktif.

Pelajari lebih lanjut animasi yang dipicu scroll

20. scroll-target-group: auto

Anda kini dapat membuat scroll-spy CSS native yang secara otomatis menandai link navigasi berdasarkan posisi scroll pengguna. Dengan menyetel scroll-target-group: auto pada daftar navigasi, browser akan otomatis menyetel aria-current="true" dan menerapkan pseudo-class :target-current ke link aktif. :target-current kemudian dapat digunakan untuk menata gaya lebih lanjut pada link aktif.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Pelajari lebih lanjut scroll-spy CSS dengan scroll-target-group

21. Opsi container scrollIntoView()

Metode scrollIntoView() mendapatkan opsi container. Menetapkan target.scrollIntoView({container: 'nearest'}) membatasi scrolling ke scroller induk terdekat, bukan membuatnya muncul ke atas, sehingga mencegah scrolling tingkat halaman yang membingungkan.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Gunakan kotak centang dalam demo ini untuk mengaktifkan dan menonaktifkan opsi:

Pelajari lebih lanjut container: "nearest"

22. Scrolling terprogram yang dapat ditunggu

Semua metode scroll terprogram (seperti scroll(), scrollTo(), dan scrollIntoView()) kini menampilkan Promise. Hal ini memungkinkan developer await penyelesaian animasi scroll lancar sebelum menjalankan logika berikutnya (seperti menambahkan efek sorotan).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Dalam demo berikut, Anda dapat melihat cara kerjanya: elemen pertama-tama di-scroll ke dalam tampilan, lalu efek sorotan ditambahkan ke elemen tersebut.

Bagian 4: Maksimalkan konten, kurangi derau

Salah satu pengalaman web yang paling menjengkelkan adalah saat Anda berharap dapat melihat konten, tetapi terhalang oleh pop-up atau banner yang mengganggu. Prioritaskan area konten dengan menghilangkan kekacauan visual dan batas aplikasi, serta memindahkan tindakan sekunder di belakang UI berlapis.

23. Kueri status scroll (scrolled)

Bagian dari Kueri Penampung CSS, kueri scroll-state memungkinkan Anda menata gaya turunan berdasarkan status scroll penampung (dengan container-type: scroll-state). Kueri scrolled (misalnya, scroll-state(scrolled: bottom)) mendeteksi arah scroll relatif terbaru, sehingga memungkinkan pola seperti "Hidey Bar".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Pelajari pola "Hidey Bar" lebih lanjut

24. Kueri container yang di-anchor

CSS Anchor Positioning mencakup kueri penampung yang di-anchor, yang memungkinkan Anda memeriksa posisi penggantian (misalnya, fallback: bottom atau fallback: flip-block) yang saat ini aktif pada elemen yang diposisikan anchor, sehingga memungkinkan pembaruan dinamis pada gaya elemen yang diposisikan anchor (seperti panah tooltip).

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

Dalam demo berikut, popover yang diposisikan sebagai anchor memosisikan ulang dirinya berdasarkan posisi penggantian dan posisinya di area tampilan menggunakan kueri penampung yang di-anchor. Saat tooltip terbuka di atas pemanggil, tooltip akan dianimasikan dari bawah ke atas, dari sumber. Jika berada di bawah pemanggil, menu akan dianimasikan dari atas ke bawah.

25. CSS border-shape

Properti border-shape memungkinkan Anda menentukan batas non-persegi panjang menggunakan sintaksis bentuk yang sama dengan clip-path. Tidak seperti pemangkasan, border-shape menjaga batas, garis luar, dan bayangan tetap selaras secara visual dengan bentuk kustom. Selain itu, border-shape melampaui kemampuan corner-shape karena border-shape jauh lebih fleksibel.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. Fungsi shape() CSS

Fungsi CSS shape() memungkinkan Anda menentukan jalur geometris kompleks secara inline di CSS. Properti ini dapat digunakan dengan properti seperti clip-path, border-shape, atau shape-outside untuk membuat bentuk organik non-persegi panjang yang dapat digunakan sebagai dasar konten.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Pemosisian lengket per sumbu

Berkat perubahan terbaru dalam spesifikasi overflow yang memungkinkan penampung menjadi scroller hanya untuk satu sumbu, posisi tetap kini dapat melacak dua penampung scroll yang berbeda (satu untuk setiap sumbu) secara bersamaan. Hal ini membuat kolom pertama dan baris atas yang tetap di tempat dalam tabel berfungsi sebagaimana mestinya, bahkan di dalam penampung scroll sumbu tunggal.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Fitur ini tersedia untuk diuji di Chrome 148 dengan tanda Fitur Platform Web Eksperimental diaktifkan.

Pelajari lebih lanjut position: sticky per sumbu

Bagian 5: Menyesuaikan dengan faktor bentuk

Salah satu hal paling berharga tentang web adalah fleksibilitasnya. Pengguna dapat menjelajahi web dari berbagai perangkat, yang masing-masing memiliki mekanisme interaksi sendiri. Tata letak harus beradaptasi secara mendasar dengan perangkat dan metode input, baik keyboard virtual terbuka, atau target sentuh aktif. Dengan mempertimbangkan faktor bentuk saat mendesain untuk web, situs atau aplikasi web Anda akan memiliki sentuhan ekstra dan sesuai dengan ekspektasi pengguna.

28. Gestur scroll berlebih (area yang dapat digeser)

Salah satu contoh penyesuaian dengan faktor bentuk adalah kemampuan untuk menggunakan interaksi berbasis geser dan gestur di web seluler. Anda dapat menggunakan scroller untuk mencapai beberapa efek ini, tetapi pendekatan ini tidak selalu intuitif.

Tim Chrome sedang mengerjakan solusi deklaratif yang diusulkan, dalam diskusi dengan grup komunitas OpenUI, yang memungkinkan Anda membuat area yang dapat digeser dan digerakkan dengan gestur secara native (misalnya, daftar Gmail yang dapat digeser atau menu samping yang dapat ditutup dengan menggeser) menggunakan overscrollcontainer dan pemanggil perintah, yang berfungsi secara alami di seluruh sentuhan dan scroll.

Pelajari lebih lanjut gestur overscroll

29. HTML di Canvas

HTML-in-Canvas API adalah perubahan paradigma besar, yang memungkinkan developer menempatkan elemen DOM nyata di dalam <canvas> (menggunakan atribut layoutsubtree). Elemen ini tetap dapat ditelusuri, diakses, dan mendukung fitur browser seperti isi otomatis, sekaligus memungkinkan shader WebGL/WebGPU berinteraksi dengan elemen tersebut secara native.

Babak kilat

Sekilas tentang beberapa fitur canggih lainnya yang mendorong kemajuan web.

30. Perpindahan yang mempertahankan status DOM (moveBefore())

Metode DOM moveBefore() memungkinkan Anda mengubah induk node DOM (misalnya, memutar video, iframe, atau input yang difokuskan) tanpa menghancurkan statusnya atau memicu pemuatan ulang.

Artinya, video terus diputar, iframe tidak dimuat ulang, animasi CSS tidak dimulai ulang, dan kolom input tetap fokus saat Anda mengubah induknya di seluruh tata letak.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Pelajari lebih lanjut moveBefore()

31. CSS text-fit

text-fit adalah properti CSS eksperimental yang menskalakan ukuran font secara dinamis agar sesuai dengan baris teks secara tepat dengan lebar yang sama persis dengan elemen yang memuatnya (misalnya, text-fit: grow per-line-all).

Pelajari lebih lanjut text-fit

32. CSS text-box (text-box-trim dan text-box-edge)

Properti text-box (dan text-box-trim serta text-box-edge) memangkas ruang vertikal (jarak antarbaris) di atas dan di bawah teks, sehingga memastikan penyelarasan dan pemusatan vertikal yang sempurna.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Pelajari lebih lanjut text-trim

33. Dekorasi celah CSS

Dekorasi jarak CSS menghadirkan column-rule ke tata letak petak dan flexbox, serta memperkenalkan properti row-rule baru, yang memungkinkan developer menata gaya ruang antar-baris dan kolom. Tidak perlu lagi mengutak-atik batas atau elemen semu untuk menata gaya aturan di antara baris dan kolom.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Pelajari lebih lanjut Dekorasi Celah CSS

34. Unit area tampilan yang kompatibel dengan scroll bar (vw, vh, dll.)

Unit area pandang seperti vw dan vh otomatis mengurangi ukuran scrollbar (jika dijamin terlihat, menggunakan overflow-y: scroll atau scrollbar-gutter: stable yang dideklarasikan di :root), sehingga mencegah overflow horizontal yang tidak disengaja saat menyetel elemen ke 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Pelajari lebih lanjut unit viewport yang kompatibel dengan scrollbar

35. Akses JavaScript ke elemen semu

Web API kini mengekspos elemen semu CSS (seperti ::before atau ::after) ke JavaScript.

Anda dapat mengambil instance CSSPseudoElement menggunakan Element.pseudo(type) dan memeriksa elemen semu mana yang memicu peristiwa menggunakan Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Pelajari lebih lanjut CSSPseudoElement

Kesimpulan

Demikian rangkuman kami tentang Yang Baru di UI Web. Kami harap Anda dapat memanfaatkan fitur ini dan membuat beberapa antarmuka yang menarik dengannya. Sampai jumpa tahun depan!