CSS alanı boyutlandırma

Düzenlenebilir içeriğe sahip öğeleri otomatik olarak boyutlandırmak için bir satır kod.

Adam Argyle

field-sizing olmadan, iyi boyutlu bir giriş alanı oluşturmak için metin alanı girişinin ortalama boyutunu tahmin etmeniz veya karakterleri saymak ve kullanıcı metni girdikçe öğe yüksekliğini ya da genişliğini artırmak için JavaScript'i kullanmanız gerekiyordu. Diğer bir deyişle, kullanıcının girişe girdiği içeriği takip etmek kolay değildi ve hatalara açıktı.

field-sizing ile, içeriğe göre boyutlandırmayı etkinleştirmek için bir satır CSS'ye ihtiyacınız vardır. İçeriğe dayalı boyutlandırma stili, metin alanı dışında da kullanılabilir.

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

Tarayıcı Desteği

• 123
• 123
• x
• x

Kaynak

Hızlı bağlantılar

Spesifikasyon | Açıklayıcı

Kısa videoları beğeniyor musunuz?

Wes Bos ve Jhey'in Twitter'da field-sizing ile ilgili harika videoları var.

Alan boyutlandırmasından hangi öğeler etkilenir?

field-sizing'ın çalıştığı <form> öğelerinin listesini ve her bir öğe üzerindeki etkilerinin özetini aşağıda bulabilirsiniz.

<textarea>

Giriş, min-inline-size olarak daraltılır veya yer tutucuya sığdırılır.

Kullanıcılar yazarken giriş, satır içi maksimum boyuta ulaşana kadar satır içi yönde büyür. Bu noktada metin kaydırılır ve girişin blok boyutu yeni satıra sığacak şekilde büyür.

<select> ve <select multiple>

Seçim öğesi, seçilen seçeneğe sığacak şekilde küçülür.

multiple özelliğine sahip bir seçici, en geniş seçeneğe sığacak ve seçenek sayısına sığmak için gerektiği kadar yüksek olacak şekilde büyür.

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

Giriş, min-inline-size olacak şekilde veya yer tutucuya sığacak şekilde daralır.

Kullanıcılar yazarken giriş, max-inline-size değerine ulaşana kadar satır içi yönde büyür. Bu noktada taşma, giriş değerini kırpır.

<input type="file">

Giriş, düğme ve önceden doldurulmuş dosya adı metnine daraltılır.

Bir dosya yüklendiğinde giriş, düğme ile dosya adı metni kadar geniş hale gelir.

Sonuçları görme, test etme ve karşılaştırma

Aşağıda, her form öğesinin field-sizing tarafından etkilenen davranışlarının öncesi ve sonrasına dair etkileşimli ve minimalist bir örnek verilmiştir.

Codepen'de deneyin

Daha yakından inceleme

[placeholder] kullanıldığında yer tutucu içerik olur. Bu konu daha önce de belirtilmişti ancak formlara stil verirken dikkat edilmesi gereken bir nokta olduğu için burada tekrar ele alınmaktadır. Uzun veya kısa bir yer tutucu, field-sizing: content ile girişlerin içsel boyutunu değiştirir.

Codepen'de deneyin

Boş ve taşma stili işleme

field-sizing kullanırken bazı ek işlemler yapmanız gerekir. Ahmad Shadeed bu yaklaşımı "defansif CSS" olarak adlandırıyor. Burada amaç, bir öğenin nasıl davranması veya görünmesi gerektiğini tam olarak belirtmek değil, istenmeyen bir görsel duruma girmesini önlemektir. Önceden girişler oldukça fazla sabit boyuta sahipti ancak field-sizing: content uygulandıktan sonra girişler çok küçük veya çok büyük olabilir.

Aşağıdaki stiller iyi bir başlangıç noktası olabilir. Bu değerler, öğelerin çok küçük bir kutuya sığmamasına ve textarea söz konusu olduğunda çok büyük bir kutuya sığmamasına yardımcı olur.

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;
}

Bu CSS, boyutlandırma için göreli birimler kullanır. Yeni lh birimi, blok boyutları için mükemmeldir. ch, satır içi boyutlarda da iyi performans gösterir.

Alan boyutlandırmasının varsayılan değeri nedir?

field-sizing için varsayılan değer fixed'tır ve yalnızca fixed veya content değerini kabul eder.