Смуга довіри
Чотири мікросигнали під ціною: оригінал, сертифікат, доставка, повернення. Принцип 1 у найкоротшій формі - зняти сумнів раніше, ніж запропонувати дію. Файл тримає ще дві речі: акордеон блоку довіри і полицю кошика, і третя тут зайва.
Розмітка звідси - та сама, що на product.html, скопійована рядок у рядок. Іконки й ведмедя ставить не сторінка: їх додає uivPdp() з design/_nav.js, і тут повторено ті самі два виклики uivWrap(), бо uivPdp() шукає коренем main.wf-page, якого в стенда немає.
.uiv-ic, атом. Займає першу колонку і обидва рядки сітки: grid-row: 1 / span 2, тому підпис і опис стоять праворуч від неї одним блоком, а не обтікають<b>, 14/600 --text-primary. Обіцянка одним рядком<span>, --text-secondary. Селектор .tsx span:not(.uiv-ic), бо іконка теж <span>: без :not() правило другого рядка лягало б і на неїbox-shadow: inset. Рамка додала б 1px до розміру плитки, тінь ні, і сітка лишається рівною.uiv-trustbear у .uiv-bearwrap, що обрізає тулуб по нижньому краю панелі, а голову лишає цілою над неюБлок @media (max-width: 479px) стояв вище базових правил .tsx. Три його оголошення все одно вигравали - бо їхні власні бази стоять ще вище. Два про іконку не вигравали: .tsx .uiv-ic тут і .tsx .uiv-ic там мають однакову вагу (0,2,0), і бере пізніший, а пізніший був десктопною коробкою 44px.
| Оголошення в блоці | Його база стоїть | До 7.47 | Після |
|---|---|---|---|
.truststrip{ grid-template-columns: 1fr } | вище блоку | діяло | діє |
.tsx{ padding: 12px } | вище блоку | діяло | діє |
.tsx:nth-child(even), .tsx:nth-child(4){ box-shadow: none } | вище блоку | діяло | діє |
.tsx .uiv-ic{ width/height: --size-38 } | нижче блоку | мовчало, малювалось 44 | 38 |
.tsx .uiv-ic svg{ width/height: --size-20 } | нижче блоку | мовчало, малювалось 23 | 20 |
Заміряно в браузері, не виведено з файлу. На product.html при 360 і 390 коробка виходила 44x44 з гліфом 23px там, де блок просить 38 і 20. Межу перевірено окремо: на 479 коробка 38, на 480 вона 44, на 720 сітка стає чотириколонковою. Нічого нового не з'явилось - блок просто став туди, звідки може діяти.
| На 360 | Було | Стало |
|---|---|---|
| коробка іконки | 44x44 | 38x38 |
| гліф | 23x23 | 20x20 |
| колонка тексту | 230px | 236px |
| висота плитки | 68px | 66.38px |
| висота смуги | 290px | 283.5px |
Шість пікселів, які іконка віддала, дістались підпису: колонка тексту не звузилась, а розширилась. Це і був сенс правила, якого ніхто не бачив три етапи.
Третій випадок поспіль
Оголошення, яке існує і не доходить до браузера: 7.42 - зайвий закривач коментаря зжер правило під собою; 7.46 - той самий@media блок оголошено двічі; 7.47 - блок стоїть не там. Жодного з трьох не можна знайти читанням файлу, усі три знайдено питанням до браузера.| Ширина | Колонок | Що малює лінії |
|---|---|---|
| 720+ | 4 | .tsx + .tsx - вертикальний шов зліва в кожної, крім першої |
| 480-719 | 2 | :nth-child(even) - шов зліва, :nth-child(n+3) - шов згори, :nth-child(4) - обидва |
| 479 і вужче | 1 | вертикальні гасяться, .tsx + .tsx дає горизонтальну лінію |
Тінь замість рамки навмисно: inset не входить у розмір коробки, тож плитки лишаються однаковими на будь-якій ширині, а лінія завжди рівно одна на стик.
Той самий файл тримає .trustsec - секції блоку довіри під смугою. Вісім штук на двох екранах товару, усі відкриті за замовчуванням: принцип 1 не ховає склад під клік.
Дозування ▾
Походження ▾
Сертифікація ▾
.chev у відкритої повернута на 180°, у закритої ні. Під курсором заголовок сідає на --bg-sunken, а стрілка йде в акцент - клікабельний увесь рядок, а не значокРідну стрілку <details> знято через ::-webkit-details-marker: інакше поруч стояли б дві. Печатка на сертифікаті - .uiv-seal, її теж ставить uivPdp(), і в кольорі вона рендериться 3 рази.
Третій блок файлу. Показано з реальною розміткою home-cart.html.
.q на мініатюрі: помаранчевий кружок 16x16, цифра моноширинна, чорнильна| Що | Було | Стало | Контраст на #FF5A00 |
|---|---|---|---|
.cshelf .cs-th .q | --text-oninverse | --text-body | 3.13:1 -> 5.45:1 при 10px |
Джерело названо. DESIGN-artifacts.md тримає запертe правило «мітка на помаранчевій заливці = біла, на будь-якому розмірі» і рядок одразу під ним: маленькі помаранчеві речі, які не кнопки - бейджі, лічильники, тег «Новинка» - лишають чорнильну мітку, бо там помаранчевий є маркером, а не дією.
І це був єдиний виняток. Прочитано з розібраного CSSOM: 18 селекторів в 11 файлах заливають --bg-action і називають колір мітки. Розкол іде рівно за писаним правилом - кнопки беруть біле (.btn--accent, .hd-cta, .tbuy, .pages a.on), маркери чорнило (.tag-new, .chip.on, .ptab.on, .hb, .tbadge, .acc-link[aria-current], .mtoolbar .mc .b). Виняток був один, тут.
Що перевірено і зроблено не було
Лічильник полиці не злито з атомом лічильника..hb/.tbadge це 15x15 текстовою гарнітурою з білим кільцем, а це 16x16 моноширинною і без кільця. Два лічильники, схожі, але не однакові за формою; зводити геометрію - Крок 6, після етапу 09.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | градієнт від --bg-sunken до --bg-surface, волосяна рамка, радіус 16 | смуга не картка товару: вона тло під обіцянками, тому світлішає догори й не має тіні |
| наведення на плитку | тло --bg-onphoto, іконка піднімається на 2px і йде в акцент | «сертифікат» і «повернення» ведуть у документ; плитка показує, що на неї можна натиснути, ще до того, як палець дійде |
| наведення на заголовок секції | --bg-sunken + стрілка в акцент | ціль - увесь рядок, а не значок 12px |
[open] | стрілка на 180°, під заголовком волосяна лінія | лінія з'являється тільки коли є що відділяти |
.more | мініатюра без фото, «+N» моноширинним | третя і далі позиції кошика не показуються поштучно: полиця нагадує, а не перелічує |
| натискання | немає власного | плитка й заголовок віддають натиск атомам усередині; окремий стан тут дублював би посилання |
Сертифікація ▾
Чому «Сертифікат» лишився, а змінився тільки другий рядок. voice/docs/voice.md:257 забороняє недоведений claim поіменно - «сертифіковано» гаслом, без файлу - і ставить поруч нашу відмінність: доводити, а не заявляти. Плитка, яка каже «переглянути» там, де переглядати нічого, це рівно такий claim. Обіцянка магазину не змінилась, змінилось те, що він може показати сьогодні, і рядок каже саме це.
Наведення більше не має винятку, і це запис про видалення. До кроку 6 два правила наведення несли :not(.tsx--unproven): плитка, за якою ще немає документа, не піднімала іконку й не міняла тло, бо «підйом вказує на щось справжнє, а на «уточнюємо» за ним нема нічого» (7.72: «роль - це обіцянка про те, що робить контрол»). Замір кроку 6 показав, що модифікатор не носить жоден екран у жодному з двох шарів - .tsx рендериться на трьох, він на нуль, - тож обидва :not() були завжди істинні й пішли разом з класом. Жодна плитка не зрушила: 290 x 66.38 плитка, 38 x 38 коробка іконки, 308 x 283.5 смуга на 390, до сотої - ті самі числа, що були заміряні, коли виняток додавали. Чого система тепер не вміє: відрізнити доведений знак довіри від недоведеного. Це в backlog.md.
Що лишилось і належить не цьому файлу
Значок другої плитки досіdoc - аркуш із галочкою всередині. Галочка це знак перевірки, а перевіреного документа тут якраз немає. Порядок значків shield · doc · truck · ret ставить uivPdp() в design/_nav.js, а не таблиця стилів, тож у цьому кроці його не чіпано й не домальовано наперед: демо вище показує рівно те, що поставив би продукт.Смуга - на сторінці товару, під ціною і перед складом. Рівно чотири сигнали: п'ятий на 360 дає п'ятий екран прокрутки, а сумнів знімає перший, не останній. Не на лістингу - там довіру несе картка. Не в кошику - там людина вже вирішила.
Акордеон - тільки в блоці довіри товару. Полиця - тільки на головній, і тільки коли кошик не порожній.
Правило
Кожен сигнал перевіряється. «Сертифікат» веде в документ, «доставка» називає строк, «повернення» - кількість днів. Смуга з чотирьох слів без наслідків - це декор, а не довіра.Антиправило
Не додавайте п'яту плитку і не робіть її яскравою. Помаранчевий тут заборонений: смуга знімає сумнів, а не продає, і принцип 4 не дозволяє їй кричати.Правила вживання, які називають саме цей компонент: U8 · U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Полиця забирає головну дію сторінки собі. Ряд її дій береться патерном .actions; власний gap у 8 лишився в цьому файлі і чекає рішення власника.
Сторінка звіряє себе з файлом: 19 власних класів і 4 стани оголошено в trust-strip.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці. .uiv-bearwrap у списку немає навмисно: він у демо рендериться, але оголошений не тут, і саме тому стоїть нижче в переліку прогалин.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від яких порогів: обох, і п'ять чисел файлу зникли - 479, 559, 719/720, 1180, жодного з них не було в реєстрі. Що саме міняється: смуга йде 1 → 2 → 4 колонки на двох точках; ряд дій бере власну лінію нижче вузької; від широкої з'являється талісман. Колонки лишились ТОЧКАМИ, і це драбина каже «ні» з причини, яку варто записати: волосини між клітинками намальовані тінями черезnth-child, тобто мусять ЗНАТИ кількість колонок, а auto-fit - саме той механізм, що робить її невідомою для CSS. Перемалювати лінії рамкою клітинки було іншим шляхом і його не взято: це міняє те, як намальована кожна лінія смуги, а приймання раунду міряється в пікселях. А талісман не склався просто так: з повним резервом 150px на 860 чотири клітинки виходять 167 і дві обрізають текст. Тож резерв і кроп-бокс ведмедя стали пандусами - 108px на 860 → 150 і 180 на 1180, - і тепер клітинки 177.5 і не обрізає нічого. Кроп-бокс для того й існує, щоб різати цього ведмедя, тож різати сильніше там, де менше місця, - це механізм робить свою роботу.Робота: ВІДПОВІДЬ. Рухається: фон смуги, transform і колір позначки. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Стрілку розділу повертає .trustsec[open] - той самий шеврон з icon.css.
Прочитані з trust-strip.css, не переписані руками: 16 семантичних ролей і 30 примітивів. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (16) | Примітиви (33) |
|---|---|
--bg-action --bg-onphoto --bg-page --bg-sunken --bg-surface --elevation-1 --elevation-control --line-action --line-hair --line-inverse --text-action --text-body --text-muted --text-onaction-ink --text-primary --text-secondary | --container-text --dur-fast --ease-standard --font-display --font-mono --fs-10 --fs-12 --fs-14 --fs-16 --fs-18 --fs-20 --fs-8 --fw-black --fw-semibold --lh-snug --ls-lead --radius-12 --radius-16 --radius-8 --radius-circle --radius-pill --size-20 --size-30 --size-38 --size-40 --size-44 --space-12 --space-16 --space-2 --space-24 --space-32 --space-4 --space-8 |
Іконки в розмітці немає: сторінка називає обіцянки, а uivPdp() ставить чотири знаки в порядку shield · doc · truck · ret і додає ведмедя. Тому порядок плиток у розмітці задає, який знак стане на яку, і переставити їх місцями означає переставити іконки.
Якорі: .truststrip .trustsec .cshelf
Заміряно в браузері на 360 і 1280 по всіх 40 кольорових екранах: смуга 3 рази (product, product-oos, product-coach) і 12 плиток; акордеон 8 секцій на двох (product, product-coach); печатка 3 (додається product-reviews, де смуги немає); полиця 1 на home-cart з трьома мініатюрами й двома лічильниками.
Мертвих селекторів: 0 з 42. Кожен селектор файлу знаходить розмітку хоч на одному екрані. .chev живе ще й поза цим файлом (8 разів на account-orders), але правило тут прив'язане до .trustsec > summary і туди не тече.
Чого бракує
- Полиця кошика лежить не у своєму файлі.
.cshelfце блок головної, а не сигнал довіри: 11 селекторів, один екран,home-cart. За логікою 7.44 його місце вbanner.css, який уже названо таблицею стилів головної. Знайдено, не рухано: це рішення, а не наслідок цього кроку - Обгортка ведмедя оголошена в чужому файлі.
.uiv-bearwrapмає рівно одного виробника -design/_nav.js:997, який чіпляє його до.truststrip, а два його правила стоять уempty-state.css. Той самий клас питання, що.packlabelна 7.43 і.dl/.dk/.dvна 7.46 - Розміри гліфів літералами. 23px в іконки смуги вище 480, 22px у візка полиці, 17px у печатки - три числа повз шкалу
--size-*, якою користується решта файлу
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.