Manuel Matuzovic: max() bedrog

Bij wijze van bericht door Manuel Matuzović dat is door middel van een demo door Temani Afifi.

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

Je zou jezelf een plezier doen om Manuel's analyse van alles wat hier gebeurt te lezen, maar het komt in feite neer op het equivalent van deze langere syntaxis:

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

…waar:

• max () accepteert een door komma's gescheiden lijst van CSS-numerieke waarden, waarbij de toegepaste waarde de grootste is (of als MDN zegt het, de "meest positieve") in de set.
• 0px is de eerste waarde in de set, zodat de kleinste waarde altijd groter is dan nul pixels.
• (100% - 64rem) is de tweede "waarde" in de set, maar wordt uitgedrukt als een berekening (merk op dat calc() is niet nodig) die de de . aftrekt max-width van het element (64rem) van zijn volledige beschikbaar width (100%). Wat overblijft is de ruimte die niet door het element wordt ingenomen.
• ((100% - 64rem) / 2)) verdeelt die resterende ruimte gelijk, omdat we het verdelen tussen de inline-grenzen van het element.
• max(0px, ((100% - 64rem) / 2)) vergelijkt 0px en (100% - 64rem) / 2). De grootste waarde wordt gebruikt. Dat is in de meeste gevallen het resultaat van de vergelijking, maar als: 64rem is ooit groter dan de berekende waarde van de volledige waarde van het element 100% breedte, vergrendelt het die waarde op nul om ervoor te zorgen dat het nooit in een negatieve waarde resulteert.
• margin-inline is de eigenschap die de winnende waarde instelt, die marge toepast op de inline-zijden van het element - dat is het logische steno-equivalent van het instellen van dezelfde waarde op de margin-left en margin-right fysieke eigenschappen.

Het is hetzelfde soort idee Chris deelde een tijdje terug die gebruikmaakt van de CSS max()functie om de op te lossen "Binnen probleem" — een container die een full-bleed achtergrondkleur ondersteunt terwijl de inhoud erin wordt beperkt met padding.

max(), calc(), margin-inline… dat is een heleboel nieuwerwetse CSS! En Manuel zit er precies middenin schrijven over deze en andere moderne CSS-functies gedurende 100 dagen.

Directe link →