Состояние, логика и основные возможности: CSS Wrapped 2025 – Smashing Magazine

Мы можем принять это новое поведение, не нарушая старый браузер:

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

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

• Демо: Я создал демо-версию Poké-Adventure, чтобы показать, как работает новый Elementor может клонировать богатый контент (например, значок покебола) из опции прямо в кнопку.

Сама по себе эта функция сигнализирует о серьезных изменениях в том, как мы создаем формы, уменьшая зависимости и технический долг.

Создание каруселей исторически было предметом трений между разработчиками и клиентами. Клиенты их любят, разработчики боятся JavaScript, необходимого для того, чтобы сделать их доступными и исполняемыми. прибытие ::scroll-marker И ::scroll-button() Псевдоэлементы полностью меняют эту динамику.

Эти функции позволяют нам создавать точки навигации и кнопки прокрутки полностью с помощью CSS, которые легко прикрепляются к контейнеру прокрутки. Как я писала в своем блоге, это была любовь с первого слайда. Возможность создать полнофункциональный и доступный слайдер без единой строчки JavaScript не только удобна; Это победа шоу. Есть некоторые проблемы с доступностью этой функции, и хотя они вполне законны, у нас, разработчиков, может быть способ заставить ее работать. Хорошо, что все эти изменения пользовательского интерфейса делают его намного проще, чем пользовательские манипуляции с DOM и перетаскивание тегов областей, но я отвлекся…

Теперь мы можем автоматически группировать маркеры, используя scroll-marker-group И стилизуем кнопки, используя привязку позиционирования, чтобы разместить их именно там, где мы хотим.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

Государственный вопрос: Липкая штука застряла? Что-то сломалось?

В течение долгого времени у нас не было возможности узнать, «застряла ли липкая вещь» или «созданный объект сломан», не полагаясь на хаки IntersectionObserver. В Chrome 133 появились запросы по состоянию прокрутки, что позволило нам запрашивать эти состояния декларативно.

установив container-type: scroll-stateТеперь мы можем стилизовать детей в зависимости от того, застряли ли они, сломались или переполнены. Это огромное улучшение «качества жизни», которого я с нетерпением ждал с CSS Day 2023. Оно довольно развито, поскольку мы даже можем видеть направление прокрутки, прекрасно!

Простой пример: мы наконец можем применить тень к заголовку. Только Когда он действительно вставлен поверх области просмотра:

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}

• Демо: Липкий заголовок, который применяет тень только тогда, когда он действительно застрял.

• Демо: Список на тему покемонов, в котором используются запросы состояния прокрутки в сочетании с позиционированием привязки для перемещения на один кадр поверх текущего привязанного персонажа.

Оптимизированная эргономика: логика в CSS

В разделе «Оптимизированная эргономика» CSS Wrapped представлены функции, которые делают наш рабочий процесс более интуитивным. Три особенности существенно меняют то, как мы пишем аргументы:

1. if() заявление
   Мы наконец-то получили условные выражения в CSS. if() Функция действует как тернарный оператор для таблиц стилей, позволяя нам применять значения на основе запросов мультимедиа, поддержки или стиля в режиме реального времени. Это уменьшает необходимость в подробном @media Блокировка для изменения одного свойства.
2. @function Работа
   В конечном итоге мы можем переместить часть логики в другое место, в результате чего файлы станут чище, что станет настоящей функцией качества жизни.
3. sibling-index() И sibling-count()
   Эти функции подсчета деревьев решают проблему смещенной анимации или стилизации элементов в зависимости от размера списка. Поскольку мне никогда не было легко стилизовать одноуровневые элементы с помощью CSS, это устраняет необходимость жестко запрограммировать пользовательские свойства (например, --index: 1) в нашем HTML.

Пример: расчет планировки

Теперь мы можем писать краткие математические формулы. Например, становится тривиально чередовать анимацию появления карт на экране:

.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}

Я также экспериментировал с использованием этих функций в тригонометрии для размещения объектов по идеальному кругу без использования JavaScript.

• Демо: размещение предметов по полному кругу с помощью sibling-index, sibling-countи новый CSS @function Специальность

Мой список дел по CSS: функции, которые мне не терпится попробовать

Пока я занят проработкой выделений и преобразований, отчет «CSS Wrapped 2025» полон других полезных вещей, которые у меня еще не было возможности активировать в CodePen. Они находятся в верхней части моего списка для моих следующих экспериментов:

Запросы привязанного контейнера

Я использовал позиционирование привязки CSS для кнопок в своей демонстрации карусели, но «CSS Wrapped» подчеркивает его эволюцию: Запросы привязанного контейнера. Это решает проблему, с которой мы все сталкиваемся, с всплывающими подсказками: если браузер переворачивает всплывающую подсказку сверху вниз из-за нехватки места, «стрелка» часто оказывается направленной в неправильном направлении. С привязанными вопросами о контейнере (@container anchored(fallback: flip-block)), мы можем стилизовать элемент на основе резервной позиции, фактически выбранной браузером.

группа вложенных переходов сцен

Переходы просмотра стали революцией, но они привели к определенному компромиссу: они сгладили дерево элементов, что часто нарушает 3D-преобразования или переполняет: клипы. Мне всегда казалось, что чего-то не хватает, и, возможно, это может быть ответом. используя view-transition-group: nearestВ конечном итоге мы можем вкладывать кластеры инфекции друг в друга.

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

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

типографика и размер

Наконец, эргономист во мне жаждет попробовать обрезка текстового поляКоторый обещает удалить эти раздражающие дополнительные пробелы над и под текстовым содержимым (интерлиньяж), чтобы наконец добиться идеального вертикального выравнивания. А что касается творческой стороны, corner-shape и это shape() Функции открывают непрямоугольные макеты, позволяя создавать «квадратики» и сложные пути, реагирующие на переменные CSS. При этом я не могу дождаться вихревого дизайна!

обнадеживающее будущее

Мы смотрим на мир, где CSS становится способным обрабатывать логику, позиционирование и сложные взаимодействия, которые раньше принадлежали JavaScript.. Такие функции, как moveBefore (сохранение состояния DOM для iframe/видео) и attr() (Использование типов помимо строк для цветов и сеток) еще больше укрепляет эту реальность.

Хотя некоторые из этих функций в настоящее время являются экспериментальными или эксклюзивными для Chrome, скорость неоспорима. Нам следует ожидать продолжения поддержки во всех браузерах посредством таких инициатив, как Interop, чтобы сделать эти возможности базовыми. При этом наличие движка браузера так же важно, как и наличие всех этих замечательных функций в «Chrome First». Эти новые функции необходимо обсудить, настроить и протестировать, прежде чем они появятся в браузерах.

Знакомство с CSS — отличный момент. Мы больше не просто оформляем документы; Мы создаем динамичные, эргономичные и надежные приложения с помощью собственного инструментария, который стал еще более мощным, чем когда-либо.

Давайте двигаться в ногу с этой новой эрой и продвигать ее.

Это CSS-обертка!

(ГГ, ЮК)