Manuel Matuzovic: max() trapaça

Por meio de um post de Manuel Matuzović que é por meio de uma demonstração por Temani Afif.

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

Você estaria fazendo um favor a si mesmo ao ler o detalhamento de Manuel de tudo o que está acontecendo aqui, mas basicamente funciona como o equivalente a essa sintaxe mais longa:

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

…Onde:

• max () aceita uma lista separada por vírgulas de valores numéricos CSS, onde o valor aplicado é o maior (ou conforme MDN coloca, o “mais positivo”) do conjunto.
• 0px é o primeiro valor no conjunto, garantindo que o menor valor sempre será maior que zero pixels.
• (100% - 64rem) é o segundo “valor” no conjunto, mas é expresso como um cálculo (observe que calc() é desnecessário) que subtrai o max-width do elemento (64rem) de seu total disponível width (100%). O que resta é o espaço não ocupado pelo elemento.
• ((100% - 64rem) / 2)) divide esse espaço restante igualmente, já que estamos dividindo-o entre os limites em linha do elemento.
• max(0px, ((100% - 64rem) / 2)) compara 0px e (100% - 64rem) / 2). O maior valor é usado. Esse será o resultado da equação na maioria dos casos, mas se 64rem é sempre maior do que o valor calculado do valor total do elemento 100% largura, ele bloqueará esse valor em zero para garantir que nunca resulte em um valor negativo.
• margin-inline é a propriedade que o valor vencedor define, que aplica margem aos lados embutidos do elemento - essa é a abreviação lógica equivalente a definir o mesmo valor para o margin-left e margin-right propriedades físicas.

É o mesmo tipo de ideia Chris compartilhou um tempo atrás que usa o CSS max()função para resolver o “Problema Interno” — um contêiner que oferece suporte a uma cor de fundo sem margens enquanto restringe o conteúdo dentro dele com padding.

max(), calc(), margin-inline… isso é muito CSS moderno! E Manuel está bem no meio da escrevendo sobre esses e outros recursos CSS modernos por mais de 100 dias.

Link Direto →