Верстка \ HTML5

Извлечение текста из контента с использованием HTML Slot, HTML Template и Shadow DOM

От автора: названия глав в книгах, цитаты, ключевые слова в статье, статистика в отчете — это все типы контента, который может быть выделен и превращен в краткое изложение того, что важно. Например, вы видели, как Business Insider предоставляет ключевые моменты статьи перед тем, как перейти к содержанию?

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

Верстка \ HTML5

Как у вас обстоят дела с figure в HTML 5?

От автора: элементы figcaption и figure в HTML 5 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно.

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

Верстка \ HTML5

Элемент dialog HTML

От автора: давайте поговорим о всплывающих окнах. Или модалах, оверлеях или как вам нравится их называть (не забудьте, лайтбокс). Несмотря на то, что многим пользователям это не нравится, эти элементы остаются популярными в Интернете. Но их технические реализации могут быть дико непоследовательными. Хотите больше не изобретать велосипед? Этот пост поможет вам решить задачу, как отобразить контент поверх другого контента.

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

Верстка \ 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

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

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