8 решений из HTML и CSS, которые пора забыть в 2025

26 апреля 2025

Раньше простые на первый взгляд задачи требовали довольно много возни. Центрировать блок? Нужно позиционирование и расчёты. Сделать сетку? Пропорции вручную и осторожное управление отступами. Обновить страницу автоматически? Либо писать скрипт, либо настраивать сервер. Работало, но всегда казалось, что можно проще.

И проще стало. Современные HTML и CSS позволяют решать привычные задачи буквально парой строк. Никаких лишних обёрток, сложных костылей и вечных проверок на совместимость. Всё честно, прозрачно и работает сразу — берёшь и используешь.

Центрирование блока на странице

Раньше, чтобы поставить элемент строго по центру окна, приходилось делать его абсолютно позиционированным, двигать его на 50% от левого и верхнего края и компенсировать смещение с помощью transform: translate(-50%, -50%). Это было не очень удобно: код был громоздким, легко было ошибиться, да и на адаптивности такие конструкции часто разваливались.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Сейчас для этого достаточно использовать display: grid на родителе и свойство place-items: center, чтобы дочерний элемент сам занял центр и по горизонтали, и по вертикали.

Адаптивная ширина без медиазапросов c clamp

Раньше приходилось вручную описывать кучу медиазапросов, чтобы элемент красиво сжимался на мобильных устройствах и рос на больших экранах.

.block {
  width: 300px;
}

@media (min-width: 768px) {
  .block {
	width: 600px;
  }
}

Теперь это можно решить одной строкой через clamp(), который сам определяет ширину в зависимости от ширины вьюпорта, не выходя за минимальные и максимальные пределы.

Автоматическое обновление страницы через refresh

Раньше для автоматической перезагрузки страницы через несколько секунд нужно было либо настраивать серверные заголовки, либо писать JavaScript-скрипты с setTimeout и location.reload().

setTimeout(() => {
  location.reload();
}, 5000);

Теперь можно просто добавить одну строчку в <head> — и браузер сам перезагрузит страницу через указанное количество секунд.

<head>
  <meta http-equiv="refresh" content="5">
</head>

Настраиваемые цвета чекбоксов и радиокнопок

Раньше, чтобы изменить цвет стандартных чекбоксов и радио-кнопок, приходилось полностью скрывать их с экрана и рисовать свои псевдоэлементы. При этом терялась доступность и было очень легко сделать баги.

input[type="checkbox"] {
  display: none;
}
.custom-checkbox::before {
  content: '';
  width: 20px;
  height: 20px;
  background: gray;
}

Теперь достаточно использовать свойство accent-color, которое задаёт основной цвет интерактивных элементов.

Отступы через gap во флексах

Раньше, чтобы задать расстояние между элементами, приходилось назначать margin-right всем, кроме последнего элемента.

.item {
  margin-right: 20px;
}
.item:last-child {
  margin-right: 0;
}

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

Липкий футер без трюков

Раньше, чтобы прижать футер к низу экрана даже на пустых страницах, приходилось делать сложную структуру с флексами, задавать min-height: 100vh для всей обёртки и отдельно растягивать основной контент через flex-grow.

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  flex: 1;
}

Теперь можно превратить всю страницу в грид-контейнер и просто распределить зоны — шапка (auto по высоте), основной контент (1fr, т. е. занимает всё доступное пространство), и футер (auto).

Таким образом, шапка и футер занимают ровно столько места, сколько нужно по контенту, а центральная часть всегда тянется, заполняя остаток экрана. Свойство min-height: 100vh гарантирует, что даже на страницах без контента высота body будет не меньше высоты окна браузера.

Размытие фона через backdrop-filter

Раньше для размытия фона под модалкой клали отдельный затемняющий слой, а чтобы размыть, приходилось городить фоны и фильтры с псевдоэлементами.

.overlay::after {
  content: '';
  background: rgba(0,0,0,0.5);
}

