Liquid Glass у вебі: прихована CSS-властивість Apple, якою поки не можна користуватися

У WebKit уже існує механізм, здатний застосувати системний ефект Liquid Glass безпосередньо до HTML-елемента. На рівні CSS він виглядає напрочуд просто:

.toolbar {
  -apple-visual-effect: -apple-system-glass-material;
}

Проте є суттєве обмеження: станом на серпень 2026 року це не публічний вебстандарт і не документований API Safari. Звичайний сайт не може розраховувати на його роботу.

Що таке Liquid Glass

Apple представила Liquid Glass як динамічний матеріал інтерфейсу, який пропускає та заломлює зображення під собою, реагує на кольори оточення, освітлення й дії користувача. Це не просто напівпрозорий фон із розмиттям: система також керує контрастом, відблисками, тінями та поведінкою матеріалу під час анімацій. Apple описує Liquid Glass як окремий функціональний шар для панелей навігації та елементів керування.

У нативних застосунках ефект уже має публічні інтерфейси — наприклад, модифікатор glassEffect() у SwiftUI та клас UIGlassEffect у UIKit. А ось для HTML і CSS публічного аналога поки немає.

Що знайшли у WebKit

Назва властивості:

-apple-visual-effect

Її не варто плутати з користувацькими CSS-властивостями на кшталт --accent-color. Це пропрієтарна властивість із префіксом Apple, реалізована всередині WebKit.

Найцікавіше значення:

-apple-system-glass-material

У поточному коді WebKit також присутні інші варіанти:

-apple-system-glass-material-clear
-apple-system-glass-material-subdued
-apple-system-glass-material-media-controls
-apple-system-glass-material-media-controls-subdued

Саму властивість у вихідному коді WebKit позначено як non-standard, а її доступність контролює внутрішній прапорець useSystemAppearance. Назви й поведінка цих значень можуть змінитися без попередження.

Найпростіший приклад

Якби властивість була доступна, плаваючу панель можна було б оформити так:

<nav class="toolbar" aria-label="Основна навігація">
  <button type="button">Назад</button>
  <button type="button">Поділитися</button>
  <button type="button">Зберегти</button>
</nav>
.toolbar {
  display: flex;
  gap: 8px;
  width: max-content;
  padding: 10px;
  border-radius: 999px;

  -apple-visual-effect: -apple-system-glass-material;
}

WebKit передав би рендеринг системному матеріалу Apple. У результаті панель не просто розмивала б фон, а адаптувалася б до розташованого під нею контенту.

Але якщо вставити цей код у звичайну сторінку й відкрити її в Safari, очікуваного ефекту не буде.

Чому властивість заблокована

У WKWebView системний вигляд необхідно активувати через налаштування WKPreferences. Проблема в тому, що відповідний перемикач оголошений у приватному заголовному файлі WebKit

@property (nonatomic, setter=_setUseSystemAppearance:)
    BOOL _useSystemAppearance;

Технічно приватний API можна викликати в дослідницькій збірці, але використовувати його в застосунку для App Store не слід. Правило 2.5.1 вимагає, щоб застосунки використовували лише публічні API. App Review Guidelines

Отже, сьогодні це радше демонстрація можливостей WebKit, а не готовий інструмент для розробників.

Безпечний варіант із резервним оформленням

У реальному проєкті можна вже зараз підготувати CSS із прогресивним покращенням. Усі браузери отримають звичайний скляний ефект через backdrop-filter, а системний матеріал увімкнеться автоматично, якщо Apple колись зробить властивість доступною під тією самою назвою.

.glass-toolbar {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);

  display: flex;
  gap: 8px;
  padding: 10px;

  color: white;
  background: rgba(25, 31, 45, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.2);
}

/* Сучасний кросбраузерний резервний ефект */
@supports (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {
  .glass-toolbar {
    background: rgba(245, 248, 255, 0.18);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
}

/* Майбутнє системне покращення */
@supports (
  -apple-visual-effect: -apple-system-glass-material
) {
  .glass-toolbar {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    -apple-visual-effect: -apple-system-glass-material;
  }
}

У цьому прикладі є три рівні:

  1. Непрозорий фон для старих браузерів.
  2. Імітація скла через backdrop-filter.
  3. Системний Liquid Glass, якщо WebKit колись відкриє відповідний API.

У фрагменті вище є одна друкарська помилка — має бути border-radius: 999px; без зайвої дужки. Ось виправлений рядок:

border-radius: 999px;

Перевірка через JavaScript

Якщо підтримка впливає не лише на оформлення, а й на поведінку компонента, її можна перевірити через CSS.supports()

const supportsSystemGlass = CSS.supports(
  "-apple-visual-effect",
  "-apple-system-glass-material"
);

document.documentElement.classList.toggle(
  "has-system-glass",
  supportsSystemGlass
);

Ця перевірка нічого не розблоковує — вона лише повідомляє, чи приймає поточний браузер таку комбінацію властивості та значення.

Чи з’явиться Liquid Glass у Safari

Наявність реалізації у WebKit показує, що Apple принаймні експериментує із системними матеріалами всередині вебконтенту. Проте це не гарантує майбутнього релізу.

Компанія може:

  • відкрити властивість під нинішньою назвою;
  • створити інший публічний API;
  • залишити механізм лише для власних системних компонентів;
  • повністю змінити або видалити реалізацію.

Тому будувати продакшен-інтерфейс навколо -apple-visual-effect поки не варто. Найкраща стратегія — якісний резервний стиль і @supports, який дозволить скористатися системним ефектом, якщо він справді стане публічним.

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

# css4# apple