CSS Matematik Fonksiyonlarının Pratik Kullanımları: calc, kıskaç, min, max

CSS Matematik Fonksiyonlarının Pratik Kullanımları: calc, kıskaç, min, max

şu anda var CSS’de iyi desteklenen dört matematik işlevi. Günlük işlerimde her birinin son derece yararlı olduğunu gördüm. Bu CSS işlevleri, degradeler ve renk işlevleri içinde ve CSS özel özellikleriyle kombinasyon halinde olduğu gibi belki de beklenmedik şekillerde kullanılabilir. Her birinin sözdizimini öğreneceğiz, işlevlerinin temel demolarını görüntüleyeceğiz ve pratik kullanım örneklerini keşfedeceğiz.

pratik amacı calc(): birim türleri arasında enterpolasyon yapma yeteneği ile temel matematik işlemlerini gerçekleştirme (ör. rem ile vw).

Bu matematik işlevi, araştırdığımız dört işlev arasında en uzun çapraz tarayıcı desteğine sahiptir. Stilleriniz dahilinde müşteri tarafı matematiği yapabilmek istediğiniz her zaman için geniş bir kullanım alanına sahiptir.

Örneğin, navigasyonun yüksekliği dışında görüntü alanı yüksekliğinin çoğunu bir şeyin kaplamasını isteyebilirsiniz. Bu amaçla, bir akrabayı geçmek için birimleri karıştırabilirsiniz. vh (görüntü yüksekliği) mutlak piksel birimine sahip birim:

.content {
height: calc(100vh - 60px);
}

Görüntü alanı yeniden boyutlandıkça veya bir kullanıcı daha büyük veya daha küçük cihazları ziyaret ettikçe, 100vh dinamik olarak güncellenecektir ve dolayısıyla hesaplama da öyle olacaktır.

Faydasına calc() bir dizi sihirli sayıyı sabit kodlamaktan veya onu satır içi stil olarak uygulamak için gereken değeri hesaplamak için bir JavaScript çözümü eklemekten kaçınmanıza izin verir.

kullanma calc() Üretken Renk Paletleri için

yeteneklerini genişletebiliriz calc() CSS özel özelliklerini ileterek.

Bunun çok yararlı olduğuna bir örnek, kullanarak tutarlı bir renk paleti oluşturmaktır. hsl() (renk tonu, doygunluk ve hafiflik anlamına gelir). Doygunluk, hafiflik ve başlangıç ​​rengi için verilen değerlerle, tam bir palet oluşturmak için tamamlayıcı değerleri hesaplayabiliriz. Doygunluk ve hafiflik değerleri arasındaki benzerlik nedeniyle, palet uyumlu hissedecektir.

“Bir HSL renk paleti oluşturmak için calc() kullanma” için CSS
.colors {
--base-hue: 140;
--saturation: 95%;
--lightness: 80%;
--rotation: 60;

color: #222;
text-align: center;
}

