Chrome 150 для разработчиков:
Обзор новых возможностей CSS

Введение

Chrome 150 beta вышел 3 июня 2026 года, и это значительный релиз для CSS-разработчиков. С 12 новыми или улучшенными CSS-возможностями — от системных акцентных цветов до нативного свойства text-fit, которое заменяет JavaScript-библиотеки для масштабирования шрифтов — этот релиз продолжает тренд, когда браузеры берут на себя функциональность, ранее требовавшую стороннего кода.

Эти возможности соответствуют направлению, заданному на Google I/O 2026, где команда веб-платформы подчеркнула стремление сделать браузеры более функциональными «из коробки». Chrome 150 реализует это обещание практичными, готовыми к использованию CSS-улучшениями.

1. Системные цвета AccentColor и AccentColorText

Chrome 150 добавляет AccentColor и AccentColorText в палитру системных цветов CSS. Они соответствуют акцентному цвету операционной системы и его контрастному цвету текста — тем же цветам, что используются в нативных флажках, радиокнопках и переключателях.

/* Пользовательский флажок под цвет системы */
.custom-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid AccentColor;
  border-radius: 4px;
  transition: background 0.2s;
}

.custom-checkbox:checked {
  background: AccentColor;
  border-color: AccentColor;
}

.custom-checkbox:checked::after {
  content: "✓";
  color: AccentColorText;
  display: block;
  text-align: center;
  line-height: 16px;
}

Эти цвета автоматически адаптируются к системной теме пользователя — на macOS они следуют за акцентным цветом из Системных настроек, на Windows — за системным акцентным цветом. Это простой способ сделать пользовательские элементы интерфейса «родными» без жёстко заданных цветов бренда.

2. Параметр скругления polygon()

Функция polygon() теперь принимает опциональный параметр скругления. Это позволяет создавать обрезанные фигуры со скруглёнными углами напрямую в CSS, без SVG-масок и дополнительных слоёв.

/* Обычный polygon: острые углы */
.element-sharp {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Chrome 150: polygon со скруглением */
.element-rounded {
  clip-path: polygon(0 0 round 12px, 100% 0 round 12px,
                     100% 100% round 12px, 0 100% round 12px);
}

/* Асимметричное скругление для разных углов */
.element-asymmetric {
  clip-path: polygon(0 0 round 20px 0, 100% 0 round 0 20px,
                     100% 100% round 20px 0, 0 100% round 0 20px);
}

/* Звезда со скруглёнными вершинами */
.star-rounded {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%,
                    68% 57%, 79% 91%, 50% 70%,
                    21% 91%, 32% 57%, 2% 35%,
                    39% 35% round 4px);
}

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

3. Анимируемое свойство zoom

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

/* Плавное увеличение при наведении */
.image-card {
  overflow: hidden;
  border-radius: 12px;
}

.image-card img {
  transition: zoom 0.3s ease;
  zoom: 1;
}

.image-card:hover img {
  zoom: 1.2;
}

/* CSS-анимация с zoom */
@keyframes zoom-pulse {
  0%   { zoom: 1; }
  50%  { zoom: 1.15; }
  100% { zoom: 1; }
}

.pulsing-element {
  animation: zoom-pulse 2s ease-in-out infinite;
}

Обратите внимание: zoom отличается от transform: scale() — zoom влияет на раскладку и вызывает перерисовку, в то время как transform влияет только на отображение. Для эффектов в галереях и интерактивных элементах влияние zoom на раскладку может быть желательным.

4. Модификаторы URL-запросов CSS

Chrome 150 представляет модификаторы URL-запросов CSS, позволяющие добавлять атрибуты crossorigin, integrity и referrerpolicy напрямую к CSS-ссылкам на ресурсы. Это важное улучшение для загрузки внешних шрифтов, изображений и таблиц стилей с правильными заголовками безопасности.

/* Загрузка шрифта с cross-origin */
@font-face {
  font-family: 'Custom Font';
  src: url('https://cdn.example.com/fonts/custom.woff2')
       crossorigin("anonymous");
}

/* Subresource integrity для фоновых изображений */
.element {
  background-image: url('https://cdn.example.com/bg.webp'
                integrity("sha384-abc123..."));
}

/* Referrer policy на импортированных стилях */
@import url('https://analytics.example.com/widgets.css')
        referrerpolicy("no-referrer");

Эти модификаторы приводят загрузку ресурсов CSS в соответствие с теми же средствами безопасности, что доступны в HTML и JavaScript. Особенно полезно для сайтов, использующих CDN для шрифтов или изображений.

5. CSS-свойство text-fit

Свойство text-fit — пожалуй, самая ожидаемая CSS-функция в Chrome 150. Оно предоставляет нативный способ масштабировать размер шрифта так, чтобы текст заполнял свой контейнер — без JavaScript-библиотек.

/* Grow: увеличение до заполнения контейнера */
.headline-grow {
  text-fit: grow;
  font-size: 1rem;
}

/* Shrink: уменьшение переполняющегося текста */
.card-title {
  text-fit: shrink;
  font-size: 1.5rem;
}

/* Per-line: подгонка каждой строки отдельно */
.banner-title {
  text-fit: per-line;
  font-size: 2rem;
}

/* Consistent: равномерное масштабирование */
.hero-text {
  text-fit: consistent;
  font-size: 3rem;
}

Четыре режима покрывают разные сценарии: grow — увеличение до заполнения ширины контейнера, shrink — уменьшение переполняющегося текста для адаптивных карточек, per-line — подгонка каждой строки отдельно для заголовков, consistent — равномерное масштабирование для всех строк в параграфах.

6. CSS background-clip: border-area

Chrome 150 добавляет border-area как новое значение для background-clip. Фон теперь может располагаться под границей элемента — а не только внутри padding-box.

