Шит фільтрів
Найтихіший файл шару: у жодному зі списків вирішувача - ні «збігається й ніколи не виграє», ні «не збігається ні з чим» - його немає жодного разу. Таких серед 24 організмів три: цей, price-slider і tabbar. При цьому 32 рядки з 47 це коментар, і майже весь він про один дефект: закритий шит стояв у порядку табуляції на кожному екрані лістингу.
Таблиця нижче порожня з механічної причини: зонд читав корінь .fsheet-ov - підкладку, - а в ній нуль елементів, бо підкладка й панель тут сусіди, а не батько й дитина. Сама .fsheet у знятій розмітці тримає 174 елементи, і своїх серед них три: групи фільтра (.fgroup x10, .fmore), 25 чекбоксів (.cb плюс .fopt), 6 чіпів .flink, поля field / field--s / field--mono, повзунок ціни (.uiv-slider / .uiv-track / .uiv-fill) і кнопки - усе чуже. А п'ять імен у цій розмітці не оголошує жоден файл компонентів: .fsheet-body, .frange, .uiv-num, .uiv-rmin, .uiv-rmax.
Усередині кореня жодного класу іншого компонента, і дітей у нього 0. Це не «організм ні з чого не складений» - це корінь, який нічого не містить: затемнення або підкладка, а те, що вона затемнює, лежить не в ній.
Розмітка тут - не переписана від руки. Її знято з design/listing-sheet.html у цій же сесії, обробники зняті, посилання підняті на рівень. Цей організм у спокої не існує - він display: none, доки щось не додасть open, - тож стенд додає цей клас сам. Показано на сцені: трансформований предок стає для position: fixed тим блоком, від якого рахується його inset, тож панель не накриває сторінку й не втрачає жодного свого оголошення.
Показано в рамці шириною 390, і ширина названа не для краси: вона в продукті ховається від 860, тож на широкому стенді малювала б порожнечу. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.
.fsheet-ov - fixed, inset: 0, z-index 50, фарба --scrim-overlay, display: none / .open{ display: block }. До 8.33 у демо її не було, і причина була механічна: збирач ішов деревом панелі, а підкладка їй сусідка, а не дитина. Тепер у рамці стоять обидві, як на listing-sheet.html: 50 під панеллю на 51.fsheet - fixed знизу, z-index 51, max-height: 88vh, радіус 16 тільки зверху. Заміряно при 360: 360x792, а від 860 display: nonetranslateY(100%) плюс visibility: hidden, і visibility вимикається із затримкою на час зсуву. Це та сама редакція трьох рядків, що в .wf-drawer: одна хвороба, одні ліки, двічі написані.fsheet-h - sticky зверху, назва 16 чорна, закриття .x розміром --fs-20 - той самий рядок ще в чотирьох файлах.fsheet-body - клас без файлу: його пише wireframes/_nav.js:1846, і жоден css у системі його не оголошує. Скрол тримає сама панель, тож видимих наслідків немає - але ім'я в розмітці є, а власника в нього немає.fsheet-foot - sticky знизу, > *{ flex: 1 } і .btn--accent{ flex: 2 }. Подвійна частка належить акцентному фінішу, а не позиції в ряду: акцент означає одну дію області, і саме тому вона ширшаОдин !important тут, і ще чотири в шарі
У всьому шарі компонентів рівно п'ять !important, і чотири з них - одна форма: @media гасить панель на дальньому боці межі 860, бо власний .open цього файлу ставить display селектором на клас довшим і без прапорця виграв би. Тут це .fsheet, .fsheet-ov{ display: none !important }, і б'є він свій же .fsheet-ov.open{ display: block }. Пара в filter-rail.css та сама форма з іншого боку тієї самої межі: .hrail-fly.wfh-mega і .hrail-scrim гаснуть нижче 859, бо рейка десктопна, а шит телефонний. П'ятий, у nav-drawer.css, не б'є нічого.| Стан | Що робить | Чому так |
|---|---|---|
| закритий | translateY(100%) плюс visibility: hidden | до 7.34 тут був тільки зсув: заміряно на listing.html при 390 - 14 фокусованих елементів усередині зачиненого шита, а після того як 25 опцій і 10 заголовків отримали свої зупинки, стало 49. Стани праві, шит був не правий |
| відкритий | .open на панелі й на підкладці одночасно | два класи, бо це два сусідні елементи, а не один |
| група розкрита | aria-expanded="true" на 10 заголовках .fh | у знятій розмітці всі 10 груп відкриті: шит показує фільтр цілком, а не по одному |
| опція | 25 .fopt з role="checkbox" і aria-checked, справжнього <input> усередині немає | це контракт checkbox.css і замороженого сірого шару, не шита - але видно його тільки тут, бо тут їх 25 |
| дно | «Скинути» це посилання, «Застосувати (47)» - кнопка; частки 1 і 2 | дві дії й нічого більше, тому розкол належить підвалу, а не класам на дітях |
| від 860 | display: none !important і на панелі, і на підкладці | на десктопі фільтр робить рейка ліворуч |
У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.
@media (min-width: 860px)
Правила вживання, які називають саме цей компонент: U6. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Одна шторка на екран, і вона телефонна половина пари з filter-rail.
.fsheet-body - сторінка, над якою шит відкривається. Свого вигляду в неї немає жодного: вона лише заводить контекст накладання (position: relative; z-index: 0), щоб шит і його скрим лягли поверх неї, а не боролися з тим, що вище в дереві.
Список товарів, над яким відкривається шит фільтрів.
Сторінка звіряє себе з файлом: 4 власні класи і 0 станів.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-shell-wide, уже реєстрове. Що саме міняється: від точки шита немає - фільтри стоять рейкою. Раунд організмів нічого не складав.Робота: ЗВ'ЯЗОК. Рухається: шит підіймається знизу і йде туди ж. Тривалість --dur-slow (330ms), крива --ease-enter / --ease-exit. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.
Один із двох організмів, що вже мали появу і тому піднялись із 220ms на --dur-slow. Прихід на --ease-enter, відхід на --ease-exit. visibility 0s linear var(--dur-slow) лишається нулем навмисно: видимість не анімується, вона лише ЧЕКАЄ, поки шит доїде.
Крок 4. Скрим шита взяв власні --dur-slow і ту саму пару кривих. Панель їхала ще з кроку 3, а темрява за нею з'являлась в одному кадрі - це той стик, який видає, що поверхню зібрано з двох шматків.
Прочитані з filter-sheet.css: 4 семантичні ролі і 6 примітивів.
| Семантичні ролі (4) | Примітиви (6) |
|---|---|
--bg-page --line-hair --scrim-overlay --text-primary | --fs-16 --fs-20 --fw-black --radius-16 --space-12 --space-16 |
| – | --dur-slow --ease-enter --ease-exit |
Порожньо. У списку «збігається з елементами й ніколи не виграє» цього файлу немає, у списку «не збігається ні з чим» теж: 43 оголошення, кожне знаходить свій елемент і кожне виграє. З 24 файлів організмів так виглядають три - цей, price-slider і tabbar, - і в усіх трьох спільне одне: файл маленький і не має другої редакції самого себе.
Чому це варто прочитати як правило
Порожній звіт вирішувача тут не тому, що файл простий, а тому, що він майже нічого не малює сам: 43 оголошення на 174 елементи. Усе всередині належить іншим файлам, і жодне з них цей файл не перевизначає - ні на клас, ні на!important. Організм, який тримає місце і не сперечається з тим, що в нього поклали.Чого бракує
.fsheet-bodyбез власника - ім'я в розмітці, якого не оголошує жоден css. Або воно стає частиною цього файлу, або зникає з розмітки при розморожуванні сірого шару- Шит і рейка - один фільтр двома наборами правил - 47 рядків тут і 57 у
filter-rail.css, спільного файлу немає, а межа в обох одна (860) - У ✕ немає атома -
--fs-20для закриття написано в п'яти файлах окремо - Жодного псевдокласу стану - 25 опцій, 6 чіпів і 4 поля беруть наведення й фокус зі своїх файлів, і це правильно; але перевірити це з боку шита нічим
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.