Есть малоизвестный HTML-инструмент, который может заметно ускорить сайт — Speculation Rules.
Суть простая: браузер заранее подготавливает следующую страницу ещё до клика. Например, когда пользователь наводит курсор на ссылку, система распознаёт вероятный переход и запускает пререндер в фоне.
В итоге страница открывается почти мгновенно, без привычной задержки после нажатия.
Ограничение пока одно: технология нормально работает в основном в Chrome и Edge, так что охват сейчас — примерно три четверти аудитории. Но для ускорения навигации это уже вполне полезный инструмент.
#HTML #Chrome #вебразработка
Суть простая: браузер заранее подготавливает следующую страницу ещё до клика. Например, когда пользователь наводит курсор на ссылку, система распознаёт вероятный переход и запускает пререндер в фоне.
В итоге страница открывается почти мгновенно, без привычной задержки после нажатия.
Ограничение пока одно: технология нормально работает в основном в Chrome и Edge, так что охват сейчас — примерно три четверти аудитории. Но для ускорения навигации это уже вполне полезный инструмент.
#HTML #Chrome #вебразработка
🔥1
Адаптивные изображения в HTML
Тег
Браузер проверяет теги
Если
#HTML #адаптивность #frontend
Тег
<picture> нужен, когда для разных устройств или сценариев показа требуется подставлять разные версии одной картинки.<picture> <source srcset="320.jpg" media="(max-width: 800px)"> <img src="640.jpg" alt="..."></picture>Браузер проверяет теги
<source> сверху вниз и берёт первый вариант, который подходит под текущие условия. Остальные после этого уже не рассматриваются.Если
<picture> не поддерживается или ни один <source> не сработал, будет показано изображение из тега <img>.#HTML #адаптивность #frontend
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Автозаполнение инпута через <datalist>
Мало кто пользуется этим тегом, а зря.
Главное отличие от
▪️ select — жёсткий список, ввести своё значение нельзя
▪️ datalist — это подсказки: можно выбрать из списка или напечатать что угодно вручную
По сути получаешь автодополнение на чистом HTML, без единой строчки JS. Удобно для поиска, форм и полей с частыми вариантами.
#HTML #frontend #datalist
Мало кто пользуется этим тегом, а зря.
<datalist> хранит набор опций (<option>), которые всплывают подсказками для поля ввода. Пользователь выбирает вариант — и значение подставляется в связанный <input>.Главное отличие от
<select> в свободе выбора:▪️ select — жёсткий список, ввести своё значение нельзя
▪️ datalist — это подсказки: можно выбрать из списка или напечатать что угодно вручную
По сути получаешь автодополнение на чистом HTML, без единой строчки JS. Удобно для поиска, форм и полей с частыми вариантами.
#HTML #frontend #datalist
🎉3🤩2⚡1🔥1💯1
Как связать HTML-атрибуты и CSS без классов
Оказывается, можно строить адаптивные компоненты вообще без modifier-классов и прокидывания props. Помогают две вещи: container style queries и продвинутый
Суть проста:
• HTML-атрибуты напрямую задают CSS-параметры — значение из атрибута попадает прямо в стиль
• дочерние элементы меняют вид, реагируя на состояние родителя-контейнера
В итоге меньше классов-модификаторов, меньше лишней логики в разметке и никакого ручного проброса состояний вниз по дереву. Стили становятся ближе к самому HTML, а компонент — чище и понятнее
Штука свежая, поэтому перед боевым использованием стоит проверить поддержку в браузерах
#CSS #HTML #frontend
Оказывается, можно строить адаптивные компоненты вообще без modifier-классов и прокидывания props. Помогают две вещи: container style queries и продвинутый
attr()Суть проста:
• HTML-атрибуты напрямую задают CSS-параметры — значение из атрибута попадает прямо в стиль
• дочерние элементы меняют вид, реагируя на состояние родителя-контейнера
В итоге меньше классов-модификаторов, меньше лишней логики в разметке и никакого ручного проброса состояний вниз по дереву. Стили становятся ближе к самому HTML, а компонент — чище и понятнее
Штука свежая, поэтому перед боевым использованием стоит проверить поддержку в браузерах
#CSS #HTML #frontend
❤2🎉2🔥1😁1🤩1👌1💯1🤓1
initial-scale в viewport уже лишний
Многие по привычке пишут в шапке страницы:
Но для современных браузеров хватает и короткого варианта:
Параметр
Итог простой: чуть чище шаблон, меньше лишнего в
#viewport #frontend #HTML
Многие по привычке пишут в шапке страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Но для современных браузеров хватает и короткого варианта:
<meta name="viewport" content="width=device-width">Параметр
initial-scale=1.0 остался с тех времён, когда мобильные движки масштабировали страницы по-своему. Сейчас он не решает реальных задач — адаптивность от этого не страдает.Итог простой: чуть чище шаблон, меньше лишнего в
head и одинаковое поведение на экранах.#viewport #frontend #HTML
❤3👍2😁2🔥1🤩1