This media is not supported in your browser
VIEW IN TELEGRAM
Что делает
Удобный приём для адаптивной сетки: можно задать колонке сразу минимальный и желаемый размер. Например, если для сайдбара указать
Это полезно, когда нужен гибкий интерфейс без развала вёрстки на узких экранах: блок остаётся читаемым и не «схлопывается». В разработке, как и в привычках, хорошо работают понятные границы — примерно об этом часто пишут в канале про психологию, мотивацию и дисциплину.
#CSS #Grid #Верстка
minmax() в CSS GridУдобный приём для адаптивной сетки: можно задать колонке сразу минимальный и желаемый размер. Например, если для сайдбара указать
minmax(14rem, 30%), он будет тянуться к 30% ширины родительского блока, но не сожмётся меньше 14rem.Это полезно, когда нужен гибкий интерфейс без развала вёрстки на узких экранах: блок остаётся читаемым и не «схлопывается». В разработке, как и в привычках, хорошо работают понятные границы — примерно об этом часто пишут в канале про психологию, мотивацию и дисциплину.
#CSS #Grid #Верстка
👩💻 Фокус на элементе без JavaScript
В линейных списках и панелях иногда нужно быстро подсветить активный объект, не городя лишнюю логику. Один из простых приёмов — слегка приглушить все элементы и оставить акцент только на том, с которым сейчас взаимодействует пользователь.
Как это устроено:
• контейнер отслеживает состояние через
• всем элементам задаётся пониженная
• активный элемент отменяет это правило для себя;
• лёгкий
Подход простой, но хорошо работает там, где важно быстро направить взгляд пользователя.
#JavaScript #CSS #UI
В линейных списках и панелях иногда нужно быстро подсветить активный объект, не городя лишнюю логику. Один из простых приёмов — слегка приглушить все элементы и оставить акцент только на том, с которым сейчас взаимодействует пользователь.
Как это устроено:
• контейнер отслеживает состояние через
:hover;• всем элементам задаётся пониженная
opacity;• активный элемент отменяет это правило для себя;
• лёгкий
transform добавляет ощущение глубины.Подход простой, но хорошо работает там, где важно быстро направить взгляд пользователя.
#JavaScript #CSS #UI
Почему скролл «пробивает» модалку и уводит страницу вниз?
Это типичный UX-баг: вы листаете контент внутри
Часто это пытаются чинить через
У CSS для этого есть нативное решение:
Так скролл остаётся внутри контейнера и не передаётся родителю. А если нужно полностью отключить цепочку прокрутки и overscroll-эффекты, используйте
Особенно полезно для modal, drawer, sidebar, чатов и мобильных меню.
#css #frontend #ux
Это типичный 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
❤1