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 {i>browser<i} masa kini! Diskusi kami di CDS 2019, yang dapat Anda tonton di bawah ini, mencakup beberapa fitur baru dan mendatang yang kami pikir harus diperhatikan.

Postingan ini berfokus pada fitur yang dapat Anda gunakan saat ini, jadi pastikan untuk menonton diskusi untuk diskusi yang lebih mendalam tentang fitur-fitur mendatang seperti Houdini. Anda juga dapat menemukan demo untuk semua fitur yang kami diskusikan di Halaman CSS@CDS.

Daftar Isi

• Snap Scroll
• :focus-within
• Kueri Media Level 5
• Properti logika
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS Houdini
• Luapan

Kancing Scroll

Scroll Snap memungkinkan Anda menentukan titik snap saat pengguna men-scroll konten secara vertikal, horizontal, atau keduanya. Widget ini menawarkan inersia dan deselerasi scroll bawaan, serta fitur sentuh yang diaktifkan.

Kode contoh ini menyiapkan scroll horizontal dalam elemen <section> dengan titik snap yang disejajarkan 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 mengizinkan scroll horizontal.
  • overscroll-behavior-x disetel ke contain untuk mencegah elemen induk di-scroll saat pengguna mencapai batas area scroll elemen <section>. (Ini tidak sepenuhnya diperlukan untuk snap, tetapi biasanya merupakan ide bagus.)
  • scroll-snap-type disetel ke x—untuk pengepasan horizontal—dan mandatory—untuk memastikan bahwa area pandang selalu dipaskan ke titik pengepasan terdekat.
• Pada elemen <picture> turunan, scroll-snap-align disetel untuk memulai, yang menyetel titik snap di sisi kiri setiap gambar (dengan asumsi direction disetel ke ltr).

Berikut ini demo langsungnya:

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 saat memfokuskan elemen turunan akan memengaruhi presentasi elemen induk sehingga UI dapat diakses oleh pengguna teknologi pendukung.

Misalnya, jika Anda memiliki menu {i>dropdown<i} dengan beberapa item, menu tersebut akan tetap terlihat saat salah satu item tersebut memiliki fokus. Jika tidak, menu akan hilang untuk pengguna keyboard.

:focus-within memberi tahu browser untuk menerapkan gaya saat fokus berada pada elemen turunan apa pun dari elemen yang ditentukan. Kembali ke contoh menu, dengan menyetel :focus-within pada elemen menu, Anda dapat memastikannya tetap terlihat saat item menu memiliki fokus:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

Cobalah menekan tombol tab pada elemen yang dapat difokuskan dalam demo di bawah ini. Anda akan melihat menu tetap terlihat saat Anda fokus pada item menu:

Kueri Media Level 5

Kueri media baru memberi kami cara canggih untuk menyesuaikan pengalaman pengguna aplikasi kami berdasarkan preferensi perangkat pengguna. Pada dasarnya, browser berfungsi sebagai proxy untuk preferensi tingkat sistem yang dapat kita respons di CSS menggunakan grup kueri media prefers-*:

Berikut ini kueri baru yang menurut kami akan paling disukai developer:

• lebih memilih-mengurangi gerakan
• lebih memilih skema warna
• lebih memilih kontras
• lebih memilih transparansi yang dikurangi
• warna paksa
• warna terbalik

Kueri ini merupakan keuntungan besar untuk aksesibilitas. Sebelumnya, kita tidak memiliki cara untuk mengetahui, misalnya, bahwa pengguna telah menyetel OS-nya 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 mendesain 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 yang remang-remang, Anda dapat melakukannya.

Penting bagi Adam bahwa "lebih memilih gerakan yang dikurangi" tidak diimplementasikan sebagai "tanpa gerakan". Pengguna mengatakan bahwa mereka lebih suka gerakan, bukan berarti mereka tidak menginginkan animasi apa pun. Dia menegaskan bahwa gerakan yang dikurangi bukanlah gerakan. Berikut adalah contoh yang menggunakan animasi crossfade saat pengguna lebih memilih gerakan yang dikurangi:

Sifat logika

Properti logis memecahkan masalah yang telah mendapatkan visibilitas karena semakin banyak developer menangani 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 berbagai bahasa dengan mode penulisan yang bervariasi, developer harus menyesuaikan semua properti tersebut satu per satu di berbagai elemen, yang dengan cepat menjadi mimpi buruk pemeliharaan.

Properti logis memungkinkan Anda mempertahankan integritas tata letak di seluruh mode terjemahan dan penulisan. Fitur ini diperbarui secara dinamis berdasarkan urutan semantik konten, bukan berdasarkan pengaturan spasialnya. Dengan properti logis, setiap elemen memiliki dua dimensi:

