Каму належыць кантроль над паведамленнем UI? Выбір между HTML, CSS і JavaScript

Разработчыкі фронтэнду апошнім часам прагчыць да JavaScript. Калі трэба адкрыць меню, вы ствараеце стан. Калі патрэбна обработка кліку, вы прыўязуеце аслухальнік. Компонент должен прыстосавацца да сваёй шыроўкі, таму вы яе вимерваеце; падказка должна знаходзіцца ля кнопкі, таму вы чытаеце координаты; патрэбны эфекты прасування, таму вы аслухаеце за прасуваннем і адкладзіце змяны стылю. Сучасныя фрэймворкі спрыяюць выкарыстоўванню всіх гэтых методаў: у React є стан і эфекты, у Angular — сігналы, у Vue — refs і реактыўнасць, а Svelte дазволяе выкарыстоўваць мінімум коду для адкладзення змян. Нічога пасаблівага немае, і JavaScript ў значныяй меры спадчыніць тое, што браузер стаў платформай для аплікацыяў, а не толькі праграмай для перагляду дакументаў. Аднак HTML і CSS продовжваюць атрымліваць можлівасці, якія перакрываюць частку задач, якія раней выкарыстоўваліся JavaScript. У гэтым артыкуле пояснюецца, чаму гэта продовжваець выкліквалася, прадстаўленыя натыўныя прымітывы, якія зараз падтрымаюць распашчаныя варіанты взаімадзеяў, а таксама даўаны практычны крэтарыял для выбору таго шару, які должен кераваць данай часткаю коду.

Это аспекты паведання.

Чаму платформа продовжвае прыемляць завадзіны дапраўкі

Якщо JavaScript вже можа рашыць практычна кожную проблему інтэрфейса, чаму платформа ўсё ж расте? Не таму, што JavaScript не выканаў свою ролю. А таму, што браузер паступова навучыцца рашыць проблемы, якія раней кожная дапраўка мусела рашыць сама. Кожны раз, калі гэта выканаецца, разработчыкі отрымаюць ўтолькі новага варыянта, і становіцца ўсё цікавейшым пытаннем – який варыянт несе наіменшыя довгастрокавыя затраты.

Кожная змена конкуруець за наступны кадр

Дапамагае прыгадаць, што робіць браузер пасля таго, як ўстаўляецца змена на сторанцы. Спрасаваны процес атрыбутаўвання выглядае так:

JavaScript
    ↓
Style calculation
    ↓
Layout
    ↓
Paint
    ↓
Composite

Рэальныя двыгуны ў дзесяткі разоў болей складныя. Не кожна змена праходзіць чераз усі этапы: частыя задачы выкананыя ў незалежным потоку, складаванне элементаў можа адбывацца окрема, а дзеякія анімазыі ухілваюцца ад паўтаральнага перзапісу макета чы рэндаравання. Тым не менш, адна ідея з гэтага спрасцаванага моделі застаецца актуальной: браузер мае обмежаны часовы бюджет на стварэнне кожнага кадру. Выкананне скрыптав, обробка вводу, вычысленне стылю і рэндараванне — усе гэта павінна дзеліць гэты час. Чым больш задач вы падаеце, тым дольша браузеру трэба часу, каб адпаведаць. Чырвоныя деталі таго, сколькі коштае кожны тип змены, можна пазнакоміцца у нашай статыце па тэме ріфлоу, репейнт і композыцыя.

Это легкая рэч працягнуць не зазначыць на машыне для разработкі з быстрым CPU, достатнёй колькасцю памяці і хорашым з’ўязкам. Запустіце тую ж аплікацыю на старэйшым телефоне ў режыме эканоміі акумулятора, калі запускаецца кальколька аплікацый, і тады стануць видны маленькія затрымкі: анімацыя пропускае кадр, прасуванне стае медленным, а кнопка рэагуе настолькі пазнела, што здаецца несправной.