/* Фон простирается под границу */
.border-bg-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-clip: border-area;
  border: 4px solid transparent;
  border-radius: 12px;
  padding: 1.5rem;
}

/* Комбинация с border-image */
.gradient-border {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #667eea, #764ba2) border-area;
  border: 4px solid transparent;
  background-clip: padding-box, border-area;
  border-radius: 12px;
  padding: 1rem;
}

Это устраняет множество обходных решений, где разработчикам приходилось использовать дополнительные обёртки для создания фона под границей. В сочетании с border-image открывает сложные многослойные стили границ одним элементом.

7. CSS-функция image(<color>)

Chrome 150 реализует функцию image() с поддержкой цветового запасного варианта. Синтаксис image(<color>) создаёт градиентоподобное изображение из сплошного цвета, которое можно использовать везде, где CSS ожидает изображение.

/* Запасной цвет, если изображение не загрузилось */
.fallback-safe {
  background-image: image('hero.webp', #667eea);
}

/* Чисто цветное изображение */
.color-bg {
  background-image: image(#0f766e);
}

/* Множественные запасные варианты */
.robust-background {
  background-image: image('hero.avif', 'hero.webp', #667eea);
}

8. light-dark() со значениями изображений

Функция light-dark(), ранее ограниченная цветами, теперь работает со значениями изображений в Chrome 150. Это позволяет указывать разные фоновые изображения для светлой и тёмной темы в одном объявлении.

/* Разные фоны для светлой/тёмной темы */
.adaptive-background {
  background-image: light-dark(
    linear-gradient(135deg, #f0f9ff, #e0f2fe),
    linear-gradient(135deg, #1e293b, #0f172a)
  );
}

/* Разные изображения для каждой темы */
.hero-section {
  background-image: light-dark(
    url('hero-light.webp'),
    url('hero-dark.webp')
  );
}

9. Относительные альфа-цвета

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

/* Создание полупрозрачного варианта CSS-переменной */
:root {
  --primary: #0f766e;
}

.semitransparent-bg {
  background: rgb(from var(--primary) r g b / 0.5);
}

/* Изменение альфы в любом цветовом пространстве */
.faded-accent {
  color: hsl(from var(--primary) h s l / 0.3);
}

/* Извлечение альфа-канала */
.alpha-only {
  opacity: alpha(from var(--primary));
}

10. Псевдоклассы медиа-элементов

Chrome 150 добавляет псевдоклассы для <video> и <audio>: :playing, :paused и :seeking, позволяя стилизовать элементы по их состоянию воспроизведения.

/* Стили для кнопки воспроизведения */
video:paused + .custom-controls .play-btn {
  background: #16a34a;
}

video:playing + .custom-controls .play-btn {
  background: #dc2626;
}

/* Индикатор во время перемотки */
video:seeking {
  cursor: wait;
}

/* Автоскрытие элементов управления */
video:playing ~ .player-controls {
  opacity: 0;
}

video:playing:hover ~ .player-controls {
  opacity: 1;
}

11. flex-wrap: balance

Новое значение balance для flex-wrap равномерно распределяет flex-элементы по строкам, минимизируя неровный край, возникающий при неравномерном делении элементов.

/* Сбалансированное распределение по строкам */
.balanced-grid {
  display: flex;
  flex-wrap: balance;
  gap: 1rem;
}

/* Пример: облако тегов */
.tag-cloud {
  display: flex;
  flex-wrap: balance;
  gap: 0.5rem;
  justify-content: center;
}

.tag-cloud .tag {
  padding: 0.25rem 0.75rem;
  background: var(--surface-2);
  border-radius: 4px;
  font-size: 0.85rem;
}

12. overscroll-behavior: chain

Chrome 150 добавляет chain как новое значение для overscroll-behavior. Импульс прокрутки от вложенной области передаётся родителю — но только когда вложенная область достигла своего предела.

/* Вложенная прокрутка с передачей импульса странице */
.sidebar {
  overscroll-behavior: chain;
  overflow-y: auto;
  height: 100%;
}

/* Модальные окна: изолированная прокрутка */
.modal-content {
  overscroll-behavior: contain;
  overflow-y: auto;
}

/* Горизонтальная карусель */
.horizontal-carousel {
  overscroll-behavior-x: chain;
  overscroll-behavior-y: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

Стратегия внедрения и поддержка браузеров

Возможности Chrome 150 beta доступны для тестирования в Chrome Beta и Chrome Canary. Стабильный релиз ожидается примерно через 4 недели (начало июля 2026). Используйте @supports для graceful fallback:

/* Прогрессивное улучшение */
@supports (text-fit: shrink) {
  .card-title {
    text-fit: shrink;
  }
}

@supports not (text-fit: shrink) {
  .card-title {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
  }
}

Для более глубокого погружения в тренды веб-платформы, на которых строится Chrome 150, посмотрите мой обзор Google I/O 2026 для веб-разработчиков и официальный анонс Chrome 150 beta.

Я предлагаю услуги веб-разработки с современным CSS

FAQ

Будьте в курсе

Chrome 150 beta доступен для тестирования уже сейчас. Рассмотренные возможности появятся в стабильной версии через 4-6 недель, а поддержка в других браузерах последует по мере реализации спецификаций.

Эти 12 CSS-возможностей — значительный шаг вперёд для веб-платформы. Тренд очевиден: браузеры становятся всё более мощными инструментами дизайна, уменьшая потребность в JavaScript-библиотеках. Работаете над веб-проектом и хотите разобраться, какие из этих новых CSS-функций подходят для вашей задачи? Как full-stack разработчик с 20+ годами опыта, я помогу вам выбрать правильные инструменты. Свяжитесь со мной для бесплатной консультации — никаких обязательств.