Manuel Matuzovic: max() Hile

Yoluyla Manuel Matuzović'in yazısı hangi tarafından bir demo yoluyla Temani Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Manuel'in burada olup bitenlerle ilgili dökümünü okumak için kendinize bir iyilik yapmış olursunuz, ancak temelde bu daha uzun sözdiziminin eşdeğeri olarak çalışır:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…nerede:

• maksimum() uygulanan değerin en büyük olduğu (veya MDN koyar, setteki "en olumlu").
• 0px kümedeki ilk değerdir ve en küçük değerin her zaman sıfır pikselden büyük olmasını sağlar.
• (100% - 64rem) kümedeki ikinci "değer"dir, ancak bir hesaplama olarak ifade edilir (not calc() gereksizdir) max-width elemanın (64rem) tam mevcut width (100%). Geriye kalan, öğenin işgal etmediği alandır.
• ((100% - 64rem) / 2)) öğenin satır içi sınırları arasında böldüğümüz için kalan alanı eşit olarak böler.
• max(0px, ((100% - 64rem) / 2)) karşılaştırır 0px ve (100% - 64rem) / 2). En büyük değer kullanılır. Çoğu durumda denklemin sonucu bu olacaktır, ancak 64rem elemanın tam değerinin hesaplanan değerinden her zamankinden daha büyük 100% genişlik, asla negatif bir değerle sonuçlanmamasını sağlamak için bu değeri sıfırda kilitler.
• margin-inline öğenin satır içi kenarlarına marj uygulayan kazanan değerin ayarladığı özelliktir - bu, aynı değeri margin-left ve margin-right fiziksel özellikler.

Bu aynı türden bir fikir Chris bir süre önce paylaştı CSS'yi kullanan max()çözmek için işlev “İç Sorun” — içindeki içeriği aşağıdakilerle sınırlandırırken tam çerçeve arka plan rengini destekleyen bir kapsayıcı padding.

max(), calc(), margin-inline… bu bir sürü yeni moda CSS! Ve Manuel tam ortasında 100 gün boyunca bunlar ve diğer modern CSS özellikleri hakkında yazı yazmak.

Doğrudan Bağlantı →