Работа над выдатнасцю не стосуецца толькі прыгнечвання існуючага коду. Часта найлепшая оптымізацыя — не ствараць таго, чаго браузер ніколі не прасіў у вас стварыць.

Характэрная рэч — адпаведная адпаведальнасць, а не HTML проты JavaScript

Было б лёгка сведзіць гэтую дыскусію да слогана:

HTML + CSS = good
JavaScript   = bad

Этот слоган — глупасць. JavaScript рашае проблемы, для якіх ніколі не было створана HTML і CSS. Сяроднічна рэдагаванне залежыць ад логікі прыемплэю, а жывыя панелі керавання — ад синхронізаціі дадзеных. Развітыя функцыі ператасовкі элементаў, правілы домэнаў, інтэрактывныя графікі, машыны станоў і багатапараграфныя процесы не знікнуць толькі таму, што выйшаў новы селектар.

Случаі, якія варта пераглянуць, ўздоўжна меньшыя. Падазроўваю, вам трэба паказваць і хаваць дадатковую інфармацыю. Скрыпт можа яе увімкнуць і выключыць:

button.addEventListener('click', () => {
  panel.hidden = !panel.hidden;
});

Это абсалютна правільны код. HTML, пры тым, можа безпосередна выражаць віджэт адкрыція інфармацыі. Заўважкайте, што адлучаны h пасля заканчальнага тэга ў фрагменте — глытак, які трэба адмаўіць:

<details>
  <summary>Advanced settings</summary>
  <p>...</p>
</details>h

Праўая разліка — не колькасць ліній. Це хто контролюея поведзенне. За дапамогою скрыпта адносы выглядаюць так:

Application owns the behavior

За дапамою <details> все выглядае так:

Browser owns the behavior

Калі браузер кантролюеяе паведамленне, ён таксама кантролюеяе всі деталі, які інакш было бы трэба памятаць: падтрымку клавіатуры, стан розгорнутага элемента, доступны для асистуючых тэхналогій, а таксама адносна паведамленне на разных стораніцах. Гэта разліка мае важнае значэнне частае, чым можа здавацца на першы погляд.

Чаму HTML не застаўся на параграфах і формах

У прынцыпе, HTML мог бы давно завершыць свой розвіт. Загаловкі, параграфы, формы, кантакты, спрамкі, адносныя картынкі і універсальныя контейнеры былі дастатковы для стварэння чаго-небудзь, а всё болей складнае заставалася на робу скрыптам.

Але паглядзіце, як выглядае той свет. Кожныя прыемкі перадзначаюць спосаб дзеяння кожной паведамленні, дыялогу, адкрытага паведамлення і формы, прычыму кожны раз часткова аднакова. Бібліятэкі, здаецца, нормалізуюць гэтыя шаблоны, фреймворкі абгружаюць бібліятэкі, і кожны візітар абгружае ўсё новую рэалізацыю чаго-то, што браузер мог бы зрозумець натычна.

Калі шаблон становіцца павсюдны, вбудоўаны прымітів пачынае сам сабе компенсаваць. Якща адносіцца да гэтага падчынення, савремены HTML не ператвараецца на фреймворк прыемакоў; ён паступова кодуе взаімадзеянні, якія практычна кожны прыемак постаўляе занова.

Адкрытые паведамленні без стану прыемака

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

const open = signal(false);

Потым накапліваюцца трэбованні:

button click
    ↓
change state
    ↓
show overlay
    ↓
handle outside click
    ↓
handle Escape
    ↓
manage stacking

Іноды продукт дасправды патрабуе всё гэта. Для простыях случаў HTML тепер аддае API Popover. Кнапка паказвае на элемент з атрыбутам popover за дапамогою popovertarget, а браузер караце цяперэйшчы стан элемента:

<button popovertarget="settings">
  Settings
</button>

<div id="settings" popover>
  ...
</div>

