
Заменяем JavaScript с помощью HTML и CSS
melnik909 43 минуты назад Заменяем JavaScript с помощью HTML и CSS Средний 9 мин 2K Блог компании RUVDS.com HTML * Веб-разработка * Обзор Хабр, привет!Многие фронтенд-разработчики часто отдают предпочтение JavaScript...
Anthropic — What company has the best second artificial intelligence model at the end of June?
Вот важная новость с фронта ИИ: melnik909 43 минуты назад Заменяем JavaScript с помощью HTML и CSS Средний 9 мин 2K Блог компании RUVDS. com HTML * Веб-разработка * Обзор Хабр, привет! Многие фронтенд-разработчики часто отдают предпочтение JavaScript при реализации интерфейсных элементов.
Я же разработчик старой формации. Мы тогда стремились сделать всё с помощью HTML и CSS. Так в интернете зародилось множество HTML- и CSS-решений.
Технические детали
Думаю, вы видели эти костыли с переключением радиокнопок и стилизацией других элементов. У меня был период, когда я тоже загонялся по ним. Честно говоря, это всё баловство.
Но с развитием HTML и CSS появились классные подходы, которые частично заменяют логику, написанную на JavaScript. И мне хочется, чтобы вы использовали их как можно чаще. Поэтому сегодня я поделюсь с вами несколькими техниками, которые вы уже можете использовать в своих проектах.
Давайте посмотрим, что я вам подготовил. Стилизация элементов с помощью псевдо-класса :has() вместо переключения классовВ интерфейсах обычное дело, когда стилизация компонента зависит от каких-то условий. Например, всем известная пагинация.
Отраслевые последствия
Если пользователь находится на первой странице, то ему не должна быть доступна кнопка переключения назад. Её обычно делают неактивной или совсем скрывают. Для этого используют реализацию с добавлением и удалением классов или атрибутов — тут кому что нравится.
Для демонстрации я буду использовать способ с классами. 1 2 3 Когда пользователь находится на любой другой странице, то кнопка «Назад» должна стать активной. Поэтому у неё нужно удалить класс .
pagination__prev_disabled. 1 2 3 Таким образом получается следующая задача: «Если пользователь находится на любой странице, кроме первой, нам нужно отобразить кнопку переключения на предыдущую. Если же он находится на первой странице, то кнопка должна быть скрыта».
Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.





