İyi desteklenen bu CSS işlevlerini kullanarak öğe boyutunu kontrol etmeyi, uygun boşlukları korumayı ve değişken yazı biçimi uygulamayı öğrenin.
Duyarlı tasarım daha ayrıntılı hale geldikçe CSS, yazarlara daha fazla kontrol sunmak için sürekli olarak gelişmektedir. Artık tüm modern tarayıcılarda desteklenen min()
, max()
ve clamp()
işlevleri, web sitesi ve uygulama yazmayı daha dinamik ve duyarlı hale getiren en yeni araçlar arasında yer alıyor. Öğe boyutlandırmasını ve yeniden boyutlandırmasını kontrol etmek, öğeler arasındaki boşluğu korumak, esnek ve değişken tipografi oluşturmak için bu işlevleri kullanabilirsiniz.
CSS Değerleri ve Birim Düzeyi 4
calc()
,min()
,max()
veclamp()
matematik fonksiyonları, toplama (+), çıkarma (-), çarpma (*) ve bölme (/) içeren matematiksel ifadelerin bileşen değerleri olarak kullanılmasına izin verir
Tarayıcı desteği
min()
max()
clamp()
Kullanım
Gerekli olduğunda min()
, max()
ve clamp()
değerlerini herhangi bir CSS ifadesinin sağ tarafında kullanabilirsiniz. min()
ve max()
için bir değer bağımsız değişkeni listesi sağlarsınız ve tarayıcı hangisinin en küçük veya en büyük olduğunu belirler. Örneğin, width: min(1rem, 50%, 10vw)
durumunda tarayıcı, bu göreli birimlerden hangisinin en küçük olduğunu hesaplar ve öğenin genişliği için bu değeri kullanır.
max()
işlevi, maksimum değer için aynı şeyi yapar.
clamp()
özelliğini kullanmak için üç değer girin: minimum değer, hesaplama için ideal değer ve maksimum değer.
Bu işlevleri, <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
veya <integer>
öğesine izin verilen her yerde kullanabilirsiniz. Bunları kendi başlarına (font-size: max(0.5vw, 50%, 2rem)
'de olduğu gibi), calc()
(font-size: max(calc(0.5vw - 1em), 2rem)
gibi) veya besteciler (font-size: max(min(0.5vw, 1em), 2rem)
gibi) ile kullanabilirsiniz.
Aşağıda, bu işlevlerin nasıl kullanılacağına dair bazı örnekler verilmiştir.
Mükemmel genişlik
Robert Bringhurst'un The Elements of Typography Stil'ine göre, "45 ila 75 karakter arasındaki her şey, metin boyutunda serif biçimli metin halinde ayarlanan tek sütunlu bir sayfa için uygun bir satır uzunluğu olarak kabul edilir."
Metin bloklarınızın 45-75 karakter genişliğinde kalmasını sağlamak için clamp()
ve ch
(0 genişlikte karakter ilerleme) birimini kullanın:
p {
width: clamp(45ch, 50%, 75ch);
}
Bu, tarayıcının paragrafın genişliğini belirlemesine olanak tanır. Genişliği varsayılan olarak% 50'ye ayarlar. %50, 45ch
değerinden küçükse genişlik olarak 45ch
değerini ve% 50, 75ch
değerinden genişse 75ch
değerini kullanır.
Yalnızca min()
veya max()
kullanarak da bunu bölebilirsiniz. Öğenin her zaman 50%
genişlikte olmasını ve daha büyük ekranlarda genişliğin 75ch
değerini aşmamasını istiyorsanız maksimum boyutu ayarlamak için width: min(75ch, 50%);
değerini kullanın.
Aynı şekilde, width: max(45ch, 50%);
ürününde olduğu gibi max()
işlevini kullanarak okunabilir metin için minimum bir boyut ayarlayabilirsiniz. Burada, tarayıcı daha büyük olan değeri seçer. Diğer bir deyişle, öğe 45ch
veya daha geniş olmalıdır.
Dolguyu yönet
Minimum dolgu boyutunu ayarlamak için max()
de kullanabilirsiniz. Bu örnek, okuyucu Caluã de Lacerda Pataca'nın şu fikri paylaştığı CSS Tricks'ten alınmıştır: Bir öğenin büyük ekran boyutlarında ek dolgusu olmasına izin verirken daha küçük ekran boyutlarında minimum dolguyu kullanın. Bunu yapmak için calc()
veya max()
kullanın ve öğenin her iki tarafından minimum dolguyu çıkarın: calc((100vw - var(--contentWidth)) / 2)
veya max(2rem, 50vw - var(--contentWidth) / 2)
. Stil sayfanızda şu şekilde
görünmelidir:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Akışkan tipografi
Mike Riethmeuller, değişken tipografiyi etkinleştirmek için minimum ve maksimum yazı tipi boyutunu ayarlamak ve bu boyutlar arasında ölçeklendirmeye olanak tanımak için clamp()
işlevini kullanan bir tekniği yaygınlaştırdı.
clamp(),
tarihinden önce, yazı tipi ölçeklemeyi tasarlamak için karmaşık stil dizeleri gerekiyordu. Şimdi, tarayıcının bunu sizin için yapmasına izin verebilirsiniz. Kabul edilebilir minimum yazı tipi boyutunu (örneğin, bir başlık için 1.5rem
), maksimum boyutu (3rem
gibi) ve ideal boyutu (5vw
gibi) ayarlayın. Artık çok az kod kullanarak sınırlayıcı minimum ve maksimum değerlere ulaşana kadar sayfanın görüntü alanı genişliğine göre ölçeklendirilen yazı tipiniz var:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Daha fazla kaynak
- MDN'deki CSS Değerleri ve Birimleri
- CSS Değerleri ve Birim Düzeyi 4 Spesifikasyonu
- İç Öğe Genişliğiyle İlgili CSS Püf Noktaları Makalesi
- min(), max(), clamp() Ahmad Shadeed'den Genel Bakış
Unsplash'te @yer_a_wizard adlı kullanıcının kapak resmi.