За звычайным значэнням атрыбута popover (auto) браузер таксама караце прымусовая закрыцьце падпаказу, закрываючы яго, калі корыстнік клікае за межы або нажымае клавішу Escape, і паказвае яго на верхнем слое, таму не трэба борцаваць з параметрам z-index. Функцыянал, які раней належаў выключна коду прыемленае, тепер мае вялікі старт з боку самага браузера.

Это не значыць, што вы ніколі не должны ствараць спецыяльны выпадаючы список. Автодапамога з удаленным пошукам, віртуалізацыя, можлівасць выбору калькі элементаў і спецыяльна обработка клавіатуры — гэта зовсім іншая проблема. Галоўнае тут тое, што просты выпадаючы элемент больш не павінен выклікваліцца як частка стану прыемніка.

Дыялогавые вікна, якія запускаюцца з рэальнага элемента

Модалкі ўжоць хораша ілюстрацыя, бо яны здаюцца простымі, пакуль вы не створыце іх належным чынам. Першая версія — цэлае простае пазначэнне:

open = true;

А потым прыходзяць справжнія пытанні:

• Што стаецца з контэнтам за модалкам?
• Куды пераходзіт курсор, калі ён ачынаецца?
• Чы можа клавіатура яго закрыць?
• Што стаецца і куды вяртаецца курсор, калі ён закрываецца?
• Чы ён відображаецца вышэй за всё інше, у верхнем шаре?
• Якім павінен быць фон і якія у ўсьму ён мае функцыі?

Працаваючы гады, багато реалізацыйяй пачыналіся з стандартнага <div>, і весь элемент будаваўся вручную. Сэгодні HTML апранае спецыяльны элемент:

<dialog>
  ...
</dialog>

Є адна практычная деталь, якую варта знать: модальна працяваўнасць выкалічвается праз адкрыванне элемента за дапамогою showModal(). Гэты вызов размешчае дыялог у верхнем слое, робіць рэшту сторанкі нерухомай, дазволяе закрыць яго клавішай Escape і апранае псевдоэлемент ::backdrop для стылювання. Адкрыванне яго за дапамогою show() або атрыбута open стварае звычны, не-модальны дыялог.

Натыўны элемент не рашае ўсіх патрабаванняў, касаючыся модальных аперацый, і рэальныя прыкладнікі можа ўсё ж дадаць да яго дапаможную логіку. Але выйсковая точка іншая: вам больш не трэба вымышляць концэпцію дыялогу, калі браузер вже знае, што такое дыялог. Гэта адпраўдае законамітнасць у сучасных платформах: натыўныя прымітівы не адмахваюць логіку прыкладніка; яны толькі зменшаюць кантэнт логіки, якія вам трэба ствараць самім.

CSS, які реагуе на стан DOM

HTML — не ўжо едыный слой, які виконвае задачы. CSS тепер можа выражаць адносы, якія раней заставаліся толькі за дапамогою скрыптав.

Разглядзім поле формы, якое павінна маты спецыяльны стыл, калі ўведаныя данні некоректныя. Скрыпт мог бы пераглядаць данні і падтрымлівацы синхроннасць класу ў роднім элементе. Сучасны CSS часта можа безпосередна выразіць такія адносы:

.field:has(input:invalid) {
  /* invalid state */
}

:has() зменяе тое, што CSS можа ведаць пра дакумент. Ёго давно прасілі як нехватную выборку-родзіца, але архітектурныя наследкі ёй важнейшыя, чым сама назва: дзеяння з сінхронізацыі стану больш не патрабуе праходзіць через JavaScript. DOM вже мае гэтую інфармацыю, і CSS можа на яе адказаць. Не трэба забываць апдэйтаваць жадны клас і не трэба чыставаць жадных аслухальнікаў.

Компаненты, якія адказваюць на свой сопрацэс

Респансіўны дизайн традыцыйна выкарыстоўваў запиты да медыа:

@media (max-width: 700px) {
  ...
}

Гэта добра працуе, калі важна ўсё тое, што паказвае віджэт. Аднак компаненты часта керуюцца іншымі фактарамі. Уявіце тую ж картку, якая паказваецца ў двух месцах:

