Menu tambahan

Podcast CSS - 034: Tambahan

Jika konten melebihi induknya, ada banyak opsi terkait cara Anda menanganinya. Anda dapat men-scroll untuk menambahkan ruang tambahan, memotong tepi yang meluber, menunjukkan batas dengan elipsis, dan banyak lagi. Overflow sangat penting untuk dipertimbangkan saat mengembangkan aplikasi ponsel dan berbagai ukuran layar.

Ada dua opsi penyesuaian nilai yang berbeda dalam CSS; text-overflow akan membantu dengan baris teks individual, dan properti overflow akan membantu mengontrol tambahan dalam model kotak.

Tambahan baris tunggal dengan text-overflow

Gunakan properti text-overflow pada elemen apa pun yang berisi node teks, misalnya paragraf, <p>. Ini menentukan bagaimana teks muncul ketika tidak sesuai dengan ruang yang tersedia dari elemen. Semua teks HTML yang dapat dilihat pada halaman ada dalam node teks. Untuk menggunakan text-overflow, Anda memerlukan satu baris teks yang belum digabungkan. Jadi, Anda juga harus menetapkan overflow ke hidden dan memiliki nilai white-space yang mencegah penggabungan.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Menggunakan properti tambahan

Properti tambahan ditetapkan pada sebuah elemen untuk mengontrol apa yang terjadi ketika turunannya memerlukan lebih banyak ruang daripada yang disediakan. Hal ini dapat dilakukan secara sengaja, seperti di peta interaktif seperti Google Maps, saat pengguna menggeser gambar besar yang diklip ke ukuran tertentu. Bisa juga secara tidak sengaja seperti di aplikasi obrolan di mana pengguna mengetik pesan panjang yang tidak muat dalam gelembung teks.

Anda dapat menganggap tambahan ini dalam dua bagian. Elemen induk memiliki ruang yang terbatas dan tidak akan berubah. Anda dapat menganggap ini sebagai jendela. Elemen turunan adalah konten yang menginginkan lebih banyak ruang dari induknya. Anda dapat menganggap ini sebagai apa yang Anda lihat melalui jendela. Mengelola tambahan akan membantu memandu cara jendela membingkai konten ini.

Men-scroll pada sumbu vertikal dan horizontal

Properti overflow-y mengontrol tambahan fisik di sepanjang sumbu vertikal area pandang perangkat sehingga dapat men-scroll ke atas dan ke bawah.

Kontrol properti overflow-x menambahkan di sepanjang sumbu horizontal area pandang perangkat sehingga Anda dapat men-scroll ke kiri dan ke kanan.

Properti logika untuk arah scroll

Properti overflow-inline dan overflow-block menetapkan tambahan berdasarkan arah dokumen dan mode penulisan.

Singkatan overflow

Singkatan overflow menetapkan gaya overflow-x dan overflow-y dalam satu baris:

overflow: hidden scroll;

Jika dua kata kunci ditentukan, yang pertama berlaku untuk overflow-x dan yang kedua berlaku untuk overflow-y. Jika tidak, overflow-x dan overflow-y akan menggunakan nilai yang sama.

Nilai

Mari kita pelajari lebih lanjut nilai dan kata kunci yang tersedia untuk properti overflow.

overflow: visible (default)

Tanpa menetapkan properti, overflow: visible adalah nilai default untuk web. Hal ini memastikan bahwa konten tidak pernah disembunyikan secara tidak sengaja dan mengikuti prinsip utama "jangan pernah menyembunyikan konten" atau "tata letak yang aman dari tata letak yang akurat".

overflow: hidden

Dengan konten overflow: hidden diklip ke arah yang ditentukan, dan tidak ada scrollbar yang disediakan untuk menampilkannya.

overflow: scroll

overflow: scroll memungkinkan scrollbar untuk memungkinkan pengguna men-scroll konten. Meskipun konten saat ini tidak melebihi batas, scrollbar akan ada. Ini adalah cara yang bagus untuk mengurangi pergeseran tata letak mendatang jika penampung dapat di-scroll di masa mendatang berdasarkan, misalnya, pada perubahan ukuran, dan mempersiapkan pengguna secara visual untuk area yang dapat di-scroll.

