<divelopers>

50 оттенков веб-компонентов Только что выступил с докладом «50 оттенков веб-компонентов». Как и обещал, делюсь презентацией с выступления.

Прямая трансляция Я 💛 Фронтенд 2026 Сегодня состоится конференция Я 💛 Фронтенд 2026, на которой я вступлю с докладом про веб-компоненты. Присоединяйтесь к трансляции, начало в 11:00 по Москве, мой доклад в 11:50.

Современный CSS Делюсь сайтом, на котором собраны сниппеты современного CSS, которые заменяют решения на JS, функции препроцессоров, хаки и более громоздкие конструкции самого CSS. Есть фильтрация по уровню поддержки. Помимо сниппетов на сайте есть разделы со статьями, ссылками на ресурсы, новинками CSS и песочницами (пока только для резиновой типографики). Сайт обновляется, поэтому имеет смысл подписаться на рассылку или RSS. #css

Оптимизация загрузки встраиваемых видео без JS При встраивании видео и других виджетов через <iframe> есть проблема: ресурсы загружаются даже если пользователь не взаимодействует с виджетом. Для решения проблемы используется техника фасадов, о которой есть отдельный пост. Суть техники в том, чтобы вместо реального виджета показать максимально похожую визуально заглушку. При нажатии или наведении указателя на заглушку срабатывает обработчик, который подменяет её на реальный <iframe> виджета. Для ...

You don't know HTML: категория и контентная модель Как разработчики определяют, какие HTML-элементы можно вкладывать в другие HTML-элементы? В целом, на уровне интуиции и логики. Понятно, что <li> должен быть в <ul> или <ol>, <td> в <tr>, а тот в <table>. Но в HTML есть чёткие правила вложенности, которые отражают логику, на которую опираются разработчики, и здравый смысл. Правила построены на двух концепциях: категории элемента и его контентной модели. Категории — это группы элементов, объединё...

Кнопки и ссылки Время идёт, а дискуссии о кнопках и ссылках продолжаются. Недавно в чате веб-стандартов как раз обсуждали эту тему. Вроде бы всё очевидно: есть кнопка <button>, есть ссылка <a>, это разные элементы. Но неоднозначность сохраняется. Ссылка <a> достаточно навороченный и сложный элемент. Никита Дубко когда-то целый доклад об этом сделал, рекомендую посмотреть. Суть элемента <a> крутится вокруг URL-адресов, навигации и контекстных действий над этими URL-адресами. Кнопка <button> — не ...

HTML Components: Componentizing Web Applications Попалась мне интересная заметка W3C, которая хорошо подойдёт для нерегулярной рубрики «веб-археология». Называется она «HTML Components Componentizing Web Applications» и датируется аж 1998 годом. Как известно, концепция веб-компонентов прорабатывалась в конце нулевых и была публично представлена Алексом Расселом на конференции Fronteers в 2011 году. Однако сама идея «компонентизации» HTML появилась гораздо раньше. Команда из Microsoft подметила, ...

You don't know HTML: inputmode HTML предлагает встроенные типы текстовых полей ввода для некоторых распространённых типов данных: - number - email - url - tel - password У таких полей есть встроенные механизмы валидации данных, дополнительные возможности настройки и поведение. number позволяет ограничивать диапазон и управлять шагом, а password заменяет введённые символы на кружки. Во встроенных текстовых полях виртуальная клавиатура адаптируется под данные. Но существующие типы полей не всегда ...

Один большой CSS-файл или несколько маленьких? Ситуация: у главной страницы интернет-магазина довольно низкий синтетический показатель производительности в Pagespeed. Сама страница состоит из шапки, hero-баннера, сетки из 8 карточек, формы подписки и подвала. Анализ показал, что причина в высоких значениях FCP и LCP. Довольно долго отображается белый экран и ничего не рисуется. Проблема в блокирующих ресурсах, отрисовку блокирует большой CSS-файл со всеми стилями сайта. Сайт устроен так, что сти...

You don't know HTML: <select size> и <select multiple> У элемента <select> есть ряд дополнительных возможностей, которые крайне редко используются. Причина та же, по которой разработчики не любят сам <select>: невозможность стилизации. К счастью, эта проблема уже решается. Тем не менее, об этих возможностях полезно знать, потому что грядёт обновление, которое ещё больше расширит возможности стилизации. Об этом расскажу в следующем посте, а пока поговорим об атрибутах size и multiple. Стандартный...