Теперь достаточно использовать backdrop-filter, чтобы натурально размыть всё, что находится за элементом.

Умная сетка без расчётов процентов

Раньше, чтобы сделать адаптивную сетку карточек, нужно было вручную рассчитывать ширину колонок в процентах и следить, чтобы всё красиво складывалось на разных экранах. Теперь грид умеет сам управлять количеством колонок.

.col {
  float: left;
  width: 33.3333%;
}

Теперь с помощью грида можно строить сетки, которые сами подстраиваются под размер контейнера и содержимое. С помощью repeat(auto-fit, minmax(200px, 1fr)) мы говорим: создавай столько колонок, сколько влезет, но чтобы каждая была минимум 200 пикселей, а в остальном заполняла всё доступное пространство.

Когда место на экране уменьшается, колонки сами переносятся на новые строки без единого медиазапроса. А свойство gap: 20px аккуратно расставляет отступы между ними, не требуя отдельной настройки внешних отступов для элементов.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

10 идей для вайб-кодинга на пару свободных часов

Есть кодинг по задаче. А есть — по вайбу.

Вайб-кодинг — это когда вы садитесь за ноут не потому, что надо, а потому что хочется. Без целей, дедлайнов и фич-реквестов. Просто чтобы почувствовать, как работает браузер, как оживает DOM, как строчка за строчкой рождается нечто, чего не было.

Это может быть бесполезно с точки зрения результата, но не бессмысленно. Хороший вайб-проект — это миниатюрная лаборатория, где вы пробуете новые подходы, фреймворки, библиотеки. Или наоборот — возвращаетесь к HTML и CSS, чтобы снова почувствовать радость простоты.

Но. Иногда хочется, чтобы результат всё же приносил пользу. Пусть даже самую крошечную. Ниже — десять идей проектов, которые можно использовать каждый день. Все они — настоящие, живые, с возможностью доработать, передать другу или выложить в портфолио.

Каждая идея — с подробным первым поисковым запросом, чтобы сразу можно было начать. Погнали.

HTML

24 апреля 2025

HTML-коды популярных эмодзи

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

Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!

Эмодзи	Название	HTML-код
😀	Улыбающееся лицо	😀
😂	Лицо со слезами радости	😂
😍	Лицо с глазами в форме сердца	😍
😎	Лицо в солнцезащитных очках	😎
😭	Плачущий	😭
😊	Смущённая улыбка	😊
😢	Грустное лицо	😢
😅	Лицо с каплей пота	😅
🤔	Задумчивое лицо	🤔
👍	Большой палец вверх	👍
👎	Большой палец вниз	👎
👏	Аплодисменты	👏
🙏	Сложенные руки	🙏
❤	Красное сердце	❤
💔	Разбитое сердце	💔
🔥	Огонь	🔥
💯	Сто баллов	💯
🎉	Конфетти	🎉
🎂	Торт	🎂
🌟	Звезда	🌟
✨	Сияние	✨
🌈	Радуга	🌈
☀	Солнце	☀
☁	Облако	☁
🌧	Дождь	🌧
❄	Снег	❄
🌍	Земной шар	🌍
💡	Лампочка	💡
💤	Сон	💤
🎵	Нота	🎵
🎶	Музыка	🎶
📱	Телефон	📱
💻	Ноутбук	💻
🚗	Машина	🚗
🚀	Ракета	🚀
✈	Самолёт	✈
🚲	Велосипед	🚲
🐶	Собака	🐶
🐱	Кошка	🐱
🐭	Мышь	🐭
🦊	Лиса	🦊
🐻	Медведь	🐻
🍎	Яблоко	🍎
🍕	Пицца	🍕
🍔	Бургер	🍔
🍩	Пончик	🍩
🍉	Арбуз	🍉

HTML

15 ноября 2024

Что писать в атрибуте alt

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

HTML

27 февраля 2024

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

HTML

22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

HTML

1 ноября 2023

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

HTML

23 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

HTML

18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>

HTML