Верстка \ HTML5

Удобный для пальцев ввод цифр с помощью inputmode

От автора: формы часто превращаются на мобильных устройствах в настоящий кошмар. Мы можем сделать процесс максимально безболезненным, подстраиваясь под контекст. Поля, в которые должен производиться ввод цифр, должны иметь числовой интерфейс. Для большинства платформ отобразить на небольших экранах цифровую клавиатуру довольно просто — используйте для этого <input type = «number»>.

Продолжить чтение

Верстка \ HTML5

Глобальный атрибут HTML5 hidden

От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде.

Продолжить чтение

Верстка \ HTML5

Анимирование progress HTML

От автора: элемент progress HTML уже много лет реализован в браузерах. (Лея Веру работала над полифиллом еще в 2011 году!) Можно было бы ожидать, что после всех этих лет все станет стабильным. Оказывается, за эти годы изменилось не так много. Порядка по-прежнему не наблюдается, а процесс анимирования элемента progress … не совсем гладкий.

Продолжить чтение

Верстка \ HTML5

Анимированный радиальный SVG прогресс-бар

От автора: для клиентского проекта нам поручили не что иное, как сделать прогресс бар, причем радиальный. Раньше мы использовали целые Canvas графические библиотеки (156k / 44k gzip), но это казалось излишним. Я посмотрел проект Lottie от Airbnb, в котором экспортируется анимация After Effects, как JSON. Это классно для сложной анимации, но зависимости для одной этой микро-анимации оказались слишком объемными (248k / 56k gzip).

Продолжить чтение

Верстка \ HTML5

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

От автора: знаете ли вы, что есть простой способ ускорить работу вашего сайта без особых усилий? Сегодня мы рассмотрим подсказки в браузере и директивы ресурсов, которые представляют собой крошечные фрагменты html, которые мы можем использовать для повышения производительности веб-сайта или веб-приложения всего за несколько минут.

Продолжить чтение

Верстка \ HTML5

Создание изображений с помощью canvas

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

Продолжить чтение

Верстка \ HTML5

Что нового в HTML 5.2?

От автора: Меньше месяца назад HTML 5.2 стал официальной рекомендацией W3C (REC). Когда спецификация доходит до этапа REC, это значит, что она получила поддержку членов W3C и директора, и W3C официально рекомендует ее реализацию в браузерах, а также внедрение в веб-страницы авторами.

Продолжить чтение

Верстка \ HTML5

HTML5 формы: типы тега input

От автора: вторая часть статьи, посвященной типам тега input. Вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

Продолжить чтение

Верстка \ HTML5

HTML5 формы: типы тега input

От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

Продолжить чтение