В CSS есть @scope функция, ограничивающая область применения стилей:

<template>
  <div class="box">
    <button class="button">Click me</button>
  </div>
</template>

<style>
  @scope (.box) {
    .button {
      color: red;
    }
  }
</style>

Однако полной замены Vue scoped она не может дать. Например, потому, что если компонент выше вывести списком, то во Vue у каждого будет свой data атрибут и своя область видимости стилей, а у @scope всё смешается

Но для ванильных случаев это полезное нововведение

#css

Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

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

  > nav {
    @container scroll-state(stuck: top) {
      background: _Highlight;
      color: _HighlightText;
    }
  }
}

Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

В последних версиях Vite активно доделывают поддержку lightningcss

Сейчас для процессинга CSS используется ESBuild, но с переходом на Rolldown нужно что-то другое.
Экспериментально lightningcss был в Vite с 4 версии.

#vite #css

:hover > :not(:hover)

hover обычно используется, чтобы выделить какой-то элемент. Но иногда красивей что-то сделать с остальными

ul {
  @media (hover) and (prefers-reduced-motion: no-preference) {
    & > li {
      transform-origin: left center;
      transition: transform 1s var(--ease-spring-3), opacity 0.3s var(--ease-3);
    }

    &:hover > li:not(:hover) {
      opacity: 0.25;
      transform: scale(0.8);
    }
  }
}

#css #tip

Самые значимые обновления CSS в 2024 года:

- Анимация height : auto + calc-size
- @starting-style: решает проблему, когда добавление элементов в DOM ломает анимацию
- Scroll-driven animations: эта функция добавляет в CSS анимации, запускаемые скроллом.
- Popover API: Позволяет создавать всплывающие подсказки и окна на чистом CSS
- Document view transitions: позволяет анимировать переходы между HTML-документами.

#css

В крайнем Chrome (137) появился if для CSS

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark { --color: black; }
.light { --color: white; }

#chrome #css

10 вопросов проверить свою CSS грамотность

Ответы тут

#css