Есть малоизвестный 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⚡1🔥1🤩1💯1