Нещодавно Una Kravets представила в розмові про останні розроби в веб -інтерфейсі, підтримуваній командою Chrome. Деякі поширені моделі інтерфейсу, які зараз потребують значної кількості JavaScript, незабаром можуть бути реалізовані декларативними способами з новими функціями HTML та CSS, з меншим спеціальним JavaScript та з вбудованою доступністю.
Розмова зосереджена на трьох особливо складних візерунках користувача: налаштування вибору меню, каруселі та листівки. Усі три візерунки інтерфейсу зазвичай зустрічаються в системах проектування, з багатьма лініями JavaScript для впровадження спеціального стилю, презентації, макета, взаємодії або моделей доступності. Коли постачальники браузерів розвивають веб -стандарти, щоб включити ці закономірності від користувача в самі браузери, розробникам може бути менше роботи в майбутньому і просто покладатися на платформу. Менше користувальницького JavaScript також приносить користь користувачам у формі підвищення продуктивності. Запропоновані декларативні API вже відправляли щонайменше в одному стабільному браузерному двигуні.
Перший обговорений шаблон – це налаштоване меню Select. Рідний Внутрішня структура елемента була історично складною для послідовного стилю в браузерах:
Поширене розчарування для розробників, які намагаються працювати з вбудованою формою браузера (
і різніТипи) полягає в тому, що вони не можуть налаштувати зовнішній вигляд цих елементів управління, щоб відповідати дизайну або досвіду користувачів. У опитуванні веб -розробників про елементи управління та компоненти форми, головна причина, що DEVS переписує власні версії цих елементів управління, є неможливістю достатньо налаштування появи нативних елементів управління.
Будівельні блоки для налаштованого вибору – це API Popover та позиціонування якоря.
API Popover обробляє плаваючий список варіантів, гарантуючи, що він з’являється над іншими елементами інтерфейсу, легко звільнити та керує фокусом. Попвер досяг базового статусу і тепер доступний у всіх браузерах.
Команда викликає (command і commandfor Атрибути) надайте декларативне рішення HTML, подібне до popovertarget Для кнопки підключення клацає до дій (наприклад, відкриття діалогового вікна), зменшення потреби в котельні JavaScript.
Позиціонування якоря – це API CSS, який дозволяє розробникам позиціонувати елементи відносно інших елементів, відомих як якоря. Цей API спрощує складні вимоги до макета для багатьох функцій інтерфейсу, таких як меню та підменю, підказки, вибору, мітки, картки, діалоги налаштувань та багато іншого. Позиціонування якоря є частиною Interop 2025, що означає, що воно повинно приземлитися у всіх браузерах до кінця року.
Вдосконалений select Елементна анатомія демонструє дві частини, кнопку та поп -ярі, якомога на цю кнопку, все з відповідними селекторами для націлювання та укладання:
Стилі можна застосувати до Popover через селектор ::picker(select). Приклад стилю на замовлення такий:
select,
::picker(select) { appearance: base-select; } ::select-fallback-button { background: gold; font-family: fantasy; font-size: 1.2rem; } ::picker(select) { border-radius: 1rem; } option { font-family: monospace; padding: 0.5rem 1rem 0.5rem 0; font-size: 1.2rem; } option:checked { background: powderblue; } option:hover,
option:focus-visible { background-color: pink; } option::before { content: ''; font-size: 80%; margin: 0.5rem; } body { padding: 2rem; } Розробникам рекомендується переглянути повну розмову для додаткових технічних деталей, демонстрацій та пояснень. Розмова додатково пояснює, як останні функції із специфікації CSS Overflow 5, а саме кнопки прокрутки та маркерів прокрутки, дозволяють анімації, керовані прокрутою (наприклад, каруселі) суто в CSS.
