Незнание базовых технологий может привести к раздуванию кода, навредить производительности и добавить лишний уровень сложности в проект.
В этой статье мы рассмотрим несколько вещей, которые вы можете сделать на чистом 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».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]