Main content
┌───────────────────────────────┐
│            Card               │
└───────────────────────────────┘

Sidebar
┌─────────────┐
│    Card     │
└─────────────┘

Вікнавыгляд у обох случаях ідэнтычны; прастор, які ў наявнасці для карточкі, — ні. Сістэмы перадаўальных компанентав історычна рашалі гэтыя проблемы за дапамогою коду для вимеравання: спостарацца за элементам, прызначыць яго шырыню, дадзіць клас і павтарыць гэты процес кожны раз, калі змянюецца макет.

Запыткі контейнераў дазволяюць CSS адпаведзець на справжнія пытання, а самэ — сколькі прастору насправды ў мае компанент. Вы пазначаеце предка як контейнер і задаеце правілы, якія стосуюцца яго размеру:

.card-container {
  container-type: inline-size;
}
@container (width < 400px) {
  .card {
    /* compact layout */
  }
}

Гэта не проста новая сынтаксіс для адпаведнасці да разных дзвяроў; гэта перакладае адпаведальнасць. Браузер вже вылічыў макет, і CSS можа выкарыстоваць гэты результат без неабходнасці занова вимераваць його за дапамогою коду прыкладнага програміста. Наша параболіка запыткаў контейнераў і запыткаў медыа розглядае, калі кожны з іх падходзіць для викорыстання ў сістэме дизайна.

Пазыранне паказвае, як расте платформа

Дадзенне падказкі на кнопку здаецца простым заведам, пакуль вы яго насправды не спробаваеце. Дзе самэўсёды находзіцца кнопка? Якога розмяру падказка? Чы є месца аднойчыні, чы не трэба яе перакрыць зверху? Што будзе, калі праскруціваць экран, зменшыць або збяльшыць вікно перагляду, чы ўсё ж калі іншая частка макета зместыць кнопку? Простая падказка быстра ператвараецца на геаметрычную проблему.

Самэўсёды існуюць спецыяльныя бібліятэкі для плаваючага інтэрфейсу, якія эфектыва рашаюць гэтую справжню складную проблему. CSS зараз адбірае функцыю Anchor Positioning, якая дазволяе пазыраваць элемент абсалютна ўжо становішчы ў вазе да іншага элемента. На момент напісання падтрымка ў браузерах была неравнамірная, таму пераканайцеся ў актуальных данных прыдатнасі і выберыце альтэрнатыўны варыянт, якщо ўжо вядомае яго застосаваце.

Найважнейшым не ў тым, чы рэзалютна CSS заменіць усе бібліятэкі пазычання позыцый, а ў тым, што платформа прызнала пазычання позыцый настолькі распашчастым, каб заслужыць прыемнасць прымітіў нижэйшага рангу. Гэта звычны цыкл развіцця платформы: проблемы з’яўляюцца ў аплікацыях, патэрны перараджаюцца, з’яўляюцься бібліятэкі, і ў канечнай лініі платформа вучыцца на ўсём гэтым.

Анімацыя і значэнне декларатывных API

У анімацыях праблема выконання становіцца болей складной. Популярныя спрощэння гавораюць, што анімацыі CSS выконваюцца на GPU, а анімацыі JavaScript — на CPU. Але рэальна ситуацыя сложнейшая. Анімацыі CSS таксама выклакуюць роботу, JavaScript можа стварыць абсалютна плавныя анімацыі, а стоімасць разных CSS-якостей сильна разніцяецца. Анімаванне размераў можа спрычыніць змену макета, іншыя якосці выклакуюць перамальванне, тады як transform і opacity зазвычай набагато лепша падходзяць для обробкі кампозытара.

Таму корыстным разлікам не ёсць CSS проты JavaScript. Гэты разлік — у колькасці роботы, яку вызывае кожная змяна, і у ступені свабоды, якую вы даеце браузеру для планавання гэтай роботы.

Анімацыі, якія керуецца прасуваннем, ілюструюць гэты перакід. Традыцыйнальны эфект прасування выглядаў такім цыклам:

