Мануэль Матузович: max() Обман

Через сообщение Мануэля Матузовича который является демонстрацией Темани Афиф.

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

Вы бы сделали себе одолжение, если бы прочитали разбивку Мануэля всего, что здесь происходит, но в основном это эквивалентно этому более длинному синтаксису:

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

…куда:

• Максимум() принимает список числовых значений CSS, разделенных запятыми, где применяемое значение является наибольшим (или как MDN ставит это, «самый положительный») один в наборе.
• 0px является первым значением в наборе, гарантируя, что наименьшее значение всегда будет больше нуля пикселей.
• (100% - 64rem) является вторым «значением» в наборе, но выражается как вычисление (обратите внимание, что calc() не нужен), который вычитает max-width элемента (64rem) из его полного имеющегося width (100%). Остается пространство, не занятое элементом.
• ((100% - 64rem) / 2)) делит это оставшееся пространство поровну, так как мы делим его между встроенными границами элемента.
• max(0px, ((100% - 64rem) / 2)) сравнивает 0px и (100% - 64rem) / 2). Используется наибольшее значение. В большинстве случаев это будет результатом уравнения, но если 64rem когда-либо больше, чем вычисленное значение полного элемента 100% width, он заблокирует это значение на нуле, чтобы гарантировать, что оно никогда не приведет к отрицательному значению.
• margin-inline — это свойство, которое устанавливает выигрышное значение, которое применяет поле к встроенным сторонам элемента — это логическое сокращение эквивалентно установке того же значения для margin-left и margin-right физические свойства.

Это такая же идея Крис поделился некоторое время назад который использует CSS max()функция для решения задачи «Внутренняя проблема» — контейнер, который поддерживает цвет фона без полей, ограничивая содержимое внутри него с помощью padding.

max(), calc(), margin-inline… это много новомодного CSS! И Мануэль как раз в середине писать об этих и других современных функциях CSS более 100 дней.

Прямая ссылка →