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

И проще стало. Современные 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 аккуратно расставляет отступы между ними, не требуя отдельной настройки внешних отступов для элементов.