Саморисующиеся фигуры на CSS

Сегодня хочу поделиться с вами лайфхаком, который позволяет буквально в несколько строчек CSS-кода сделать красивую анимацию отрисовки SVG изображения.

Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS:

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

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

Подробнее о способе можно почитать здесь.

#css #лайфхак

Flappy Bird на чистом CSS: без JS, но с анимацией и коллизиями

Автор создал полноценный Flappy Bird, используя только HTML и CSS. Механика прыжка работает через анимированные переменные и подмену анимаций при клике на радио-кнопки. Трубы двигаются бесконечно, их высота меняется за счёт тригонометрических расчётов от анимированного счётчика — так достигается псевдослучайность. Столкновение вычисляется через пересечение прямоугольников прямо в CSS, а экран проигрыша появляется, когда переменная --collision становится ненулевой.

Это не просто забавный эксперимент, а демонстрация возможностей современного CSS: :has(), анимированные переменные, математические функции. Разбор всех приёмов и код в статье: https://blog.scottlogic.com/2026/03/09/noJS-3-flappy-bird.html

#css

Flex или Grid: как перестать выбирать на автомате и начать мыслить структурно

Многие фронтенд-разработчики годами используют Flex по привычке, а Grid кажется избыточным или пугающим. Но эти инструменты не взаимозаменяемы — у каждого своя философия. Flex работает в одном измерении и управляет элементами от частного к общему, Grid сразу мыслит двумя осями и задаёт жёсткий каркас.

В статье разбирают четыре практических кейса, где разница подходов становится очевидной. К каждому примеру прилагается готовый код — можно скопировать и поэкспериментировать, чтобы на практике прочувствовать, когда Flex даёт гибкость, а когда лучше сразу взять Grid.

Если хотите выбирать технологию осознанно, а не гадать — смотрите материал: https://habr.com/ru/companies/timeweb/articles/1004986/

#фронтенд #css

@tproger_web
Читайте также в VK и Max

В Chrome 143 появился новый тип container queries — anchored

Anchor positioning уже умеет переворачивать тултип на другую сторону, когда не хватает места. Проблема была в том, что стрелка-указатель при этом оставалась на прежней стороне — CSS не знал, сработал ли fallback.

container-type: anchored это фиксит. Теперь можно напрямую спросить у контейнера, какой position-try активен:

@container anchored(fallback: none) {
  /* тултип справа — стрелка слева */
}

@container anchored(fallback: flip-inline) {
  /* тултип перевернулся — стрелка справа */
}

В статье на этой основе собирают toggletip с нуля: popover API, декларативные якоря через атрибут anchor, modern attr() для автоматической привязки без дублирования CSS, и corner-shape: scoop для скруглённой стрелки вместо border-трика с треугольником.

Фича пока только Chrome 143+, но через @supports (container-type: anchored) легко добавляется как прогрессивное улучшение — тултипы работают везде, стрелка появляется там, где поддержка есть.

Подробности с примерами и живым демо по ссылке.

#css

contrast-color() в CSS: браузер выберет цвет текста

Функция contrast-color() берёт фоновый цвет и отдаёт чёрный или белый — тот, у которого контраст выше. Браузер считает это на этапе вычисления стилей, до отрисовки страницы, без JS и без вспышек при гидратации. HTTP Archive и WebAIM фиксируют: большинство сайтов всё ещё не проходят WCAG-проверки контраста. Вместо очередной JS-библиотеки можно доверить эту математику CSS.

Пригодится для тёмных тем, динамических палитр и кнопок, где фон меняется при работе страницы. В разборе на Smashing Magazine показывают, как строить на этом самокорректирующиеся системы цвета, и где фича уже работает.

#фронтенд #css

Тултип, который сам перепрыгивает вниз, когда не влезает сверху

Позиционирование поповеров годами было задачей для JS: посчитать координаты кнопки, прибавить размеры тултипа, проверить, не вылез ли он за вьюпорт, пересчитать всё это на скролле и ресайзе. Ровно ради этого в проект приходили Floating UI и Popper.js.

Теперь то же самое умеет CSS:

.btn { anchor-name: --btn; }

.tooltip {
position: absolute;
position-anchor: --btn;
position-area: block-start center;
position-try-fallbacks: flip-block;
}

Последняя строка — самое интересное. Это та самая логика «не влезло сверху, покажем снизу», за которую раньше платили килобайтами зависимости. Браузер сам проверяет доступное место и применяет запасной вариант.

