CSS у 2026 році: нові властивості, значення, функції та механізми

2026-й уже став одним із найнасиченіших років для CSS. У стабільних браузерах з’явилися scroll-triggered анімації, довільна форма рамки, двовимірний multicol, декоративні лінії всередині gap, автоматичне припасування тексту, Grid Lanes, нові container queries і низка типографічних можливостей.

Паралельно Safari 27 перебуває в бета-версії, Interop 2026 вирівнює підтримку між браузерними рушіями, а CSS Working Group розвиває Selectors Level 5, Animation Triggers та HDR-колір.

Важливе уточнення: «CSS 2026» — це не окрема версія CSS на кшталт CSS3 або CSS4. Сучасний CSS складається з незалежних модулів, які розвиваються у власному темпі. CSS Snapshot 2026 описує стан і стабільність специфікацій, але не гарантує однакової підтримки в Chrome, Firefox і Safari.

У цьому огляді статус «стабільно» означає, що функція ввімкнена за замовчуванням хоча б в одному великому браузері. Це ще не обов’язково означає повну міжбраузерну підтримку. Бета-функції можуть змінитися до фінального релізу, а чернетки CSSWG не варто сприймати як готовий production baseline.

Головні CSS-релізи 2026 року

Перші значні зміни з’явилися вже в січні. Chrome 144 приніс caret-shape, ::search-text і scroll-state queries, а Firefox 147 увімкнув CSS Anchor Positioning за замовчуванням.

У лютому Chrome 145 додав column-height, column-wrap, text-justify і відсоткові значення для letter-spacing та word-spacing. Firefox 148 увімкнув shape() і position-try-order.

12 лютого було оголошено Interop 2026. До програми увійшли anchor positioning, типізований attr(), style queries, contrast-color(), View Transitions, медіапсевдокласи та інші CSS-напрями.

У березні Chrome 146 випустив scroll-triggered animations. Firefox 149 додав font-family: math, нову модель vertical-align і name-only container queries. Safari 26.4 представив Grid Lanes.

Квітень приніс border-shape, element-scoped View Transitions, багатокомпонентний color-mix() і медіапсевдокласи.

У травні стабільні браузери отримали revert-rule, :open, оновлену модель random() і container style queries.

У червні з’явилися gap decorations, field-sizing, text-fit, flex-wrap: balance, CSS URL modifiers і path-length.

Safari 27 beta, анонсований на WWDC26, додав :heading, stretch, customizable <select> і transform-aware anchor positioning.

Наприкінці липня Chrome 151 випустив ruby-overhang і змінив початкову поведінку position-anchor.

Grid Lanes: masonry-компонування без JavaScript

Статус: стабільно в Safari 26.4, поки що однорушійна реалізація.

Safari 26.4 першим увімкнув CSS Grid Lanes — нову систему компонування для masonry- і waterfall-інтерфейсів. Основний синтаксис використовує значення display: grid-lanes або display: inline-grid-lanes.

Grid Lanes розширює звичайний CSS Grid: автор і далі може використовувати track sizing, minmax(), repeat(), auto-fill, gap, spanning та explicit placement. Водночас елементи автоматично розміщуються у найменш заповненій смузі.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

@supports (display: grid-lanes) {
  .gallery {
    display: grid-lanes;
    flow-tolerance: 2rem;
  }
}

Нова властивість flow-tolerance визначає, наскільки суттєвою має бути різниця між смугами, перш ніж браузер змінить місце наступного елемента. Це допомагає зменшити хаотичне перестрибування контенту між колонками та краще узгодити візуальне розташування з DOM- і tab-порядком.

Початкове значення фактично відповідає невеликій відстані приблизно в 1em. Також можна використовувати довжини, відсотки або infinite.

Grid Lanes варто впроваджувати як прогресивне покращення, залишаючи звичайний Grid або multicol як fallback. Детальний опис доступний в анонсі Safari 26.4 і матеріалі WebKit про Grid Lanes.

Двовимірний multicol: column-height і column-wrap

Статус: стабільно в Chrome 145.

