Gaya web generasi berikutnya

Dapatkan info terbaru tentang beberapa fitur menarik di CSS modern.

Adam Argyle

Una Kravets

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 ke auto untuk memungkinkan scroll horizontal.
  • overscroll-behavior-x disetel ke contain 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 ke x—untuk pengepasan horizontal—dan mandatory—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 asumsi direction disetel ke ltr).

Dan berikut ini demo langsung:

Anda juga dapat melihat demo untuk snap scroll vertikal dan snap scroll matriks.

Catatan: Meskipun scroll snap mendukung snap vertikal, berhati-hatilah saat menggunakannya pada tingkat halaman karena dalam beberapa kasus pengguna mungkin merasa kontrol diambil dari pengguna. Biasanya yang terbaik adalah menerapkan snap ke komponen di laman Anda, bukan laman itu sendiri.

: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:

Catatan: Di Chrome Canary, Anda dapat menguji CSS yang menggunakan prefers-reduced-motion atau prefers-color-scheme dengan memilih setelan yang sesuai di panel samping Rendering DevTools. Untuk mengakses Rendering, buka Menu Command dan jalankan perintah Show Rendering.

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 dengan height.)
• Dimensi inline paralel dengan alur teks dalam baris. (Dalam bahasa Inggris, inline-size sama dengan width.)

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 bersamaan
• aspect-ratio: properti yang menetapkan rasio aspek untuk elemen yang tidak memilikinya secara intrinsik
• min(), max(), dan clamp(): fungsi yang akan memungkinkan Anda menetapkan batasan numerik pada properti CSS apa pun, bukan hanya lebar dan tinggi
• list-style-type adalah properti yang sudah ada, tetapi akan segera mendukung rentang nilai yang lebih luas, termasuk emoji dan SVG
• display: outer inner: Properti display akan segera menerima dua parameter, yang memungkinkan Anda menentukan tata letak luar dan dalam secara eksplisit, bukan menggunakan kata kunci gabungan seperti inline-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