<style>
  :root {
    interpolate-size: 
      allow-keywords;
  }

  .box {
    width: 200px;
    height: 2lh;
    border: 2px solid;
    overflow: hidden;
    transition: height .4s;
  }

  .box:hover {
    height: auto;
  }
</style>

<div class="box">
  Далеко-далеко, за словесными 
  горами в стране гласных 
  и согласных живут рыбные тексты.
</div>

--bg-color: #000;
--bg-alpha-03-color: rgba(0, 0, 0, .3);
--bg-alpha-05-color: rgba(0, 0, 0, .5);
--bg-alpha-08-color: rgba(0, 0, 0, .8);

.block {
  --bg-color: 0 0 0;
  color: rgb(var(--bg-color) / .3);
}

@function srgb($color, $alpha) {
  @return color-mix(in srgb, $color, transparent $alpha);
}

.block {
  --block-color: #000;
  color: srgb(var(--block-color), 50%);
}

❗️Функция SCSS в примере решает проблему удобства, не является обязательной

Данные значения относятся к intrinsic sizing (размеры определяются содержимым, а не внешними факторами).

.box {
  width: max-content;
}

.box {
  width: min-content;
}

.box {
  width: fit-content;
}

fit-content

— лучший выбор для адаптивного дизайна, но max-content и min-content полезны в специфических случаях

В мае 2023 поддержка составляла всего 0.15% (только Safari), а уже в феврале 2025 — 90.35% во всех современных браузерах. Пора использовать эту мощную фичу!

.box-1 {
  --primary: darkblue;

  color: hsl(from var(--primary) h s calc(l + (l * .8)));
}
/* l — lightness для darkblue = 27.25% */

.box-2 {
  --primary: darkblue;

  background-color: hsl(from var(--primary) h calc(s + 80) l);
}
/* S — saturation для darkblue = 100% */

.box-3 {
  --primary: darkblue;

  background-color: hsl(from var(--primary) h s l / .8);
}

Этот подход может показаться не привычным и сложным.
Но его применение для меня очевидно — эффекты hover, active, focus, disabled на основе всего одного цвета! 🎨

select {
  appearance: base-select; /* Сбрасывает стандартные стили */
  /* Ваши кастомные стили */
}

Это изменение позволяет использовать дополнительные теги внутри <select>помимо <option>, <optgroup>, и <hr>.

<dialog closedby="any"> <!-- Закрытие кликом вне окна или Esc -->
  <p>Диалог с новыми настройками</p>
</dialog>

closedby="none"

– Отключает закрытие диалоговых окон пользователем.

closedby="closerequest"

– Нажатие Esc (или другой триггер закрытия) закрывает диалоговое окно.

closedby="any"

– Клик за пределами диалогового окна или нажатие Esc закрывает диалоговое окно (похоже на popover="auto" поведение).

<meta name="subtitle" content="Новые уведомления">>

Смещение прокрутки будет учитываться при определении размера элемента. Это означает, что мы можем избежать кейсов, при которых изменение размера будет влиять на смещение прокрутки.

.box {
  interactivity: inert; /* Пока работает только в Chrome 135+ */
}

.box {
  clip-path: shape(ellipse(50% 50% at 50% 50%));
  transition: clip-path .2s;
}

.box:hover {
  clip-path: shape(polygon(0 20%, 100% 0, 100% 80%, 0 100%));
}

Эта функция полезна для создания анимации морфинга фигур или обрезки элементов сложной формы.

Браузеры стараются сохранять положение просмотра при динамическом изменении контента, но это может вызывать раздражающие "прыжки" страницы. Чтобы избежать таких эффектов, используется overflow-anchor: none.

.box {
  overflow-anchor: none;
}

Позволяет проектировать и тестировать кривые Безье в режиме реального времени, упрощая работу веб-разработчиков и дизайнеров.

🧑🏻‍💻 На мой взгляд очень удачный пример, полезного инструмента, с понятной философией: превратить сложные математические расчеты в визуальное творчество.

Миксины — эффективный способ манипулировать повторяющимися фрагментами кода.

@mixin box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

.box {
  @include box;
}

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

.box {
  @apply --box;
}

🚀 Поддержка взлетела с 0% до 76.24%

Простыми словами, можно комбинировать свойства, зная этот нюанс в поведении flex-wrap, для корректного и универсального выравнивания.

if() — экспериментальная CSS-функция для условного задания значений свойств, аналог if…else в JS.

if(<условие>: <значение>; [else: <значение>;])

background-color: if(media(print): white; else: #eee;)

color: if(supports(color: lch(75% 0 0)): lch(75% 0 0); else: rgb(185 185 185);)

padding: if(style(--size: "2xl"): 1em; else: 0.25em;)

if() упрощает условное оформление стилей, но использовать нужно осторожно из-за ограниченной поддержки.

li {
  width: calc(100% / sibling-count());
}

li {
  animation-delay: calc(.1s * sibling-index());
}

💡 Раньше такие вещи делали через JS (перебором children, и добавлением inline-стилей).

Теперь всё можно решить одним CSS