scroll event
    ↓
JavaScript calculation
    ↓
update styles
    ↓
repeat

Дзеяныя зв’язкі можна тепер адказаць безпасовым двухарку прычымо. У замяне на тое, каб парадоксальна прасіць браузер вычысляць значэнне, яго застосаваць і зрабіць гэта знову, вы працявайце тое, што анімазыя развиваецца па часовай шкале прасування. Цэя ўсё іншая катагорыя API, у якой браузер контролюе больш частка механізма і можа яго оптымізаваць. Как і у разе пазычэння анкера, пераканайцеся ў падтрымцы ў браузерах, якія вы нарабляеце.

Адключэнне JavaScript адмахвае больш, чым проста байты

Скорачэнне JavaScript зазвычай обгаваруецца ў кілабайтах, і гэта мае значэнне, таму што кожны скрыпт павінен працяваць па гэтым ланцюгу перад тым, як зрабіць ўсё корыстнае:

downloaded
    ↓
parsed
    ↓
compiled
    ↓
executed

Але жыцёвы цикл коду прыкладнага програміста продовжваецца дужа дзяўна пасля таго, як ён запускаецца першы раз. Бягаванне, рэалізаванае ў JavaScript, часта прыносіць з сабою:

state
event listeners
synchronization
cleanup
framework lifecycle
hydration
tests

Тепер уявіце, што вбудованы примітіўны тип дозволяе вам выдаліць такую комбінацыю:

state
+
outside-click listener
+
Escape handler
+
DOM synchronization

Код, які быў выдалены, можа важыць лишэнь калькі сотняў байт, але архітектурныя змены є рэальнымі. Ваша аплікацыя больш не падтрымвае такую працэздатнась. Є на адну меншую зменную стану, якая можа стаць застарэлай, на аднаго меншага слухача, якога можна забыць выдаліць, на адну меншую зв’язку DOM, якая павінна заставацца сінхронай з станам, і на адну меншую взаімадзею, якую трэба перабудаваць з нуля, часта з горшай доступнасчы, чым у варыянцы на базе натыўных тэхналогій. Часта самая большая перадчына функцыйі платформы — це не швальнась, а атработкі, якія вы вернулі браузэру.

У платформы няма фінальнай версіі

Адзін з фальшывых уявленняў паяснюе, чаму разработчыкі не зазначаюць гэтыя змены: яны говораюць пра „HTML5“, нібы HTML дасягў пятай версіі і пасля таго перастаў развивацца. Аднак так не ёсць. Не існуе HTML6 у стадіи розработкі, і не трэба чакаць HTML7. HTML падтрымліваецца як жывы стандарт, і спефікацыя постаўляецца ў стані неперывнага развіцця.

CSS таксама прыменяе падобную модэль. Багато разработчыкаў выучылі „CSS3“, але CSS больш не поставляецца як адна вялікая версійная пакетацыя. Адзеленыя модулі розвиваюцца сваім темпам, і самэ гэта прычына, чаму мы бачымо такія назвы без якога-лібо загальнага „CSS6“:

Selectors Level 4
CSS Color Level 5
CSS Cascade Level

У абзацы фрагмента пасляпэўны элемент ўрываецца; модуль Cascading and Inheritance таксама мае свой сопны номер. Пакалі модулі ўзаемна незалежныя, структура сеткі можа развивацца без чакання на селектары, робота з кольорамі ведэцца окрема ад шрыфтов, а запиты к контейнерам выпускаюцца без жадных уявлённых вех CSS4. У масштабах інтернету поступовая эвалюяцыя — ўсё, што ёсць разумным падходам.

JavaScript таксама продовжае развівацца

То ж самае стосуецца і яго мовы. Стандартизаваная спефікацыя — ECMAScript; JavaScript — гэта назва, яку викорыстоўваюць разработчыкі для мовы, яку двайнеры реалізуюць па гэтай спефікацыі. Самэй таго прогрэс описваецца праз версіі ECMAScript, а не па номерам выпускаў „JavaScript“, і новыя можлівасці продовжаюць з’яўляцца.