Звичайний multi-column layout розподіляє контент між колонками переважно в одному напрямку. Нові властивості column-height і column-wrap дозволяють обмежити висоту колонки та продовжити набір колонок у наступному рядку.

Фактично multicol стає двовимірним, що може бути корисно для каталогів, довідників, таймлайнів і газетних композицій.

.index {
  columns: 16rem;
  column-height: 22rem;
  column-wrap: wrap;
  gap: 2rem;
}

Функція доступна в Chrome 145, але поки що потребує fallback для інших браузерів.

Gap decorations: розділювачі всередині gap

Статус: стабільно в Chrome та Edge 149.

До 2026 року column-rule малював розділювачі лише в multi-column layout. Тепер ця властивість застосовується також до Grid і Flexbox.

CSS отримав горизонтальне сімейство row-rule та двовісне скорочення rule. Серед нових властивостей:

• row-rule;
• row-rule-width;
• row-rule-style;
• row-rule-color;
• row-rule-break;
• column-rule-break;
• rule-break;
• row-rule-inset;
• column-rule-inset;
• rule-inset;
• row-rule-visibility-items;
• column-rule-visibility-items;
• rule-visibility-items;
• rule-width;
• rule-style;
• rule-color.

Окремі *-inset-cap і *-inset-junction дозволяють керувати кінцями ліній біля меж контейнера та в місцях перетину row- і column-gaps.

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@supports (row-rule: 1px solid) {
  .dashboard {
    column-rule: 1px solid
      color-mix(in oklab, currentColor 25%, transparent);

    row-rule: 1px dashed
      color-mix(in oklab, currentColor 20%, transparent);

    rule-break: intersection;
    rule-inset: 0.25rem;
    rule-visibility-items: between;
  }
}

Значення ширини, стилю та кольору можуть бути списками й використовувати repeat(). Ширина, колір та inset-відступи анімуються.

Слід врахувати перейменування експериментального синтаксису: column-rule-outset і row-rule-outset були замінені на column-rule-inset і row-rule-inset.

Докладніше — в анонсі Chromium і CSS Gaps Level 1.

border-shape: рамка довільної форми

Статус: стабільно в Chrome 147, специфікація ще розвивається.

border-shape дозволяє створювати рамки за допомогою basic shapes, знайомих із clip-path:

• circle();
• ellipse();
• polygon();
• path();
• shape().

На відміну від clip-path, нова властивість визначає геометрію самої рамки, декорує її та обрізає внутрішню частину елемента.

.avatar {
  inline-size: 8rem;
  block-size: 8rem;
  border: 5px solid oklch(65% 0.2 320);
  border-shape: circle(50%);
}

Одна basic shape використовується як stroke. Дві shape-функції визначають зовнішню і внутрішню межі заповненої рамки.

border-shape є візуальним ефектом і не змінює розкладку навколо елемента. Якщо його значення відрізняється від none, властивості border-radius і corner-shape ігноруються.

Джерела: Chrome 147 і CSS Borders and Box Decorations Level 4.

Розвиток CSS Anchor Positioning

У 2026 році anchor positioning продовжив переходити від експерименту до міжбраузерного механізму.

Firefox 147 увімкнув CSS Anchor Positioning за замовчуванням, включно зі значенням anchor-center для alignment-властивостей і position-anchor: none.

Firefox 148 додав position-try-order, який дозволяє керувати порядком альтернативних варіантів розташування anchor-позиціонованого елемента.

Chrome 144 навчив anchor() і anchor-size() враховувати трансформовану геометрію anchor-елемента. Якщо до anchor застосовано scale, rotate, translate або transform, прив’язаний елемент тепер орієнтується на його візуальну bounding box.

Safari 27 beta також анонсував transform-aware anchor positioning.

Chrome 151 змінив початкове значення position-anchor на normal. Воно поводиться як none, якщо елемент не використовує position-area, і як auto, якщо використовує.

Safari 27 beta додав актуальні значення:

position-visibility: anchor-valid;
position-visibility: anchor-visible;

Вони замінили старі множинні назви anchors-valid і anchors-visible, хоча Safari поки зберігає їх для сумісності.

flex-wrap: balance, stretch та інші зміни компонування

