Tutorial CSS / Memeriksa CSS Responsif: Lebar, Zoom, dan Navigasi Keyboard

CSS responsif harus tetap dapat digunakan pada berbagai lebar viewport, tingkat zoom, dan kondisi input. Periksa konten yang terpotong, pengguliran halaman yang tidak diinginkan, kontrol yang tersembunyi, dan fokus keyboard yang tidak terlihat, alih-alih hanya mengandalkan preview berukuran ponsel saja.

Siapkan halaman untuk pemeriksaan responsif

Ukuran fleksibel, media query, dan rasio gambar yang dipelajari pada pelajaran sebelumnya dikumpulkan dalam satu halaman. Jika Anda menyimpan kode berikut sebagai responsive-check.html, Anda dapat melihat menu, kartu, gambar, string panjang, dan formulir input secara bersamaan. Gambar disertakan dalam file dan tidak memerlukan pustaka atau server terpisah.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

Halaman ini awalnya dibuat agar tidak memiliki overflow horizontal. Pada latihan berikutnya, kita akan menemukan penyebabnya dengan menambahkan dan menghapus CSS yang menyebabkan kesalahan satu per satu. Jika Anda menyalin file asli dan membiarkannya sebagai responsive-check-original.html, mudah untuk mengembalikannya jika Anda secara tidak sengaja mengubah berbagai properti. Pengiriman formulir adalah contoh yang tidak dikirim ke server penyimpanan dan menggunakan alamat tes yang disarankan sebagai pengganti informasi pribadi yang sebenarnya.

Uji berbagai lebar dan batas breakpoint

Di Edge, buka DevTools, aktifkan emulasi perangkat, dan masukkan lebar di mode Responsif. Pintasan default Windows adalah F12 atau Ctrl+Shift+I untuk DevTools dan Ctrl+Shift+M untuk emulasi perangkat. Label dan posisi bilah alat dapat bervariasi menurut versi; lihat panduan emulasi perangkat Microsoft Edge. Bandingkan lebar tepat di bawah dan di atas setiap kondisi yang dijelaskan dalam Media Query CSS dan Titik Henti Berdasarkan Konten.

1. Pada 320px dan 390px, periksa apakah menu membentang ke beberapa baris dan apakah gambar serta kotak input muat di dalam area konten. Gulir sampai ke bawah dan periksa pemotongan teks serta pengguliran horizontal di seluruh halaman.
2. Perlahan-lahan tingkatkan lebar dan periksa area di mana kartu terlalu sempit atau ada ruang yang tidak perlu di antara menu. Jangan berhenti setelah memilih beberapa ukuran perangkat saja.
3. Contoh ini beralih di 42rem. Dengan ukuran font awal 16px, bandingkan 671px, 672px, dan 673px: 671px seharusnya memiliki satu kolom kartu, sedangkan 672px dan 673px seharusnya memiliki dua.
4. Pada layar yang lebih lebar seperti 1365px dan 1920px, periksa apakah lebar teks maksimum tetap terjaga dan barisnya tidak terlalu panjang. Selain emulasi perangkat, periksa operasi, keyboard virtual, dan rotasi layar pada perangkat nyata yang digunakan.

Emulasi perangkat adalah alat perkiraan yang mengubah lebar dan beberapa kondisi. Ini tidak meniru semua font, kontrol sentuh, keyboard virtual, dan perilaku browser dari perangkat nyata. Kami menyarankan agar Anda memeriksa situasi input di mana keyboard virtual muncul di bagian bawah layar pada perangkat sebenarnya.

Memisahkan perubahan zoom browser dan ukuran teks

Saat zoom browser meningkat untuk seluruh halaman, lebar viewport yang dapat digunakan CSS juga mungkin berubah. Zoom masuk dengan Ctrl dan + di Windows, dan kembali ke pembesaran default dengan Ctrl+0. Mengatur ukuran font atau memperbesar hanya font adalah kondisi untuk memeriksa secara terpisah hubungan antara teks dan kotak. Eksperimen dengan mengubah font-size HTML di CSS tidak boleh dicatat sebagai zoom browser.

1. Catat lebar layar pada skala default di jendela browser yang sebenarnya dan ubah skalanya menjadi 200%. Periksa bahwa teks menu, deskripsi kartu, label, kotak input, dan tombol tidak terpotong atau tumpang tindih.
2. Pastikan konten Anda dapat dibaca pada pembesaran tinggi. Ketika diperbesar 400% berdasarkan lebar 1280 CSS px, ruangnya setara dengan sekitar 320 CSS px, tetapi nilai sebenarnya dapat bervariasi tergantung pada antarmuka browser, bilah gulir, dll.
3. Kembalikan ke skala default dan periksa lagi dengan mengubah pengaturan font browser secara signifikan. Kondisi dan hasil dari mengubah font default, memperbesar halaman, dan memodifikasi CSS dicatat sebagai item terpisah.

