Перейти к содержимому 
Сегодня поделюсь тремя простыми, но мощными приемами в HTML и CSS, которые помогут сделать твои проекты чище, быстрее и удобнее. Никакой магии — только практика, которую я сам использую. Погнали!
1. Ленивая загрузка изображений без JavaScript
Браузеры уже давно поддерживают атрибут loading=”lazy” для тега <img>. Это заставляет картинки загружаться только тогда, когда они попадают в область видимости. Отлично для скорости загрузки страницы, особенно если у тебя много контента.
Как использовать:
<img src="example.jpg" alt="Пример изображения" loading="lazy">
Почему это круто:
- Уменьшает время загрузки страницы.
- Работает из коробки — не нужно подключать библиотеки.
- Поддерживается всеми современными браузерами (Chrome, Firefox, Safari).
Попробуй добавить это к изображениям в своем следующем проекте и посмотри на разницу в PageSpeed Insights.
2. Гибкие отступы с clamp()
Функция clamp() в CSS — это как швейцарский нож для адаптивных отступов, размеров шрифта или ширины блоков. Она задает минимальное, предпочтительное и максимальное значение в одном выражении.
Как использовать:
.container {
padding: clamp(10px, 5vw, 50px);
}- 10px — минимальный отступ.
- 5vw — предпочтительный, зависит от ширины экрана.
- 50px — максимальный отступ.
Почему это круто:
- Отступы автоматически подстраиваются под размер экрана.
- Меньше медиазапросов в коде.
- Читаемый и понятный синтаксис.
Используй clamp() для шрифтов, отступов или ширины колонок — твоя верстка станет гибче.
3. Плавный скролл к якорям с одной строкой CSS
Хочешь, чтобы переходы по якорным ссылкам (например, <a href=”#section”>) были плавными, как в современных сайтах? Забудь про JavaScript — CSS справится сам.
Как использовать:
html {
scroll-behavior: smooth;
}Почему это круто:
- Одна строка — и все ссылки вроде <a href=”#top”>Наверх</a> анимируются.
- Работает с любыми якорями на странице.
- Поддержка везде, кроме старых IE (но кому они нужны в 2025?).
Добавь это в свой stylesheet, и пользователи скажут спасибо за приятный UX.
Эти фишки — не просто трюки, а рабочие инструменты, которые я сам применяю в проектах. Попробуй их в деле, и если понравится, делись своими находками в комментариях.