Вы можете создавать эти элементы, не используя JavaScript

Original author: Adrian Bece
  • Translation

Мы привыкли создавать некоторые элементы пользовательского интерфейса с помощью JavaScript, например аккордеоны, всплывающие подсказки (тултипы), усечение текста и т. д. Но, поскольку HTML и CSS постоянно получают новые функции, а старые браузеры больше не нужно поддерживать, мы можем использовать намного меньше JavaScript-кода для создания элементов пользовательского интерфейса и больше фокусироваться на логической части (проверки, обработка данных и т. д.). Специально к старту новых потоков по специализации Frontend-разработчик и Веб-разработчик делимся с вами несколькими хитростями.


Некоторые решения по-прежнему кажутся хакерскими и негибкими, но они полезны в небольших проектах и если это элементы для разового использования. Зачем писать JavaScript-функцию (или использовать jQuery, если вы ещё помните) для одного-единственного аккордеона на вашем веб-сайте? Это была моя мысль, когда я добавлял аккордеон в нижний колонтитул для мобильных устройств на моём личном веб-сайте.

Аккордеон без использования JavaScript!
Аккордеон без использования JavaScript!

Вот несколько примеров создания элементов без 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 из "странного языка" стал для вас удобным рабочим инструментом — то приходите учиться к нам.

Узнайте, как прокачаться в других специальностях или освоить их с нуля:

Другие профессии и курсы
SkillFactory
Школа Computer Science. Скидка 10% по коду HABR

Comments 22

    +7
    Ай-ай-ай, какая неприятность
    image
      +6
      А зачем?
      Недостатком всего этого является то, что у каждого способа будут досадные недостатки, которые в реальности будут всех раздражать, а JS-аналог обычно занимает несколько строк. Небольшая цена, чтобы сделать все нормально
        +3
        JS-аналог обычно занимает несколько строк
        Как жаль, что эти несколько строк обычно подразумевают использование какой-нибудь библиотеки на пару мегабайт…
          0
          Конкретно то, что указано в статье довольно сложно реализовать в пару мегабайт
          +4
          «А если у пользователя будет отключен javascript?»
          2021 на дворе, а js до сих пор воспринимается как необязательная часть, которую якобы пользовать может не использовать, ну или использовать какой нибудь другой язык(иначе зачем писать type=«javascript»). Смиритесь уже javascript это никакой не хак, это часть браузера наряду с html и css. Задачу нужно решать так как удобнее, не ограничивая себя в инструментах. Из представленных примеров аккардеон, например, удобнее и понятнее реализовать на js. А вот рейтинг действительно вполне можно сделать на css — просто стилизовать нативные инпуты.
            0

            Чем больше событий и действий обрабатывается при помощи JavaScript тем больше тормозят сайты. Различные фреймворки например пытаются сгладить это давая возможность программисту задавать параметры анимаций в JavaScript и генерируют в результате CSS. Но лучше писать сразу CSS и убрать зависимость от фреймворка.


            Реализуя без JavaScript те задачи которые можно решить без него мы перекладываем задачу на код браузера который должен работать быстрее. И таким образом освобождаем процессорное время для других задач.

              +2
              Вы вообще представляете насколько сложен парсер/движок css? Внезапно на обработку css тоже тратятся ресурсы. Особенно если там хак на хаке.
                0

                Да на обработку CSS тоже тратятся ресурсы. И так или иначе CSS используется для стилизации и манипуляции елементами. Просто в одном случае CSS будет скрыт прослойкой Javascript а в другом он пишется напрямую.


                Не понимание того как работает CSS приводит к тому что программист вынужден дублировать функциональность которая уже есть в коде браузера медленным JavaScript и тем самым замедлять работу сайта.

            • UFO just landed and posted this here
                0
                Почему это выпадают из статистики? Счётчики не только на js работают.
                Я уверен что многие вещи, которые раньше можно было сделать только на js, сегодня благодаря развитию html и css, можно, и даже нужно, делать без использования скриптов. Но в некоторых случаях реализация на «чистом css/html» будет запутана, ненадёжна, да и просто тормознута, по сравнению с двумя строчками js. Ну и у js есть много других применений помимо слайдеров/аккордеонов. Так что списывать немного рано.
                • UFO just landed and posted this here
                  0
                  > Если ваш сайт не может хоть как-то работать без js, то найдётся другой
                  Серьезно? Тяжело же вам приходится в интернете. Сейчас все больше сайтов работают по принципу приложения. Без JS интернет сегодня не нужен, это просто факт.
                    0
                    Сейчас все больше сайтов работают по принципу приложения.

                    Потому что зачем учить какие-то другие подходы, тратиться на ресурсы сервера, и так далее. Выучил реакт — можешь всё. Отправили статический JS — дальше это проблема телефона и его пользователя, почему так медленно рисуется.

                      0
                      Ой, ну не надо истерик. Мы о другом сейчас говорим
                    • UFO just landed and posted this here
                +6

                Усечение текста на CSS и надо делать. Но хаки со статусами чекбоксов/радио-батонов выглядят несколько костыльно, т.к. чекбоксы используются не совсем по назначению.

                  +1
                  А мне реализация рейтинга на radio button кажется вполне нормальной. Вот ещё видео на 40 минут от Вадима Макеева с пошаговой реализацией. Его версия гораздо функциональней представленной в статье
                    0
                    Ну реализовали вы рейтинг на CSS, что в принципе является одним из более-менее адекватных примеров. А дальше что? Данные отправляются на сервер с помощью JS, потому что вы же не хотите перезагружать всю страницу ради отправки рейтинга?
                      +1
                      Почему данные отправляются с помощью JS? Это вовсе необязательно. Обычная форма без проблем отправит данные
                      И я не ратую за отказ от JS. Мне js нравиться. Просто именно рейтинг удобнее сделать без него
                  0

                  Я понимаю что это перевод статьи и в оригинале примеры и их код находится на codepen. Но хотябы код продублируйте пожалуйста под спойлерами в самой статье чтоб не приходилось заходить на codepen. Он у меня всячески отказывается правильно работать и показывает в первую очередь свои предупреждения вместо того что должен.

                    0
                    а старые браузеры больше не нужно поддерживать

                    "Умеют верстать только под ИЕ" 2021 Edition

                      +1
                      А как убрать все звезды? Последнуюю звезду убрать не получается.
                      Выходит, что если поставил рейтинг убрать его полностью уже нельзя.
                      И если эти значения участвуют в каком-то общем рейтинге, то всё, ты уже искажаешь статистику. Из-за того, что случайно щелкнул, а убрать уже нельзя.

                      Можно конечно сделать нулевую звезду, но это как-то неинтуитивно и непривычно.

                      Only users with full accounts can post comments. Log in, please.