CSS

Классические методы sort, reverse и splice меняют массив на месте. В мире React, Vue и других подходов с иммутабельным состоянием это источник коварных багов: вы случайно мутируете исходные данные, и UI не обновляется или ломается непредсказуемо. Четыре метода — with, toSorted, toReversed и toSpliced — делают то же самое, но возвращают новый массив, не трогая оригинал.

toSorted и toReversed — иммутабельные двойники sort и reverse. toSpliced — версия splice, возвращающая копию с изменениями. А with(index, value) заменяет один элемент по индексу — раньше для этого приходилось писать map с проверкой индекса или копировать через спред и присваивать.

const nums = [3, 1, 2];

const sorted = nums.toSorted();     // [1, 2, 3]
const reversed = nums.toReversed(); // [2, 1, 3]
const replaced = nums.with(0, 99);  // [99, 1, 2]
const spliced = nums.toSpliced(1, 1, 'x'); // [3, 'x', 2]

console.log(nums); // [3, 1, 2] — исходный массив не тронут

Ну и вообще, раньше «заменить элемент по индексу без мутации» выглядело многословно:

state.map((item, i) => i === idx ? newItem : item)

Теперь это выглядит так

state.with(idx, newItem)

Согласитесь, так гораздо короче и понятнее. То же с сортировкой списка для отображения: items.toSorted(byDate) не испортит исходный массив, а значит, не вызовет неожиданных ре-рендеров или гонок данных.

Все четыре метода поддерживаются в Chrome 110+, Firefox 115+, Safari 16+ и в Node.js 20+. К 2026 году это полностью безопасно использовать без полифилов в любом современном проекте. Для совсем старых окружений эти методы легко полифилятся, поскольку выражаются через копирование и существующие операции.

Карусели, ленты сторис, постраничные слайдеры — всё это обычно делали на JavaScript: вешали обработчики, считали смещения, программно докручивали до ближайшего элемента. CSS Scroll Snap переносит «прилипание» прокрутки на уровень браузера: контейнер сам останавливается ровно на границах элементов, плавно и с учётом инерции.

Настройка Scroll Snap состоит из двух частей. На контейнере задаётся scroll-snap-type — ось прокрутки и строгость прилипания (mandatory всегда докручивает до точки, proximity — только если близко). На дочерних элементах указывается scroll-snap-align — какой их край прилипает к контейнеру.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
}

.slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

Теперь горизонтальная прокрутка ленты сама центрирует каждый слайд — без единой строки JavaScript. Попробуйте поскроллить эту импровизированную ленту вправо-влево.

Поведение можно дошлифовать дополнительными свойствами. scroll-padding на контейнере сдвигает точку прилипания внутрь — полезно, когда сверху есть фиксированная шапка. scroll-snap-stop: always запрещает «проскакивать» несколько слайдов одним резким свайпом, заставляя останавливаться на каждом. Этого набора хватает для большинства каруселей и постраничных лент без скриптов.

CSS Scroll Snap поддерживается во всех современных браузерах: Chrome, Firefox и Safari давно реализовали спецификацию. На 2026 год это полностью стабильная технология для продакшена. В крайне старых браузерах прокрутка останется обычной, без прилипания, что является безопасной деградацией — лента всё равно листается.

Поддержка тёмной темы обычно требует дублирования: вы пишете цвета для светлой темы, а потом ещё раз — внутри @media (prefers-color-scheme: dark). Это удваивает CSS, в котором потом ещё и легко запутаться. А вот функция light-dark() убирает дублирование: вы задаёте оба значения прямо в одном объявлении, а браузер сам выбирает нужное.

Функция light-dark() принимает два значения: первое используется в светлой теме, второе — в тёмной. Чтобы она заработала, нужно объявить на корне color-scheme: light dark — это говорит браузеру, что страница поддерживает обе схемы.

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#1a1a1a, #f0f0f0);
}

.card {
  background: light-dark(#f5f5f5, #2a2a2a);
  border: 1px solid light-dark(#e0e0e0, #404040);
}

Системная тема — не единственный вариант. Если на конкретном элементе задать color-scheme: dark, то все вложенные light-dark() начнут отдавать тёмные значения, независимо от настроек ОС. Это позволяет сделать переключатель темы: меняете color-scheme на корне через JS — и весь интерфейс перестраивается.

Функция особенно хороша для дизайн-систем и компонентных библиотек, где каждый цвет описан один раз. Вместо двух наборов токенов вы держите один с парами значений. Сопровождать такой код проще: добавляя новый цвет, вы сразу думаете об обеих темах.

Функция light-dark() поддерживается в Chrome 123+, Firefox 120+ и Safari 17.5+. На середину 2026 года это покрывает подавляющее большинство пользователей. Для старых браузеров стоит оставить запасной цвет в обычном объявлении перед строкой с light-dark() — браузер просто проигнорирует непонятную функцию.

HEX-коды вроде #3b82f6 — привычный способ задавать цвета в CSS. Но у них есть большая проблема: они не интуитивны для человека. Как сделать цвет светлее на 10%? Добавить прозрачность? Подобрать гармоничный акцентный оттенок? С HEX и даже с HSL это превращается в угадайку. oklch() решает эту задачу.

Разработчики давно полюбили Sass и Less за вложенные правила. Вместо того чтобы писать длинные селекторы много раз, можно было аккуратно вложить дочерние стили внутрь родительских. В 2024 году это умение получил сам CSS — никаких препроцессоров больше не нужно.

Grid Layout решил много задач с раскладкой, но одна проблема долго оставалась без решения. Представьте три карточки в сетке. У каждой — заголовок, описание и кнопка. Высота заголовков разная: в одной карточке текст длиннее, в другой короче. В итоге кнопки стоят на разной высоте, и сетка выглядит неаккуратно.

Раньше это решали через JavaScript: вычисляли высоту заголовков и выставляли min-height. Или просто мирились с несовершенством.

Subgrid позволяет дочернему элементу участвовать в сетке родителя. Карточка занимает несколько строк родительской сетки — и все её внутренние блоки выравниваются по общим линиям.

Долгое время адаптивная вёрстка строилась на медиавыражениях: браузер смотрит на ширину окна и применяет нужные стили. Это работало, но создавало одну постоянную проблему.

Представьте карточку товара. На широком экране она выглядит горизонтально: слева фото, справа текст. На узком — вертикально: фото сверху, текст снизу. Казалось бы, медиавыражение справится. Но что если эту же карточку нужно показать в узкой боковой колонке на широком экране? Медиавыражение видит только ширину окна — она большая, а значит, карточка будет горизонтальной, хотя места у неё нет.

Container queries решают именно эту задачу: элемент адаптируется под размер своего контейнера, а не под размер окна.

Если вы когда-нибудь подключали стороннюю библиотеку стилей и потом пытались её переопределить — вы знаете эту боль. Пишете правило, оно не работает. Добавляете класс поконкретнее — всё равно не работает. В итоге пишете !important и расстраиваетесь, потому что теперь нужно всё время учитывать это в дальнейшей работе.

Это называют войной специфичности. Возникает она потому, что CSS решает конфликты через длину и конкретность селекторов, а не через то, кто написал правило позже и кто важнее по смыслу.

В 2022 году в браузерах появился @layer — способ самим расставить приоритеты между группами стилей.

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

article a,
aside a,
footer a {
  color: red;
}

Три строки ради одного правила. Если таких правил много — CSS превращается в простыню. :is() и :where() решают это элегантно.

Посмотрели за вас в интернете и заботливо отобрали самые интересные демки на CSS и JavaScript.