Penyesuaian kolom CSS

Satu baris kode untuk menentukan ukuran elemen secara otomatis dengan konten yang dapat diedit.

Adam Argyle

Tanpa field-sizing, untuk membuat kolom input dengan ukuran yang tepat, Anda harus menebak ukuran rata-rata input kolom teks atau menggunakan JavaScript untuk menghitung karakter dan meningkatkan tinggi atau lebar elemen saat pengguna memasukkan teks. Dengan kata lain, hal ini tidak mudah, dan rentan error saat mencoba mengikuti konten yang dimasukkan pengguna ke dalam input.

Dengan field-sizing, Anda memerlukan satu baris CSS untuk memungkinkan pengukuran berdasarkan konten. Gaya penskalaan berbasis konten ini juga berfungsi untuk lebih dari textarea.

textarea, select, input {
  field-sizing: content;
}

Dukungan Browser

• 123
• 123
• x
• x

Sumber

Link cepat

Spesifikasi | Penjelasan

Suka video pendek?

Wes Bos dan Jhey masing-masing memiliki video yang bagus di Twitter yang memperkenalkan field-sizing kepada Anda.

Elemen mana yang terpengaruh oleh ukuran kolom?

Berikut adalah daftar elemen <form> yang digunakan field-sizing, dengan ringkasan efek yang dihasilkannya pada setiap elemen.

<textarea>

Input diciutkan ke min-inline-size atau agar sesuai dengan placeholder.

Saat pengguna mengetik, input akan bertambah dalam arah inline hingga mencapai ukuran inline maksimum, pada saat itu teks akan digabungkan dan ukuran blok input akan bertambah agar sesuai dengan baris baru.

<select> dan <select multiple>

Elemen pilih akan menyusut agar sesuai dengan opsi yang dipilih.

Pilihan dengan atribut multiple akan bertambah untuk menyesuaikan opsi terluas dan setinggi yang diperlukan agar sesuai dengan jumlah opsi.

<input type="text">, <input type="email">, dan <input type="number">

Input diciutkan menjadi min-inline-size atau agar sesuai dengan placeholder.

Saat pengguna mengetik, input akan bertambah ke arah inline hingga mencapai max-inline-size, yang pada akhirnya akan memberikan klip tambahan nilai input.

<input type="file">

Input diciutkan ke tombol dan teks nama file yang telah diisi sebelumnya.

Setelah mengupload file, input akan menjadi selebar tombol plus teks nama file.

Melihat, menguji, dan membandingkan hasil

Berikut adalah contoh interaktif dan minimal dari perilaku sebelum dan sesudah setiap elemen formulir, seperti yang terpengaruh oleh field-sizing.

Coba di Codepen

Melihat lebih dekat

Saat menggunakan [placeholder], placeholder akan menjadi konten. Hal ini telah disebutkan sebelumnya, tetapi disebut di sini karena penting untuk diketahui saat menata gaya formulir. Placeholder panjang atau pendek akan mengubah ukuran intrinsik input dengan field-sizing: content.

Coba di Codepen

Penanganan gaya kosong dan yang meluap

Menggunakan field-sizing berarti Anda harus melakukan beberapa pekerjaan tambahan. Ahmad Shadeed menyebutnya "CSS defensif", dengan tujuan tidak selalu menjelaskan secara tepat bagaimana sesuatu harus berperilaku atau terlihat, tetapi untuk melindunginya agar tidak masuk ke dalam status visual yang tidak diinginkan. Sebelumnya, input memiliki ukuran tetap yang cukup, tetapi setelah menerapkan field-sizing: content, input dapat menjadi terlalu kecil atau terlalu besar.

Gaya berikut adalah titik awal yang baik. Elemen ini membantu elemen tidak diperkecil menjadi kotak yang terlalu kecil dan juga, dalam kasus textarea, tidak menjadi terlalu besar.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

CSS ini menggunakan unit relatif untuk ukuran. Unit lh baru sangat cocok untuk ukuran blok dan ch berfungsi baik untuk ukuran inline.

Berapa nilai default ukuran kolom?

Nilai default field-sizing adalah fixed, dan hanya menerima dua nilai fixed atau content.