Anchor positioning в Baseline и работает во всех четырёх движках. В State of CSS 2026 разработчики назвали её лучшей новой фичей года. Но там много и другой полезной информации: https://2026.stateofcss.com/en-US

#css #лайфхак

CSS в письме умеет кликать за пользователя, и это самый безобидный приём в списке

Гарет Хейс когда-то разобрал песочницу AngularJS. Последние месяцы он ломал почтовые клиенты: Gmail, Outlook, Fastmail, ProtonMail, Yahoo. Всё, что ниже, проходит через санитайзеры как безопасная разметка.

Начинается скромно. Тег label, у которого в for стоит чужой id, отдаёт клик по элементу, до которого у письма доступа быть не должно. В Outlook так открывается лента интерфейса и закрепляется сообщение. Не починено до сих пор.

Рядом лежат обходы прокси картинок, из-за которых отправитель видит, что письмо открыли, и его IP на экране в ProtonMail.

Дальше становится ещё интереснее. Связка ::before, ::after и opacity разводит то, что видит человек, и то, что читает ИИ-браузер: письмо превращается в промпт-инъекцию.

А вишенкой на торте в статье лежат кража токенов при CSP, который блокирует вообще все внешние ресурсы, и кража паролей.

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

Запрещать label при этом не нужно, режьте у него for: опасна не подпись, а привязка к чужому id. Совет автора даже шире — отдавать чужую разметку в iframe с sandbox. И не пускайте в белый список :has, :checked, :focus и :not: на них собирают поддельные элементы интерфейса.

#css #html #фронтенд #безопасность

Плавные переходы могут сломать интерактивность вашего сайта, но этого легко избежать

Представьте, вы завернули в плавный переход сортировку таблицы, открытие картинки на весь экран или перестановку карточек в списке — всё то, ради чего и берут startViewTransition(). Пока анимация идёт, пользователь жмёт кнопку в другом углу экрана, и ничего не происходит. Он жмёт ещё раз, но ничего не происходит.

Дело не в вашем коде. На время перехода браузер кладёт поверх страницы псевдоэлемент ::view-transition размером во весь вьюпорт, и клики достаются ему. Разобрал это Крис Койер, придумавший CSS-Tricks и CodePen: в его демке рядом с анимацией стоит кнопка с alert(), и пока идёт переход, она не отвечает.

Проверить у себя просто: растяните длительность перехода секунд до десяти и откройте в DevTools дерево псевдоэлементов. Наведите курсор на ::view-transition — подсветится весь экран.

К счастью, лечится проблема всего в две строки. Снимаем у :root дефолтный view-transition-name, чтобы корень не попадал в снимок, и разрешаем кликать сквозь оверлей:

:root { view-transition-name: none; }
::view-transition { pointer-events: none; }

Альтернатива — вызывать startViewTransition() не на document, а на контейнере с нужными элементами: тогда и оверлей накроет только его. Но поддержка у этого варианта хуже, так что по умолчанию проще держать две строки выше.

#css

В гриде и флексбоксе наконец заработали нативные разделители между элементами

Линию между колонками мы до сих пор рисуем обходным путём: вешаем бордер на соседний элемент или заводим псевдоэлемент, а потом правим это на переносах строк и по краям сетки. Со 149-й версии Chrome и Edge задача закрывается штатно: свойство column-rule, работавшее раньше только в многоколоночной вёрстке, теперь понимают grid и flexbox, а для второй оси появилось row-rule. Firefox и Safari фичу пока не умеют.

Разработчик из команды Edge рассказывает, что поменялось в фиче с раннего превью:
— почему outset переименовали в inset;
— зачем понадобились отдельные свойства для концов и пересечений линий;
— как gap-rule-paint-order стал rule-overlap;
— для чего появилось rule-visibility-items.

Полифил для отставших браузеров только пишут. Значит, включать фичу можно там, где линии остаются украшением: без поддержки просто ничего не нарисуется, и вёрстка не поедет. А если без разделителей блоки визуально слипаются, придётся ждать полифила или Safari.

#css

Вместо списка из .btn-primary, .btn-secondary и .btn-danger в CSS появится один .btn-*

Чтобы задать общий стиль всем кнопкам, сегодня приходится перечислять классы через запятую или вешать в разметку лишний общий класс. На августовской встрече рабочей группы CSS в Берлине приняли Class Prefix Selector: .btn-* цепляет любой класс, начинающийся с этого префикса. Идею предложила Лея Веру ещё в 2024 году.

