Manuel Matuzovic: max() Oszustwo

W drodze post przez Manuela Matuzović co jest w formie demo by Temani Afif.

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

Wyświadczyłbyś sobie przysługę, czytając opis wszystkiego, co się tutaj dzieje, autorstwa Manuela, ale w zasadzie działa to tak samo, jak ta dłuższa składnia:

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

…gdzie:

• max () akceptuje listę wartości numerycznych CSS oddzielonych przecinkami, gdzie zastosowana wartość jest największa (lub MDN to stawia, „najbardziej pozytywny”) w zestawie.
• 0px to pierwsza wartość w zestawie, zapewniająca, że ​​najmniejsza wartość będzie zawsze większa niż zero pikseli.
• (100% - 64rem) jest drugą „wartością” w zestawie, ale jest wyrażona jako obliczenie (zauważ, że calc() jest niepotrzebne), który odejmuje max-width elementu (64rem) od pełnej dostępnej width (100%). Pozostaje przestrzeń, której nie zajmuje element.
• ((100% - 64rem) / 2)) dzieli tę pozostałą przestrzeń równo, ponieważ dzielimy ją między wbudowane granice elementu.
• max(0px, ((100% - 64rem) / 2)) porównuje 0px i (100% - 64rem) / 2). Używana jest największa wartość. W większości przypadków będzie to wynik równania, ale jeśli 64rem jest zawsze większa niż obliczona wartość pełnego elementu 100% szerokość, zablokuje tę wartość na zero, aby upewnić się, że nigdy nie spowoduje to wartości ujemnej.
• margin-inline jest właściwością ustawianą przez wygrywającą wartość, która stosuje margines do wewnętrznych stron elementu — jest to logiczny skrót równoważny ustawieniu tej samej wartości na margin-left i margin-right właściwości fizyczne.

To ten sam pomysł Chris udostępnił chwilę temu który używa CSS max()funkcja do rozwiązania „Wewnętrzny problem” — pojemnik, który obsługuje kolor tła z pełnym spadem, jednocześnie ograniczając zawartość w nim za pomocą padding.

max(), calc(), margin-inline… to dużo nowego CSS! A Manuel ma rację w środku? pisanie o tych i innych nowoczesnych funkcjach CSS przez ponad 100 dni.

Bezpośrednie łącze →