Manuel Matuzovic: max() lureri

Ved hjelp av en innlegg av Manuel Matuzović som er i form av en demo av Temani Afif.

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

Du vil gjøre deg selv en tjeneste å lese Manuels oversikt over alt som skjer her, men det fungerer i bunn og grunn tilsvarer denne lengre syntaksen:

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

…hvor:

• maks () aksepterer en kommadelt liste over CSS-numeriske verdier, der den anvendte verdien er størst (eller som MDN sier det, den "mest positive") i settet.
• 0px er den første verdien i settet, og sikrer at den minste verdien alltid vil være større enn null piksler.
• (100% - 64rem) er den andre "verdien" i settet, men er uttrykt som en beregning (merk at calc() er unødvendig) som trekker fra den max-width av elementet (64rem) fra sin fulle tilgjengelighet width (100%). Det som er igjen er plassen som ikke tas opp av elementet.
• ((100% - 64rem) / 2)) deler den gjenværende plassen likt siden vi deler den mellom elementets innebygde grenser.
• max(0px, ((100% - 64rem) / 2)) sammen 0px og (100% - 64rem) / 2). Den største verdien brukes. Det vil være resultatet av ligningen i de fleste tilfeller, men hvis 64rem er stadig større enn den beregnede verdien av elementets fulle 100% bredde, vil den låse verdien på null for å sikre at den aldri resulterer i en negativ verdi.
• margin-inline er egenskapen som vinnerverdien setter, som bruker margin på de innebygde sidene av elementet - det er den logiske forkortelsen som tilsvarer å sette den samme verdien til margin-left og margin-right fysiske egenskaper.

Det er samme type idé Chris delte for en stund tilbake som bruker CSS max()funksjon for å løse "Indre problem" — en beholder som støtter en full-bleed bakgrunnsfarge mens den begrenser innholdet i den padding.

max(), calc(), margin-inline… det er mye nymotens CSS! Og Manuel er midt i blinken skrive om disse og andre moderne CSS-funksjoner over 100 dager.

Direkte lenke →