dr.Brain

doctor Brain

мир глазами веб-разработчика

html

HTML: ленивая загрузка

улучшаем производительность с помощью ленивой загрузки

dr.Brain

время чтения 1 мин.

Photo by Valentin Petkov on Unsplash

Добавив HTML-атрибут loading="lazy" к изображению или фрейму, можно отложить загрузку контента, находящегося за пределами видимой области экрана, до тех пор пока пользователь не доскроллит страницу сайта до “ленивого” элемента. Такой подход позволяет значимо ускорить загрузку содержимного страницы, особенно в тех случаях, когда предлагаемая информация содержит множество картинок или фреймов.

Полезные элементы HTML: details и summary

организация дополнительной информации в HTML

dr.Brain

время чтения 1 мин.

Photo by Migue on Unsplash

HTML-элементы details и summary предназначены для создания любых сценариев, в которых необходимо скрывать и раскрывать информацию (например: FAQ).

Полезные элементы HTML: data

машиночитаемое представление данных в HTML

dr.Brain

время чтения 1 мин.

Photo by Patrick Lindenberg on Unsplash

HTML-элемент data связывает машиночитаемое значение с его человекопонятным представлением. Это особенно полезно для добавления семантического значения к вашему контенту, например, для привязки идентификатора продукта к его отображаемому названию.

Полезные элементы HTML: output

элемент вывода в HTML

dr.Brain

время чтения 1 мин.

Photo by Ivan Ivankovic on Unsplash

HTML-элемент ouptput нужен для вывода на экран результатов вычислений или действий пользователя. Это особенно полезно в формах, для визуализации возможностей обратной связи в режиме реального времени, полагаясь на данные, введенные пользователем.

Полезные элементы HTML: picture

работаем с адаптивными картинками в HTML

dr.Brain

время чтения 1 мин.

Photo by Alice Dietrich on Unsplash

HTML-элемент picture - контейнер для вложенных элементов source. Он необходим для загрузки адаптивных изображений, оптимизированных в соответствии с выбранными размерами и разрешениями экрана.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.