Ретроспектива CSS 2023, что было нового?

Содержание:

• Container queries
• Style queries
• :has() selector
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• Dynamic viewport units
• Wide-gamut color spaces
• color-mix()
• Nesting
• Cascade layers
• Scoped styles
• Trigonometric functions
• Individual transform properties
• popover
• anchor positioning
• selectmenu
• Discrete property transitions
• Scroll-driven animations
• View transitions

Container queries

Медиа выражения для отдельных блоков в HTML это то, чего frontend давно ждал. Что может быть ещё лучше для адаптивной верстки? Поддержка в современных браузерах 87%.

Пример на codepen — https://codepen.io/web-dot-dev/pen/eYPEOOr

Style queries

Появилось в 111 chrome и позволяет запрашивать стили в родительских элементах + использовать переменные. Поддержка в современных браузерах 64%.

Пример на codepen — https://codepen.io/web-dot-dev/pen/KKxzYQx

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
} 

:has() selector

Новая функция-псевдокласс который позволяет получить родителя на основе каких-либо дочерних элементов. Чтобы понять работу, лучше смотрите примеры. Поддержка в современных браузерах 87%.

// Стили применятся ко всем section, которые не имеют внутри заголовков H1, H2
section:has(:not(h1, h2));

nth-of microsyntax

Улучшение над nth-child. Позволяет использовать внутри себя условие по какому-либо селектору. Поддержка в современных браузерах 85%.

// Как работает обычный синтаксис 
.highlight:nth-child(2)

Пример на codepen — https://codepen.io/web-dot-dev/pen/oNMRaQq

text-wrap: balance

В 114 chrome появилось новое свойство для text-wrap — balance. Позволит сбалансировать текст с переносами, распределив ширину каждой строки в соотношении с предыдущей.

Пример на codepen — https://codepen.io/web-dot-dev/pen/eYLwpRx

initial-letter

Работает с псевдоэлементом :first-letter и отвечает за её размеры. Поддержка в современных браузерах 84%.

Пример на codepen — https://codepen.io/web-dot-dev/pen/MWBErYp

Dynamic viewport units

При использовании свойств vh (height: 100vh или width: 100wh) портят задумку свойства навигационные панели в МВ и из-за них может прибавиться высота или убавиться, фактически высота не становится на весь экран как мы ожидаем.

Поэтому ввели новые значения:

• svh и svw (small viewport height/width), представляющие наименьший активный размер области просмотра;
• lvh и lvw (large), представляющие наибольший активный размер области просмотра;
• dvh и dvw (dynamic).

Wide-gamut color spaces

Новый диапазон новых цветовых пространств, включая REC2020, P3, XYZ, LAB, OKLAB, LCH и OKLCH. Поддержка в современных браузерах 83%.

Подробнее — https://developer.chrome.com/articles/high-definition-css-color-guide/#meet-the-new-web-color-spaces

color-mix()

Новое свойство позволяет смешивать 2 цвета для создания новых значений. На результат влияет типы цветов которые используются при смешивании. Поддержка в современных браузерах 78%.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);

Пример на codepen — https://codepen.io/web-dot-dev/pen/eYjKMVV

Nesting

Вложенность для CSS является одна из востребованных фич (наверное после переменных и container query). Код становится меньше и визуально разделен. Поддержка в современных браузерах 63%.

// Пример обычной вложенности
.card {}
.card:hover {}

.card {
  &:hover {

  }
}
// Также и могут быть вложены не только селекторы, но и медиа выражения и новые контейнеры
.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Более подробный пример у google — https://developer.chrome.com/articles/css-nesting/

Cascade layers

Помогает выставлять приоритет между группами стилей, помещая в блоки @layer. Поддержка в современных браузерах 90%.

Пример на codepen — https://codepen.io/web-dot-dev/pen/LYzqPEp

Scoped styles

Используется для установки границ в которых будут использоваться стили. Можно провести параллель с namspace. Поддержка в современных браузерах 0.17%.