• Dimensi blok tegak lurus terhadap aliran teks dalam garis. (Dalam bahasa Inggris, block-size sama dengan height.)
• Dimensi inline adalah paralel dengan alur teks dalam garis. (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 otomatis memperbarui tata letak untuk bahasa lain hanya dengan mengubah properti writing-mode dan direction untuk halaman Anda, bukan memperbarui banyak properti tata letak pada setiap elemen.

Anda dapat melihat cara kerja properti logis dalam demo di bawah ini 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, di mana ia berhenti men-scroll dengan bagian halaman lainnya dan menempel pada posisi yang ditentukan oleh nilai top elemen. Ruang yang dialokasikan untuk elemen itu tetap ada di dalam alur, dan elemen kembali ke sana saat pengguna menggulir kembali ke atas.

Pemosisian melekat memungkinkan Anda membuat banyak efek berguna yang sebelumnya memerlukan JavaScript. Untuk menunjukkan beberapa kemungkinannya, kami telah membuat beberapa demo. Setiap demo menggunakan CSS yang sebagian besar sama dan hanya sedikit menyesuaikan markup HTML untuk membuat efek.

Sticky Stack

Dalam demo ini, semua elemen melekat menggunakan 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 lekatnya adalah sepupu. (Artinya, orang tua mereka adalah saudara kandung.) Saat mencapai batas bawah container-nya, elemen melekat akan bergerak ke atas bersama container, sehingga menimbulkan kesan bahwa elemen melekat yang lebih rendah mendorong elemen yang lebih tinggi ke atas. Dengan kata lain, mereka tampak bersaing untuk posisi yang macet.

Desperado yang Melekat

Seperti {i>Sticky Slide<i}, elemen-elemen melekat dalam demo ini adalah sepupu. Namun, keduanya telah ditempatkan dalam penampung yang disetel 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. Hal ini menciptakan banyak efek keren yang sebelumnya hanya dapat dicapai menggunakan peretasan CSS dan JavaScript yang rumit, yang dapat dilakukan dengan satu baris CSS.

Misalnya, demo ini menggunakan backdrop-filter untuk mendapatkan pemburaman bergaya OS:

Kami sudah memiliki postingan yang bagus tentang backdrop-filter, jadi bukalah untuk mendapatkan info lebih lanjut.

:is()

Meskipun class semu :is() sebenarnya sudah berusia lebih dari sepuluh tahun, class tersebut masih belum terlalu banyak dimanfaatkan menurut kami. Fungsi ini menggunakan daftar pemilih yang dipisahkan koma sebagai argumennya dan cocok dengan semua pemilih dalam daftar tersebut. Fleksibilitas ini membuatnya sangat berguna dan dapat secara signifikan mengurangi jumlah CSS yang Anda kirimkan.

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 jarak internal elemen penampung, bukan jarak di sekitar elemen turunan, gap memecahkan banyak masalah tata letak umum. Misalnya, dengan gap, Anda tidak perlu mengkhawatirkan margin pada elemen turunan yang menyebabkan spasi kosong yang tidak diinginkan di sekitar tepi elemen yang memuatnya:

Kabar baik: gap akan hadir di flexbox, yang menghadirkan semua manfaat pemberian spasi yang sama dengan yang dimiliki petak:

• Ada satu deklarasi spasi, bukan banyak.
• Tidak perlu menetapkan konvensi untuk project Anda tentang elemen turunan mana yang harus memiliki spasi—elemen penampung yang akan memiliki spasinya.
• Kode tersebut lebih mudah dipahami daripada strategi lama seperti burung hantu yang dilobotom.

Video berikut menunjukkan manfaat penggunaan 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 Anda dapat mencoba demo ini untuk melihat cara kerjanya:

Houdini CSS

Houdini adalah kumpulan API tingkat rendah untuk mesin rendering browser yang memungkinkan Anda memberi tahu browser cara menafsirkan CSS kustom. Dengan kata lain, Anda dapat mengakses Model Objek CSS, sehingga Anda dapat memperluas CSS melalui JavaScript. Hal ini memiliki beberapa manfaat:

• Hal ini memberi Anda lebih banyak kemampuan untuk membuat fitur CSS kustom.
• Lebih mudah untuk memisahkan masalah rendering dari logika aplikasi.
• Performanya lebih baik daripada polyfill CSS yang saat ini kita 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 umum untuk beberapa API. Jika Anda ingin mengetahui informasi selengkapnya tentang status dan statusnya saat ini, baca artikel Is Houdini Ready Yet? Dalam diskusi kita, kita telah membahas Properties and Values API, Paint API, dan Animation Worklet karena saat ini keduanya paling didukung. Kita dapat dengan mudah mendedikasikan postingan lengkap untuk setiap API menarik ini, tetapi, untuk saat ini, lihat pembahasan kami untuk mendapatkan ringkasan dan beberapa demo keren yang mulai memberikan gambaran tentang apa yang dapat Anda lakukan dengan API.

Tambahan

Ada beberapa hal lain di cakrawala yang ingin kami diskusikan tetapi tidak punya waktu untuk membahasnya secara mendalam, jadi kami membahasnya secara singkat.⚡ Jika Anda belum pernah mendengar beberapa fitur ini, pastikan untuk menonton bagian terakhir dari pembahasan!

• size: properti yang memungkinkan Anda menetapkan tinggi dan lebar secara bersamaan
• aspect-ratio: properti yang menetapkan rasio aspek untuk elemen yang tidak memiliki rasio aspek secara intrinsik
• min(), max(), dan clamp(): fungsi yang akan memungkinkan Anda menetapkan batasan numerik pada properti CSS, bukan hanya lebar dan tinggi
• list-style-type adalah properti yang sudah ada, tetapi dalam waktu dekat akan 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 bagian luar dan dalam secara eksplisit, bukan menggunakan kata kunci gabungan seperti inline-flex.
• Wilayah CSS: memungkinkan Anda mengisi area non-persegi panjang tertentu tempat konten dapat mengalir ke dalam dan ke luar
• Modul CSS: JavaScript akan dapat meminta modul CSS dan mendapatkan kembali objek yang kaya sehingga mudah untuk menjalankan operasi di