Почему скролл «пробивает» модалку и уводит страницу вниз?

Это типичный UX-баг: вы листаете контент внутри modal или sidebar, доходите до края — и дальше начинает двигаться уже вся страница.

Часто это пытаются чинить через body { overflow: hidden; }, но такой подход нередко ломает поведение на iOS, мешает sticky-элементам и даёт неприятные скачки интерфейса.

У CSS для этого есть нативное решение:
.modal {
overflow: auto;
overscroll-behavior: contain;
}

Так скролл остаётся внутри контейнера и не передаётся родителю. А если нужно полностью отключить цепочку прокрутки и overscroll-эффекты, используйте overscroll-behavior: none;.

Особенно полезно для modal, drawer, sidebar, чатов и мобильных меню.

#css #frontend #ux

Как сделать fluid sizing аккуратнее с помощью round()

В свежем разборе показали, как CSS-функция round() помогает «причесать» значения, которые вычисляются через clamp(). Это особенно полезно для адаптивных размеров: шрифтов, отступов, блоков и других элементов интерфейса.

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

Хороший приём для тех, кто хочет сделать адаптивную типографику и spacing более контролируемыми.

#CSS #frontend #typography

Как сделать sticky footer без layout-багов?

Частая ошибка — ставить футер через position: fixed; bottom: 0;. На практике он нередко перекрывает контент и особенно неприятно ведёт себя на мобильных.

Проще и надёжнее решить это на flex:
body {
display: flex;
flex-direction: column;
min-height: 100dvh;
}

Дальше достаточно для footer задать margin-top: auto; — и он сам уйдёт к нижней границе страницы, забрав всё свободное место сверху. Такой подход не требует JS и лишних расчётов. Как и в уходе, где важна база, а не маскировка симптомов — кстати, похожий подход часто разбирают в канале про кожу, уход и косметологию.

#css #flexbox #frontend

В CSS появилось свойство text-fit: grow

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

Сейчас поддержка пока ограничена: свойство работает в Chrome, Brave и Edge. Для продакшена это стоит учитывать и заранее проверять поведение в других браузерах.

Фича небольшая, но полезная: меньше костылей в вёрстке и проще адаптивная типографика.

#CSS #Chrome #вёрстка

CSS Flexbox за 19 минут — быстрый способ разобраться с гибкими макетами

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

За 20 минут разбираются основы: как устроен flex-контейнер, зачем он нужен и как применять его на практике — выравнивание элементов, распределение пространства, направление осей.

Отличная точка входа, если хочется наконец перестать бороться с версткой и делать её осознанно.

Пробуй сразу открыть DevTools и повторять примеры — так запоминается быстрее всего.

Рёв моторов и запах жжёной резины — залетай на канал для тех, кто живёт скоростью и заездами.

#CSS #Flexbox #верстка

Как связать HTML-атрибуты и CSS без классов

Оказывается, можно строить адаптивные компоненты вообще без modifier-классов и прокидывания props. Помогают две вещи: container style queries и продвинутый attr()

Суть проста:

• HTML-атрибуты напрямую задают CSS-параметры — значение из атрибута попадает прямо в стиль

• дочерние элементы меняют вид, реагируя на состояние родителя-контейнера

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

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

#CSS #HTML #frontend

🤔 Полезная база для фронтендеров — большая подборка статей, гайдов и справочников по веб-разработке

Упор сделан на HTML, CSS и JavaScript, плюс современную вёрстку: от базовых принципов до рабочих приёмов, которые реально применяют в проектах.

Что внутри:

• Flexbox и Grid
• адаптивная вёрстка и типографика
• доступность (accessibility)
• оптимизация и работа с изображениями
• CSS-анимации

Удобно, когда под рукой есть структурированный справочник — не нужно каждый раз гуглить одно и то же. Особенно выручает на старте, когда тонешь в десятках свойств CSS и хочется систематизировать знания.

#frontend #CSS #JavaScript

overflow: hidden ≠ обрезка контента

Многие ставят overflow: hidden, когда нужно просто обрезать то, что вылезает за границы блока. Но есть нюанс: это свойство делает элемент контейнером прокрутки — даже если полос прокрутки нет.

Побочки такие:
— ломается поведение position: sticky
— путается программная прокрутка
— сбивается поиск ближайшего скролл-контейнера

Если прокрутка вообще не нужна, бери более точное значение:

.wrapper { overflow: clip; }

Контент так же обрезается, но контейнер прокрутки не создаётся. Поэтому sticky внутри будет ориентироваться на внешний скролл, а не застревать на обёртке.

Бонус — можно отодвинуть линию обрезки:

.wrapper { overflow-clip-margin: 8px; }

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

Важно: clip не заменяет hidden полностью — если блок реально должен прокручиваться, clip не подойдёт.

#CSS #frontend #overflow