Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Всем привет! Я занимаюсь фронтендом более двух лет, и к новым фичам в стандарте ECMAScript, HTML и CSS привыкла относиться с небольшой опаской - часть из них остаются экспериментальными, некоторые могут ломать совместимость со старыми версиями браузеров. Тем не менее, мне хотелось оставаться в курсе новинок веб-разработки - интересно же, в какую сторону вообще движется веб.</p>

2 <p>К тому же, когда-то и CSS Grid имел слабую поддержку, а сейчас<a>используется</a>весьма широко. Именно поэтому я решила составить подборку новых концептов, фич, правил и методов, которые мы могли упустить, но которые однажды (или уже) могут стать солидным подспорьем в повседневной работе фронтенд-разработчика.</p>

3 <p>Как правило, чтобы добавить модальное окно, требуется совершить некоторое количество приседаний (создать компонент с отдельным div для фона и еще одним - для основного контента, добавить JS-логику). Новое решение - нативный HTML-элемент <dialog>.</p>

4 <p>Внутрь него можно поместить элемент <form>, в слушатель событий добавить встроенные JS-методы для открытия и закрытия (showModal() и close()), а также стилизовать псевдоэлемент ::backdrop для фона.</p>

5 <a>в MDN</a><h3>Нативный popover</h3>

6 <blockquote><p><strong>Поддержка</strong>: возможность все еще экспериментальная.<a>Не поддерживается</a>в Firefox.</p>

7 </blockquote><p>Появление новых атрибутов popover и popovertarget поможет сократить количество кода, требуемого для создания подсказки по ховеру (так, в новом поповере есть встроенное скрытие поповера по клавише Esc). А еще появление поповеров позволит нам кастомизировать выпадающие меню в селектах - смотрите новый экспериментальный нативный HTML-элемент<a></a>.</p>

8 <p><strong>Подробнее:</strong><a>popover в MDN</a></p>

9 <h2>CSS</h2>

10 <h3>Динамические viewport units</h3>

11 <blockquote><p><strong>Поддержка:</strong>поддерживается<a>большинством</a>современных браузеров.</p>

12 </blockquote><p>Когда-нибудь сталкивались с тем, что в мобильном Safari кнопки в модальных окнах оказываются спрятаны за навигационным меню браузера? Пускай времени, проведенного на Stack Overflow, вам никто не вернет, можно наконец выдохнуть - ведь теперь у нас есть small и large viewports (svh - единица измерения высоты, включающая в себя тулбары браузера, lvh - высота без учета тулбаров, и динамическая единица измерения dvh, объединяющая две предыдущие), а также новые единицы измерения vmin/vmax.</p>

13 <p><strong>Подробнее:</strong><a>The large, small and dynamic viewport units</a></p>

14 <h3>CSS nesting</h3>

15 <blockquote><p><strong>Поддержка:</strong><a>не поддерживается</a>Firefox.</p>

16 </blockquote><p>Писать CSS с вложенными селекторами, прямо как в SCSS? Легко! Нужно только включить Experimental Web Platform features у себя в Chrome.</p>

17 <p><strong>Подробнее:</strong><a>CSS Nesting is coming</a></p>

18 <h3>Cascade layers</h3>

19 <blockquote><p><strong>Поддержка:</strong><a>поддерживается</a>большинством современных браузеров.</p>

20 </blockquote><p>Любите писать CSS, используя<a>BEM</a>? А расширять уже написанные стили так, чтобы иерархия сохранялась? Добавление новых стилей значительно упрощает появление слоев @layer. Их приоритет выше, чем у обычных селекторов, так что работают они прямо как слои в фотошопе - новые слои перекрывают собой все изменения, добавленные в предыдущих слоях. Таким образом, мы можем избежать проблем со специфичностью - больше никаких !important (надеюсь, вы и так их не использовали).</p>

21 <p><strong>Подробнее:</strong><a>Привет, CSS Cascade Layers</a></p>

22 <h3>Container queries</h3>

23 <blockquote><p><strong>Поддержка:</strong><a>поддерживается</a>большинством современных браузеров.</p>

24 </blockquote><p>Появление media queries открыло нам верстку, адаптирующуюся под разные размеры экранов. Container queries же позволяют нам писать стили элемента с оглядкой на размеры его родителя, а не всей области просмотра. Этот способ отлично подходит для написания стилей переиспользуемых компонентов, внешний вид которых меняется в зависимости от контейнера.</p>

25 <p><strong>Подробнее:</strong><a>Полное руководство по Container Queries в CSS</a></p>

26 <h3>OKLCH</h3>

27 <blockquote><p><strong>Поддержка:</strong><a>поддерживается</a>большинством современных браузеров.</p>

28 </blockquote><p>Если обычных rgb() и hsl() вам не хватало, встречайте oklch() - новый способ определять цвета в CSS, который гораздо лучше подходит для настройки цветов (а еще более доступный). Также обратите внимание на<a>color-mix()</a>- новый инструмент для смешения цветов в CSS.</p>

29 <p><strong>Подробнее:</strong><a>OKLCH в CSS: почему мы ушли от RGB и HSL</a></p>

