Мы привыкли создавать некоторые элементы пользовательского интерфейса с помощью JavaScript, например аккордеоны, всплывающие подсказки (тултипы), усечение текста и т. д. Но, поскольку HTML и CSS постоянно получают новые функции, а старые браузеры больше не нужно поддерживать, мы можем использовать намного меньше JavaScript-кода для создания элементов пользовательского интерфейса и больше фокусироваться на логической части (проверки, обработка данных и т. д.). Специально к старту новых потоков по специализации Frontend-разработчик и Веб-разработчик делимся с вами несколькими хитростями.
Некоторые решения по-прежнему кажутся хакерскими и негибкими, но они полезны в небольших проектах и если это элементы для разового использования. Зачем писать JavaScript-функцию (или использовать jQuery, если вы ещё помните) для одного-единственного аккордеона на вашем веб-сайте? Это была моя мысль, когда я добавлял аккордеон в нижний колонтитул для мобильных устройств на моём личном веб-сайте.
Вот несколько примеров создания элементов без JavaScript.
Адаптивное усечение текста
Усечение текста с помощью CSS очень просто реализовать, поскольку мы редактируем не HTML-содержимое текста, а только его визуализацию. В то время как усечение однострочного текста хорошо поддерживается в старых браузерах, усечение многострочного текста поддерживается только в новых.
Компонент рейтинга
Рейтинг является обязательным элементом большинства форм. Есть много способов реализовать его с помощью CSS: использовать фоновое изображение, JavaScript, значки и т. д. Наиболее доступный способ — реализовать его с помощью значков и нативных радиокнопок.
Недостатком этой реализации является то, что радиокнопки находятся в обратном порядке (от 5 до 1 рейтенгового значения), потому что нам нужно выбрать все звёзды, включая выбранную, которую невозможно выбрать с помощью CSS. Вот почему мы меняем порядок и закрашиваем звёзды в обратном порядке.
Эта реализация очень гибкая и может быть легко кастомизирована.
Всплывающая подсказка (тултип) / раскрывающееся меню (dropdown меню)
Это очень гибкий элемент, потому что его логика CSS может использоваться как для всплывающих подсказок, так и для раскрывающихся меню, поскольку они работают одинаково и оба поддерживают функции наведения и нажатия (касания).
Проблемой этой реализации можно считать то, что из-за стилей фокуса всплывающая подсказка (раскрывающийся список) будет оставаться открытой при щелчке до тех пор, пока пользователь не уберёт курсор от элемента (элемент использует фокус).
Модальные окна
Это немного хакерская реализация, которая полностью полагается на URL-адрес. Идентификатор в URL-адресе должен соответствовать модальному элементу, который нам нужно открыть.
Плавающий лейбл
Я рассмотрел реализацию инпутов с плавающим лейблом в отдельной статье, поскольку эта реализация немного сложнее.
Тоггл / Аккордеон
Недавно в HTML появился нативный элемент «аккордеон» (тоггл) с элементами <details> и <summary>, но недостатком использования этих элементов является то, что у них не так много вариантов стилизации, поэтому разработчики по-прежнему продолжают использовать свои собственные реализации. К счастью, с помощью логики чекбокса или радиокнопки мы можем создавать тогллы и аккордеоны, не полагаясь на JavaScript.
Обратной стороной использования этой реализации является то, что она полагается на HTML-элемент инпута и его логику, в результате которой требуется дополнительный HTML-код, но, с другой стороны, это приводит нас к очень доступному элементу.
Заключение
Как видите, эти реализации полагаются на логику селектора CSS, например :focus и :placeholder-shown, чтобы заменить логику JavaScript. Некоторые из этих решений можно считать хакерскими, но они быстрые, гибкие и не полагаются на JavaScript.
Я использовал некоторые из этих решений в своих проектах, поэтому могу избежать добавления какого-либо дополнительного JavaScript-кода или полностью отказаться от его использования для интерфейса.
Конечно, существует множество других решений, предназначенных только для CSS, но я посчитал эти наиболее интересными. Если вы используете какие-либо другие решения, дайте мне знать в комментариях.
Лайфхаков, подобных тем, что описаны в статье — множество, но всё-таки JavaScript это мастхэв для веб-разработки и frontend-разработки в частности. Если хотите уйти во фронтенд и, чтобы веб-разработка стала для вас — удовольствием, а JavaScript из "странного языка" стал для вас удобным рабочим инструментом — то приходите учиться к нам.
Узнайте, как прокачаться в других специальностях или освоить их с нуля:
Другие профессии и курсы
ПРОФЕССИИ
КУРСЫ