Manuel Matuzovic: max() tricky

Ved hjælp af en indlæg af Manuel Matuzović som er i form af en demo af Temani Afif.

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

Du ville gøre dig selv en tjeneste at læse Manuels opdeling af alt, hvad der sker her, men det svarer i bund og grund til at svare til denne længere syntaks:

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

…hvor:

• max() accepterer en kommasepareret liste over CSS numeriske værdier, hvor den anvendte værdi er den største (eller som MDN siger det, den "mest positive") i sættet.
• 0px er den første værdi i sættet, hvilket sikrer, at den mindste værdi altid vil være større end nul pixels.
• (100% - 64rem) er den anden "værdi" i sættet, men er udtrykt som en beregning (bemærk at calc() er unødvendig), der trækker den fra max-width af elementet (64rem) fra dens fulde tilgængelighed width (100%). Det, der er tilbage, er den plads, som ikke optages af elementet.
• ((100% - 64rem) / 2)) deler den resterende plads ligeligt, da vi deler den mellem elementets inline-grænser.
• max(0px, ((100% - 64rem) / 2)) sammenligner 0px , (100% - 64rem) / 2). Den største værdi bruges. Det vil være resultatet af ligningen i de fleste tilfælde, men hvis 64rem er stadig større end den beregnede værdi af elementets fuld 100% bredde, låser den værdien på nul for at sikre, at den aldrig resulterer i en negativ værdi.
• margin-inline er den egenskab, som den vindende værdi sætter, som anvender margen til elementets inline sider - det er den logiske stenografi, der svarer til at indstille den samme værdi til margin-left , margin-right fysiske egenskaber.

Det er den samme slags idé Chris delte for et stykke tid siden der bruger CSS max()funktion til at løse "Indvendigt problem" — en beholder, der understøtter en fuld-bleed-baggrundsfarve, mens den begrænser indholdet inde i den padding.

max(), calc(), margin-inline… det er en masse nymodens CSS! Og Manuel er lige smæk i midten af skrive om disse og andre moderne CSS-funktioner over 100 dage.

Direkte link →