Manuel Matuzovic: max() Inganno

A titolo di a post di Manuel Matuzović che è tramite una demo di Temani Afif.

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

Faresti un favore a te stesso se leggessi la suddivisione di Manuel su tutto ciò che sta accadendo qui, ma sostanzialmente funziona nell'equivalente di questa sintassi più lunga:

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

…dove:

• max () accetta un elenco separato da virgole di valori numerici CSS, dove il valore applicato è il più grande (o as Lo dice MDN, il “più positivo”) del set.
• 0px è il primo valore nel set, garantendo che il valore più piccolo sarà sempre maggiore di zero pixel.
• (100% - 64rem) è il secondo "valore" nell'insieme, ma è espresso come calcolo (nota che calc() non è necessario) che sottrae il the max-width dell'elemento (64rem) dalla sua piena disponibilità width (100%). Ciò che resta è lo spazio non occupato dall'elemento.
• ((100% - 64rem) / 2)) divide equamente lo spazio rimanente poiché lo stiamo dividendo tra i confini in linea dell'elemento.
• max(0px, ((100% - 64rem) / 2)) a confronto 0px ed (100% - 64rem) / 2). Viene utilizzato il valore più grande. Questo sarà il risultato dell'equazione nella maggior parte dei casi, ma se 64rem è sempre maggiore del valore calcolato del pieno dell'elemento 100% larghezza, bloccherà quel valore a zero per garantire che non risulti mai in un valore negativo.
• margin-inline è la proprietà impostata dal valore vincente, che applica il margine ai lati in linea dell'elemento: questa è la scorciatoia logica equivalente all'impostazione dello stesso valore per margin-left ed margin-right Proprietà fisiche.

È lo stesso tipo di idea Chris ha condiviso qualche tempo fa che utilizza i CSS max()funzione per risolvere il “Problema interno” — un contenitore che supporta un colore di sfondo al vivo limitando al contempo il contenuto al suo interno padding.

max(), calc(), margin-inline… sono un sacco di nuovi CSS! E Manuel è proprio nel mezzo scrivendo su queste e altre funzionalità CSS moderne per oltre 100 giorni.

Collegamento diretto →