Вийшла нова версія браузера Safari 27.2, яка приносить покращення в роботі з кастомними елементами вибору, оновлену термінологію для CSS Grid Lanes та два десятки виправлень дрібних помилок у різних підсистемах WebKit.

Доопрацювання Customizable Select

Функція Customizable Select вперше з'явилась у Safari 27.0, і відтоді робоча група над вебстандартами продовжує уточнювати деталі її поведінки, а розробники браузерів синхронізують свої реалізації між собою.

Традиційно, коли користувач обирав варіант у елементі <select>, цей вибір показувався у кнопці — видимій інтерактивній частині елемента на сторінці. Завдяки Customizable Select зʼявився новий елемент <selectedcontent>, який дає розробникам більше контролю над тим, що саме відображається і як це виглядає.

Використання <selectedcontent> не є обовʼязковим — звичну розмітку HTML можна залишити без змін.

У Safari 27.2 зʼявився новий псевдоелемент ::field-content, який дозволяє стилізувати текст обраного варіанту прямо на сторінці, навіть без застосування <selectedcontent>.

Крім того, у новій версії підправили кілька стандартних стилів UA для appearance: base-select. Вміст кнопки тепер надійніше вирівнюється по вертикалі. Текст обраного варіанту успадковує властивість text-overflow від елемента <select>. Змінено спосіб відображення ::picker-icon — тепер його розмітка стала простішою. А сама кнопка для керування відступами використовує flex: 1 замість margin-inline-start: auto на ::picker-icon, завдяки чому іконка вибору завжди залишається видимою, навіть без <selectedcontent>.

Також раніше велике випадаюче меню могло частково виходити за межі видимої області екрана. У Safari 27.2 цю проблему виправили завдяки застосуванню безпечного вирівнювання. Це повʼязано зі ширшою зміною в логіці CSS-вирівнювання: для елементів з абсолютним чи фіксованим позиціюванням ключове слово safe тепер утримує блок у межах його початкового контейнера. Також тепер можна комбінувати ключові слова safe і unsafe зі звичайним вирівнюванням.

Зміни в CSS

Функція Grid Lanes зʼявилась у Safari 26.4 ще в березні. Відтоді робоча група CSS Working Group вирішила перейменувати властивість flow-tolerance на fit-tolerance, щоб назва точніше відображала її призначення. У Safari 27.2 Grid Lanes вже використовує нову назву, тоді як стара поки продовжує працювати як застарілий псевдонім. Розробникам варто якнайшвидше оновити свій код — у цьому може допомогти Safari Web Inspector, який позначає місця, що потребують змін.

Властивість fit-tolerance визначає, наскільки прискіпливо браузер обирає місце для розміщення наступного елемента. За відсутності будь-якого допуску браузер шукає стовпець (або рядок у перпендикулярному напрямку), вміст якого завершується найвище на сторінці, і саме туди розміщує елемент. Але якщо кілька стовпців завершуються майже на однаковій висоті, різниця може бути неважливою. Саме для таких випадків fit-tolerance дозволяє задати допустиму різницю: якщо стовпці відрізняються менше за це значення, браузер вважає їх рівнозначними і просто обирає перший. За замовчуванням це значення дорівнює fit-tolerance: 1em.

Вищий допуск дозволяє елементам, що йдуть один за одним, залишатися в сусідніх стовпцях, замість того щоб переміщуватися туди-сюди сторінкою через незначні відмінності у висоті. Це покращує досвід навігації клавішею Tab, особливо для зрячих користувачів клавіатури, які стежать за переміщенням фокусу між елементами. Тож у більшості випадків це значення варто суттєво збільшувати — наскільки саме, залежить від розмірів вашого контенту та того, наскільки сильно він варіюється.

Експериментувати з fit-tolerance можна у Field Guide to Grid Lanes, щоб краще зрозуміти принцип її роботи, а детальніше про Grid Lanes і Fit Tolerance розказано у статті Introducing CSS Grid Lanes.

Виправлення помилок та інші зміни

У межах постійної роботи над якістю продукту, WebKit для Safari 27.2 отримав 20 виправлень помилок.

Доступність

  • Виправлено пропуск вмісту списків, таблиць, дерев і canvas у доступному імені чи описі, коли на елемент-контейнер посилаються через aria-labelledby або aria-describedby (186015032).
  • Виправлено повторне озвучування вже прочитаного тексту VoiceOver у випадках, коли сторінка транслює контент шляхом повторного рендерингу регіону aria-live замість додавання нового вмісту (186766347).
  • Виправлено проблему, через яку VoiceOver не розпізнавав елементи <input type="date">, <input type="time"> та <input type="color"> як спливаючі кнопки на iOS (187788949).

Медіа

  • Виправлено помилку, через яку AudioContext.decodeAudioData() завершувалась з EncodingError навіть на коректних аудіофайлах формату AAC/M4A (183474728).
  • Виправлено відображення чорного екрана у відео попри триваюче відтворення звуку після того, як декодер відео ставав недійсним (184041554).
  • Виправлено ситуацію, коли ManagedMediaSource не генерував подію startstreaming під час перемотування на небуферизований момент часу, що могло призводити до зупинки відтворення (185166787).
  • Виправлено проблему, через яку проміс методу play() медіаелемента не виконувався, якщо SourceBuffer містив незашифрований контент (188022510).
  • Виправлено ситуацію, коли VideoEncoder з WebCodecs міг зависати і не видавати результат для профілів H.264 Main та High (188201298).

Оновлення до Safari 27.2

Safari 27.2 доступний для iOS 27.2, iPadOS 27.2, visionOS 27.2, а також macOS 27.2 Golden Gate, macOS Tahoe і macOS Sequoia. На iOS, iPadOS, visionOS та macOS 27.2 Golden Gate оновлення до Safari 27.2 встановлюється разом з оновленням системи через розділ Settings > General > Software Update. На старіших версіях macOS оновити тільки Safari можна через Software Update, натиснувши «more».

Зворотний звʼязок

Команда WebKit запрошує користувачів ділитися враженнями через веб-євангелістів Jen Simmons, Saron Yitbarek та Jon Davis у Bluesky чи Mastodon, а також стежити за новинами WebKit на LinkedIn. Про проблеми з інтерфейсом Safari можна повідомляти через форму Feedback, а про баги у вебтехнологіях чи Web Inspector — через систему звітів WebKit. Якщо якийсь сайт працює некоректно, варто залишити звіт на webcompat.com — це справді допомагає виправляти проблеми.

Джерело: WebKit Blog