CSS min(), max() ve clamp()

İyi desteklenen bu CSS işlevlerini kullanarak öğe boyutunu kontrol etmeyi, uygun boşlukları korumayı ve değişken yazı biçimi uygulamayı öğrenin.

Una Kravets

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.

calc(), min(), max() ve clamp() matematik fonksiyonları, toplama (+), çıkarma (-), çarpma (*) ve bölme (/) içeren matematiksel ifadelerin bileşen değerleri olarak kullanılmasına izin verir

CSS Değerleri ve Birim Düzeyi 4

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.