overflow: clip

Seperti overflow: hidden, konten dengan overflow: clip dipotong ke kotak padding elemen. Perbedaan antara clip dan hidden adalah kata kunci clip juga melarang semua scroll, termasuk scroll terprogram.

overflow: auto

Terakhir, nilai yang paling umum digunakan, overflow: auto. Hal ini menghormati preferensi pengguna dan menampilkan scrollbar jika diperlukan, tetapi menyembunyikannya secara default, dan memberikan tanggung jawab untuk men-scroll ke pengguna dan browser.

Scroll dan tambahan

Banyak dari perilaku overflow ini memperkenalkan scrollbar, tetapi ada beberapa perilaku dan properti scroll spesifik yang dapat membantu Anda mengontrol scroll di penampung tambahan.

Scroll dan aksesibilitas

Penting untuk memastikan bahwa area yang dapat di-scroll dapat menerima fokus sehingga pengguna keyboard dapat menekan tab ke kotak, lalu gunakan tombol panah untuk men-scroll.

Untuk mengizinkan kotak scroll menerima fokus, tambahkan tabindex="0", nama dengan atribut aria-labelledby, dan atribut role yang sesuai. Contoh:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

CSS kemudian dapat digunakan untuk menunjukkan bahwa kotak memiliki fokus, menggunakan properti outline untuk memberikan petunjuk visual bahwa kotak kini dapat di-scroll.

Dalam artikel Menggunakan CSS untuk Menerapkan Aksesibilitas, Adrian Roselli menunjukkan cara CSS dapat membantu mencegah regresi aksesibilitas. Misalnya, untuk hanya mengaktifkan scroll dan menambahkan indikator fokus jika atribut yang benar digunakan. Aturan berikut hanya akan membuat kotak dapat di-scroll jika memiliki atribut tabindex, aria-labelledby, dan role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Pemosisian scrollbar dalam model kotak

Scroll bar mengambil ruang dalam kotak padding dan dapat bersaing untuk mendapatkan ruang jika inline dan bukan overlaid. Modul model kotak lebih memperluas potensi sumber pergeseran tata letak ini.

root-scroller vs implicit-scroller

Anda mungkin melihat bahwa beberapa scroller memiliki perilaku pull-to-refresh dan perilaku khusus lainnya, terutama saat mengembangkan untuk aplikasi seluler dan hybrid. Perilaku scroll ini terjadi pada scroller root. Hanya ada satu scroller root di halaman. Secara default, documentElement adalah scroller root halaman. Namun, dengan mengubah elemen yang merupakan scroller root, perilaku khusus dapat diterapkan ke scroller selain documentElement. Kita menyebut scroller baru ini sebagai scroller root implisit.

Untuk membuat scroller root, Anda dapat menggunakan sesuatu yang disebut promosi scroller dengan memosisikan penampung sebagai tetap, memastikan penampung tersebut mencakup seluruh area pandang dan berada di indeks z di bagian atas dengan scroller. Coba scroller root vs scroller implisit bertingkat di sini.

perilaku scroll

scroll-behavior memungkinkan Anda memilih untuk menggunakan scroll yang dikontrol browser ke elemen. Tindakan ini memungkinkan Anda menentukan cara penanganan navigasi dalam halaman seperti .scrollTo() atau link.

Hal ini sangat berguna saat digunakan dengan prefers-reduced-motion untuk menentukan perilaku scroll berdasarkan preferensi pengguna.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

perilaku overscroll

Jika Anda pernah mencapai akhir overlay modal, kemudian terus men-scroll dan membuat halaman di belakang overlay berpindah, ini adalah rantai scroll, atau gelembung naik ke container scroll induk. Properti overscroll-behavior memungkinkan Anda mencegah scroll tambahan bocor ke penampung induk (disebut scroll chaining).

Menguji pemahaman Anda

Uji pengetahuan Anda tentang overflow

Referensi

Luapan dan Kebocoran Data di CSS dari Smashing Magazine