Chrome 150 додав flex-wrap: balance. На відміну від звичайного wrap, браузер намагається рівномірніше розподілити елементи між flex-рядками.

.tags {
  display: flex;
  flex-wrap: balance;
  gap: 0.5rem;
}

Safari 27 beta підтримує значення stretch для width, height, min-width, max-width, min-height та max-height.

.card {
  width: stretch;
}

stretch заповнює доступний простір з урахуванням margin. Це важлива відмінність від width: 100%, який може створювати переповнення, якщо елемент має зовнішні відступи.

Chrome 150 також додав:

• background-clip: border-area;
• overscroll-behavior: chain;
• flex-wrap: balance.

Значення chain дозволяє передавати прокручування батьківському контейнеру, але вимикає локальний overscroll-ефект.

Chrome 144 реалізував side-relative синтаксис для background-position-x, background-position-y і mask-позиціонування, а також поширив overscroll-behavior на нескрольовані scroll-контейнери та клавіатурний скрол.

Scroll-triggered animations

Статус: стабільно в Chrome 146.

Scroll-driven animations пов’язують прогрес анімації з прокручуванням. Нові scroll-triggered animations розв’язують іншу задачу: запускають звичайну часову CSS-анімацію, коли scroll- або view-timeline входить у визначений діапазон.

Нова група властивостей включає:

• animation-trigger;
• timeline-trigger;
• timeline-trigger-name;
• timeline-trigger-source;
• timeline-trigger-activation-range;
• timeline-trigger-activation-range-start;
• timeline-trigger-activation-range-end;
• timeline-trigger-active-range;
• timeline-trigger-active-range-start;
• timeline-trigger-active-range-end;
• trigger-scope.

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
}

@supports (timeline-trigger-name: --reveal) {
  .card {
    timeline-trigger: --reveal view() contain / cover;
    trigger-scope: --reveal;

    animation: reveal 400ms ease-out both;
    animation-trigger: --reveal play-forwards;
  }
}

timeline-trigger оголошує іменований тригер і пов’язує його з timeline. animation-trigger визначає, яку анімацію запускати та яку дію виконувати. trigger-scope обмежує видимість імені тригера певним піддеревом.

Ранній анонс називав Chrome 145, але фінальний стабільний реліз відбувся в Chrome 146 10 березня 2026 року. Орієнтуватися слід на release notes Chrome 146.

Поточна чернетка Animation Triggers описує також:

• event-trigger;
• event-trigger-name;
• event-trigger-source.

Вони мають запускати анімації від click, keypress та інших DOM-подій. Проте ця частина ще не є стабільним CSS Chrome 146 і може змінитися.

Element-scoped View Transitions

Chrome 147 дозволив запускати View Transition не для всього документа, а для окремого DOM-піддерева.

CSS-механізм використовує view-transition-scope. Наприклад, view-transition-scope: all ізолює view-transition names усередині компонента та не дозволяє зовнішньому переходу захоплювати його внутрішні елементи.

Element-scoped View Transitions можуть виконуватися паралельно та вкладатися одна в одну.

Firefox 147 розширив підтримку типів переходів для SPA, а Interop 2026 окремо працює над View Transitions, включно з переходами між документами.

Джерела: Chrome 147, опис element-scoped View Transitions, Firefox 147.

caret-shape

Статус: стабільно в Chrome 144.

caret-shape керує формою текстового курсора в полях введення та редагованому контенті.

Підтримуються значення:

• auto;
• bar;
• block;
• underscore.

.terminal-input {
  caret-color: lime;
  caret-shape: block;
}

Властивість не замінює caret-color, а доповнює її. Джерело: Chrome 144.

text-fit

Статус: стабільно в Chrome 150, специфікація та сумісність ще незрілі.

text-fit автоматично масштабує текст, щоб він заповнював доступну ширину line box.

Поточний синтаксис включає:

• none;
• grow;
• shrink;
• consistent;
• per-line;
• per-line-all;
• опціональний відсотковий ліміт масштабування.

.hero-title {
  text-fit: grow per-line-all;
}