Такім чынам платформа не застоюецца завдзяк гэй камбінацыі:

HTML5
+
CSS3
+
JavaScript

Усе тры ўровні продовжаюць развівацца. ECMAScript абяраецца лепшыми прімітівамі, CSS адпрацоўвае больш пытанняў распакоўкі, стылювання і взаімадзеяння, а HTML абяраецца семанікай і поведэнням, якія раней аплікацыі реалізавалі самыя. Межа межу ўсёх іх змінюецца з часам, таму ведомыя раней факты пра платформу трэба регулярна аднавляць.

Ведомыя пра платформу застаюцца актуальнымі дыяўольш чым выбор фрэймворку

Этыя можлівасці існуюць пад кожным фрэймворкам. Запыт контейнера працуе аднойчы, незалежна ад таго, чы компонент быў створаны з Angular, React, Vue, Svelte чы проста з коду DOM. :has() не піклуецца пра тое, як быў створаны DOM. Натыўны элемент <dialog> застаецца дыялогам унутрь фрэймворку, а элемент popover — это функцыя браузера, незалежна ад таго, што яго вывела.

Гэта робіць знання працы з платформамі надзвычайна стойкімі. Экспертыза ў викорыстоўванні фрэймворкаў пераходзіць да проектаў, якія іх викорыстоўваюць; экспертыза працы з платформамі пераходзіць майже да кожнага веб-проекту. Гэта не падмаўляе фрэймворкі, якія рашаюць большыя архітектурныя проблемы та проблемы, зв’язаныя з досвядам разработчика. Розумеўшы структуру, якая знаходзіцца пад імі, вы маеце дапаможную альтернатыву, калі абстракцыя не ўпэўнена патрэбна, і, што таксама важна, бачыце, калі саме абстракцыя вам дапамагае. Якщо вы хочаце каталог конкрэтных альтернатыў, наша стаття пра власныя функцыі HTML, якія заменяюць распашчаныя бібліятэкі UI рассказвае пра кожную з іх па чынніку.

Калі власныя рашэння — не правы выбар

Перш чым аж захапіцца, важліва парада: можлівасць стварыць што-небудзь на HTML або CSS не значыць, што трэба гэта робіць. Узгадаймо прыклад выпадаючага меню, якому патрэбны:

• асынхронны пошук;
• сотні віртуалізаваных опцый;
• множына выбора;
• розгарнутая навігацыя за дапамою клавіатуры;
• індывідуальныя правіла фільтрацыі;
• опцыі, якія завантажаюцца з сервера;
• выборы, якія падтрымліваюцца ў синхроназе з станам прыкладнага програмы.

Нямаць простага выпадаючага паверхневага элемента нічым не спрыяе рашэнню гэтай проблемы, а спробы змініць дизайн, каб ухиліцца ад JavaScript, толькі пагаршаюць архітектуру, а не павышаюць яе якасць.

CSS таксама заслуговае на рэалістычнае ставленне. Ён виконвае рэальную работу: форматаванне та атрыбуты не ўтвараюцца безкоштовна, вялічезны DOM застаецца дорогім у обробцы, а паслабна выбраныя анімазіі таксама можу працаваць паслабна.

Таму мета не ў тым, каб викорыстоўваць HTML і CSS ўсючас, калі гэта тэхнічна можліва. Набагато корыстнейшая правіла — гэта:

Ўжыце найніжшы слой, які чыстаўна рашае практычную задачу.

Інодзе цэй HTML, інодзе CSS, інодзе JavaScript, а большасць хорашых прыкладоў практыкаў выкарыстоўвае ўсе тры. Шырокі спосаб прыменення гэтага правіла — запытаць ся па абароту: чы хтось з семантычных элементоў або атрыбутаў выражае гэтаяя поведзенне? Якщо ні, чы CSS можа яго вывучыць з даных, якія вэсьмоў DOM вядомы? Толькі калі адказы на оба запытання «ні», або калі задача перасягае магчымасці натыўнай версіі, поведзенне трэба перанесці ў код прыкладу практыки.

