Шас важныя фічыры HTML, якія заменяюць популярныя бібліятэкі JavaScript для стварання інтэрфейса

Прывыклі, што HTML забезпечвае структуру, а JavaScript — усю функцыянальнасць: модальныя вікна выкалікаліся за дапамою бібліятэкі React, падказкі — Popper.js чыста Tippy, а компаненты, выкарыстаныя на сервере, трэбаваліся з адпрацоўванымі скрыптамі. У той жа час стандарт HTML Living Standard ад WHATWG і дварчыкі прыўязалі власныя елементы, якія падтрымляюць багато з гэтых ситуацыяў за дапамою калькольных атрыбутаў, зменшуючы калібру і размер пакетаў, а таксама забезпечваючы належную доступнасць за замовчаннем. У гэтым кяліку рассказваецца пра шасць з іх, пра тое, якія маркапы ўсё ж трэба, і пра тады, калі патрэбны CSS чыста JavaScript. Перад выкарыстаннем альтэрнатывы пераканайцеся, што ваша аудытарыя падтрымлівае гэтыя функцыі.

1. Падказкі з атрыбутам popover

Тэпкі-паведамленні і меню традыцыйна вымагалі борьбы з контэкстамі складвання z-index і ручнага стварэння адхэрабальных прыемнікаў для клікаў за межамі. За дапамогою API Popover любы элемент, які мае атрыбут popover, падчас адкрывання пераводзіцца на верхній шар, вышэй усіх звычайных кантэнтаў, незалежна ад значэння z-index. Кнопка, у якой атрыбут popovertarget задае id элемента, керуе яго адкрываннем і закрыццем:

<!-- The Trigger -->
<button popovertarget="my-menu">Toggle Menu</button>

<!-- The Popover Content -->
<div id="my-menu" popover>
  <p>I am natively managed! Press ESC or click outside to close me.</p>
</div>

Без якога-лібо JavaScript вы отрымваеце:

• Декларатыўнае керуванне: кнопка адкрывае і закрывае тэпкі-паведамленне.
• Простае закрыцце: клік за межамі або нажатые клавіша Escape закрываюць яго. Гэта стосуецца стандартнага режыма popover="auto"; у режыме popover="manual" закрыцце залишаецца на вашай староне.
• Без борьбы за шары: адкрыванае тэпкі-паведамленне відображаецца на верхнім шары, вышэй усього іншага.

Два ліміты: API каналізуе видазрэмнасць і спаковванне элементаў, але не ўстановку, таму для прычэплення меню да кантролера яго ўжо трэба CSS (класычная позыціяванне або новейшая, менш падтрымваная метода прычэплення). А элемент popover не ўтрымлівае фокус, таму для падтверджэнняяў викорыстоўваецца dialog.

2. Эксклюзыўныя аккордіаны з дакладнамі і назвай

details і summary ўжо давно дазваляюць ствараць складываныя раздзелы без JavaScript. Новая функцыя: элементы details, якія маюць аднаковую name, ствараюць групу, у якой можа быць адкрыты толькі адны элемент, як у класычным аккордіане.

<details name="faq">
  <summary>What is modern HTML?</summary>
  <p>A living standard evolving directly inside browser engines.</p>
</details>

<details name="faq">
  <summary>Do I still need JavaScript?</summary>
  <p>Much less of it than you used to!</p>
</details>

<details name="faq">
  <summary>Is this supported natively?</summary>
  <p>Yes, across all major modern browser engines.</p>
</details>

Адкрыцье аднаго элемента з name="faq" закрывае ўсі іншыя адкрытыя элементы, без выкарыстоўвання лісэнераў, хуков статаусу чы пераменных класоў. Браузеры, якія не падтрымваюць name, проста дазволяюць адкрытыя кілька элементаў, што ёсць грацыязны альтэрнатыўны варіант.

3. Адаптабельныя модалкі з dialog і ::backdrop

Спецыяльныя div-элементы-накладкі часта не працуюць пасля аудыту на доступнасць, таму што правільная модалка должна заставаць фокус усередзіні сябе, блакануць сторонню частку сторунки і пасля цього вяртаць фокус на тэлеканалы. Элемент dialog рашыраецца з гэтым. Ёсць прыклад формы з method="dialog", якая закрывае дыялог на клаканні будзь-каго з кантролей, а value клакнутага кантролю стае returnValue дыялогу:

<dialog id="user-modal">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to delete this repository?</p>

  <!-- A form inside a dialog with method="dialog" closes it automatically -->
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<button onclick="document.getElementById('user-modal').showModal()">
  Open Modal
</button>

Затемнена накладка — это псевдоэлемент ::backdrop, стылююцца за дапамою звычайнага CSS:

/* Styling the native browser backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

showModal() размешчае дыялог у верхнім слое, робіць рэшту сторанкі нерухомай, заставляе фокус застацца ўнутрь і дазволяе закрыць яго клавішай Escape; пасля закрыцця сучасныя браузеры вяртаюць фокус да элемента, які быў актуальны раней. show(), на протыворач, ачынае дыялог без режыму модальнага вікна, без такіх захоўнаў. У React трэба вызваць showModal() через ref, а не праз inline-атрыбут onclick.

4. Сэрверныя компаненты веба з декларатывным Shadow DOM

Раней для Shadow DOM быў неабходны JavaScript на стороне кліента (element.attachShadow({ mode: 'open' })), таму сэрверныя або статычна генераваныя компаненты веба не мелі інкапсульаванага маркапа, пакуль не запускаліся скрыпты, што спрычыняла раптовыя змены стылю і распакоўкі. Декларатывны Shadow DOM вырашае гэту проблему: template з атрыбутам shadowrootmode унутрь элемента-хоста описвае структуру Shadow DOM у формате HTML:

<user-card>
  <template shadowrootmode="open">
    <style>
      /* Styles here stay encapsulated inside this component */
      h3 { color: #3b82f6; font-family: sans-serif; }
    </style>

    <h3>Jane Doe</h3>
    <p>Senior Frontend Engineer</p>
  </template>
</user-card>

Парсер ператворае шаблон у «цэнтр тэнаў» на элементе user-card прытаму, як прадаюць матэрыял, тады стылі і маркап, якія прызначаны для конкрэтнага элемента, праказуюцца ведаўжо пасля першага адрасавання экрану. Увага: гэта выконваецца толькі пад час парсавання HTML. Маркап, які быў даданы пазней за дапамогою innerHTML, не стварае такога «цэнтра тэнаў»; для дынамічнага дадавання патрэбны такія API, як setHTMLUnsafe(), таму неабходна пераканацца ў наявнасці такой падтрымкі.

5. Прыоритэтызаванне важных ресурсаў за дапамогою fetchpriority

loading="lazy" і async/defer не можу паказаць, якія з ранніх ресурсаў є найважлівейшымі. Калі ёсць калькі зображэнняяў вышэй, зображэнне-герой, якое адрасуецца пасля процеса Largest Contentful Paint (LCP), должна маты прыорітэт перад іншымі айконамі та знакамі. fetchpriority дае сетеваму планавальніку такую інфармацыю:

<!-- Critical LCP Image: Load this immediately! -->
<img src="hero-banner.webp" fetchpriority="high" alt="Product Hero">

<!-- Lower priority images -->
<img src="avatar.webp" fetchpriority="low" alt="User avatar">

<!-- Critical JavaScript bundle -->
<script src="app.js" fetchpriority="high"></script>

Это можа паспрабаваць для падбору Core Web Vitals без змены логікі прыемліка. Це ўпамінанне, а не заповедь, і пазначэння багацо ресурсаў як high унічыжвае ўсе прыбуткі. Таксама ніколі не выкарыстоўвайце метод lazy-load для адобразавання зображэння LCP.

6. Абліковыя прапанункі з datalist

У багацо проектаў дадаецца складны компонент автодаполнення толькі для прапанавання значэнняў, калі ў той жытак дазволяе ввод свабоднага тексту. datalist робіць гэта аблікова: яго можна прыяўязаць за дапамогою атрыбута list элемента вводу, і яго опцыі стануць прапанункамі.

<label for="framework">Choose or type a framework:</label>
<input list="frameworks" id="framework" name="framework" placeholder="e.g. Next.js">

<datalist id="frameworks">
  <option value="Next.js"></option>
  <option value="SvelteKit"></option>
  <option value="Nuxt.js"></option>
  <option value="Astro"></option>
  <option value="Remix"></option>
</datalist>

Браузер адобразвае і фільтруець спіс, карыстаецца навігацыяю за дапамогою клавіатуры і следуе стылю платформы. Компрасам — контроль: стайлізацыя ў мінімуме, прыемкаванне разлічаецца ў розных браузерах і на мобільных прыстроях, а розныя опцыі немагчымы. Ідеальна для простых поль «выберыце або запісайце»; для стварэння брендаванага комбокса все раве патрабуецца додатковы компонент.

Абліковая функцыя проты старог падходу

• Інструментальныя падказкі і меню: popover заместо бібліятэкі для пазычвання, а таксама обработка кліку за межамі і нажатня клавішы Escape (сама пазычваўнае распаложэнне яшчэ застаёцца з CSS).
• Аккордыяны: элементы details, якія дзелюцься name, заместо логікі стану і ўвыключэння ў JavaScript.
• Модалкі: dialog з showModal() і ::backdrop заместо спецыяльнага накрыцця з ручным кераванням фокусам.
• Компаненты, вырашаны на сервере: template shadowrootmode заместо вызоваў attachShadow(), якія дзейнаць толькі на кліентскай стороне.
• Прыоритэты завантажэння: fetchpriority заместо ручных трюкаў прадзяйнага завантажэння або порядку завантажэння, кераванага скрыптамі.

Прыткія практыкі: у простых случаях вжывайце datalist заместо спецыяльных віджэтаў автадаптавання.

Ёсць больш дакладная інфармацыя пра функцыі платформы, якія можу заменіць залежнасці; адзірніце нашыя матэрыялы па тэме «Native browser APIs, якія заменяюць популярныя npm-пакеты».

Галоўныя выводы

• Браузеры зараз падтрымліваюць функцыянал, які раней казалася ўтрэбаў бібліятэкаї, часта з вбудованым кераваннем фокусам і можлівасцю закрыць вікно нажатыем клавішы Escape.
• «Натыўны» не значыць «полны»: для падметных вікон неабходны CSS-стылі, datalist аддае мало можлівасцей для стылювання, а Declarative Shadow DOM працюе толькі пад час парсавання.
• Перш чым дадаць залежнасць у інтэрфейсе, пераканайцеся, чы не можа адзін элемент чы атрыбут задовольніць вашыя патрэбныя функцыі ў падтрымліваных браузерах.