Но радоваться рано: фича живёт только в тексте спецификации, ни один браузер её пока не умеет, и до реализации синтаксис ещё поменяется.

#css

Safari расширяет случайность в CSS: random-item() и random() в custom properties

Сегодня WebKit выложил Safari Technology Preview 251. random() в Safari уже есть со стабильной 26.2, а теперь добавились random-item() для выбора из списка значений, random() внутри custom properties и ключевые слова кеширования property-scoped и property-index-scoped. Разброс блоков в галерее и вариации анимаций описываются в CSS без скрипта с инлайн-стилями.

Из той же сборки стоит примерить: corner-shape (скошенные и вогнутые углы поверх border-radius), @supports at-rule(...) и popover=hint для подсказок, которые не закрывают другие поповеры.

В JavaScript главное import defer: модуль грузится сразу, а выполняется при первом обращении, это ускорение старта без ленивых import(). Плюс Iterator.zip(), chunks(), windows() и WebAssembly Memory64. Убрали процентное значение -webkit-line-clamp: если оно есть в вашем CSS, вёрстка поедет.

Полный список в заметках к релизу.

#браузеры #css #javascript

Плавающий виджет поверх всех окон одним вызовом API

Firefox 151 включил Document Picture-in-Picture API, до этого он был только в Chrome. В отличие от PiP для видео, documentPictureInPicture.requestWindow() открывает окно поверх вкладок и других приложений с любым HTML внутри: тикер, чат, таймер, заметки. Раньше это требовало расширения или Electron.

CSS-Tricks разобрал API на примере тикера акций. Стили в новое окно не наследуются: <style> и <link rel=stylesheet> клонируют через querySelectorAll() в createDocumentFragment() и одним append кладут в <head>. Ширину и высоту задают только парой, иначе размер выбирает браузер. Фокус уходит в PiP-окно, поэтому кнопка-переключатель закрывает его со второго клика.

@supports не поможет: at-rule() есть только в Chrome, остаётся "documentPictureInPicture" in window и скрытие кнопки. Стили под окно пишут через @media (display-mode: picture-in-picture). Только десктоп, Safari мимо, в iframe не запускается.

#браузеры #css #javascript

Переведите SVG-контур в CSS-функцию shape() за один вставленный путь

Функция shape() описывает произвольный контур прямо в CSS: её можно анимировать, задавать в ней проценты и единицы вроде em, использовать в clip-path и offset-path. Проблема ровно одна: писать её руками мучительно, а все реальные контуры уже нарисованы и лежат в виде d-атрибута внутри SVG.

Мэтью Морете год возился со спецификацией и выложил три маленьких инструмента, которые закрывают эту работу:

— Path to Shape переводит d из SVG-пути в синтаксис shape();
— Shape to Polygon делает обратный ход в polygon(). Пригодится как запасной вариант для браузеров без поддержки shape(), а иногда и как прямая замена: polygon() часто выходит компактнее;
— Minify Shape сжимает готовый код shape() примерно так же, как SVGO поступает с SVG.

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

#css

Задайте источник света один раз, и все тени на странице посчитаются сами

Ambient CSS предлагает вместо ручных shadow-sm, shadow-md и shadow-lg описать свет: направление, интенсивность ключевого и заполняющего света, оттенок, высоту. Каждый элемент получает пятислойный box-shadow: тень, блики, фаски и внутренние затемнения, и все они согласованы между собой, потому что источник один.

У элемента задаётся только высота над поверхностью, elevation от 0 до 3, и толщина, thickness от 0 до 2. Пакет @ambientcss/css работает без зависимостей в любом HTML, есть отдельная обёртка для React. Автор выложил третью версию 1 сентября, на HN у неё 94 очка. В комментариях жалуются на мобильную версию демо, так что смотреть лучше с десктопа: ambientcss.vercel.app.

#css #фронтенд

Chrome 154 beta: WebSocket в локальную сеть, постквантовые ключи в Web Crypto и табы на чистом CSS

Три вещи из беты, которые меняют код. Первая: new WebSocket(url, { protocols: "soap", targetAddressSpace: "local" }) открывает сокет к устройству в локальной сети со страницы на HTTPS, если пользователь дал разрешение Local Network Access, а имя хоста резолвится в локальный IP. Раньше это было запрещено без обходных путей.

