Kotak komentar yang tingginya empat baris dan satu baris berisi teks: setiap situs dengan area teks telah mengirimkan JavaScript yang mengukur masukan dan mengembangkan kotak. CSS telah menyerap pekerjaan itu.

textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 12lh;
}

Apa yang diubahnya

  • ukuran bidang: ukuran konten kontrol terhadap kontennya, termasuk teks, sehingga kotak tidak pernah kosong atau penuh sarden.
  • min-height dan max-height menjadi rel: melewati maksimum, scrollbar muncul sebagaimana mestinya.
  • Unit lh menjaga rel tetap jujur ​​dalam baris teks, bukan piksel yang akan Anda sesali dengan ukuran font yang berbeda.
  • Hal ini juga berlaku untuk input dan pemilihan, di mana pemilihan dengan banyak opsi tidak lagi menuntut ketinggian tetap.

Satu-satunya peringatan untuk dinyatakan dengan jelas

  1. Browser tanpa properti mempertahankan perilaku klasik: ketinggian tetap dan gulir manual, yang merupakan kondisi setiap situs saat ini, jadi tidak ada yang mengalami kemunduran.
  2. Pasangkan dengan jumlah karakter yang terlihat untuk batas yang diterapkan; pertumbuhan otomatis adalah kenyamanan visual, bukan validasi.
  3. Uji dengan konten lokal tertinggi yang Anda dukung; situs ini menulis dalam empat bahasa, dan salinan bahasa Prancis lebih tinggi daripada bahasa Inggris.

Detail formulir yang menghapus JavaScript-nya sendiri, mempertahankan perilaku fokus, dan berfungsi dengan pengisian otomatis: jenis pekerjaan platform yang membuat situs kecil terasa disetel secara profesional, sangat gacor untuk satu deklarasi.