Düzenlenebilir içeriğe sahip öğeleri otomatik olarak boyutlandırmak için tek satır kod.
field-sizing kullanılmadığında, iyi boyutlu bir giriş alanı oluşturmak için ya bir metin alanı girdisinin ortalama boyutunu tahmin etmeniz ya da kullanıcı metni girerken karakterleri sayıp öğe yüksekliğini veya genişliğini artırmak için JavaScript'i kullanmanız gerekiyordu. Diğer bir deyişle, bu kolay değildi ve bir kullanıcının girdiği içeriği takip etmeye çalışırken hata yapma eğilimindeydi.
field-sizing ile içeriğe dayalı boyutlandırmayı etkinleştirmek için bir CSS satırının olması gerekir. Bu içeriğe dayalı boyutlandırma stili, aynı zamanda bir metin alanından daha fazlası için de işe yarar!
textarea, select, input {
field-sizing: content;
}
Hızlı bağlantılar
Kısa videoları seviyor musunuz?
Wes Bos ve Jhey, Twitter'da sizi field-sizing ile tanıştıran harika bir videoya sahip.
Alan boyutlandırmadan hangi öğeler etkilenir?
field-sizing uygulamasının üzerinde çalıştığı <form> öğeleri, her biri üzerindeki etkilerinin bir özetiyle birlikte aşağıda listelenmiştir.
<textarea>
Giriş, min-inline-size olacak şekilde veya yer tutucuya sığacak şekilde daraltılır.
Kullanıcılar yazdıkça giriş, maksimum satır içi boyutuna 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, belirlenen seçeneğe sığacak şekilde daralır.
multiple özelliğine sahip bir seçim, en geniş seçeneğe sığacak şekilde büyür ve seçenek sayısına uyacak şekilde gereken uzunlukta olur.
<input type="text">, <input type="email"> ve <input type="number">
Giriş, min-inline-size olacak şekilde veya yer tutucuya sığacak şekilde daraltılır.
Kullanıcılar yazdıkça giriş, bir max-inline-size'ye 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ş, düğmeye ve önceden doldurulmuş dosya adı metnine daraltılır.
Bir dosya yüklendiğinde, giriş, düğmeyle 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 ürününden etkilenen önceki ve sonraki davranışlarının etkileşimli ve minimal bir örneği verilmiştir.
Yakından bakıyoruz
[placeholder] kullanılırken yer tutucu içerik haline gelir. Bu konudan daha önce bahsetmiştik. Ancak formun stilini belirlerken
bilinmesi gereken önemli bir nokta olduğu için burada da belirtiliyordu. Uzun veya kısa bir yer tutucu, field-sizing:
content ile girişlerin gerçek boyutunu değiştirir.
Boş ve taşan stil işleme
field-sizing ürününü kullanmak, bazı ek işlemler yapmanız gerektiği anlamına gelir. Ahmad Shadeed buna "defansif CSS" adını verir. Burada amaç, bir şeyin nasıl davranması veya görünmesi gerektiğini tam olarak belirtmekten ziyade istenmeyen bir görsel duruma düşmesini önlemektir. Önceden, girişlerin kayda değer miktarda sabit boyutu vardı. Ancak field-sizing: content uygulandıktan sonra girişler çok çok küçük veya çok fazla büyük hale gelebilir.
Aşağıdaki stiller iyi bir başlangıç noktasıdır. Bunlar, öğelerin çok küçük bir kutuya daraltılmamasına ve textarea durumunda çok fazla büyümemesine 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 idealdir ve ch satır içi boyutlar için iyi sonuç verir.
Alan boyutlandırmanın varsayılan değeri nedir?
field-sizing öğesinin varsayılan değeri fixed olup yalnızca fixed veya content değerlerini kabul eder.