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

İyi desteklenen bu CSS işlevlerini kullanarak öğe boyutunu nasıl kontrol edeceğinizi, uygun aralıkları nasıl koruyacağınızı ve akıcı bir yazı tipi nasıl uygulayacağınızı öğrenin.

Una Kravets

Duyarlı tasarım daha ayrıntılı hale geldikçe CSS, yazarlara daha fazla kontrol sağlamak için sürekli olarak gelişiyor. Artık tüm modern tarayıcılarda desteklenen min(), max() ve clamp() işlevleri, içerik üretme web sitelerini ve uygulamalarını daha dinamik ve duyarlı hale getirmenin en son araçları arasındadır. Öğe boyutlarını ve yeniden boyutlandırma işlemlerini kontrol etmek, öğeler arasındaki boşlukları korumak ve esnek ve akıcı bir yazı tipi oluşturmak için bu işlevleri kullanabilirsiniz.

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

CSS Değerleri ve Birim Düzeyi 4

Tarayıcı desteği

min()

max()

clamp()

Kullanım

min(), max() ve clamp() değerlerini, anlamlı olduğu herhangi bir CSS ifadesinin sağ tarafında kullanabilirsiniz. min() ve max() için bir bağımsız değişken değeri 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) söz konusu olduğunda 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 de aynı işlemi yapar.

clamp() değerini kullanmak için üç değer girin: minimum değer, hesaplama için kullanılacak ideal değer ve maksimum değer.

Bu işlevleri <length>, <frequency>, <angle>, <time>, <percentage>, <number> veya <integer> ifadelerine izin verilen her yerde kullanabilirsiniz. Bunları tek başına (font-size: max(0.5vw, 50%, 2rem)'te olduğu gibi), calc() ile (font-size: max(calc(0.5vw - 1em), 2rem)'de olduğu gibi) veya birleşik olarak (font-size: max(min(0.5vw, 1em), 2rem)'te olduğu gibi) kullanabilirsiniz.

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

Mükemmel genişlik

Robert Bringhurst'ün The Elements of TypographicStyle'a göre "45 ila 75 karakter içeren her şey, metin boyutunda, serifli metin yüzünde ayarlanmış tek sütunlu bir sayfa için tatmin edici bir satır uzunluğu olarak kabul edilmektedir."

Metin bloklarınızın 45-75 karakter genişliğinde kalmasını sağlamak için clamp() ve ch (0 genişlikli 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'ten küçükse genişlik olarak 45ch kullanılır. %50, 75ch'ten genişse 75ch kullanılır.

Bunu yalnızca min() veya max() kullanarak da bölebilirsiniz. Öğenin her zaman 50% genişliğinde olmasını ve daha büyük ekranlarda 75ch genişliğini aşmamasını istiyorsanız maksimum boyutu ayarlamak için width: min(75ch, 50%); öğesini kullanın.

Aynı şekilde, width: max(45ch, 50%); ürününde olduğu gibi max() işlevini kullanarak okunabilir metin için minimum boyut ayarlayabilirsiniz. Burada tarayıcı, daha büyük olan değeri seçer. Yani öğenin 45ch veya daha geniş olması gerekir.

Dolguyu yönetme

Minimum dolgu boyutu ayarlamak için max() simgesini de kullanabilirsiniz. Bu örnek, CSS Tricks'ten alınmıştır. Okuyucu Caluã de Lacerda Pataca, bu örnekte şu fikri paylaşmıştır: Bir öğenin daha büyük ekran boyutlarında ek boşluk olmasına izin verin ancak daha küçük ekran boyutlarında minimum boşluk bırakın. Bunu yapmak için calc() veya max()'ü kullanın ve öğenin her iki tarafından da minimum dolguyu çıkarın: calc((100vw - var(--contentWidth)) / 2) veya max(2rem, 50vw - var(--contentWidth) / 2). Stil sayfanızda şöyle görünmelidir:

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

Akışkan yazı biçimi

Değişken yazı tipini etkinleştirmek için Mike Riethmeuller, minimum yazı tipi boyutu ve maksimum yazı tipi boyutu ayarlamak ve bu boyutlar arasında ölçeklendirmeye izin vermek için clamp() işlevini kullanan bir tekniği yaygınlaştırdı.

clamp(), tarihinden önce, yazı tipi ölçeklendirmeyi tasarlamak için karmaşık stil dizeleri gerekiyordu. Artık bu işi tarayıcının yapmasına izin verebilirsiniz. Kabul edilebilir minimum yazı tipi boyutunu (ör. 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 sayfanın görüntü alanı genişliğiyle sınırlayıcı minimum ve maksimum değerlere ulaşana kadar ölçeklendiren bir yazı tipiniz var:

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

Diğer kaynaklar

• MDN'deki CSS Değerleri ve Birimleri
• CSS Değerleri ve Birimleri Düzeyi 4 Spesifikasyonu
• CSS Tricks'in İç Öğe Genişliği Hakkında Makalesi
• Ahmad Shadeed tarafından min(), max(), clamp() işlevlerine genel bakış

Unsplash'taki @yer_a_wizard tarafından oluşturulan kapak resmi.