Manuel Matuzovic: max() Huijaus

Tapaa a Manuel Matuzovićin viesti joka on demon kautta Temani Afif.

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

Tekisit itsellesi palveluksen, jos lukisit Manuelin erittelyn kaikesta, mitä täällä tapahtuu, mutta periaatteessa se vastaa tätä pidempää syntaksia:

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

…missä:

• max() hyväksyy CSS-numeeristen arvojen pilkuilla erotetun luettelon, jossa käytetty arvo on suurin (tai MDN esittää sen, "positiivisin") yksi sarjassa.
• 0px on joukon ensimmäinen arvo, mikä varmistaa, että pienin arvo on aina suurempi kuin nolla pikseliä.
• (100% - 64rem) on joukon toinen "arvo", mutta se ilmaistaan ​​laskutoimituksena (huomaa, että calc() on tarpeeton), joka vähentää max-width elementistä (64rem) kokonaan saatavilla width (100%). Jäljelle jää tilaa, jota elementti ei vie.
• ((100% - 64rem) / 2)) jakaa jäljellä olevan tilan tasaisesti, koska jaamme sen elementin sisäisten rajojen välillä.
• max(0px, ((100% - 64rem) / 2)) vertaa 0px ja (100% - 64rem) / 2). Suurin arvo on käytössä. Se on yhtälön tulos useimmissa tapauksissa, mutta jos 64rem on aina suurempi kuin elementin täyteen laskettu arvo 100% leveys, se lukitsee arvon nollaan varmistaakseen, että se ei koskaan johda negatiiviseen arvoon.
• margin-inline on ominaisuus, jonka voittaja arvo asettaa ja joka käyttää marginaalia elementin rivin sivuille – se on looginen lyhenne, joka vastaa saman arvon asettamista margin-left ja margin-right fyysiset ominaisuudet.

Se on samanlainen ajatus Chris jakoi hetki sitten joka käyttää CSS:ää max()toiminto ratkaisemaan "Sisäinen ongelma" — säilö, joka tukee täyttä taustaväriä ja rajoittaa sen sisällä olevaa sisältöä padding.

max(), calc(), margin-inline… se on paljon uutta CSS:ää! Ja Manuel on aivan helkkarin keskellä kirjoittaa näistä ja muista nykyaikaisista CSS-ominaisuuksista yli 100 päivää.

Suora linkki →