Manuel Matuzovic: max() Trucos

A modo de escrito por Manuel Matuzović que es a modo de demostración de Temani Afif.

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

Te estarías haciendo un favor al leer el desglose de Manuel de todo lo que está sucediendo aquí, pero básicamente funciona con el equivalente de esta sintaxis más larga:

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

…dónde:

• max () Acepta una lista separada por comas de valores numéricos CSS, donde el valor aplicado es el más grande (o como MDN lo pone, el “más positivo”) del conjunto.
• 0px es el primer valor del conjunto, lo que garantiza que el valor más pequeño siempre será mayor que cero píxeles.
• (100% - 64rem) es el segundo "valor" en el conjunto, pero se expresa como un cálculo (tenga en cuenta que calc() es innecesario) que resta el max-width del elemento (64rem) de su total disponibilidad width (100%). Lo que queda es el espacio que no ocupa el elemento.
• ((100% - 64rem) / 2)) divide el espacio restante por igual ya que lo estamos dividiendo entre los límites en línea del elemento.
• max(0px, ((100% - 64rem) / 2)) compara 0px y (100% - 64rem) / 2). Se utiliza el valor más grande. Ese será el resultado de la ecuación en la mayoría de los casos, pero si 64rem es cada vez mayor que el valor calculado de la totalidad del elemento 100% width, bloqueará ese valor en cero para garantizar que nunca resulte en un valor negativo.
• margin-inline es la propiedad que establece el valor ganador, que aplica margen a los lados en línea del elemento; esa es la abreviatura lógica equivalente a establecer el mismo valor para el margin-left y margin-right propiedades físicas.

Es el mismo tipo de idea Chris compartió hace un tiempo que usa el CSS max()función para resolver el “Problema interior” — un contenedor que admite un color de fondo de sangrado completo mientras restringe el contenido dentro de él con padding.

max(), calc(), margin-inline… ¡eso es mucho CSS novedoso! Y Manuel está justo justo en medio de escribiendo sobre estas y otras características modernas de CSS durante 100 días.

Enlace directo →