В свежем выпуске подкаста Syntax ведущие Скотт Толински и Уэс Бос обсудили волну новых возможностей в CSS и HTML — от долгожданных API до экспериментальных технологий, которые пока рано внедрять в продакшен, но уже можно пробовать в демо.
CSS Grid Lanes: настоящее «каменное» (masonry) расположение
Одним из самых ожидаемых обновлений стал API CSS Grid Lanes — реализация классического Pinterest‑подобного masonry‑layout. Новый режим display: grid-lanes использует знакомые свойства Grid, но автоматически заполняет пространство элементами в оптимальном порядке.
В отличие от устаревших колонок или сложных хаков с фиксированной высотой, Masonry теперь работает нативно, ровно так, как всегда хотелось разработчикам. Функция уже доступна в Safari 26.4 и находится за флагом в Chrome и Firefox.
HTML внутри Canvas: эксперимент, который меняет всё
Неожиданной новинкой стала экспериментальная возможность встраивать обычный HTML внутрь элемента canvas и затем «рисовать» его средствами Canvas API. Это позволяет создавать сложные эффекты — размытия, искажения, пикселизацию — при этом сохраняя доступность и интерактивность HTML‑элементов.
Демо‑эффекты
- пикселизация формы ввода;
- лупа с увеличением HTML‑контента;
- эффект «замерзшего стекла» с размытием;
- сканирующая анимация при отправке формы;
- «желе‑слайдер», основанный на обычном input.
API пока работает за флагом в Chrome. Тем не менее разработчики уже называют его потенциальным «прорывом» для создания интерфейсов нового поколения.
Именованные container‑queries
В Firefox 149, Chrome 148 и Safari 26.4 появились container‑queries без условий. Теперь достаточно указать имя контейнера, например:
container-name: sidebar;
@container sidebar {
/* стили */
}
Это даёт разработчикам новый способ писать нативно «скоупленные» стили без дополнительных классов или инструментов.
Случайные значения в CSS
Safari внедрил функцию random(), позволяющую генерировать случайные числа прямо в CSS:
width: random(0 100 2);
Это сильно упрощает создание вариативных интерфейсов и декоративных эффектов без участия JavaScript.
Новые псевдоклассы: поиск по странице
Появился псевдокласс :search-text и его комбинация :search-text:current, позволяющие настраивать стиль подсветки при поиске по странице (Cmd+F). Теперь выделение найденных совпадений можно оформить в стиле сайта.
Двухосевая липкость (sticky)
Chrome 148 добавил поддержку липкого позиционирования сразу по двум осям. Это особенно полезно для таблиц, расписаний, турнирных сеток и других сложных интерфейсов.
Улучшения в много колонках
В многоколоночной раскладке появились новые свойства управления высотой и переносом. Теперь длинный текст может корректно переноситься на следующую «линию колонок», что делает Multi‑Column более предсказуемым и используемым.
Border‑shape: новый уровень декоративных элементов
Свойство border-shape позволяет легко создавать скругления, вырезы и декоративные формы рамок — от «билетов» с надрезами до хлебных крошек‑«шевронов». Новые значения вроде scoop, bevel или notch позволяют формировать сложные контуры без графики или SVG.
Локальные view transitions
Появилась возможность задавать локальные группы view‑transition, что упрощает анимации добавления, удаления или перестановки элементов. Вместо уникального имени для каждой карточки можно указать единое имя для группы элементов — и браузер сам корректно выполнит анимацию.
Хаптик в Safari: баг закрыт
Safari ранее позволял воспроизводить тактильный отклик через обходной путь с checkbox type="switch". Но WebKit закрыл регрессию, и теперь вибрация снова требует прямого пользовательского взаимодействия.
Заключение
CSS и HTML стремительно развиваются, несмотря на то, что внимание индустрии часто смещено к ИИ и библиотекам. Многие из новых API уже можно использовать, другие пока ждут поддержки, но все они открывают новые возможности для сложных и выразительных интерфейсов.
Какие из этих новинок вам кажутся наиболее перспективными? И какие эффекты вы бы реализовали с помощью HTML в Canvas?
На основе 10 New CSS and HTML APIs