CSS alanı boyutlandırma

Düzenlenebilir içeriğe sahip öğelerin otomatik olarak boyutlandırılması 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 karakterleri saymak ve kullanıcı metin girdikçe öğe yüksekliğini ya da genişliğini artırmak için JavaScript kullanmanız gerekiyordu. Başka bir deyişle, kullanıcıların girişe girdiği içerikleri takip etmek kolay değildi ve hata yapma olasılığı yüksekti.

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

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Hızlı bağlantılar

Spesifikasyon | Açıklayıcı

Kısa videoları beğeniyor musunuz?

Wes Bos ve Jhey'in her biri, field-sizing ile ilgili harika bir tanıtım videosu paylaştı.

Alan boyutlandırmadan hangi öğeler etkilenir?

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

<textarea>

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

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

<select> ve <select multiple>

Seçme öğesi, seçili seçeneğe uyacak şekilde küçülür.

multiple özelliği olan bir select, en geniş seçeneğe uyacak şekilde büyür ve seçenek sayısına uyacak kadar uzun olur.

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

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

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

<input type="file">

Giriş, düğmeye ve önceden doldurulmuş dosya adı metnine daraltılı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'dan etkilenen her form öğesinin önceki ve sonraki davranışlarının etkileşimli ve basit bir örneğini burada bulabilirsiniz.

Codepen'de deneyin

Daha yakından bakış

[placeholder] kullanıldığında yer tutucu içerik haline gelir. Bu durum daha önce belirtilmiş olsa da bir formun stilini oluştururken bilinmesi önemli olduğundan burada tekrar vurgulanmıştır. Uzun veya kısa bir yer tutucu, field-sizing: content ile girişlerin doğal boyutunu değiştirir.

Codepen'de deneyin

Boş ve taşan stil işleme

field-sizing kullanmak için bazı ek işlemler yapmanız gerekir. Ahmad Shadeed, buna "savunma amaçlı CSS" adını veriyor. Buradaki amaç, bir şeyin nasıl davranması veya görünmesi gerektiğini tam olarak belirtmek değil, onu istenmeyen bir görsel duruma girmekten korumaktır. Daha önce girişler belirli bir miktarda 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ıdır. Öğelerin çok küçük bir kutuya daralmasını ve textarea durumunda çok büyümesini önler.

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ıyor. Yeni lh birimi, blok boyutları için idealdir ve ch satır içi boyutlarda iyi sonuç verir.

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

field-sizing öğesinin varsayılan değeri fixed'dir ve yalnızca fixed veya content değerlerini kabul eder.