Старый vs Новый — Урок 46

Раскладка двух колонок

❌ Старое: float + фиксированная ширина

Колонки заданы в пикселях и держатся на float. Сумма ширин не должна превысить контейнер, иначе вторая колонка падает вниз. На узком экране — горизонтальный скролл.

Колонка 420px

Колонка 420px (не влезает рядом)

.col { float: left; width: 420px; }

✅ Современное: grid + gap + относительные доли

Колонки делят место долями 1fr, отступ задаёт gap, ничего не вылезает на любой ширине.

Колонка 1fr

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Ограничение ширины контейнера

❌ Старое: width в пикселях + медиазапросы-заплатки

📄 lesson-46/old.css

.page { width: 1200px; margin: 0 auto; }
@media (max-width: 1200px) { .page { width: 960px; } }
@media (max-width: 960px)  { .page { width: 100%; } }

✅ Современное: одна строка с min()

📄 lesson-46/new.css

.page {
  width: min(100% - 2rem, 72rem); /* поля 1rem по бокам, максимум 72rem */
  margin-inline: auto;
}

Несемантическая «кнопка» из div

❌ Старое: div с inline-стилями и onclick

📄 lesson-46/problem.html

<div onclick="openMenu()" style="width:1200px;color:red">Open</div>
<style>.bad .button { color: blue !important; }</style>

✅ Современное: семантический button + класс-модификатор

📄 lesson-46/fixed.html

<button class="button button--danger" type="button">Открыть меню</button>
<style>.button--danger { color: var(--color-danger); }</style>

Правило перехода: «старое» решает задачу подгонкой под конкретный размер, «новое» описывает намерение (доли, минимум/максимум, отступ) и работает на любых экранах.

Урок 46. Старый vs Новый: хрупкая раскладка → устойчивая

⚡ Кратко