Виталий и Платформа: “Что нового Baseline Widely Available, часть 2 ...продолжение CSS Two-v…”

Что нового Baseline Widely Available, часть 2

...продолжение

CSS

Two-value display property — свойство display теперь принимает два значения для явного указания внешнего и внутреннего режима layouts. Например, inline flex или block flow.


.card {
  display: inline flex;
}
.container {
  display: block flow;
}

Мнение: 2 из 5, любопытно, но не более.

—

overflow: clip — обрезка содержимого без создания скроллов, с возможностью обрезки только по одной стороне


.nav-bar {
  overflow-x: clip;
  overflow-y: visible;
}

Мнение: 4 из 5, полезно, если нужно включить скролл по одной стороне + также это значение overflow, в котором не создаётся новый formatting context.

—

overscroll-behavior — управление поведением при прокрутке за границы.


.container {
  overscroll-behavior: contain;
}

Мнение: 3 из 5, очень узкоспециализированная фича, но может быть крайне полезна для управлением мульти-скроллом.

—

outline — свойства для стилизации линии вокруг элемента вне border, не влияющие на layout.


.element {
  outline: 2px dashed red;
  outline-offset: 5px;
}

Мнение: 3 из 5, фича-то старая, но был баг в Safari, который починили в 03.2023.

—

:nth-child() of <selector> — более точный выбор элементов с фильтром по селектору.


li:nth-child(odd of .active) {
  background: yellow;
}

Мнение: 4 из 5, прикольная штука для условной стилизации, полезно вспомнить перед решением реализовать такое на JS.

—

Media Query Range Syntax — новый синтаксис для медиавыражений с диапазонами.


@media (400px <= width <= 800px) {
  /* стили */
}

Мнение: 4 из 5, синтаксический сахар, нравится, что наконец не нужно каждый раз вспоминать и перебирать варианты min/max-width.

—

Resolution Media Query — медиавыражение для применения стилей на основе плотности пикселей устройства.


@media (min-resolution: 2dppx) {
  /* стили для high-DPI экранов */
}

Мнение: 2 из 5, узкоспециализированная фича, но может пригодиться для детальной стилизации для разных мобильных устройств.

—

Trigonometric Functions — sin(), cos(), tan() в CSS для математических вычислений.


.element {
  transform: rotate(calc(sin(45deg) * 1turn));
}

Мнение: 2 из 5, любопытно, но слишком хардкорно, малоприменимо в реальной жизни.

—

calc() Keywords — математические константы e, pi, infinity, NaN в CSS math функциях.


.element {
  font-size: calc(var(--base-size) * pi);
  height: calc(100vh * sin(pi / 2));
}

Мнение: 1 из 5, не могу придумать, где это применить.

—

font-palette — выбор цветовой палитры из шрифта, с возможностью переопределения отдельных цветов через @font-palette-values.


.element {
  font-palette: alternate;
}

Мнение: 1 из 5, малополезная фича, применимая только для "цветных" шрифтов, не стоит внимания

—

Style Containment и Inline-size Containment — изоляция стилей элемента. style ограничивает расчёт счётчиков и кавычек внутри элемента, а inline-size предотвращает установку inline-размеров элемента его содержимым, ускоряя рендеринг.


.widget {
  contain: style;
}

.container {
  contain: inline-size;
}

Мнение: 3 из 5, мелкие малополезные фичи, style может пригодиться разве что в нестандартных нумерованных списках; inline-size, могу только в теории представить, что может быть полезно в разного рода wysiwyg-ах (за исключением контейнерных запросов, которые без этой шутки не заработают).

—

HTML / DOM

inert — атрибут для отключения элементов от взаимодействия и accessibility tree. Элементы не получают фокус и не реагируют на клики.


<div inert>
  <button>Неактивная кнопка</button>
</div>

Мнение: 4 из 5, мощная и простая фича, хороший юзкейс для ограничения пределов фокуса при показе модальных окон: модалка работает, body под ней за inert-ом.

продолжение следует...

#Пульс_веб_платформы

@web_platform | Поддержать платформу ⭐️