Статьи с тегом #html5

Сегодня HTML5 можно с уверенностью назвать центральной темой веб-разработки. Обновлённая версия языка принесла в мир front end массу новаций и полезных инструментов. Благодаря HTML5 сайты заиграли новыми красками: например, семантическая разметка позволила сделать их доступнее как для людей, так и для поисковых систем, новые функции обеспечили невиданные ранее возможности интеграции с браузером и работы с мультимедиа, оффлайн-хранилище вывело кеширование контента на более продвинутый уровень.

Наиболее важным событием для верстальщиков стало появление семантических, графических и мультимедиа-элементов, а также новых атрибутов для тегов и форм. В рамках работы с JavaScript было добавлено множество API: геолокация, drag&drop, локальное хранилище (LocalStorage), Web Workers и др.

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

В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.

Плавные спойлеры (HTML5 & CSS3)

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

Эмуляция текстового поля input

Современный front end порой требует решения ряда нетривиальных задач, подходы к которым редко освещаются в тематических ресурсах. В частности, одна из таких дилемм, с которой можно столкнуться в процессе разработки, например, веб-чата, — это создание однострочного поля ввода (input) с возможностью вставки смайлов emoji.