Всем привет! Я занимаюсь фронтендом более двух лет, и к новым фичам в стандарте ECMAScript, HTML и CSS привыкла относиться с небольшой опаской — часть из них остаются экспериментальными, некоторые могут ломать совместимость со старыми версиями браузеров. Тем не менее, мне хотелось оставаться в курсе новинок веб-разработки — интересно же, в какую сторону вообще движется веб.
К тому же, когда-то и CSS Grid имел слабую поддержку, а сейчас используется весьма широко. Именно поэтому я решила составить подборку новых концептов, фич, правил и методов, которые мы могли упустить, но которые однажды (или уже) могут стать солидным подспорьем в повседневной работе фронтенд-разработчика.
При написании статьи я использовала следующие источники:
- What's new in CSS and UI: I/O 2023 Edition
- Paweł Grzybek — What's new in ECMAScript 2023, 2022, 2021, 2020
- видео с Youtube-канала Fireship "21 Awesome Web Features you're not using yet"
HTML
Нативный <dialog>
Поддержка: возможность все еще экспериментальная, хотя и поддерживается в большинстве современных браузеров.
Как правило, чтобы добавить модальное окно, требуется совершить некоторое количество приседаний (создать компонент с отдельным div для фона и еще одним — для основного контента, добавить JS-логику). Новое решение — нативный HTML-элемент <dialog>.
Внутрь него можно поместить элемент <form>, в слушатель событий добавить встроенные JS-методы для открытия и закрытия (showModal() и close()), а также стилизовать псевдоэлемент ::backdrop для фона.
Подробнее: <dialog> в MDN
Нативный popover
Поддержка: возможность все еще экспериментальная. Не поддерживается в Firefox.
Появление новых атрибутов popover и popovertarget поможет сократить количество кода, требуемого для создания подсказки по ховеру (так, в новом поповере есть встроенное скрытие поповера по клавише Esc). А еще появление поповеров позволит нам кастомизировать выпадающие меню в селектах — смотрите новый экспериментальный нативный HTML-элемент <selectmenu>.
Подробнее: popover в MDN
CSS
Динамические viewport units
Поддержка: поддерживается большинством современных браузеров.
Когда-нибудь сталкивались с тем, что в мобильном Safari кнопки в модальных окнах оказываются спрятаны за навигационным меню браузера? Пускай времени, проведенного на Stack Overflow, вам никто не вернет, можно наконец выдохнуть — ведь теперь у нас есть small и large viewports (svh — единица измерения высоты, включающая в себя тулбары браузера, lvh — высота без учета тулбаров, и динамическая единица измерения dvh, объединяющая две предыдущие), а также новые единицы измерения vmin/vmax.
Подробнее: The large, small and dynamic viewport units
CSS nesting
Поддержка: не поддерживается Firefox.
Писать CSS с вложенными селекторами, прямо как в SCSS? Легко! Нужно только включить Experimental Web Platform features у себя в Chrome.
Подробнее: CSS Nesting is coming
Cascade layers
Поддержка: поддерживается большинством современных браузеров.
Любите писать CSS, используя BEM? А расширять уже написанные стили так, чтобы иерархия сохранялась? Добавление новых стилей значительно упрощает появление слоев @layer. Их приоритет выше, чем у обычных селекторов, так что работают они прямо как слои в фотошопе — новые слои перекрывают собой все изменения, добавленные в предыдущих слоях. Таким образом, мы можем избежать проблем со специфичностью — больше никаких !important (надеюсь, вы и так их не использовали).
Подробнее: Привет, CSS Cascade Layers
Container queries
Поддержка: поддерживается большинством современных браузеров.
Появление media queries открыло нам верстку, адаптирующуюся под разные размеры экранов. Container queries же позволяют нам писать стили элемента с оглядкой на размеры его родителя, а не всей области просмотра. Этот способ отлично подходит для написания стилей переиспользуемых компонентов, внешний вид которых меняется в зависимости от контейнера.
Подробнее: Полное руководство по Container Queries в CSS
OKLCH
Поддержка: поддерживается большинством современных браузеров.
Если обычных rgb() и hsl() вам не хватало, встречайте oklch() — новый способ определять цвета в CSS, который гораздо лучше подходит для настройки цветов (а еще более доступный). Также обратите внимание на color-mix() — новый инструмент для смешения цветов в CSS.
Подробнее: OKLCH в CSS: почему мы ушли от RGB и HSL
Color fonts
Поддержка: поддерживается большинством современных браузеров.
Возможность добавлять шрифты, где в каждом глифе используется несколько цветов? В вебе? Да! Если раньше это было доступно только в виде векторной графики, теперь настроить палитру шрифта можно прямо в коде.
Подробнее: Color fonts
Javascript
Array.findLast() и Array.at(-1)
Не любите писать громоздкий код в духе array[array.length - 1]? Эта проблема была решена еще в стандарте ECMAScript 2022 с появлением Array.at(-1). В ECMAScript 2023 же появилось еще 2 метода — Array.findLast() и Array.findLastIndex().
Подробнее: Array find from last, The .at() method
Трансформации копий массива (toReversed(), toSorted() and toSpliced())
Методы reverse(), sort() и splice() мутируют исходный массив. В ECMAScript 2023 появляются аналогичные методы, которые возвращают новую копию массива — toReversed(), toSorted() и toSpliced(). Помимо этого, в стандарте был добавлен метод with(), который заменяет элемент по заданному индексу новым значением, не мутируя исходный массив.
Подробнее: Change Array by Copy
public, static, private поля классов
Если вы вдруг пропустили, в ECMAScript 2022 появился новый синтаксис для объявления свойств класса — необходимость в конструкторе отпала. Также приватные свойства и методы теперь позволяют создавать действительно защищенные слоты данных, доступные только в теле класса. Приватные свойства также можно определять через # (старое правило — добавлять _ в начале имени свойства или метода).
Подробнее: Class fields (public, static, private)
Object.hasOwn()
Стандарт ECMAScript 2022 ввел метод hasOwn(), более безопасный аналог hasOwnProperty.call(object, property).
Подробнее: Accessible Object.prototype.hasOwnProperty()
structuredClone()
Больше никаких хаков с JSON.parse(JSON.stringify()) и деструктуризацией объекта. Им на смену приходит гораздо более удобный structuredClone(), позволяющий создавать глубокие копии объектов.
Подробнее: structuredClone() в MDN
Операторы Logical Assignment
Со стандартом ECMAScript 2021 в языке появилась комбинация логических операторов (&&, || и ??) и оператора присваивания (=). Так, с ее помощью мы можем присвоить переменной a значение b только тогда, когда a НЕ истинно — a ||= b. Возможно, когда-нибудь пригодится.
Подробнее: Logical Assignment Operators
globalThis
Кое-что, что вы могли пропустить из стандарта ECMAScript 2020. Как мы знаем, глобальный объект this зависит от контекста. В браузере это window, в Node.js это global. К любому из них теперь можно получить доступ через globalThis.
Подробнее: globalThis
Оператор Nullish coalescing
Удобный оператор, определенный еще стандартом ECMAScript 2020. В отличие от оператора ||, nullish coalescing оператор ?? срабатывает лишь тогда, когда значение левой стороны строго равно нулю или не определено. Так, выражение "" ?? "default value" вернет "".
Подробнее: Nullish coalescing Operator
Optional chaining
Наверняка вам тоже приходилось писать длинные цепочки в духе const title = data && data.article && data.article.title для присвоения значения переменной (чтобы избежать ошибок). С появлением стандарта ECMAScript 2020 эта громоздкая запись может стать гораздо проще — const title = data?.article?.title.
Подробнее: Optional chaining
Прочее
Web Vitals плагин для Chrome
Используете в своей работе Lighthouse для получения статистики о перформансе веб-страниц? Правда, работать с ним не совсем удобно. С появлением плагина Web Vitals работа с оптимизацией в Chrome стала куда проще — теперь вся статистика доступна прямо из консоли.
Подробнее: Using the Web Vitals extension to debug Core Web Vitals issues
Надеюсь, вы, как и я, открыли что-то новое для себя — и кто знает, может, через 5-10 лет мы уже не сможем представить себе веб-разработку без этих концептов?