consistent застосовує єдиний scale factor до всіх рядків. per-line масштабує кожен рядок окремо, крім останнього та рядків із примусовим переносом. per-line-all масштабує також останній рядок.

Властивість орієнтована насамперед на заголовки, постери, картки та короткі display-тексти. Вона не повинна безконтрольно замінювати responsive typography.

Необхідно перевіряти:

• мінімальний читабельний розмір;
• поведінку після завантаження webfont;
• переповнення;
• browser zoom;
• user text scaling.

Джерела: Chrome 150 і CSS Text Level 5.

ruby-overhang

Статус: стабільно в Chrome 151.

ruby-overhang контролює, чи може ruby-анотація виступати над сусіднім базовим текстом.

Підтримуються:

• auto;
• spaces;
• none.

За актуальною специфікацією none є legacy-аліасом spaces, який дозволяє виступ лише над пробілами та CJK-пунктуацією.

Це спеціалізована, але важлива можливість для японської та іншої східноазійської типографіки. Джерело: Chrome 151.

Інші типографічні зміни

Chrome 145 реалізував text-justify і відсоткові значення для letter-spacing та word-spacing.

Chrome 148 додав:

text-decoration-skip-ink: all;

Firefox 147 реалізував нові root-relative одиниці:

• rcap;
• rch;
• rex;
• ric.

Firefox 149 додав font-family: math і перетворив vertical-align на shorthand для:

• alignment-baseline;
• baseline-shift;
• baseline-source.

Safari 26.4 підтримав:

• math-depth;
• font-size: math;
• contain-intrinsic-inline-size на MathML;
• contain-intrinsic-block-size на MathML;
• дискретну анімацію math-style;
• дискретну анімацію math-shift.

Firefox 152 увімкнув:

field-sizing: content;
field-sizing: fixed;

field-sizing: content дозволяє нативному form control змінювати розмір залежно від вмісту.

Safari 27 beta додав text-autospace: insert та правильну обробку нідерландського диграфа IJ у text-transform: capitalize і ::first-letter.

Customizable <select>

Chrome 145 розширив підтримку customizable select, а Safari 27 beta реалізував основну модель через:

select {
  appearance: base-select;
}

Safari 27 beta також підтримує нові псевдоелементи:

select::picker-icon {
  /* стилізація індикатора */
}

option::checkmark {
  /* стилізація позначки */
}

Модель зберігає семантику, keyboard navigation, screen reader support, form submission і нативну поведінку <select>, але дозволяє значно глибше стилізувати контрол.

contrast-color()

Chrome 147 додав contrast-color(), після чого функція стала значно ближчою до практичної міжбраузерності. Вона також входить до Interop 2026.

.badge {
  --surface: oklch(68% 0.18 35);

  background: var(--surface);
  color: contrast-color(var(--surface));
}

Функція автоматично обирає контрастний колір для переданого фону. Проте вона не замінює повноцінну WCAG-перевірку: реальний контраст залежить також від розміру, товщини та рендерингу шрифту.

Джерела: Chrome 147 і Interop 2026.

Нові можливості CSS-зображень

Chrome 150 приніс одразу кілька змін у роботі із зображеннями.

Функція image(<color>) перетворює звичайний колір на CSS image:

.element {
  background-image: image(oklch(70% 0.2 250));
}

light-dark() тепер може перемикати не лише кольори, а й image-значення. Firefox 150 також реалізував image-підтримку для light-dark().

.hero {
  background-image: light-dark(
    url("hero-light.webp"),
    url("hero-dark.webp")
  );
}

Chrome 150 додав CSS URL request modifiers:

• cross-origin();
• integrity();
• referrer-policy().

.hero {
  background-image:
    url("image.png" cross-origin(anonymous));
}

Це дозволяє керувати CORS, Subresource Integrity і referrer policy безпосередньо в CSS.

Chrome 150 також підтримав системні кольори AccentColor та AccentColorText. У реалізації Chrome реальний системний accent доступний для встановленого web app у початковому профілі.

Safari 26.5 додав color-interpolation для SVG-градієнтів.

Розвиток CSS Shapes

Firefox 148 увімкнув shape() за замовчуванням.

