Penyesuaian kolom CSS

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

Adam Argyle

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

Dengan field-sizing, Anda memerlukan satu baris CSS untuk mengaktifkan penskalaan berdasarkan konten. Gaya penetapan ukuran berbasis konten ini juga berfungsi untuk lebih dari sekadar textarea.

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Link cepat

Spesifikasi | Penjelasan

Menyukai video pendek?

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

Elemen mana yang terpengaruh oleh pengubahan ukuran kolom?

Berikut adalah daftar elemen <form> yang didukung field-sizing, beserta ringkasan efeknya pada setiap elemen.

<textarea>

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

Saat pengguna mengetik, input akan bertambah besar dalam arah sebaris hingga mencapai ukuran sebaris maksimum. Pada saat itu, teks akan di-wrap dan ukuran blok input akan bertambah besar agar sesuai dengan baris baru.

<select> dan <select multiple>

Elemen select akan menyusut agar sesuai dengan opsi yang dipilih.

Pilihan dengan atribut multiple akan diperluas agar sesuai dengan opsi terlebar 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 dalam arah sebaris hingga mencapai max-inline-size, yang pada saat itu overflow akan memangkas nilai input.

<input type="file">

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

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

Melihat, menguji, dan membandingkan hasil

Berikut adalah contoh interaktif dan minimal dari perilaku sebelum dan sesudah setiap elemen formulir, sebagaimana dipengaruhi oleh field-sizing.

Coba di Codepen

Melihat lebih dekat

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

Coba di Codepen

Penanganan gaya kosong dan meluap

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

Gaya berikut adalah titik awal yang baik. Elemen ini membantu agar elemen tidak menyusut menjadi kotak yang terlalu kecil dan juga, dalam kasus textarea, tidak membesar 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 dengan baik untuk ukuran inline.

Berapa nilai default field-sizing?

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