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

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

Почему необходимо использовать тег picture вместо тега img

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

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

Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают ...

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

Как загрузить адаптивные изображения с imagesize и imagesrcset

От автора: сегодня я прочитал статью Адди Османи «Более быстрая предварительная загрузка поздно обнаруженных Hero-изображений». Это хороший обзор способов предварительной загрузки ресурсов, если вы хотите настроить и улучшить поведение загрузки браузера. Крутая вещь в этой статье: я обнаружил недавно добавленную функцию веб-платформы, которая помогает ускорить загрузку адаптивных изображений. Предположим, у вас на странице есть следующее адаптивное изображение. <img srcset="image-400.jpg 400w, ...

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

Несбывшиеся надежды веб-компонентов

Перевод статьи The failed promise of Web Components с сайта lea.verou.me, опубликован на CSS-live.ru с разрешения автора — Лии Веру Веб-компоненты обещали так много новых возможностей для HTML, с ними веб-разработка должна была стать намного доступнее для непрограммистов и легче для программистов. Помните тот восторг от каждого новёхонького HTML-элемента, который реально что-то делал? Помните, как было здорово, когда стало можно ...

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

Оптимизация веб-сайтов с помощью новых медиаформатов Webp и WebM

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

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

Быстрая предварительная загрузка Hero-изображений

От автора: предварительная загрузка позволяет как можно скорее сообщить браузеру о критических ресурсах, которые вы хотите загрузить, до того, как они будут найдены в HTML. Если вы оптимизируете Отображение наибольшего контента (LCP), предварительная загрузка может изменить правила игры для повышения приоритета загрузки поздно обнаруживаемых Hero-изображений и ресурсов, загружаемых через JavaScript. <link rel="preload" as="image" href="hero-image.jpg"> Примечание. Предварительная загрузка поддерживается в Chrome, ...

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

«Не закрывайте теги!»

С таким провокационным призывом на днях обратился к своим читателям в Твиттере не кто-нибудь, а Таб Аткинс, главный редактор львиной доли спецификаций CSS. Конечно, речь шла не о любых тегах, а об опциональных (необязательных), которые разрешает не ставить сам стандарт HTML. Но всё равно призыв Таба многих шокировал, очень уж вразрез он шел со всем, чему нас учили с самого начала веб-карьеры. Может, Таб просто всех троллил? Или же в его совете есть рациональное зерно? Попробуем непредвзято разобраться. ...

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

Почему вам стоит выбрать элемент HTML5 article, а не section

От автора: визуальное отображение браузерами заголовков, вложенных в элементы section, создает впечатление, что они назначают логическую иерархию этим заголовкам. Однако это чисто визуальный эффект и не передается вспомогательным технологиям. Какой смысл в section и как авторы должны отмечать заголовки, которые чрезвычайно важны для пользователей AT? Несколько дней назад я разговаривал с несколькими друзьями, один из которых спросил меня о разнице ...

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

Цитирование в HTML

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

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

Доступность форм: Проблемы с заполнителями placeholder HTML

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

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