Задачи, для которых не нужен JavaScript

Посмотрел любопытный доклад, в котором автор перечисляет ситуации, которые ранее требовали применения JavaScript, а сегодня решаются с помощью HTML и CSS. Как обычно, решил его посмотреть за вас)) Ниже — список того, о чём упоминалось в докладе:

- Чекбоксы в виде свитча. Автор показывает, как использовать CSS-свойство appearance и псевдо-элементы, чтобы сверстать чекбокс в виде рубильника. А в Safari 17.4 у инпутов появился атрибут switch, который позволяет браузеру добиться такого внешнего вида нативно.

- Автодополнение полей ввода. HTML элемент <datalist> позволяет добавить автокомплит к полям ввода без использования JavaScript. Про datalist есть отличная статья на Доке.

- Выбор цвета. С помощью <input type="color" /> можно добавить на страницу виджет с выбором цвета. Доступно уже очень давно и не требует никакого JS.

- Плавная прокрутка страницы. Просто для любопытства зашел сейчас на npm и увидел, что npm пакет smooth-scroll скачивают по 28 тысяч раз в неделю. Хотя уже давно есть CSS свойство scroll-behavior, которое тоже позволяет добиться плавной прокрутки, не требуя при этом 3 кБ JS-кода.

- Аккордеоны. Раскрывающиеся блоки с контентом тоже часто делают на JavaScript, однако с помощью <details> и <summary> это можно сделать и нативно. К тому же, они отлично стилизуются и анимируются.

- Всплывающие окна. С помощью <dialog> можно создавать гибко настраиваемые и стилизуемые всплывающие окна. Можно даже настроить анимацию их появления с помощью CSS @starting-style. На момент записи доклада @starting-style не был доступен в FireFox, но в Firefox 129 beta поддержку @starting-style уже добавили)) Я же говорил, что Firefox набирает обороты))

- Смена стилей в зависимости от размера контейнера. С появлением CSS @container у нас отпадает необходимость в разработке разных вариантов одного и того же компонента на все случаи жизни. Теперь можно применять разные стили к вашему компоненту, завязываясь на размер контейнера.

- Смена стилей в зависимости от чего-то ещё. Псевдокласс :has() позволяет менять стили в зависимости от разных условий: можно завязываться на наличие определенных потомков, на наличие соседних элементов и даже на определенные значения полей.

Итог
Я понимаю, что многие из этих инструментов — далеко не самые новые. Скорее всего, о большинстве из них вы уже слышали. Но чем мне понравился этот доклад, так это призывом выбирать наиболее простой инструмент для решения своих задач: если задачу можно решить с помощью CSS, то не стоит использовать JS. И если задача решается с помощью HTML (как с input switch в Safari), то лучше обойтись и без CSS.

Интересен так же вывод о том, что перед тем, как приступить к выполнению задачи, стоит заново научиться её решать — ведь с момента вашего последнего обучения могли появиться новые, более простые способы её решения.