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 denganoverflow: clip
dipotong ke kotak padding elemen. Perbedaan antaraclip
danhidden
adalah kata kunciclip
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
Teks luapan dan luapan elemen sama?
Properti overflow
menerima 2 kata kunci, kata kunci pertama adalah untuk sumbu mana?
Ruang mana dalam model kotak yang digunakan scrollbar saat ditampilkan dan menjadi inline?
overlay
akan tumpang-tindih dengan padding, dan saat dalam mode inline
akan ditambahkan ke padding.Untuk menangkap momentum ekstra dari scroll dalam scroller implisit bertingkat, properti mana yang akan Anda gunakan?
scroll-behavior
scroll-hint
overscroll-behavior
contain
akan menangkap scroll.scroll-padding
overscroll-effect