Главная » Архив меток: HTML5

Архив меток: HTML5

Элемент dialog HTML

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

Читать далее »

Почему мы не добавим в HTML элемент ?

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона Вчера был интересный разговор, который начала Сара Суайдан: твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36: Вот что я хотела бы увидеть в HTML:<color value=“” />Просто. Чрезвычайно полезно, особ. для дизайн-систем сегодня. Тут, пока никто второпях не ...

Читать далее »

Почему семантический HTML важен, и как Typescript помогает это понять

Перевод статьи Understanding why Semantic HTML is important, as told by TypeScript с сайта medium.com для css-live.ru, автор — Мэнди Майкл HTML не просто скелет наших сайтов, он также крайне важен для того, чтобы сайты вели себя как полагалось на всех платформах и технологиях. Если с самого начала использовать HTML в полной мере, то можно не просто извлечь максимум из ...

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

Ссылки против кнопок в современных веб-приложениях

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон Github: ссылки или кнопки? Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы ...

Читать далее »