Найпростыяя случаі заслуговуюць на найпростыяя рашэнні

Складныя функцыі будуць і даўжэй адчуваты патрэбу ў JavaScript, і гэта нормальна. Але паўколька такіх функцый большасць дапрацоўак мае сотні незначных взаімадзейнасцей: роздзелы, якія можна расширваць, лёгкія накладнікі, карточкі, якія прыстосоўваюцца да свайго месца, стылізацыя некоректных поль, простыя переходы, адна елемента, якая стежыць за іншай. Калі будзе наявны ўласны елемент, атрыбут чы простая правіла CSS, якая пакрывае адну з гэтых взаімадзейнасцей, вашай дапрацоўке можа вовсе не быць патрэбна ўправа на яе рэалізацыю.

Тое, што JavaScript можа рашыць гэтыя проблемы, не ўсё так важліва; ён можа рашыць практычна все. Ціннае — гэта наявнасць іншага варыянту.

Адкорэктаванне ментальнага моделювання

Большасць разработчыкаў выучылі веб за дапамогою чыстага разпаду працы:

HTML → structure
CSS → presentation
JavaScript → behavior

Это хорашы модэль для навучання, але сённяшныя браузеры маюць большыя можлівасці, чым гэта падазрачае. HTML тепер выконвае певныя функцыі, CSS рэагуе на складныя зв’язкі ў DOM і лейауте, а самы язык продовжвае прабавляць новыя функцыі. Платформа продовжвае змянювалася, нават калі прычыны ўжо не змienяліся.

Большасць гэтых прычын спачатку вважаліся аксіумамі: для адрыхтування элементаў на экрану патрэбны стан прыкладнення, для пазіцыонавання — скрыпты, компоненты можаюць рэагаваць толькі на певныя параметры відобразэння, анімацыі прасування — слухачы. Все гэта можа было быць правдой калісь. Але сёння гэта вже не завжды так.

Самэльга тое, што неабходна быць у курсе новынак HTML і CSS — гэта не проста знаёмства сложнай сынтаксі. Новая можлівасць браузера можа заменіць патрэбнае залежнасць, слухач адзівання, частку стану, об’ект ResizeObserver або будзь-які код, які раней служыў толькі для відтворэння таго, што браузер тепер можа выконваць сам.

Ключовыя выводы

• Браузер продовжае прыемляць такі функцыяны, якія практычна ўсе прыкладнанні неадзін раз пераўтваралі; кожны такі прыем дае вам варыянт з меньшымі виткамі.
• Час адобразавання фрэмаў — це спяльны бюджет, таму ухілэнне ад непатрэбной роботы часта ёсць найэфектывнейшая оптымізацыя.
• Думайце пра правае власнасці: <details>, API Popover і <dialog> з showModal() дазваляюць браузеру кераваць функцыяналам, укладаючы ў сябе таксама деталі доступнасці, якія інакш бы трэба было падтрымваць самостояльна.
• :has() і запыткі контэйнераў дазваляюць CSS реагаваць на стан DOM і размер компонентаў без неабходнасці сінхронізацыі чы ўжо коду для вимеравання.
• Пазыціонаванне анкераў і анімацыі, кераваныя прасуванням, спрямованыя ў той жа направленні, але пераканайцеся ў падтрымцы гэтых функцыянаў у вашам браузеры пры ўжыванні іх.
• Натыўны код не ўсега автаматычна лепш: складныя віджэты все ўсё застаюцца часткай JavaScript, а робота з CSS таксама мае своія виткі.

Перад тым, як дадзіць новую зменную стану, хук, сігнал, дырэктыва, абонента чы ўзалежнасць, спытайцеся, чы платформа вже можа гэта зрабіць, і выкорыстоўвайце найніжшы шар, які чыста задовольняе выкарыстаныя трэбаванні.