CSS field-sizing tüm büyük tarayıcılara ulaştı, JavaScript ile textarea hilesi sona erdi

İçeriğine göre büyüyen form alanları sağlayan CSS özelliği field-sizing, artık tüm büyük tarayıcı motorlarında destekleniyor. Muhammad Usman'ın dev.to'daki yazısına göre özellik Chrome 123 ile geldi, ardından Safari 26.2'de ve en son Firefox 152'de kullanıma sunuldu; böylece son boşluk da kapatıldı. Bu, front-end çalışmasının en yaygın küçük script'lerinden birinin — kullanıcı yazarken textarea'yı yeniden boyutlandırma — tek satır CSS ile değiştirilebileceği anlamına geliyor.

Nasıl çalışıyor

Textarea ve input'lar her zaman sabit bir boyuta sahipti: içerik kutuya sığmadığında tarayıcı bir scrollbar gösteriyordu. field-sizing: content bunu değiştiriyor. dev.to yazısında açıklandığı gibi, tarayıcı alanın tercih edilen boyutunu gerçek içeriğinden hesaplıyor; böylece yeni bir satır eklendiğinde alan genişliyor, metin silindiğinde yeniden daralıyor. Varsayılan değer olan fixed ise eski davranışı koruyor.

Özellik yalnızca textarea'larla sınırlı değil. Number ve search alanları gibi metin input'larının tüm varyantlarına da uygulanabiliyor ve placeholder'lara saygı duyuyor — boş bir alan, placeholder metninin tamamına göre boyutlanıyor. Select elementleri de farklı davranıyor: en uzun seçeneğin genişliğini almak yerine, o anda seçili olan seçeneğe göre boyutlanıyorlar. multiple attribute'una sahip olanlar veya size değeri birden büyük olanlar, yani list-box select'ler, tüm seçeneklerini gösterecek şekilde genişliyor.

Yerini aldığı JavaScript

Daha önce otomatik büyüyen textarea'lar bir script ile yönetiliyordu. Yazıda anlatılan yöntem, önce alanın inline yüksekliğini auto'ya sıfırlayan — bu, alanın yalnızca büyümek değil küçülmek için de gerekli — ardından scrollHeight değerini, yani metnin tamamen ihtiyaç duyduğu dikey alanı okuyan ve bu ölçümü yeni yükseklik olarak geri atayan bir input dinleyicisi ekliyor:

js textarea.addEventListener("input", () => { textarea.style.height = "auto"; textarea.style.height = textarea.scrollHeight + "px"; });

Bu ölçüm her tuş vuruşunda ve her silmede çalışıyor. Karmaşık bir script değil, ama tarayıcının artık yerel olarak yapabildiği layout işini JavaScript'e yaptırıyor ve yıllardır çeşitli varyasyonları form kodlarına kopyalanıyor.

Pratik kullanım

Tek başına kullanıldığında field-sizing: content bir textarea'yı her iki boyutta da boyutlandırıyor ve bu nadiren istenen şeydir. dev.to yazısında önerilen tarif, özelliği lh birimi — geçerli satır yüksekliği — kullanarak minimum ve maksimum yüksekliklerle birleştiriyor; böylece alan üç satırdan başlayabiliyor ve büyümeyi bırakabiliyor, içerik kabaca on satırı geçtiğinde scrollbar'lar geri geliyor:

css textarea { field-sizing: content; min-height: 3lh; max-height: 10lh; resize: none; }

Bu kısıtlamalarla tam genişliğe ayarlanmış bir alan yalnızca dikey olarak büyüyor; bu da kullanıcıların yorum kutularından ve chat input'larından beklediği davranışla örtüşüyor.

Resize uyarısı

Bir pürüz daha var. Textarea'lar varsayılan olarak resize: both gelir; bu, kullanıcıların alanı elle boyutlandırmak için köşedeki tutamacı sürükleyebilmesi demek. Bu yapıldığı anda field-sizing hiçbir etkisini yitirir: scrollbar'lar geri gelir ve yükseklik içeriği takip etmeyi bırakır. Usman'ın önerisi, yukarıdaki snippet'te olduğu gibi özelliği resize: none ile birlikte kullanmak.

Neden önemli

Otomatik boyutlanan textarea'lar yıllardır iletişim formlarının, yorum bölümlerinin ve chat arayüzlerinin vazgeçilmeziydi ve neredeyse her uygulama aynı scrollHeight script'inin bir varyasyonuydu. field-sizing ile bu script gereksiz bir boilerplate haline geliyor: tarayıcı alanı kendisi ölçüyor ve yerleştiriyor; ne bir event listener ne de her tuş vuruşunda manuel layout yazımı gerekiyor. Özellik artık Chrome, Safari ve Firefox'ta bulunduğundan — yazının deyimiyle bir baseline CSS özelliği — genel durum için JavaScript fallback'e gerek kalmıyor. Bu aynı zamanda, eskiden script gerektiren davranışları CSS'in üstlendiği daha geniş bir kaymanın parçası; ve bu tür her ekleme, ortalama bir sayfadaki JavaScript'ten biraz daha fazlasını kesip atıyor.