Manuel Matuzovic: max() Trükkös

útján a Manuel Matuzović bejegyzése amelyet egy demó útján Temani Afif.

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

Szívességet tennél magadnak, ha elolvasnád Manuel leírását az itt történtekről, de ez alapvetően ennek a hosszabb szintaxisnak megfelelő:

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

…ahol:

• max () elfogadja a CSS numerikus értékek vesszővel elválasztott listáját, ahol az alkalmazott érték a legnagyobb (vagy Az MDN úgy fogalmaz, a „legpozitívabb”) egy a készletben.
• 0px az első érték a készletben, biztosítva, hogy a legkisebb érték mindig nagyobb legyen, mint nulla pixel.
• (100% - 64rem) a második „érték” a halmazban, de számításként van kifejezve (jegyezd meg, hogy calc() szükségtelen), amely kivonja a max-width az elemből (64rem) a teljes elérhetőségéből width (100%). Ami maradt, az az elem által nem foglalt hely.
• ((100% - 64rem) / 2)) egyenlően osztja fel ezt a fennmaradó teret, mivel az elem belső határai között osztjuk fel.
• max(0px, ((100% - 64rem) / 2)) összehasonlítja 0px és a (100% - 64rem) / 2). A legnagyobb érték kerül felhasználásra. A legtöbb esetben ez lesz az egyenlet eredménye, de ha 64rem mindig nagyobb, mint az elem teljességének számított értéke 100% szélességben, akkor az értéket nullára zárja, hogy soha ne adjon negatív értéket.
• margin-inline az a tulajdonság, amelyet a nyertes érték állít be, és amely margót alkalmaz az elem soron belüli oldalaira – ez a logikai rövidítés, amely megegyezik az azonos érték beállításával margin-left és a margin-right fizikai tulajdonságok.

Ez ugyanaz a fajta ötlet Chris megosztotta egy ideje amely a CSS-t használja max()funkcióval oldja meg a „Belső probléma” — olyan tároló, amely támogatja a teljes háttérszínt, miközben korlátozza a benne lévő tartalmat padding.

max(), calc(), margin-inline… ez egy csomó újszerű CSS! És Manuel jól esik a közepén több mint 100 napon keresztül ír ezekről és más modern CSS-funkciókról.

Közvetlen link →