.color {
padding: 0.25rem;
background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.color1 {
--hue: calc(var(--base-hue));
}

.color2 {
--hue: calc(var(--base-hue) + var(--rotation));
}

.color3 {
--hue: calc(var(--base-hue) + var(--rotation) * 2);
}

pratik amacı clamp(): kabul edilebilir bir değerler aralığında sınırların belirlenmesi.

bu clamp() işlev üç değer alır ve sıra önemlidir. Birincisi, aralığınızdaki en düşük değer, ortadaki ideal değeriniz ve üçüncüsü, aralığınızdaki en yüksek değerdir.

Daha önce kullanımıyla karşılaşmış olabileceğiniz bir alan clamp() akışkan tipografisi içindir. Temel kavram, font-size değer, görünüm alanı boyutuna göre akıcı bir şekilde ayarlanabilir. Bu, büyük başlıkların taşmayı tetiklemesini veya görüntü alanının çok fazla kaplanmasını önlemeyi amaçlamaktadır.

Bir sıvı için çok temel bir tanım h1 stil:

h1 {
font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

Yapabilirsiniz Modern CSS 12. bölümde akışkan türü oluşturma hakkında daha fazla bilgi edinin.

Göreli Duyarlı Dolgu clamp()

Başka bir örnek de görülebilir duyarlı dolgu üzerine SmolCSS’den demom. Dolgu için yüzde kullanmanın ilginç yanı, bunun öğenin genişliğine göre olmasıdır. Bu, biraz, sizin düşündüğünüze benzer şekilde kullanabileceğimiz, konteynerle ilgili bir birime benzediği anlamına gelir. vw.

SmolCSS’den alınan örnek, dolgunun öğenin genişliğine göre büyüyüp küçüleceği aşağıdaki dolgu tanımını kullanır. Asla daha az olmayacak 1remve asla daha büyük 3rem:

.element {
padding: 1.5rem clamp(1rem, 5%, 3rem);
}

Bunun, daha önce medya sorguları için ulaşmış olabileceğiniz bazı senaryoları ortadan kaldırdığını fark etmiş olabilirsiniz. Bu aralığı mikro düzeyde yönetmek veya bir piksel rampasına (ör. 8, 12, 24, 36) sıkı sıkıya bağlı kalmaktan endişelenmek yerine, duyarlı bir geçiş için mantıklı yönergeler oluşturabilirsiniz.

Medya sorgularına kıyasla buradaki en önemli avantaj, bu dolgu tanımı öğeye göreli olduğundan, öğe sayfada daha fazla alana sahip olduğunda daha büyük ve örneğin dar bir sütuna yerleştirildiğinde daha küçük olacaktır. Bu, medya sorgusu tabanlı yardımcı program sınıflarıyla çok fazla koordinasyon gerektirir!

pratik amacı min(): bir öğenin duyarlı bağlamını kapsayacak şekilde izin verilen maksimum değere sınırlar koymak.

Bu doğru – olmasına rağmen min() işlev, sonuç, sağlanan değerlerin bir maksimum mülk için izin verilen değer.

verilen width: min(80ch, 100vw)sonuç, daha büyük bir görünüm alanında, 80ch iki seçeneğin daha küçük değeri olduğu için seçilecektir, ancak gibi davranıyor bağlamsal olarak kullanılabilir alana dayalı bir maksimum. Görünüm alanı küçüldüğünde, 100vw olarak hesaplandığı için kullanılacaktır. daha küçük 80chyine de aslında bir maksimum elemanın genişliği için sınır.

Modern CSS .container Sınıf

Az önce sağlanan örnek, bir tanımlama yapmak için tercih ettiğim yoldur. .container, küçük bir ince ayar ile. bu min() işlevi, iç içe temel matematik işlemlerine izin verir; bu, sol ve sağ dolguyu tanımlamak için takas olarak bir miktar boşluk çıkarmaya şu şekilde dönebileceğimiz anlamına gelir:

.container {
width: min(80ch, 100vw - 2rem);
}

Daha büyük görünüm pencerelerinde, öğe bir boyuta büyüyebilir. maksimum nın-nin 80chve görüntü alanı bu genişliğin altına düştüğünde, büyümesine izin verilecektir. 100vw - 2rem. Bu tanım etkili bir şekilde üretir 1rem öğenin her iki tarafında “dolgu”.

Bu örnekte, şunu da değiştirebilirsiniz: 100% onun yerine vw eleman genişliğini bir içinde duyarlı hale getirmek için ana kapsayıcıbu demo için kullanıldığı şekliyle:

“Modern CSS .container Sınıfı” için CSS
.container {
width: min(40ch, 100% - 2rem);
margin-right: auto;
margin-left: auto;
}

Lorem ipsum dolor sit, amet conectetur adipisicing elit. Vero bir quam emek mucidi iste eligendi, yarı velit, qui repellendus voluptatem temporibus nisi. Pariatur nesciunt at dolorum, cumque illum maiores animi?

Hızlı not: ch birim genişliğine eşittir 0 tüm geçerli verilen karakter font Uygulandığı zamandaki özellikler. Bu, örneğin daha iyi bir okuma deneyimi için satır uzunluğuna yaklaşmak için mükemmel bir seçimdir.

faydası nedir? Duyarlı boyutlandırma olmadan medya sorguları için ihtiyaç! Bu işlevler için ortak bir tema gibi görünüyor 😉

bu min() işlevi matematik işlevlerinden en çok kullandığımdır. Pratik senaryolara yönelik bazı şaşırtıcı yükseltmelere bakalım.

Duyarlı Eleman Boyutlandırma min()

Bir öğeyi duyarlı bir şekilde boyutlandırmak istediğinizde, min() harika bir seçim olabilir. mesela ben araştırdım kullanarak min() bir avatarın boyutlandırılmasını kontrol etmek için Modern CSS 26. bölümdeki bir yorum dizisi içinde.

Avatar örneğinde, uygulamayı sonlandırdık. üç farklı birimlere sahip değerler: min(64px, 15%, 10vw). Bunu okumanın başka bir yolu da, tarayıcı hangisini seçerse seçsin, avatar boyutunun herhangi bir zamanda bu değerlerden birini aşmamasıdır. asgari hesaplanan değer.

Bu tanım, asla daha büyük bir avatara sahip olmamak için çalışır. 64px. Özellikle bir yakınlaştırma senaryosunda, 10vw boyutun daha göreceli hissetmesine yardımcı olur. Ve 15% boyutun öğeye göre korunmasına yardımcı olur; bu, öğeden önce görsel olarak daha çekici bir sonuca sahip olabilir. 10vw geçerlidir.

kullanma min() Diğer Mülkler İçinde

CSS matematik işlevleri, sayısal bir değere izin veren çoğu özellikte kullanılabilir. Bunları kullanmak için benzersiz bir yer background-size.

Neden? Niye? Belki bir arka plan renginin ve bir görüntünün katmanlı efektini sağlıyorsunuzdur. Ve kullanmak yerine cover Görüntünün alanı doldurmasını sağlayacak boyut değeri, görüntünün büyümesini sınırlamak istersiniz. Bu getirmek için mükemmel bir yer min().

Aşağıdaki örneği inceleyin, nerede min() görüntünün aşılmamasını sağlamak için kullanılır 600px ayarlayarak öğeye yanıt vermesine izin verilirken 100%. Başka bir deyişle, büyüyecek kadar 600px ve daha küçük olduğunda öğenin genişliğine uyacak şekilde kendisini yeniden boyutlandırın 600px.

“Min() ile arka plan boyutunu kontrol etme” için CSS
.background-image {
background: #1F1B1C url(https://source.unsplash.com/RapCPd_mJTU/800x800) no-repeat center;
background-size: min(600px, 100%);
}

Lorem ipsum dolor sit, amet conectetur adipisicing elit. Vero bir quam emek mucidi iste eligendi, yarı velit.

pratik amacı max(): bir öğenin duyarlı bağlamını kapsayacak şekilde izin verilen minimum değerde sınırlar belirlemek.

Aynen, max() tam tersi min()! Şimdi için tanımları ayarlıyoruz asgari izin verilen değerler Hemen örneklere geçelim!

Bağlamsal Kenar Boşlukları max()

hakkında öğrendikten sonra Web İçeriği Erişilebilirlik Yönergeleri (WCAG) Başarı Ölçütü 1.4.10 Bir kullanıcının sitenizi %400 büyütmek için yakınlaştırmayı kullanabilmesi gerektiğini belirten reflow için, piksellerin ve rems’nin bu bağlamda bir alt birim haline geldiğini fark ettim.

%400 yakınlaştırmada 1280 piksellik bir masaüstü boyutu göz önüne alındığında, içeriğiniz 320 piksellik bir cihaza eşdeğerdir. Ancak – bir cep telefonuna kıyasla – yön hala yataydır. Bu boyuttaki bir görüntü alanı, eylemleri okumak ve gerçekleştirmek için çok daha küçük bir alan anlamına gelir. Ek olarak, bir telefon için uygun görünen boyutlar, yakınlaştırılmış bir pencerede görüntülendiğinde bağlamsal olarak çok büyük hale gelir.

Neyse ki, max() bize özellikle kenar boşluklarını daha zarif bir şekilde ele almanın bir yolunu verir. Kişisel çalışmamda her şey için piksel değerlerinden kaçınırım ve genellikle rem daha küçük alanlar için. Ancak, içerik bölümlerini ayırmayı amaçlayan daha büyük alanlar için, yüksek görünüm pencereleri için göreceli büyümeye izin veren ve daha kısa görünüm pencereleri için mesafeyi azaltan, yakınlaştırılmış görünüm pencereleri için de geçerli olan aşağıdakileri kullanıyorum.

.element + .element {
margin-top: max(8vh, 2rem);
}

Daha uzun görünüm pencerelerinde, 8vh kullanılacak ve daha küçük veya yakınlaştırılmış görünüm alanlarında, 2rem kullanılacak. Bunu denemenizi ve görünüm pencereleri, cihazlar arasında ve düzeninizi yakınlaştırarak veya yakınlaştırmadan test etmek için biraz zaman harcamanızı tavsiye ederim. Bu teknik, son kullanıcı için önemli bir fark yaratabilecek küçük bir yükseltmedir.

Bu senaryonun genişletilmiş bir örneğini inceleyin ve yeniden akış hakkında daha fazla bilgi edinin Modern CSS bölüm 27’de.

İOS’ta Girişlerde Tarayıcı Yakınlaştırmasını Engelle max()

İOS’ta bir form girişine odaklandıktan sonra hiç zorunlu tarayıcı yakınlaştırması yaşadınız mı? Bu sonuç, yazı tipi boyutu şundan küçük olan herhangi bir girdi için gerçekleşir. 16px.

İşte orijinal olarak bağlantılı olan düzeltme Özel form giriş stilleri hakkında Modern CSS 21. bölümtam kredi ile Dan Burzo bu basit çözüm için:

input {
font-size: max(16px, 1rem);
}

Neresi 1rem bir Sass değişkeni veya bir CSS özel özelliği ile değiştirilebilir. Bu kullanım max() sağlanan başka bir değerden bağımsız olarak, font-size olacak en azından 16px ve bu nedenle zorunlu tarayıcı yakınlaştırmasını önleyin.

Göreli Odak Anahatları max()

CSS sıfırlamama yapılan en son ekleme, min() odak anahatları için göreli boyutlandırma uygulamak için.

Bu, küçültülmüş bir snippet’tir, ancak max()sağlamaktayız asgari anahat boyutu 2pxizin verirken, büyümek yazı tipine bağlı kullanarak öğeye göre em değer.

a {
--outline-size: max(2px, 0.08em);
--outline-style: solid;
--outline-color: currentColor;
}

a:focus {
outline: var(--outline-size) var(--outline-style) var(--outline-color);
outline-offset: var(--outline-size);
}

Erişilebilir Hedef Boyutları max()

“Hedef boyut” terimi şuradan gelir: WCAG Başarı Kriteri (SC) 2.5.5, burada “hedef”, bir işaretçi olayı alacak alanı ifade eder (ör. fare tıklaması veya dokunarak dokunma). Yakında çıkacak olan WCAG 2.2’de, SC 2.5.5 artık minimum boyuta sahip “Geliştirilmiş” sürümdür. 44px.

Bu kılavuz için, yalnızca simgeleri veya önceki örneğimizde bir profile bağlanan avatarı kullanan düğmeleri göz önünde bulundurun. Veya bir açılır okun birincil düğme kontrolünden ayrı bir eylem olduğu çift eylemli bir düğme olabilir.

Bu durumlarda kullanabiliriz max() giriş yakınlaştırmasını önlemek için bir korkuluk sağladığımızda olduğu gibi. Iyi ayarlanmış 44px içindeki değerlerden biri olarak max() böylece asgaribu öğenin boyutudur.

.icon-button {
width: max(44px, 2em);
height: max(44px, 2em);
}

Unutulmamalıdır ki, bu kriter aynı zamanda, elemanın gerçek boyutuyla birleştirilirse, elemanın etrafındaki boşluğu da dikkate alır. en azından 44px, ardından kriter başarıyla geçilir. Tüm bu tekniklerde olduğu gibi, gerçek ürününüzle ve gerçek kullanıcılarla test ettiğinizden emin olun!

kullanma max() CSS için Geri Dönüş Olarak aspect-ratio

Kullandığım başka bir yol max() kullanırken bir görüntü yüksekliği ayarlamaktır aspect-ratio henüz o özelliği desteklemeyen tarayıcılar için kabul edilebilir bir deneyim sağlamak için.

Aşağıdaki örneği tam olarak kullanımda görebilirsiniz. Birleştirilebilir kart bileşeni için SmolCSS demosu.

img {
height: max(18vh, 12rem);
object-fit: cover;
width: 100%;
}


@supports (aspect-ratio: 1) {
img {
aspect-ratio: var(--img-ratio);
height: auto;
}
}

Hepsini bir araya koy

Bu son demo, çeşitli özellikler arasında duyarlı boyutlandırmaya izin vermek için birden çok CSS matematik işlevi uygulamanın bir örneğini gösterir. Gösterilen kodun yanındaki yorumları not edin.

Stephanie Eckles (@5t3ph)

Bu CSS matematik işlevlerinin ve diğer modern CSS özelliklerinin kullanımına ilişkin daha fazla örnek için, YouTube’daki CSS Cafe’deki konuşmama göz atın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.