Firefox 149 і Chrome 149 додали до shape-outside функції:

• rect();
• xywh().

Chrome 149 також дозволив використовувати в shape-outside:

• path();
• shape().

Chrome 150 реалізував опціональне заокруглення кутів у polygon().

У результаті однакові basic shapes дедалі частіше можна повторно використовувати в clip-path, shape-outside і border-shape.

Багатокомпонентний color-mix()

Firefox 150 дозволив змішувати в одному color-mix() більше ніж два кольори.

Це розширює стару двоколірну модель, однак на 4 серпня 2026 року таку можливість ще не слід вважати універсальною для всіх браузерів.

Нова модель random()

Сам CSS random() уперше з’явився в Safari 26.2 наприкінці 2025 року. Новинкою 2026-го стала зміна scoping-моделі.

У Safari 26.5 іменоване випадкове значення є глобальним за замовчуванням:

.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px);
}

Якщо значення має бути окремим для кожного елемента, використовується element-scoped:

.box {
  width: random(--size element-scoped, 100px, 200px);
  height: random(--size element-scoped, 100px, 200px);
}

Старий keyword element-shared був видалений.

path-length для SVG

Chrome 150 додав CSS-властивість path-length, яка відповідає SVG-атрибуту pathLength.

Вона застосовується до підтримуваних SVG geometry elements:

• <path>;
• <circle>;
• <rect>;
• <line>;
• <polyline>;
• <polygon>;
• <ellipse>.

Властивість дозволяє нормалізувати довжину геометрії та спрощує роботу зі stroke dash patterns і SVG-анімаціями.

HDR CSS

28 липня W3C опублікував CSS Color HDR Module Level 1.

Чернетка розвиває:

• властивість dynamic-range-limit;
• функцію dynamic-range-limit-mix();
• адаптивну функцію hdr-color();
• ictcp();
• jzazbz();
• jzczhz();
• color(rec2100-pq ...);
• color(rec2100-hlg ...);
• color(rec2100-linear ...).

dynamic-range-limit описує, наскільки яскравим може бути HDR-контент:

.photo-grid img {
  dynamic-range-limit: constrained;
}

Це поки що стандартизація майбутнього HDR-виводу, а не production baseline. Широкої браузерної підтримки всього модуля у 2026 році немає.

Name-only container queries

У 2026 році Chrome 148, Firefox 149 і Safari 26.4 реалізували container query лише за ім’ям — без size-умови.

.sidebar {
  container: sidebar / inline-size;
}

@container sidebar {
  .card {
    border-inline-start: 0.25rem solid currentColor;
  }
}

Такий синтаксис зручний не лише для responsive design, а й для контекстної стилізації компонента залежно від контейнера, в якому він розташований.

Style queries, scroll-state queries і списки умов

Firefox 151 увімкнув container style(...) за замовчуванням.

Style queries дозволяють реагувати на computed values або custom properties контейнера.

Chrome 144 розширив scroll-state queries умовою scrolled:

html {
  container-type: scroll-state;
}

@container scroll-state(scrolled: top) {
  .toolbar {
    translate: 0 0;
  }
}

Це дозволяє стилізувати нащадків залежно від останнього напрямку прокручування.

Chrome 150 додав container queries через кому. Правило застосовується, якщо відповідає хоча б одна умова. Така модель працює подібно до списку media queries і може використовуватися для fallback-умов.

Розширення @supports

Chrome 148 додав at-rule(), який дозволяє перевіряти підтримку певного at-rule.

Chrome 150 реалізував named-feature() для можливостей, які складно або неможливо перевірити через звичайну declaration- чи selector-умову.

Нові перевірки доповнюють, але не замінюють звичайний @supports. Старий браузер може не розуміти саму нову умову, тому базовий fallback має залишатися за межами відповідного блоку.

revert-rule

У 2026 році глобальний keyword revert-rule стабільно з’явився в Chrome 148 і Firefox 150. Safari 27 підтримує його в бета-версії.

revert-rule скасовує значення так, наче поточного style rule взагалі не існувало.

Він відрізняється від:

• revert, який повертається до попереднього cascade origin;
• revert-layer, який повертається до попереднього cascade layer.