30 <h3>Color fonts</h3>

31 <blockquote><p><strong>Поддержка:</strong><a>поддерживается</a>большинством современных браузеров.</p>

32 </blockquote><p>Возможность добавлять шрифты, где в каждом глифе используется несколько цветов? В вебе? Да! Если раньше это было доступно только в виде векторной графики, теперь настроить палитру шрифта можно прямо в коде.</p>

33 <p><strong>Подробнее:</strong><a>Color fonts</a></p>

34 <h2>Javascript</h2>

35 <h3>Array.findLast() и Array.at(-1)</h3>

36 <p>Не любите писать громоздкий код в духе array[array.length - 1]? Эта проблема была решена еще в стандарте ECMAScript 2022 с появлением Array.at(-1). В ECMAScript 2023 же появилось еще 2 метода - Array.findLast() и Array.findLastIndex().</p>

37 <p><strong>Подробнее:</strong><a>Array find from last</a>,<a>The .at() method</a></p>

38 <h3>Трансформации копий массива (toReversed(), toSorted() and toSpliced())</h3>

39 <p>Методы reverse(), sort() и splice() мутируют исходный массив. В ECMAScript 2023 появляются аналогичные методы, которые возвращают новую копию массива - toReversed(), toSorted() и toSpliced(). Помимо этого, в стандарте был добавлен метод with(), который заменяет элемент по заданному индексу новым значением, не мутируя исходный массив.</p>

40 <p><strong>Подробнее:</strong><a>Change Array by Copy</a></p>

41 <h3>public, static, private поля классов</h3>

42 <p>Если вы вдруг пропустили, в ECMAScript 2022 появился новый синтаксис для объявления свойств класса - необходимость в конструкторе отпала. Также приватные свойства и методы теперь позволяют создавать действительно защищенные слоты данных, доступные только в теле класса. Приватные свойства также можно определять через # (старое правило - добавлять _ в начале имени свойства или метода).</p>

43 <p><strong>Подробнее:</strong><a>Class fields (public, static, private)</a></p>

44 <h3>Object.hasOwn()</h3>

45 <p>Стандарт ECMAScript 2022 ввел метод hasOwn(), более безопасный аналог hasOwnProperty.call(object, property).</p>

46 <p><strong>Подробнее:</strong><a>Accessible Object.prototype.hasOwnProperty()</a></p>

47 <h3>structuredClone()</h3>

48 <p>Больше никаких хаков с JSON.parse(JSON.stringify()) и деструктуризацией объекта. Им на смену приходит гораздо более удобный structuredClone(), позволяющий создавать глубокие копии объектов.</p>

49 <p><strong>Подробнее:</strong><a>structuredClone() в MDN</a></p>

50 <h3>Операторы Logical Assignment</h3>

51 <p>Со стандартом ECMAScript 2021 в языке появилась комбинация логических операторов (&&, || и ??) и оператора присваивания (=). Так, с ее помощью мы можем присвоить переменной a значение b только тогда, когда a НЕ истинно - a ||= b. Возможно, когда-нибудь пригодится.</p>

52 <p><strong>Подробнее:</strong><a>Logical Assignment Operators</a></p>

53 <h3>globalThis</h3>

54 <p>Кое-что, что вы могли пропустить из стандарта ECMAScript 2020. Как мы знаем, глобальный объект this зависит от контекста. В браузере это window, в Node.js это global. К любому из них теперь можно получить доступ через globalThis.</p>

55 <p><strong>Подробнее:</strong><a>globalThis</a></p>

56 <h3>Оператор Nullish coalescing</h3>

57 <p>Удобный оператор, определенный еще стандартом ECMAScript 2020. В отличие от оператора ||, nullish coalescing оператор ?? срабатывает лишь тогда, когда значение левой стороны строго равно нулю или не определено. Так, выражение "" ?? "default value" вернет "".</p>

58 <p><strong>Подробнее:</strong><a>Nullish coalescing Operator</a></p>

59 <h3>Optional chaining</h3>

60 <p>Наверняка вам тоже приходилось писать длинные цепочки в духе const title = data && data.article && data.article.title для присвоения значения переменной (чтобы избежать ошибок). С появлением стандарта ECMAScript 2020 эта громоздкая запись может стать гораздо проще - const title = data?.article?.title.</p>

61 <p><strong>Подробнее:</strong><a>Optional chaining</a></p>

62 <h2>Прочее</h2>

63 <h3>Web Vitals плагин для Chrome</h3>

64 <p>Используете в своей работе Lighthouse для получения статистики о перформансе веб-страниц? Правда, работать с ним не совсем удобно. С появлением плагина<a>Web Vitals</a>работа с оптимизацией в Chrome стала куда проще - теперь вся статистика доступна прямо из консоли.</p>

65 <p><strong>Подробнее:</strong><a>Using the Web Vitals extension to debug Core Web Vitals issues</a></p>

66 <p>Надеюсь, вы, как и я, открыли что-то новое для себя - и кто знает, может, через 5-10 лет мы уже не сможем представить себе веб-разработку без этих концептов?</p>