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 boyutlandırılmış bir giriş alanı oluşturmak için metin alanı girişinin ortalama boyutunu tahmin etmeniz veya karakterleri saymak ve kullanıcı metin girerken öğe yüksekliğini ya da genişliğini artırmak için JavaScript kullanmanız gerekiyordu. Diğer bir deyişle, kullanıcının bir 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;
}

Browser Support

• 123
• 123
• x
• x

Source

Hızlı bağlantılar

Özellik | Açıklama

Kısa videoları seviyor 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 olarak daraltılır veya yer tutucuya sığdırılır.

Kullanıcılar yazarken giriş, bir 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üklediğinizde giriş, düğmenin ve dosya adı metninin genişliği kadar olur.

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 doğal 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ıdır. 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 ve ch satır içi boyutlar için iyi çalışır.

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.