Code Ready | Frontend

Маленькая UI-деталь, которая влияет на восприятие интерфейса!

Часто бывает: кликаешь по button, tab, dropdown-item или card-action и выделяется текст.

Интерфейс сразу выглядит менее качественным.
.button {
user-select: none;
}

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

Это особенно полезно для интерактивных элементов.
button,
.tab,
.badge {
user-select: none;
}

Но важно не применять это глобально.
body {
user-select: none;
}

Так можно сломать UX: пользователь не сможет копировать текст.

Используй только там, где выделение реально не нужно.
button,
.control,
.action

Это маленькая деталь, но она заметно улучшает UI.

user-select: none — простой способ сделать интерфейс визуально чище и приятнее.

Code Ready | #совет

Textarea, которая растёт по контенту без JavaScript!

Автоматическое изменение высоты textarea — частая задача в формах, чатах и комментариях. Обычно для этого используют JavaScript, но современные браузеры уже умеют делать это нативно через CSS.

Как работает:

• field-sizing: content включает автоматический расчёт размеров поля;

• textarea начинает подстраиваться под объём текста;

• высота увеличивается по мере ввода;

• браузер сам рассчитывает размеры без JS-логики.

Это отличный способ упростить формы, чаты и интерфейсы ввода текста.

Code Ready | #фишка

Как убрать лишние классы для пустых блоков?

Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента.

Если данных нет — элемент остаётся пустым, но продолжает занимать место.

Обычно это решают через JS или условный рендеринг.
.error {
display: none;
}

А потом отдельно добавляют класс при появлении контента.

Но CSS умеет определять пустые элементы самостоятельно.
.error:empty {
display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет.

Можно делать и обратную логику.
.card:not(:empty) {
padding: 16px;
}

Отступы появятся только тогда, когда внутри действительно есть контент.

Особенно удобно для:
error,
hint,
description,
badge

Где содержимое может появляться динамически.

:empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS.

Code Ready | #совет

Эффект проявления изображения!

Через CSS Mask можно создавать интересные эффекты, управляя тем, какие части элемента будут видимы.

Как работает:

• mask создаёт альфа-маску поверх изображения;

• браузер отображает только разрешённые области;

• mask-position двигает маску без изменения размеров элемента;

• одновременно можно комбинировать эффект с фильтрами и анимациями.

Приём отлично подходит для галерей, карточек товаров, портфолио и интерактивных превью изображений.

Code Ready | #фишка

Почему scroll иногда внезапно прыгает сам по себе?

Добавляешь новый контент сверху и браузер внезапно меняет scroll-position. Особенно часто это ломает chat, infinite-feed и lazy-load layout.

Обычно проблема появляется при:
prepend,
lazy-image,
dynamic-content

Браузер пытается помочь и автоматически удерживает пользователя на прежнем месте через scroll anchoring.

Но в динамических интерфейсах это часто создаёт хаос.
.chat {
overflow-anchor: none;
}

Теперь браузер перестаёт вмешиваться в scroll-position контейнера.

Особенно полезно для:
chat,
feed,
virtual-list,
infinite-scroll

Где контент постоянно догружается или меняется.

Можно отключать anchoring точечно даже у отдельных элементов.
.loader {
overflow-anchor: none;
}

Например у skeleton, lazy-image или рекламных блоков.

overflow-anchor: none убирает один из scroll-багов в динамических интерфейсах.

Code Ready | #совет

Анимированная подсветка рамки без JavaScript!

Обычные анимации рамки часто выглядят слишком примитивно: у элемента просто меняется цвет или прозрачность всей границы сразу. Но через conic-gradient можно создать полноценное вращающееся свечение вокруг элемента.

Как работает:

• conic-gradient рисует сектор света вокруг центра;

• псевдоэлемент становится отдельным glow-слоем;

• animation вращает только градиент;

• layout остаётся полностью стабильным, потому что анимируется compositing-слой.

Приём отлично подходит для интерфейсных панелей, акцентных кнопок и интерфейсов с акцентными состояниями.

Code Ready | #фишка

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

Часто делают так:
footer {
position: fixed;
bottom: 0;
}

Но fixed-footer перекрывает контент и ломает mobile layout.

Есть нативный flex-способ без JS и вычислений высоты.
body {
display: flex;
flex-direction: column;
}

Теперь body становится вертикальным flex-контейнером.

Остаётся отодвинуть footer вниз.
footer {
margin-top: auto;
}

auto забирает всё свободное пространство сверху и footer автоматически прижимается к низу страницы.
body {
min-height: 100dvh;
}

Так layout занимает минимум всю высоту viewport даже при маленьком количестве контента.

Code Ready | #совет

Как сделать адаптивный текст без media queries?

Очень часто для адаптации текста под разные экраны используют отдельные breakpoint. В итоге CSS разрастается, а шрифты начинают масштабироваться неравномерно.

Обычно это выглядит так:
.title {
font-size: 3rem;
}

@media (max-width: 768px) {
.title {
font-size: 2rem;
}
}

Но CSS умеет нативно адаптировать размер текста под экран:
.title {
font-size: clamp(1.2rem, 4vw, 3rem);
}

clamp() задаёт минимальный размер, адаптивное значение и максимальный предел.

Теперь текст плавно масштабируется вместе с viewport.
.subtitle {
font-size: clamp(1rem, 2vw, 1.5rem);
}

Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов.

Media queries часто вообще становятся не нужны.

clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS.

Code Ready | #совет

Почему текст внезапно ломает grid и вылезает за контейнер?

Очень частый баг в CSS Grid: ставишь overflow: hidden, ellipsis, 1fr, а текст всё равно раздвигает layout и игнорирует ограничения.

Кажется, что проблема в overflow.
.title {
overflow: hidden;
text-overflow: ellipsis;
}

Но проблема часто вообще не в этом.

У grid-элементов по умолчанию стоит min-width: auto, из-за чего элемент отказывается сжиматься меньше контента.

Решение — явно разрешить сжатие.
.grid-item {
min-width: 0;
}

После этого начинают нормально работать:
.title {
white-space: nowrap;
text-overflow: ellipsis;
}

Важно: min-width: 0 нужно ставить именно на grid/flex item, а не обязательно на сам текстовый элемент.

Особенно критично для card-layout, dashboard, table, navbar и любых grid/flex интерфейсов с длинным текстом.

Code Ready | #совет

Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»!

В этой статье:
• Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение;
• Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы;
• Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки.

Продолжайте читать на Habr!

Code Ready | #статья