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ż, żecalc()
jest niepotrzebne), który odejmujemax-width
elementu (64rem
) od pełnej dostępnejwidth
(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ównuje0px
i(100% - 64rem) / 2)
. Używana jest największa wartość. W większości przypadków będzie to wynik równania, ale jeśli64rem
jest zawsze większa niż obliczona wartość pełnego elementu100%
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 namargin-left
imargin-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.