CSS alanı boyutlandırma

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

Adam Argyle

field-sizing olmadan, uygun boyutta bir giriş alanı oluşturmak için metin alanı girişinin ortalama boyutunu tahmin etmeniz veya JavaScript kullanarak karakterleri saymanız ve kullanıcı metin girerken öğe yüksekliğini ya da genişliğini artırmanız gerekiyordu. Başka bir deyişle, kullanıcının bir girişe girdiği içeriği takip etmek kolay değildi ve hataya açıktı.

field-sizing ile, içeriğe göre boyutlandırmayı etkinleştirmek için tek bir CSS satırı gerekir. İçeriğe dayalı bu boyutlandırma stili, metin alanından daha fazlası için de kullanılabilir.

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

Hızlı bağlantılar

Spesifikasyon | Açıklayıcı

Kısa videoları seviyor musunuz?

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

field-sizing özelliğinden hangi öğeler etkilenir?

field-sizing özelliğinin geçerli olduğu <form> öğelerinin listesini ve her bir öğe üzerindeki etkilerinin özetini aşağıda bulabilirsiniz.

<textarea>

Giriş, min-inline-size değerine veya yer tutucuya sığacak şekilde daraltılır.

Kullanıcılar yazarken giriş, maksimum satır içi boyutuna ulaşana kadar satır içi yönde büyür. Bu noktada metin sarmalanı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çim, en geniş seçeneğe uyacak şekilde genişler ve seçenek sayısına uyacak kadar uzun olur.

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

Giriş, min-inline-size değerine veya yer tutucuya sığacak şekilde daraltılı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ırpar.

<input type="file">

Giriş alanı daralarak düğmeye ve önceden doldurulmuş dosya adı metnine dönüşür.

Bir dosya yüklendiğinde giriş, düğme ve dosya adı metni kadar geniş olur.

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

field-sizing tarafından etkilenen her form öğesinin önceki ve sonraki davranışlarının etkileşimli ve minimal bir örneğini aşağıda bulabilirsiniz.

Codepen'de deneyin

Daha yakından bakılıyor

[placeholder] kullanıldığında yer tutucu, içerik haline gelir. Bu konudan daha önce bahsedilmişti ancak formun stilini belirlerken bilinmesi önemli olduğu için burada tekrar değinilmiştir. Uzun veya kısa bir yer tutucu, field-sizing: content ile girişlerin iç boyutunu değiştirir.

Codepen'de deneyin

Boş ve taşan stil işleme

field-sizing kullanmak, ek çalışma yapmanız gerektiği anlamına gelir. Ahmad Shadeed, bunu "savunma amaçlı CSS" olarak adlandırıyor. Bu yaklaşımda amaç, bir şeyin tam olarak nasıl davranması veya görünmesi gerektiğini belirtmek değil, istenmeyen bir görsel duruma girmesini önlemektir. Daha önce girişlerin sabit boyutları vardı 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ıdır. Öğelerin çok küçük bir kutuya sığdırılmasını ve textarea durumunda çok fazla büyümesini önlerler.

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 idealdir ve ch, satır içi boyutlar için iyi sonuç verir.

field-sizing özelliğinin varsayılan değeri nedir?

field-sizing parametresinin varsayılan değeri fixed olup yalnızca fixed veya content değerlerini kabul eder.