revert-rule корисний для компонентних бібліотек і складних override-сценаріїв, де потрібно точково прибрати вплив конкретного правила.

::search-text

Chrome 144 додав ::search-text — highlight pseudo-element для результатів браузерного Find in page.

::search-text {
  background: yellow;
  color: black;
}

::search-text:current {
  background: orange;
}

:current дозволяє окремо стилізувати поточний активний збіг.

:open

Safari 26.5 додав псевдоклас :open.

Він уніфікує відкритий стан:

• <details>;
• <dialog>;
• <select>;
• <input> із відкритим picker.

select:open {
  border-color: dodgerblue;
}

На відміну від [open], псевдоклас працює також із елементами, де open-стан не представлений однойменним HTML-атрибутом.

Медіапсевдокласи

Firefox 150 додав псевдокласи для стилізації медіаелементів залежно від їхнього стану:

• :playing;
• :paused;
• :seeking;
• :buffering;
• :stalled;
• :muted;
• :volume-locked.

Вони дозволяють створювати CSS-індикатори стану аудіо та відео без дублювання всього стану в класах.

:heading і Selectors Level 5

Safari 27 beta підтримує :heading, який відповідає всім заголовкам від h1 до h6.

:heading {
  text-wrap: balance;
}

Selectors Level 5 також описує функціональну форму :heading(...), за допомогою якої можна вибирати конкретні рівні.

Однак Selectors Level 5 залишається чернеткою 2026 року. Підтримка :heading у Safari не означає автоматичної підтримки всіх конструкцій цього модуля.

Інші нові псевдоелементи

Safari 27 beta додає:

• ::picker-icon;
• ::checkmark.

Chrome 144 додає ::search-text.

Chrome 147 також представив JavaScript-інтерфейс CSSPseudoElement, але це вже API платформи, а не CSS-властивість.

Друк: page-margin-safety

Chrome 150 реалізував page-margin-safety.

Це не звичайна CSS-властивість, а дескриптор @page. Він дозволяє враховувати фізичні області аркуша, які принтер не може надійно надрукувати.

Дескриптор особливо корисний, коли сайт задає власні page margins, headers або footers і не може покладатися на стандартні браузерні поля.

Що означає Interop 2026

Interop 2026 — це спільна програма Apple, Google, Mozilla, Microsoft та інших учасників, спрямована на зменшення розбіжностей між браузерами.

CSS-напрями Interop 2026 охоплюють:

• CSS Anchor Positioning;
• типізований attr() для різних властивостей;
• container style queries;
• contrast-color();
• CSS zoom;
• Custom Highlights;
• :open;
• dialog і popover;
• медіапсевдокласи;
• scroll-driven animations;
• Scroll Snap;
• shape();
• View Transitions;
• cross-document View Transitions;
• сумісність user-select.

Interop не є календарем браузерних релізів. Наявність функції в програмі не гарантує, що вона буде стабільно доступна в усіх браузерах до кінця 2026 року.

Особливо це стосується типізованого attr(): можливість використовувати атрибути з перевіреним типом у різних CSS-властивостях уже реалізується окремими рушіями, але ще не є універсальною.

Які можливості вже можна використовувати

Gap decorations, border-shape, caret-shape, contrast-color() та багато інших новинок можна застосовувати як прогресивне покращення, якщо інтерфейс залишається зрозумілим без них.

Для Grid Lanes потрібен структурний fallback у вигляді звичайного Grid або multicol.

Для text-fit необхідно заздалегідь задавати базовий responsive font-size, щоб текст не втрачав читабельність у браузерах без підтримки.

Scroll-triggered animations можуть потребувати fallback через IntersectionObserver, якщо анімація передає важливий зміст або керує функціональною частиною інтерфейсу.

Бета-функції Safari 27 не варто використовувати як основу критичного production-flow до виходу стабільної версії.

Новий синтаксис бажано ізолювати через @supports:

.component {
  /* базові стилі */
}

@supports (border-shape: circle(50%)) {
  .component {
    border-shape: circle(50%);
  }
}

На цьому мабуть покищо все.