Dapatkan info terbaru tentang beberapa fitur menarik di CSS modern.
Ada banyak hal menarik yang terjadi di CSS saat ini—dan banyak di antaranya sudah didukung di browser saat ini. Diskusi kami di CDS 2019, yang dapat Anda tonton di bawah, membahas beberapa fitur baru dan mendatang yang menurut kami perlu diperhatikan.
Postingan ini berfokus pada fitur yang dapat Anda gunakan saat ini, jadi pastikan Anda menyimak pembahasan yang lebih mendalam tentang fitur mendatang seperti Houdini. Anda juga dapat menemukan demo untuk semua fitur yang kita bahas di halaman CSS@CDS.
Daftar Isi
- Snap Scroll
:focus-within
- Kueri Media Level 5
- Properti logis
position: sticky
backdrop-filter
:is()
gap
- CSS Houdini
- Kelebihan air
Scroll Snap
Snap Scroll memungkinkan Anda menentukan titik snap saat pengguna men-scroll konten secara vertikal, horizontal, atau keduanya. Fitur ini menawarkan inersia dan deselerasi scroll bawaan, serta diaktifkan dengan sentuhan.
Kode contoh ini menyiapkan scroll horizontal dalam elemen <section>
dengan titik snap yang sejajar dengan sisi kiri elemen <picture>
turunan:
section {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
section > picture {
scroll-snap-align: start;
}
Berikut caranya:
- Pada elemen
<section>
induk,overflow-x
disetel keauto
untuk memungkinkan scroll horizontal.overscroll-behavior-x
disetel kecontain
agar elemen induk tidak di-scroll saat pengguna mencapai batas area scroll elemen<section>
. (Hal ini tidak sepenuhnya diperlukan untuk snap, tetapi biasanya ini merupakan ide yang bagus.)scroll-snap-type
disetel kex
—untuk pengepasan horizontal—danmandatory
—untuk memastikan area pandang selalu dipaskan ke titik snap terdekat.
- Pada elemen
<picture>
turunan,scroll-snap-align
disetel untuk memulai, yang menetapkan titik snap di sisi kiri setiap gambar (dengan asumsidirection
disetel keltr
).
Dan berikut ini demo langsung:
Anda juga dapat melihat demo untuk snap scroll vertikal dan snap scroll matriks.
:focus-within
:focus-within
mengatasi masalah aksesibilitas yang sudah lama ada: ada banyak kasus ketika memfokuskan elemen turunan harus memengaruhi penyajian elemen induk sehingga UI dapat diakses oleh pengguna teknologi pendukung.
Misalnya, jika Anda memiliki menu dropdown dengan beberapa item, menu tersebut harus tetap terlihat saat item mana pun sedang difokuskan. Jika tidak, menu akan hilang untuk pengguna keyboard.
:focus-within
memberi tahu browser untuk menerapkan gaya saat fokus berada pada elemen turunan dari elemen yang ditentukan. Kembali ke contoh menu, dengan menyetel :focus-within
pada elemen menu, Anda dapat memastikan elemen tersebut tetap terlihat saat item menu memiliki fokus:
.menu:focus-within {
display: block;
opacity: 1;
visibility: visible;
}
Coba telusuri elemen yang dapat difokuskan dalam demo di bawah ini. Anda akan melihat bahwa menu tetap terlihat saat Anda fokus pada item menu:
Kueri Media Level 5
Kueri media baru memberi kami cara ampuh untuk menyesuaikan pengalaman pengguna aplikasi kami berdasarkan preferensi perangkat pengguna. Pada dasarnya, browser berfungsi sebagai proxy untuk preferensi tingkat sistem yang dapat kita respons dalam CSS menggunakan grup kueri media prefers-*
:
Berikut adalah kueri baru yang menurut kami akan paling menarik minat developer:
- lebih memilih-mengurangi-motion
- prefers-color-skema
- lebih menyukai kontras
- lebih menyukai-mengurangi-transparansi
- warna paksa
- warna terbalik
Kueri ini adalah kemenangan besar untuk aksesibilitas. Sebelumnya, kami tidak memiliki cara untuk mengetahui, misalnya, bahwa pengguna telah menyetel OS mereka ke mode kontras tinggi. Jika ingin memberikan mode kontras tinggi untuk aplikasi web yang tetap sesuai dengan merek Anda, Anda harus meminta pengguna untuk memilihnya dari UI dalam aplikasi Anda. Sekarang Anda dapat mendeteksi setelan kontras tinggi dari OS menggunakan prefers-contrast
.
Satu implikasi menarik dari kueri media ini adalah bahwa kita dapat merancang beberapa kombinasi preferensi pengguna tingkat sistem untuk mengakomodasi berbagai preferensi pengguna dan kebutuhan aksesibilitas. Jika pengguna menginginkan mode gelap dengan kontras tinggi saat berada di lingkungan dengan pencahayaan redup, Anda dapat melakukannya.
Penting bagi Adam bahwa "lebih memilih gerak yang direduksi" tidak diimplementasikan sebagai "tanpa gerakan". Pengguna mengatakan mereka lebih suka gerakan yang lebih sedikit, bukan tidak menginginkan animasi apa pun. Dia menyatakan bahwa gerakan yang dikurangi bukanlah gerakan. Berikut adalah contoh yang menggunakan animasi crossfade saat pengguna memilih gerakan yang dikurangi:
Sifat logika
Properti logis memecahkan masalah yang mendapatkan visibilitas seiring semakin banyak developer yang mengatasi internasionalisasi. Banyak properti tata letak seperti margin
dan padding
mengasumsikan bahasa yang dibaca dari atas ke bawah dan dari kiri ke kanan.
Saat mendesain halaman untuk banyak bahasa dengan berbagai mode penulisan, developer harus menyesuaikan semua properti tersebut satu per satu di berbagai elemen, dan dengan cepat menjadi mimpi buruk untuk pemeliharaan.
Properti logika memungkinkan Anda mempertahankan integritas tata letak di seluruh mode terjemahan dan penulisan. Solusi ini secara dinamis diperbarui berdasarkan urutan semantik konten, bukan pengaturan spasialnya. Dengan properti logis, setiap elemen memiliki dua dimensi:
- Dimensi blok tegak lurus terhadap alur teks dalam baris. (Dalam bahasa Inggris,
block-size
sama denganheight
.) - Dimensi inline paralel dengan alur teks dalam baris. (Dalam bahasa Inggris,
inline-size
sama denganwidth
.)
Nama dimensi ini berlaku untuk semua properti tata letak logis. Jadi, misalnya, dalam bahasa Inggris, block-start
sama dengan top
, dan inline-end
sama dengan right
.
Dengan properti logis, Anda dapat memperbarui tata letak untuk bahasa lain secara otomatis hanya dengan mengubah properti writing-mode
dan direction
untuk halaman Anda, bukan memperbarui lusinan properti tata letak pada setiap elemen.
Anda dapat melihat cara kerja properti logis dalam demo di bawah dengan menetapkan properti writing-mode
pada elemen <body>
ke nilai yang berbeda:
position: sticky
Elemen dengan position: sticky
tetap berada dalam alur blok hingga mulai keluar dari layar,
pada saat mana elemen tersebut berhenti men-scroll dengan bagian halaman lainnya
dan tetap berada pada posisi yang ditentukan oleh nilai top
elemen.
Ruang yang dialokasikan untuk elemen tersebut tetap berada dalam alur,
dan elemen akan kembali ke elemen tersebut saat pengguna men-scroll kembali ke atas.
Pemosisian melekat memungkinkan Anda membuat banyak efek bermanfaat yang sebelumnya memerlukan JavaScript. Untuk menunjukkan beberapa kemungkinan, kami telah membuat beberapa demo. Setiap demo menggunakan sebagian besar CSS yang sama dan hanya sedikit menyesuaikan markup HTML untuk membuat setiap efek.
Tumpukan Melekat
Dalam demo ini, semua elemen melekat memiliki container yang sama. Artinya, setiap elemen melekat akan bergeser ke elemen sebelumnya saat pengguna men-scroll ke bawah. Elemen-elemen melekat memiliki posisi macet yang sama.
Slide Melekat
Di sini, elemen melekat adalah sepupu. (Artinya, orang tua mereka adalah saudara kandung.) Saat elemen melekat menyentuh batas bawah penampungnya, elemen tersebut akan bergerak ke atas bersama penampung, sehingga menciptakan kesan bahwa elemen melekat yang lebih rendah mendorong elemen yang lebih tinggi. Dengan kata lain, mereka tampak bersaing untuk posisi yang macet.
Desperado Lengket
Seperti {i>Sticky Slide<i}, elemen melekat dalam demo ini adalah sepupu. Namun, kolom tersebut telah ditempatkan dalam penampung yang ditetapkan ke tata letak petak dua kolom.
backdrop-filter
Properti backdrop-filter
memungkinkan Anda menerapkan efek grafis ke area di belakang elemen, bukan ke elemen itu sendiri. Cara ini menghasilkan banyak efek keren yang sebelumnya hanya dapat dicapai dengan menggunakan peretasan CSS dan JavaScript yang rumit, dan hanya dapat dikerjakan dengan satu baris CSS.
Misalnya, demo ini menggunakan backdrop-filter
untuk memburamkan gaya OS:
Kami sudah memiliki postingan bagus tentang backdrop-filter
, jadi pergilah ke sana untuk mengetahui info selengkapnya.
:is()
Meskipun class pseudo :is()
sebenarnya sudah berusia lebih dari sepuluh tahun, tetapi belum mendapatkan manfaat sebanyak yang kami kira. Fungsi ini mengambil daftar pemilih yang dipisahkan koma sebagai argumennya dan cocok dengan semua pemilih dalam daftar tersebut. Fleksibilitas tersebut membuatnya sangat berguna dan dapat mengurangi jumlah CSS yang Anda kirimkan secara signifikan.
Berikut contoh ringkas:
button.focus,
button:focus {
…
}
article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
…
}
/* selects the same elements as the code above */
button:is(.focus, :focus) {
…
}
article > :is(h1,h2,h3,h4,h5,h6) {
…
}
gap
Tata letak petak CSS telah memiliki gap
(sebelumnya grid-gap
) selama beberapa waktu. Dengan menentukan spasi internal elemen penampung, bukan spasi di sekitar elemen turunan, gap
akan menyelesaikan banyak masalah tata letak yang umum. Misalnya, dengan gap, Anda tidak perlu khawatir tentang margin pada elemen turunan yang menyebabkan spasi kosong yang tidak diinginkan di sekitar tepi elemen yang memuatnya:
Kabar yang lebih baik lagi: gap
akan hadir di flexbox, yang menghadirkan semua manfaat spasi yang sama seperti yang dimiliki grid:
- Hanya ada satu deklarasi spasi, bukan banyak.
- Tidak perlu menetapkan konvensi untuk project Anda tentang elemen turunan mana yang harus memiliki spasi—elemen yang memuatnya memiliki spasi.
- Kode ini lebih mudah dipahami daripada strategi lama seperti burung hantu yang dilobotom.
Video berikut menunjukkan manfaat menggunakan satu properti gap
untuk dua elemen, satu dengan tata letak petak dan satu lagi dengan tata letak fleksibel:
Saat ini, hanya FireFox yang mendukung gap
dalam tata letak fleksibel, tetapi cobalah demo ini untuk melihat cara kerjanya:
Houdini CSS
Houdini adalah rangkaian API tingkat rendah untuk mesin rendering browser yang memungkinkan Anda memberi tahu browser cara menafsirkan CSS kustom. Dengan kata lain, alat ini memberi Anda akses ke Model Objek CSS, yang memungkinkan Anda memperluas CSS melalui JavaScript. Hal ini memiliki beberapa manfaat:
- Dengan demikian, Anda akan memiliki kemampuan yang jauh lebih besar untuk membuat fitur CSS kustom.
- Lebih mudah untuk memisahkan masalah rendering dari logika aplikasi.
- Performanya lebih tinggi daripada polyfill CSS yang saat ini kami lakukan dengan JavaScript karena browser tidak perlu lagi mengurai skrip dan melakukan siklus rendering kedua; kode Houdini diuraikan dalam siklus rendering pertama.
Houdini adalah nama payung untuk beberapa API. Jika Anda ingin mengetahui informasi selengkapnya tentang mereka dan statusnya saat ini, lihat artikel Apakah Houdini Sudah Siap? Dalam diskusi kami, kami membahas Properties and Values API, Paint API, dan Animation Worklet karena saat ini adalah yang paling didukung. Kami dapat dengan mudah menyediakan postingan lengkap untuk setiap API yang menarik ini, tetapi, untuk saat ini, lihat diskusi kami untuk mendapatkan ringkasan dan beberapa demo keren yang mulai memberikan gambaran tentang apa yang dapat Anda lakukan dengan API tersebut.
Menu tambahan
Ada beberapa hal lain yang ingin kami bahas, tetapi kami tidak punya waktu untuk membahasnya secara mendalam. Jadi, kami langsung membahasnya secara cepat.⚡ Jika Anda belum pernah mendengar beberapa fitur ini, pastikan untuk menonton bagian terakhir diskusi ini.
size
: properti yang memungkinkan Anda menetapkan tinggi dan lebar secara bersamaanaspect-ratio
: properti yang menetapkan rasio aspek untuk elemen yang tidak memilikinya secara intrinsikmin()
,max()
, danclamp()
: fungsi yang akan memungkinkan Anda menetapkan batasan numerik pada properti CSS apa pun, bukan hanya lebar dan tinggilist-style-type
adalah properti yang sudah ada, tetapi akan segera mendukung rentang nilai yang lebih luas, termasuk emoji dan SVGdisplay: outer inner
: Propertidisplay
akan segera menerima dua parameter, yang memungkinkan Anda menentukan tata letak luar dan dalam secara eksplisit, bukan menggunakan kata kunci gabungan sepertiinline-flex
.- Wilayah CSS: memungkinkan Anda mengisi area non-persegi panjang yang ditentukan, tempat konten dapat mengalir masuk dan keluar
- Modul CSS: JavaScript dapat meminta modul CSS dan mendapatkan kembali objek kaya yang mudah dijalankan di