Взаимодействие 2026 | CSS-трюки

Interop 2026 официально состоится. Итак, вы знаете все эти дикие новые функции CSS, на которых мы всегда фокусируемся, но всегда ставим под предупреждением «отсутствие поддержки браузера»? Большая тройка — Blink (Chrome/Edge), WebKit (Safari) и Mozilla (Firefox) — работают вместе, чтобы обеспечить полную и постоянную поддержку!

Вы можете прочитать сообщение в блоге самостоятельно:

И да, есть Очень Чтобы увлечься CSS конкретно:

позиция якоря

Из нашего руководства:

Позиционирование привязки CSS дает нам простой интерфейс для соединения элементов рядом с другими, просто указывая, к какой стороне подключаться — непосредственно в CSS. Это также позволяет нам установить резервное условие, чтобы избежать только что описанных проблем переполнения.

передовой attr()

на самом деле у нас есть attr() Работаю около 15 лет. Но теперь мы сможем передавать туда переменные… С преобразованием типов!

вопросы по стилю контейнера

Мы уже можем запрашивать контейнеры по «типу», но только по размеру. Было бы здорово, если бы мы могли применять стили на основе других стилей. Рассказывать:

@container style((font-style: italic) and (--color-mode: light)) {
  em, i, q {
    background: lightpink;
  }
}

contrast-color() Праздник

Получить правильный цветовой контраст между текстом переднего плана и фоном может быть довольно легко, но это работа вручную, которую мы можем изменить с помощью медиа-запроса на основе текущей цветовой схемы. с contrast-color() (мне всегда хочется написать это так color-contrast()возможно, потому что это было оригинальное название) мы можем динамически переключаться color Между белым и черным.

button {
  --background-color: darkblue;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

пользовательские моменты

Выделите все! у нас есть ::selection Навсегда, но теперь у нас будет куча других:

Диалоги и всплывающие окна

Наконец-то, без использования JavaScript (и декларативный) способ установки элементов на верхнем слое! Мы действительно тщательно изучили их за последние несколько лет.

псевдокласс мультимедиа

Как часто вы хотите его стилизовать? Или Элемент основан на его состоянии? Может быть, с помощью JavaScript, верно? Для того, чтобы это работало, в CSS у нас будет несколько условий:

• :playing
• :paused
• :seeking
• :buffering
• :stalled
• :muted
• :volume-locked

Мне нравится этот пример объявления WebKit:

video:buffering::after {
  content: "Loading...";
}

Анимация, управляемая прокруткой

Ну, мы все этого хотим. Мы говорим конкретно об анимации, реагирующей на прокрутку. Другими словами, существует прямая связь между ходом прокрутки и ходом анимации.

#progress {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

привязка прокрутки

Здесь нет ничего нового, но все приведено в соответствие с тем, как менялись характеристики с годами!

shape() Праздник

Это тот, который Темани недавно придумал, и его Конвертер SVG Path to Shape должен быть закладкой. shape() Можно создавать сложные формы при обрезке элементов. clip-path Свойство. У нас уже много лет есть возможность формировать базовые формы – подумайте circle, ellipse()И polygon() – Но не существует «простого» способа создания более сложных форм. И теперь у нас есть нечто менее SVG-y, которое принимает CSS-сущности, вычисления и другие вещи.

.clipped {
  width: 250px;
  height: 100px;
  box-sizing: border-box;
  background-color: blue;
  clip-path: shape(
    from top left,
    hline to 100%,
    vline to 100%,
    curve to 0% 100% with 50% 0%,
  );
}

изменить вид

Существует два типа визуальных переходов: однодокументные (переходы на одной странице) и междокументные (или то, что мы часто называем многостраничными переходами). Переходы между страницами стали базовыми в 2025 году, и сейчас браузеры работают над кросс-совместимой реализацией переходов между документами.

CSS zoom Свойство

О, я этого не ожидал! Я имею в виду, у нас есть zoom Спустя годы – наша страница в Альманахе была опубликована в 2011 году – но как нестандартное свойство. Возможно, я упустил из виду, что эта версия Baseline 2024 появилась недавно и находилась в разработке как часть Interop 2025. В этом году она развивается.

zoom что-то вроде этого scale() функция, но на самом деле она влияет на макет scale() Он просто визуален и преодолевает все на своем пути.

это обертка! Добавьте в закладки панель управления Interop 2026, чтобы следить за развитием событий.