Шухляда меню
Це не діалог, а <nav aria-label="Меню"> з класом .open: крок 7.85 навмисно не дав їй role="dialog", бо назвати панель діалогом це рішення про семантику, а не ремонт поведінки. Панель лежить у розмітці 34 кольорових екранів у спокої - 331 елемент на кожному, - і закрита вона не через display, а через translateY(-100%) плюс visibility: hidden, тобто по-справжньому вийнята з порядку табуляції. Верхній край панелі міряється живим кодом (wfDrawerTop() публікує --dr-top), нижній - написаний числом 57px.
Усередині кореня чужого майже немає: чіпи цілей з chip.css і один неоднозначний клас. Список короткий не тому, що панель проста, а тому, що .ar, .uiv-ic і .strong цей файл називає сам, тож зонд рахує їх своїми - при тому що .ar названо у семи файлах, а .strong ще й у cart-row.css.
| Файл | Класів | Які саме |
|---|---|---|
chip.css | 2 | .dr-chip .dr-chips |
1 клас усередині кореня має більш ніж одного власника, тож із коду не видно, чий вони: .uiv-trail
Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень. Цей організм у спокої не існує - він display: none, доки щось не додасть open, - тож стенд додає цей клас сам. Показано на сцені: трансформований предок стає для position: fixed тим блоком, від якого рахується його inset, тож панель не накриває сторінку й не втрачає жодного свого оголошення.
Показано в рамці шириною 390, і ширина названа не для краси: вона в продукті ховається від 860, тож на широкому стенді малювала б порожнечу. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.
.wf-drawer - fixed, z-index 29, top: var(--dr-top, 56px), bottom: 57px, --elevation-3, перехід 220ms. 56 це запасне значення на перший кадр, а не друга думка: справжнє число пише openBurger() з живого виміру нижнього краю шапки.dr-city зверху і 10 .dr-link знизу; .dr-link.strong робить одне з них чорним. Між ними три підписи .dr-lbl - 12 моно, каптал, --ls-caps.dr-catwrap / .dr-cat - 12 рядків, у кожному знак .dc-ic шириною --size-20 і стрілка .ar праворуч. Кнопка кожного рядка несе aria-expanded, яке переписує toggleDrCat().dr-subs - display: none, вмикає клас .open. У знятій розмітці 68 .dr-sub і 12 .dr-suball («Усі: категорія»), відступ зліва 29px - число поза шкалою.dr-cat .dc-ic .uiv-ic - чорнило --text-body, а не акцент: акцент у цій панелі витрачено на чіпи цілей вище, де й лежить вибір. Те саме речення про той самий список каже cat-overlay.csshtml.dr-lock - overflow: hidden на кореневому елементі. Ставить і знімає openBurger() / closeBurger(); саме через це правило приїхало сюди з cart-drawer.css на 7.26 - кошикова шухляда його не чіпаєНижній край написано числом, і число не те
bottom: 57px резервує місце під нижню панель вкладок. Заміряно .wf-tabbar на кольоровому шарі при 360: 59px. Сама tabbar.css висоти не оголошує взагалі - вона складається з падінгів, вмісту й env(safe-area-inset-bottom), тобто на телефоні з домашньою смугою стає ще вищою. 57 написано в трьох файлах: тут, у cat-overlay.css і в toolbar.css. Це рівно та хвороба, яку 7.26 вилікував зверху: висоту оболонки перестали писати числом і почали публікувати як --shell-top / --dr-top. Знизу цього ще не зробили.!important, якому нічого бити
@media (min-width: 860px){ .wf-drawer{ display: none !important } }. У шарі компонентів усього п'ять !important, і чотири з них однієї форми: панель гасять на дальньому боці межі, бо її власний .open ставить display селектором на один клас довшим. Тут бити нічого: display на .wf-drawer не оголошено більше ніде - ні в цьому файлі (.wf-drawer.open міняє тільки transform і visibility), ні в жодному іншому css під design/. Прапорець скопійовано за формою сусідів.| Стан | Що робить | Чому так |
|---|---|---|
| закрита | translateY(-100%) + visibility: hidden, і visibility вимикається із затримкою 0s linear .22s | саме visibility прибирає зсунуту панель з табуляції; шит фільтрів має цю саму редакцію тих самих трьох рядків |
| відкрита | .open: translateY(0), visibility: visible, затримки немає | з'являється одразу, а зникає лише після того, як від'їхала |
| вітка розкрита | .dr-subs.open вмикає список підкатегорій; знак ＋ / － на кнопці переписує toggleDrCat() разом з aria-expanded | у знятій розмітці всі 12 закриті: у спокої панель показує тільки перший рівень |
| сторінка замкнена | html.dr-lock - сторінка під панеллю не скролиться | клас на <html>, а не інлайновий стиль: сусідній оверлей каталогу той самий замок робить через body.style.overflow |
| від 860 | display: none !important | на десктопі цю роботу робить мега-меню |
| наведення й фокус | у файлі жодного псевдокласу | 12 кнопок категорій і 97 посилань у знятій розмітці беруть кільце фокуса звідкись іще, і цього файлу це питання не питає |
У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.
@media (min-width: 860px)
Правила вживання, які називають саме цей компонент: U1 · U2. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Одна шухляда на екран; у флоу оформлення і на службових сторінках її немає.
Сторінка звіряє себе з файлом: 11 власних класів і 1 стан.
.dr-lock стоїть у станах, а не в класах: його дописує classList.add на сам <html>, поки шухляда відкрита, щоб сторінка під нею не прокручувалась. Стенд не може його показати навіть теоретично - намалювати його означало б заблокувати прокрутку цієї сторінки, а не демо. Тому він названий, а не відрендерений.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-shell-wide, і воно вже стояло на реєстрі. Що саме міняється: від точки шухляда не потрібна - навігація переїжджає в шапку (форма A, крок 3). Раунд організмів тут нічого не складав.Робота: ЗВ'ЯЗОК. Рухається: шухляда виїжджає згори і йде туди ж. Тривалість --dur-slow (330ms), крива --ease-enter / --ease-exit. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.
Другий організм із появою. Та сама пара кривих і та сама затримка видимості, що в шита фільтрів.
Крок 4: акордеон, і його висота НЕ анімується. height і max-height коштують розкладки щокадру, а цей список стоїть усередині прокрутної шухляди, де кожне відкриття штовхає все під собою; пак виключає цей клас поіменно. Тому рядки проявляються на --dur-base, а розкладка сідає під ними за один кадр. Куплено чесно й небагато: оку сказано, що прийшов новий вміст, а не проведено крізь його прихід. Шеврон поруч уже повертається на тому самому числі.
Прочитані з nav-drawer.css: 7 семантичних ролей і 17 примітивів.
| Семантичні ролі (7) | Примітиви (17) |
|---|---|
--bg-page --elevation-3 --line-hair --text-body --text-muted --text-primary --text-secondary | --dur-base --dur-slow --ease-enter --ease-exit --fs-12 --fs-14 --fs-16 --fw-black --fw-bold --fw-semibold --ls-caps --size-20 --space-12 --space-16 --space-2 --space-32 --space-8 |
Вирішувач: жодного оголошення, яке збігається з елементом і не виграє. Усе, що цей файл малює, він і виграє. Не збігаються ні з чим 10 оголошень, і всі десять - у трьох правилах: .wf-drawer.open, html.dr-lock і .dr-subs.open. Тобто це не мертвий код, а три стани, яких жодна сторінка не малює в спокої: перепис обходить екрани зачиненими, а панель відкриває палець. Різницю між «немає в продукті» і «є, але не в спокої» видно тільки так - зі списку правил, а не з екрана.
Чого бракує
- Без
roleіaria-modal- 7.85 залишив це рішенням про семантику і записав його, а не тихо дописав:<nav>з міткою і діалог це різні обіцянки читачеві екрана - 57 знизу проти 59 заміряних - або нижня панель публікує свою висоту, як шапка публікує
--shell-top, або число лишається в трьох файлах !importantбез опонента - знімається без наслідків, але це видно тільки вирішувачем, тож крок окремий- Жодного стану наведення чи фокуса - 12 кнопок і 97 посилань панелі не мають у цьому файлі нічого свого
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.