Manuel Matuzovic: max() trikitamine

teel a Manuel Matuzovići postitus mis on demo kaudu Temani Afif.

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

Teeksite endale teene, kui loeksite Manueli jaotust kõigest siin toimuvast, kuid see toimib põhimõtteliselt selle pikema süntaksi ekvivalendiga:

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

…kus:

• max() aktsepteerib komadega eraldatud CSS-i arvväärtuste loendit, kus rakendatav väärtus on suurim (või MDN paneb selle, “kõige positiivsem”) üks komplektis.
• 0px on komplekti esimene väärtus, mis tagab, et väikseim väärtus on alati suurem kui null pikslit.
• (100% - 64rem) on komplekti teine ​​"väärtus", kuid seda väljendatakse arvutusena (pange tähele, et calc() on tarbetu), mis lahutab max-width elemendist (64rem) täielikult saadaval width (100%). Alles jääb ruum, mida element ei võta.
• ((100% - 64rem) / 2)) jagab selle ülejäänud ruumi võrdselt, kuna jagame selle elemendi sisemiste piiride vahel.
• max(0px, ((100% - 64rem) / 2)) võrdleb 0px ja (100% - 64rem) / 2). Kasutatakse suurimat väärtust. See on enamikul juhtudel võrrandi tulemus, kuid kui 64rem on alati suurem kui elemendi täisväärtuse arvutatud väärtus 100% laius, lukustab see selle väärtuse nulli tagamaks, et see ei anna kunagi negatiivset väärtust.
• margin-inline on atribuut, mille määrab võitnud väärtus, mis rakendab veerise elemendi sisestele külgedele – see on loogiline stenogramm, mis võrdub sama väärtuse määramisega elemendile. margin-left ja margin-right füüsikalised omadused.

See on samasugune idee Chris jagas mõni aeg tagasi mis kasutab CSS-i max()funktsiooni lahendamiseks "Sisemine probleem" — konteiner, mis toetab täielikku taustavärvi, piirates samal ajal selle sees olevat sisu padding.

max(), calc(), margin-inline... see on palju uudset CSS-i! Ja Manuel on otsekohe selle keskel kirjutades nendest ja muudest kaasaegsetest CSS-i funktsioonidest üle 100 päeva.

Otsene link →