Pemeriksaan aksesibilitas mencakup mempertahankan konten dan fungsi ketika teks diperbesar hingga 200% dan menata ulang konten vertikal yang biasa digulirkan dalam skala yang setara dengan 320 piksel CSS tanpa pengguliran dua arah. Konten seperti tabel data atau peta dapat memiliki pengecualian dua dimensi yang dibenarkan, tetapi pengecualian tersebut tidak berlaku secara otomatis untuk seluruh halaman. Untuk detail lebih lanjut, lihat Penjelasan penyesuaian ukuran font W3C, penjelasan reflow W3C beserta pengecualiannya.

Reproduksi dan diagnosis overflow horizontal

Cukup tambahkan deklarasi berikut di bagian bawah CSS asli Anda dan buka pada 390px. Kartu pertama memerlukan setidaknya 40rem sehingga tidak akan muat di layar. Pilih kartu menggunakan pemilihan elemen di alat pengembang dan periksa lebar yang dihitung serta lebar minimum.

.card:first-child { min-width: 40rem; }

Masalah ini mungkin tidak dapat diselesaikan hanya dengan memperkecil kolom Grid. Ini karena item itu sendiri membutuhkan lebar minimum. Jika Anda menghapus deklarasi yang telah Anda tambahkan, itu akan kembali ke min-width: 0 asli. Periksa ulang gulir horizontal dan tampilan kartu pada lebar layar yang sama.

Setelah memulihkan, kali ini cukup tambahkan deklarasi berikut: Periksa di mana identifier yang panjang meluap, dan hapus deklarasi ekstra untuk mengembalikannya ke nilai anywhere. Menempatkan dua masalah sekaligus membuat sulit untuk mengetahui perubahan mana yang menyelesaikannya. Perbedaan antara lebar minimum tetap dan penanganan teks panjang dijelaskan dalam CSS Overflow, Pembungkusan Teks Panjang, dan Ellipsis.

.card { overflow-wrap: normal; }

Anda dapat dengan cepat memeriksa apakah seluruh halaman meluap dengan nilai-nilai di bawah ini di konsol. Jika angka di kanan lebih besar daripada di kiri, itu adalah sinyal untuk mencari penyebabnya. Pemeriksaan ini hanya membandingkan lebar dokumen dan tidak langsung memberi tahu elemen mana yang menyebabkannya; area gulir horizontal yang dimaksud dan elemen tersembunyi juga harus ditentukan secara terpisah.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

Temukan konten yang terpotong oleh tinggi tetap

Dengan versi asli tanpa masalah lebar, cukup tambahkan kode berikut di bagian bawah: Perhatikan bahwa deskripsi atau tautan di bagian bawah kartu pertama terpotong. Kombinasi tinggi tetap dan penyembunyian sangat bermasalah karena teks yang diperbesar atau deskripsi panjang meningkatkan tinggi yang dibutuhkan.

.card:first-child { height: 10rem; overflow: hidden; }

Hapus deklarasi yang Anda tambahkan untuk kembali ke tinggi otomatis berdasarkan konten. Meskipun tujuan desain adalah untuk menyamakan tinggi kartu pendek, hindari memotong informasi. Tinjau alternatif seperti menetapkan tinggi minimum untuk memungkinkan ruang kosong atau menyesuaikan kondisi penempatan, dan periksa lagi untuk kalimat panjang dan kondisi pembesaran. Menyembunyikan scrolling horizontal atau terus-menerus mengurangi ukuran font untuk menyamarkan masalah bukanlah pilihan pertama untuk alasan yang sama.

Periksa navigasi keyboard dan catat hasilnya

Setelah membuka halaman baru, gunakan Tab untuk bergerak ke menu, tautan kartu, kolom input email, dan tombol secara berurutan. Bergerak mundur dengan Shift+Tab dan pastikan batas fokus terlihat. Pastikan navigasi ke elemen di luar layar menggulir dengan benar dan tidak ada menu tetap atau elemen lain yang sepenuhnya menghalangi fokus. Jika Anda mengubah urutan visual menggunakan CSS, pastikan tidak bertentangan dengan urutan baca/keyboard HTML.

Tabel ini adalah contoh bagaimana mencatat dan hasil inspeksi aktual diverifikasi serta diisi di setiap lingkungan. Bahkan ketika mencatat bahwa tidak ada masalah, Anda perlu mencatat kondisi pengujiannya sehingga dapat dibandingkan dengan perubahan berikutnya. Dengan memeriksa secara terpisah lebar, pembesaran, konten, dan operasi keyboard serta menguji ulang kondisi kegagalan asli setelah perbaikan, Anda dapat mengurangi masalah yang mudah terlewatkan jika hanya melihat satu layar.