Manuel Matuzovic: max() Trickery

S pomočjo a prispevek Manuel Matuzović ki je v obliki predstavitve avtorja Temani Afif.

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

Naredili bi si uslugo, če bi prebrali Manuelovo razčlenitev vsega, kar se tukaj dogaja, vendar v bistvu deluje enakovredno tej daljši sintaksi:

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

…kje:

• največ () sprejme z vejicami ločen seznam številskih vrednosti CSS, kjer je uporabljena vrednost največja (ali kot MDN pravi, »najbolj pozitiven«) v nizu.
• 0px je prva vrednost v nizu, kar zagotavlja, da bo najmanjša vrednost vedno večja od nič slikovnih pik.
• (100% - 64rem) je druga "vrednost" v nizu, vendar je izražena kot izračun (upoštevajte, da calc() je nepotrebno), ki odšteje the max-width elementa (64rem) od polne razpoložljive width (100%). Kar ostane, je prostor, ki ga element ne zasede.
• ((100% - 64rem) / 2)) enakomerno razdeli preostali prostor, saj ga delimo med vgrajene meje elementa.
• max(0px, ((100% - 64rem) / 2)) primerja 0px in (100% - 64rem) / 2). Uporabljena je največja vrednost. To bo v večini primerov rezultat enačbe, toda če 64rem je vedno večja od izračunane vrednosti polnosti elementa 100% širina, bo to vrednost zaklenil na nič, da zagotovi, da nikoli ne povzroči negativne vrednosti.
• margin-inline je lastnost, ki jo nastavi zmagovalna vrednost, ki uporabi rob za strani v vrstici elementa - to je logična okrajšava, ki je enakovredna nastavitvi iste vrednosti za margin-left in margin-right fizične lastnosti.

Gre za isto vrsto ideje Chris je delil nekaj časa nazaj ki uporablja CSS max()funkcijo za reševanje "Notranji problem" — vsebnik, ki podpira barvo ozadja s polnim robom, hkrati pa omejuje vsebino v njem padding.

max(), calc(), margin-inline… to je veliko novodobnega CSS-ja! In Manuel je ravno v središču pisanje o teh in drugih sodobnih funkcijah CSS več kot 100 dni.

Neposredna povezava →