В этом посте я хотел бы поведать вам о нескольких HTML-тегах, которые позволят добавить несколько полезных (или не очень 😁) нативных функций без использования JavaScript или фреймворка Bootstrap.
Полоса прогресса
Довольно полезный компонент, который мы часто видим при вводе нового пароля. В Bootstrap она реализуется так. А что там в HTML? Тег progress — вот ответ на вопрос.
Тег progress легко настраивается и имеет хорошую поддержку во всех современных браузерах.
Кстати, если в данный тег не добавлять никаких атрибутов, то мы получим бесконечно двигающуюся полоску, которую можно использовать как статус загрузки.
Выше я писал про пароли, но для них всё же лучше использовать не progress, а meter, так как с точки зрения семантики это более верный вариант, ведь тег meter показывает уровень заполнения, а не степень прогресса.
Имеет несколько полезных атрибутов для настройки его отображения и поддерживается всеми браузерами, кроме Internet Explorer.
Бегущая строка
Постоянно смотрите новости и мечтаете о добавлении на свой сайт бегущей строки как в телевизоре? Тег marquee позволит вам осуществить свою мечту.
Поддерживает его, правда, не все браузеры, но ведь когда-нибудь это изменится?
Автокомплит
В HTML автокомплит реализуется при помощи тега datalist, который привязывается к input путем добавления атрибута id в datalist и дальнейшей привязки его к input через атрибут list.
Довольно полезный тег, имеющий несколько серьезных минусов:
- Его сложно стилизовать при помощи CSS
- Средняя поддержка браузерами
На этом у меня всё, спасибо за внимание!