// Без класса .card у вложенного элемента .title не будет применены стили
@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Пример на codepen — https://codepen.io/web-dot-dev/pen/MWPVGPL

Trigonometric functions

Дополнительно к CSS функциям (calc, max, min и др) добавлены новые функции: sin(), cos(), tan(). Лучше разобраться с работой функций — лучше всего посмотреть примеры. Поддержка в современных браузерах 84%.

Пример на codepen — https://codepen.io/web-dot-dev/pen/ExePgOg

Пример у google — https://web.dev/articles/css-trig-functions?hl=ru

Individual transform properties

Функциями transform мы можем теперь пользоваться отдельно. Яркий пример с hover, где раньше приходилось дублировать код. Поддержка в современных браузерах 91%.

// Как было раньше
.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Изменился только масштаб (scale), но необходимо повторить все функции */
}

// Новый синтаксис
.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Customizable Components

Google работает с OpenUI и по запросам от разработчиков вводит новые фичи:

• встроенной функциональности popup с обработчиками событий, декларативной структурой DOM и доступностью по умолчанию;
• CSS для связывания двух элементов — позиционирования якоря;
• Custom компонента выпадающего меню, позволяющего стилизовать содержимое элемента «select«.

Popover

Popover позволяет следующее:

• поддержка верхнего слоя (top-layer), что избавляет от необходимости управления z-index. При открытии popover или dialog этот элемент перемещается на специальный новый слой, который на верхнем уровне страницы;
• Просто закрытие (light-dismiss) в auto в popover, когда клик за пределами элемента приводит к его закрытию, удалению из дерева и правильному управлению фокусом;
• доступность для установления связи между целью popover (popover target) и самим popover’ом.

Поддержка в современных браузерах 37%.

// Пример связки по ID
<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

Пример на codepen — https://codepen.io/web-dot-dev/pen/mdzpGwq

Anchor positioning

При использовании popover и диалогов в роли tooltip важно управлять позиционированием открывающегося окна и для кейсов когда окно не помещается — добавили кастомизации резервных (fallback) позиций.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Пример на codepen — https://codepen.io/web-dot-dev/pen/PoyRaZe

selectmenu>

Дополнение для кастомизации меню. Расширяет возможности для полной настройки выпадающего меню.

Пример на codepen — https://codepen.io/web-dot-dev/pen/xxyWzJr

Discrete property transitions

Необходимо анимировать нативные поповеры и для этого добавляется :popover-open для открытого состояния, @starting-style для состояния перед открытием и применения трансформаций для состояния после открытия.

.settings-popover {
  &:popover-open {
    /*   0. перед изменениями   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. открыто, состояние поменялось */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. после измененного состояния */
  transform: translateY(-50px);
  opacity: 0;

  /*  перечисляются свойства которые анимированы (в т.ч и display) */
  transition: transform 0.5s, opacity 0.5s, display 0.5s;
}

Пример на codepen — https://codepen.io/web-dot-dev/pen/gOBGLBw

Scroll-driven animations

Позволяет управлять анимацией при скролле с помощью новых свойств scroll-timeline, view-timeline и animation-timeline. Для управления JavaScript Web Animations API в Element.animate() в качестве настройки timeline передается экземпляр ScrollTimeline или ViewTimeline.

Статья от google — https://developer.chrome.com/articles/scroll-driven-animations/

Пример на карточках — https://scroll-driven-animations.style/demos/cover-flow/css/?embed

View transitions

Отдельные DOM блоки можно анимировать при изменении состояния через например — fade анимацию. Достаточно добавить новую обертку и анимация будет работать. Лучше всего покажет пример самой анимации. Поддержка в современных браузерах 65%.

function spaNavigate(data) {
  // Fallback для браузеров без поддержки:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // С поддержкой:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Сама анимация определяется через CSS:

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Крутой пример по ссылке (с видео) — https://live-transitions.pages.dev/