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

Bu iyi desteklenen CSS işlevlerini kullanarak öğe boyutlandırmayı kontrol etmeyi, uygun boşlukları korumayı ve akıcı tipografiyi uygulamayı öğ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, web siteleri ve uygulamalar oluşturmayı daha dinamik ve duyarlı hale getiren en yeni araçlar arasındadır. Bu işlevleri kullanarak öğe boyutlandırmayı ve yeniden boyutlandırmayı kontrol edebilir, öğeler arasındaki boşluğu koruyabilir ve esnek ve akıcı tipografi oluşturabilirsiniz.

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 Birimleri Seviye 4

Tarayıcı desteği

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

Kullanım

min(), max() ve clamp() ifadelerini, anlamlı olduğu durumlarda herhangi bir CSS ifadesinin sağ tarafında kullanabilirsiniz. min() ve max() için bir değer listesi sağlarsınız ve tarayıcı, en küçük veya en büyük değeri belirler. Örneğin, width: min(1rem, 50%, 10vw) durumunda tarayıcı, bu göreceli birimlerden hangisinin en küçük olduğunu hesaplar ve öğenin genişliği için bu değeri kullanır.

min() işlevi, bu Codepen demosundaki seçenekler listesinden minimum değeri seçer.

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

max() işlevi, bu Codepen demosundaki seçenek listesinden bir değer seçer.

clamp() özelliğini kullanmak için üç değer girin: minimum değer, hesaplamanın yapılacağı ideal değer ve maksimum değer.

clamp() işlevi, bu Codepen demosunda değerini belirtilen minimum ve maksimum değerler arasında tutar.

Bu işlevleri <length>, <frequency>, <angle>, <time>, <percentage>, <number> veya <integer> değerlerine izin verilen her yerde kullanabilirsiniz. Bunları tek başına (font-size: max(0.5vw, 50%, 2rem) gibi), calc() ile (font-size: max(calc(0.5vw - 1em), 2rem) gibi) veya birleşik (font-size: max(min(0.5vw, 1em), 2rem) 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 Typographic Style adlı kitabına göre, "45 ila 75 karakterlik bir uzunluk, metin boyutunda serifli bir metin yüzüyle ayarlanmış tek sütunlu bir sayfa için tatmin edici bir satır uzunluğu olarak kabul edilir."

Metin bloklarınızın 45 ila 75 karakter genişliğinde kalmasını sağlamak için clamp() ve ch (0 genişlikte karakter ilerlemesi) birimini kullanın:

p {
  width: clamp(45ch, 50%, 75ch);
}

Bu, tarayıcının paragrafın genişliğini belirlemesine olanak tanır. Varsayılan olarak genişliği% 50'ye ayarlar. %50, 45ch değerinden küçükse genişlik olarak 45ch değerini, %50, 75ch değerinden büyükse 75ch değerini kullanır.

Minimum ve maksimum genişlik ayarlamak için clamp() işlevini kullanın. Codepen'deki demoyu inceleyin.

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%); kullanın.

Maksimum genişlik ayarlamak için min() işlevini kullanın.

Benzer şekilde, max() işlevini kullanarak okunabilir metin için minimum boyut ayarlayabilirsiniz (ör. width: max(45ch, 50%);). Burada tarayıcı, daha büyük olan değeri seçer. Yani öğe 45ch veya daha geniş olmalıdır.

Minimum genişlik ayarlamak için max() işlevini kullanın.

Dolgu yönetimi

Minimum dolgu boyutunu ayarlamak için max() özelliğini de kullanabilirsiniz. Bu örnek, okuyucu Caluã de Lacerda Pataca'nın şu fikri paylaştığı CSS Tricks'ten alınmıştır: Bir öğenin daha büyük ekran boyutlarında ek dolgusu olsun ancak daha küçük ekran boyutlarında minimum dolgu olsun. Bunu yapmak için calc() veya max() kullanın ve öğenin her iki tarafındaki 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);
}
max() işlevini kullanarak bir bileşen için minimum dolgu ayarlayın. Codepen'deki demoyu inceleyin.

Akışkan tipografi

Mike Riethmeuller, akışkan tipografiyi etkinleştirmek için clamp() işlevini kullanarak minimum ve maksimum yazı tipi boyutunu ayarlayan ve bu boyutlar arasında ölçeklendirme yapılmasına olanak tanıyan bir tekniği popüler hale getirdi.

Akıcı tipografi oluşturmak için clamp() işlevini kullanın. Codepen'deki demoyu inceleyin.

clamp(), öncesinde yazı tipi ölçeklendirmeyi tasarlamak için karmaşık stil dizeleri gerekiyordu. Artık tarayıcının işi sizin yerinize yapmasına izin verebilirsiniz. Kabul edilebilir minimum yazı tipi boyutunu (ör. başlık için 1.5rem), maksimum boyutu (ör. 3rem) ve ideal boyutu (ör. 5vw) 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ğiyle ölçeklenen bir tipografiye sahipsiniz:

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

Diğer kaynaklar