Ретроспектива 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/

Читайте также
Веб-фреймворк Shiny R появился в Wasm
Веб-фреймворк Shiny R появился в Wasm
Веб-фреймворк Shiny R появился в Wasm

Пакет Shinylive R экспортирует приложения Shiny R в виде Shinylive-приложений с поддержкой Wasm, которые полностью работают в веб-браузере.

Тренды в мобильной разработке для 2024
Тренды в мобильной разработке для 2024
Тренды в мобильной разработке для 2024

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

Опубликовали релиз языка программирования ReScript 11.0
Опубликовали релиз языка программирования ReScript 11.0
Опубликовали релиз языка программирования ReScript 11.0

В версии 11 ReScript появились новые возможности для более эффективной работы с JavaScript/TypeScript, в том числе настраиваемое представление вариантов во время выполнения, привязки без дополнительных затрат к дискриминированным объединениям и небоксированные варианты, упрощающие работу с гетерогенными массивами и значениями, которые могут быть нулевыми.

Chrome 120 beta
Chrome 120 beta
Chrome 120 beta

Новые 7 фич для CSS. Улучшения для nesting (вложенности стилей). Создание «аккордиона» для через элемент details и многое другое.