Manuel Matuzovic: max() Trickserei

Über a Beitrag von Manuel Matuzović das ist als Demo von Temani Afif.

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

Sie würden sich selbst einen Gefallen tun, wenn Sie Manuels Aufschlüsselung all dessen lesen würden, was hier passiert, aber im Grunde entspricht es dieser längeren Syntax:

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

…wo:

• max () akzeptiert eine durch Kommas getrennte Liste von numerischen CSS-Werten, wobei der angewendete Wert der größte ist (oder als MDN bringt es auf den Punkt, der „positivste“) im Set.
• 0px ist der erste Wert im Satz, wodurch sichergestellt wird, dass der kleinste Wert immer größer als null Pixel ist.
• (100% - 64rem) ist der zweite „Wert“ in der Menge, wird aber als Berechnung ausgedrückt (beachten Sie, dass calc() ist unnötig), die das subtrahiert max-width des Elements (64rem) aus seiner vollen verfügbaren width (100%). Übrig bleibt der Platz, den das Element nicht einnimmt.
• ((100% - 64rem) / 2)) teilt diesen verbleibenden Platz gleichmäßig auf, da wir ihn zwischen den Inline-Grenzen des Elements aufteilen.
• max(0px, ((100% - 64rem) / 2)) vergleicht 0px und (100% - 64rem) / 2). Der größte Wert wird verwendet. Das wird in den meisten Fällen das Ergebnis der Gleichung sein, aber wenn 64rem immer größer ist als der berechnete Wert des Elements full 100% width, wird dieser Wert auf Null gesperrt, um sicherzustellen, dass er niemals zu einem negativen Wert führt.
• margin-inline ist die Eigenschaft, die der gewinnende Wert festlegt, der eine Marge auf die Inline-Seiten des Elements anwendet – das ist die logische Abkürzung zum Festlegen desselben Werts für die margin-left und margin-right physikalische Eigenschaften.

Es ist die gleiche Art von Idee Chris hat vor einiger Zeit geteilt die das CSS verwendet max()Funktion zum Lösen der „Inneres Problem“ — ein Container, der eine randlose Hintergrundfarbe unterstützt und gleichzeitig den darin enthaltenen Inhalt einschränkt padding.

max(), calc(), margin-inline… das ist eine Menge neumodisches CSS! Und Manuel ist mittendrin 100 Tage lang über diese und andere moderne CSS-Features geschrieben.

Direktlink →