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

Новинки в 2023 CSS

Содержание:

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) портят задумку свойства навигационные панели в МВ и из-за них может прибавиться высота или убавиться, фактически высота не становится на весь экран как мы ожидаем.

8eb9xsud7tp0xgjc3u14b4ljfr8

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

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

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/

Читайте также
Чем функции в React.js лучше классов
Чем функции в React.js лучше классов
Чем функции в React.js лучше классов

В последнее время функции используют чаще, чем классы при разработке на React.js, популярной библиотеки для создания пользовательских интерфейсов. При этом React позволяет разработчикам создавать компоненты с использованием как функций, так и классов. В этом материале рассмотрим, почему так вышло.

Google возьмет всю базу Stack Overflow для своего Gemini
Google возьмет всю базу Stack Overflow для своего Gemini
Google возьмет всю базу Stack Overflow для своего Gemini

Крупная база для разработчиков Stack Overflow запускает для ИИ доступ к своей всей базе через АПИ (OverflowAPI). И главным партнером становится Google, который будет использовать данные Stack Overflow для обучения Gemini. А Google поможет реализовать Stack Overflow мощные функции для проекта OverflowAI, который уже развивается. Обе компании планируют просмотр этих интеграций на конференции Google Cloud […]

Рассказываем об обновлениях Firefox 119
Рассказываем об обновлениях Firefox 119
Рассказываем об обновлениях Firefox 119

В октябре вышли обновления Firefox 119. Также сформировали обновление ветки с длительным сроком поддержки — 115.4.0.

CheerpJ на базе Wasm запускает Java в веб-браузерах
CheerpJ на базе Wasm запускает Java в веб-браузерах
CheerpJ на базе Wasm запускает Java в веб-браузерах

WebAssembly JVM обещает запускать «очень большие» немодифицированные Java-приложения в современных браузерах без плагинов или установки Java.