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

İyi desteklenen bu CSS işlevlerini kullanarak öğe boyutlandırmasını kontrol etmeyi, boşlukları doğru biçimde kullanmayı ve değişken yazı biçimi uygulamayı öğrenin.

Una Kravets

Duyarlı tasarım daha incelikli hale geldikçe CSS de sürekli gelişerek ve yazarlar daha fazla kontrole sahip oldu. min(), max() ve clamp() işlevleri, tüm modern tarayıcılarda desteklenen Böylece daha dinamik ve duyarlı web siteleri ve uygulamalar oluşturabilirsiniz. Şunları kullanabilirsiniz: öğe boyutlandırmasını ve yeniden boyutlandırmasını kontrol eden fonksiyonlar, ve esnek ve akıcı bir tipografi oluşturmanız gerekir.

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 olanak sağlar

CSS Değerleri ve Birim Düzeyi 4

Tarayıcı desteği

min()

max()

clamp()

Kullanım

min(), max() ve clamp() öğelerini herhangi bir CSS'nin sağ tarafında kullanabilirsiniz ifadeleri kullanın. min() ve max() için bir bir bağımsız değişken değerleri listesi oluşturur ve tarayıcı hangisinin en küçük veya en büyüktür. Örneğin, width: min(1rem, 50%, 10vw) örneğinde, tarayıcı, bu göreli birimlerden hangisinin en küçük olduğunu hesaplar ve öğenin genişliği için ayarlanır.

max() işlevi, maksimum değer için aynı şeyi yapar.

clamp() özelliğini kullanmak için şu üç değeri girin: minimum değer, şunun için ideal değer: bir maksimum değer belirtir.

Bu işlevleri <length>, <frequency>, <angle>, <time>, <percentage>, <number> veya <integer>'a izin verilir. Siz kendi başlarına kullanabilir (font-size: max(0.5vw, 50%, 2rem) ürününde olduğu gibi) calc() (font-size: max(calc(0.5vw - 1em), 2rem) olduğu gibi) veya bestelenen (şu şekilde:) font-size: max(min(0.5vw, 1em), 2rem)) tıklayın.

Aşağıda, bu işlevlerin nasıl kullanılacağına dair bazı örnekler verilmiştir.

Mükemmel genişlik

Tipografik Öğeleri'ne göre Stil Robert Bringhurst'e göre, "45 ila 75 karakterden oluşan her şey serifli metin yüzünde ayarlanmış tek sütunlu bir sayfa için tatmin edici satır uzunluğu girin."

Metin bloklarınızın 45 ila 75 karakter genişliğinde kalmasını sağlamak için clamp() ve ch (0 genişlikli karakter ilerletme) birim:

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. %50, 45ch değerinden küçükse genişlik olarak 45ch değerini kullanır %50, 75ch değerinden genişse 75ch değerini kullanır.

Yalnızca min() veya max() kullanarak da bölebilirsiniz. URL'nin öğesi, her zaman 50% genişliğinde olacak ve daha büyük boyutlu cihazlarda genişliği 75ch aşmayacak şekilde ekranlarında, maksimum boyutu ayarlamak için width: min(75ch, 50%); kullanın.

Aynı şekilde, max() kullanarak okunabilir metin için minimum boyut ayarlayabilirsiniz işlevini kullanın.width: max(45ch, 50%); Bu aşamada, tarayıcı değer daha büyüktür. Diğer bir deyişle, öğe 45ch veya daha büyük olmalıdır.

Dolguyu yönet

Minimum dolgu boyutunu ayarlamak için max() değerini de kullanabilirsiniz. Bu örnek, CSS Püf Noktaları Caluã de Lacerda Pataca şu fikrini paylaştı: Bir elementin Büyük ekran boyutlarında ek dolgu ancak daha küçük boyutta bir minimum dolgu ekran boyutlarına bağlı. Bunun için, calc() veya max() işlevini kullanın ve minimum değerden çıkarın öğenin her iki tarafından dolgu: calc((100vw - var(--contentWidth)) / 2), veya max(2rem, 50vw - var(--contentWidth) / 2). Stil sayfanızda, aşağıdaki gibi görünür:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Değişken tipografi

Değişken tipografiyi etkinleştirmek için Mike Riethmeuller, bir tekniği popüler hale getirdi clamp() işlevini kullanarak minimum yazı tipi boyutunu, maksimum yazı tipi boyutunu ve bu boyutlar arasında ölçeklendirme sağlar.

clamp(), tarihinden önce, yazı tipi ölçeklendirmeyi tasarlamak karmaşık stil dizeleri gerektiriyordu. Şimdi, tarayıcının bu işi sizin yerinize yapmasına izin verebilirsiniz. Kabul edilebilir minimum yazı tipini belirleyin boyut (örneğin, başlık için 1.5rem), maksimum boyut (ör. 3rem) ve ideal boyut (5vw gibi). Artık sayfanın mevcut tasarımına göre ölçeklendirilen bir tipografiniz sınırlayıcı minimum ve maksimum değerlere ulaşıncaya kadar kodu kullanabilirsiniz:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Diğer kaynaklar

• MDN'deki CSS Değerleri ve Birimleri
• CSS Değerleri ve Birimler Düzey 4 Spesifikasyonu
• İç Öğe Genişliğiyle İlgili CSS İpuçları Makalesi
• min(), max(), clamp(), Ahmad Shadeed'den Genel Bakış

Şu tarihte @yer_a_wizard numarasından kapak resmi Lansmanı kaldırın.