Manuel Matuzovic: max() Trickery

Über einen Beitrag von Manuel Matuzović, der wiederum auf einer Demo von Temani Afif basiert.

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

Es wäre Ihnen dienlich, Manuel's Aufschlüsselung aller hier stattfindenden Vorgänge zu lesen, aber im Grunde genommen läuft es auf das Äquivalent dieser längeren Syntax hinaus

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

…wobei

• max() akzeptiert eine durch Kommas getrennte Liste von CSS-numerischen Werten, wobei der angewandte Wert der größte (oder wie MDN es ausdrückt, der „positivste“) Wert in der Menge ist.
• 0px ist der erste Wert in der Menge und stellt sicher, dass der kleinste Wert immer größer als null Pixel ist.
• (100% - 64rem) ist der zweite Wert in der Menge, aber er wird als Berechnung ausgedrückt (beachten Sie, dass calc() unnötig ist), bei der die max-width des Elements (64rem) von seiner voll verfügbaren width (100%) abgezogen wird. Was übrig bleibt, ist der Platz, der nicht vom Element eingenommen wird.
• ((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ößere Wert wird verwendet. Das wird in den meisten Fällen das Ergebnis der Gleichung sein, aber wenn 64rem jemals größer ist als der berechnete Wert der vollen 100% Breite des Elements, wird dieser Wert auf Null gesetzt, um sicherzustellen, dass er niemals einen negativen Wert ergibt.
• margin-inline ist die Eigenschaft, die der gewählte Wert festlegt, was einen Außenabstand zu den Inline-Seiten des Elements anwendet – das ist die logische Kurzschreibweise, die dem Setzen desselben Werts auf die physischen Eigenschaften von margin-left und margin-right entspricht.

Es ist im Grunde die gleiche Idee, die Chris vor einiger Zeit vorgestellt hat, bei der die CSS-Funktion max() verwendet wird, um das „Inside Problem“ zu lösen – ein Container, der einen Volltonhintergrund unterstützt und gleichzeitig den darin enthaltenen Inhalt mit padding einschränkt.

max(), calc(), margin-inline… das ist viel neuer Schnickschnack im CSS! Und Manuel schreibt genau darüber und über andere moderne CSS-Features im Rahmen von 100 Tagen.

Direkter Link →