Вторая: в crypto.subtle появились ML-KEM 768/1024, ML-DSA 44/65/87, ChaCha20-Poly1305 и гибрид X-Wing. Сквозное шифрование в веб-приложении можно строить на постквантовых алгоритмах без сторонних библиотек. Третья: scroll-marker-group: tabs делает из CSS-карусели настоящий tablist для скринридеров, активный маркер единственный останавливается по Tab, а контент неактивных панелей скрыт из дерева доступности.

Что сломается: Background Fetch начал применять CORS, AbortController передаёт reason в Response и ReadableStream. Полный список на сайте.

#браузеры #css

Задержка анимации по номеру элемента теперь одна строка CSS, без --i и без JavaScript

sibling-index() возвращает позицию элемента среди соседей (с 1), sibling-count() общее число детей у родителя, обе работают в calc(). С Firefox 154, вышедшим 18 августа, их поддерживают все три движка: Chrome с 138, Safari с 26.2.

li { animation-delay: calc(sibling-index() * 80ms); }
.cards > * { flex-basis: calc(100% / sibling-count()); }

Оговорки, на которых можно споткнуться: считается дерево DOM, а не flat tree, поэтому слоты и Shadow DOM ведут себя иначе, а на границе теневого дерева функция может вернуть 0. Учитываются все соседи, включая скрытые; форма с фильтром of пока только обсуждается в CSSWG. Для декоративных задержек можно использовать сразу: в старом браузере правило просто не применится. Для раскладки я бы завернул в @supports. Даты по браузерам и примеры на сайте.

#css

Подсветка фрагментов текста без единого лишнего span в разметке

Люди страницу не читают, а сканируют, поэтому подсветка нужных кусков работает. В CSS для этого целое семейство псевдоэлементов: ::selection для выделенного мышью текста, ::target-text для перехода из поиска и самый гибкий из них, ::highlight(), который красит произвольный фрагмент по вашему выбору.

Подкупает то, что оборачивать текст в разметку не надо: диапазон задаётся в JavaScript, а стили живут в CSS. В DOM не появляется ни одного лишнего узла, а значит, ничего не ломается ни в вёрстке, ни в доступности.

Поддержка пока не везде, поэтому Сюнками Фафовора показывает, как включать это через progressive enhancement: браузер без поддержки просто не покрасит, и страница останется рабочей.

#css

Ваш блок отцентрован идеально, но у читателя с боковой панелью он съедет вправо

Привычный body { display: grid; place-items: center } центрирует колонку внутри вебвью. А вебвью это не окно: боковая панель Arc или Vivaldi забирает ширину слева, и колонка встаёт заметно правее реального центра экрана.

Автор блога seg6.space считал поправку как window.outerWidth - window.innerWidth: разница даёт ширину интерфейса браузера, а блок сдвигается на её половину через translate. Схема сломалась на открытых справа DevTools: сумма та же, а как она поделена между левой и правой панелью, из двух чисел не вытащить. Недостающую координату он добыл из событий указателя.

#css #фронтенд

Tailwind меняют на StyleX ради типизированных токенов, а спотыкаются на сборке

Вы прикидываете, стоит ли тащить StyleX в проект, и упираетесь в спор на уровне вкусов: типизация против скорости вёрстки. В LogRocket Blog этот спор закрыли практикой — собрали 20 компонентов на Tailwind, переписали на StyleX и замерили строки кода, вес CSS-бандла и время сборки.

Но полезнее цифр то, что вылезло по дороге:
• barrel-экспорты, когда всё отдаётся наружу через один index.ts, ломают разрешение токенов;
• @keyframes прямо внутри stylex.create() туда не принимаются;
• динамические ключи стилей приходится расписывать явной таблицей соответствий;
• falsy-значения в массиве sx не работают, так что привычное условие через && придётся переписать.

Победителя автор не назначает: в разборе есть и настройки Webpack с Babel, и список мест, где Tailwind остаётся быстрее.

#css

Как заставить img выйти за собственные границы

У img два размера: размер HTML-элемента и размер ресурса. При object-fit: cover браузер сохраняет пропорции ресурса и масштабирует его до заполнения рамки. Выступающие части по умолчанию скрывает overflow: clip, но значение можно сменить на visible.

С object-fit: none ресурс сохраняет исходный размер, а object-position сдвигает его внутри элемента. На этой разнице автор собирает эффекты наведения, 3D-эффект и анимацию загрузчика без дополнительных элементов и псевдоэлементов.

Я сохранил бы разбор Master.dev Blog с демо на случай, когда HTML менять нельзя. Автор предупреждает: те же демо можно собрать более привычными способами.

#css #html