12 простых HTML-сниппетов вместо сложных библиотек | DevsDay.ru

IT-блоги 12 простых HTML-сниппетов вместо сложных библиотек

techrocks.ru 20 октября 2021 г. Редакция techrocks.ru


verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×
Photo by Tranmautritam from Pexels

Незнание базовых технологий может привести к раздуванию кода, навредить производительности и добавить лишний уровень сложности в проект.

В этой статье мы рассмотрим несколько вещей, которые вы можете сделать на чистом HTML плюс немного CSS (если хотите, чтобы красиво выглядело).

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

Пипетка для выбора цвета

У разработчиков часто возникает необходимость в пипетке — чтобы можно было выбрать цвет из спектра.

Для создания пипетки можно воспользоваться <input type="color">. А вот создание подобного функционала с нуля отнимет у вас много времени.

See the Pen HTML Color Picker by madarsbiss (@madarsbiss) on CodePen.

Цитата

При написании статей может возникнуть желание выделить свои любимые цитаты.

Это можно сделать при помощи тега <blockquote>. Добавьте собственные стили, и получите красивый элемент, выделяющийся на фоне остального текста.

See the Pen HTML Blockquote by madarsbiss (@madarsbiss) on CodePen.

Аудиоплеер

Написание собственного аудиоплеера с нуля — нетривиальная задача. Но вы можете использовать встроенный тег <audio>. Он дает базовый функционал для проигрывания ваших аудиофайлов.

See the Pen HTML Audio Player by madarsbiss (@madarsbiss) on CodePen.

Видеоплеер

На сайтах также часто используется видео. Опять же, нельзя просто включить ссылку на видеофайл в свой HTML-код и рассчитывать, что видео станет проигрываться.

Для воспроизведения видео применяется встроенный тег <video>.

See the Pen HTML Video Player by madarsbiss (@madarsbiss) on CodePen.

Аккордеон

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

Это можно сделать при помощи чистого HTML, а именно — тега <details>.

See the Pen HTML Accordion by madarsbiss (@madarsbiss) on CodePen.

Выбор даты

Работа с датами — одна из наиболее частых причин, по которым разработчики начинают подыскивать внешнюю библиотеку.

HTML предоставляет тег <input type="date">. Он обеспечит вам возможность выбирать дату при помощи кликов. Интерфейс получится довольно приятный.

See the Pen HTML Date Picker by madarsbiss (@madarsbiss) on CodePen.

Ползунок

Ползунок — распространенный компонент для получения пользовательского инпута в определенном числовом диапазоне.

Чтобы получить полностью функциональный ползунок, используйте <input type="range">. При этом можно установить минимальное, максимальное и текущее значение.

See the Pen HTML Slider by madarsbiss (@madarsbiss) on CodePen.

Редактор контента

Для редактирования контента не обязательно использовать поля input или textarea и устанавливать дефолтные значения для них.

Вместо этого можно использовать атрибут contenteditable. Таким образом можно сделать редактируемым контент div (например).

See the Pen HTML Content Editor by madarsbiss (@madarsbiss) on CodePen.

Тег picture

Для улучшения производительности и UI/UX вы можете захотеть отображать на странице разные картинки в зависимости от размеров экранов.

Вместо использования дефолтного тега <img>, определения зоны просмотра и создания метода для переключения между картинками, можно просто использовать встроенный тег <picture>.

See the Pen HTML Picture Tag by madarsbiss (@madarsbiss) on CodePen.

Индикатор выполнения

Тег <progress> позволяет вывести на экран прогресс выполнения задачи.

Вы можете использовать этот тег в разных сценариях: для показа прогресса загрузки / передачи файла или инсталляции чего-либо.

See the Pen HTML Progress Bar by madarsbiss (@madarsbiss) on CodePen.

Выпадающий список

Бывает, нужно получить от пользователя input путем выбора из нескольких доступных вариантов. Вместо того чтобы перечислять все доступные опции на экране, можно поместить их в выпадающий список.

Использование тега <datalist> позволит пользователям выбирать опции из списка, а также вводить собственные значения.

See the Pen HTML Dropdown by madarsbiss (@madarsbiss) on CodePen.

Контекстное окно — подсказка

Если вам нужно дать подробное описание чего-либо, можно добавить всплывающее окно. В HTML предусмотрена такая функция: нужно использовать атрибут title.

See the Pen HTML Tooltip by madarsbiss (@madarsbiss) on CodePen.

Итак, мы рассмотрели функциональные элементы HTML, которые можно использовать при работе с текстом, аудио, изображениями и видео.

Когда вам в следующий раз потребуется какой-то функционал, сперва проверьте, не реализован ли он в самом HTML.

Перевод статьи «12 Simple HTML Snippets To Avoid Complex Libraries».

Запись 12 простых HTML-сниппетов вместо сложных библиотек впервые появилась Techrocks.

Источник: techrocks.ru

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

Обучение frontend primary верстка