Таблиця складу
Найважливіший компонент продукту за принципом 1: склад, дозування, походження й алергени - це те, чим довіра доводиться, а не заявляється. І це не одна таблиця, а три, плюс макет самої етикетки.
| Таблиця | Що показує | Як позначено цифру |
|---|---|---|
.ctable | склад: речовина, на порцію, % ДН | за номером колонки - td:nth-child(2), td:nth-child(3) |
.spectbl | характеристики: ключ і значення | за розміткою - td b |
.pl-t | поживна цінність усередині етикетки | за позицією - td:last-child |
Три таблиці в одному файлі й три різні способи сказати те саме. Позиційні селектори ламаються тієї миті, коли в таблицю додають колонку: додайте «на 100 г» між першою і другою - і моноширинна гарнітура поїде на назву речовини. Розмітковий спосіб .spectbl цього не має. Звести їх - етап 09, бо це рішення про те, як пишеться розмітка, а не про CSS.
Розмітка звідси - та сама, що на product.html, скопійована рядок у рядок.
| Речовина | На порцію (30 г) | % добової норми |
|---|---|---|
| Білок | 24 г | 48% |
| BCAA | 5.5 г | - |
| Вуглеводи | 3 г | 1% |
| Жири | 1.5 г | 2% |
Повний склад: суміш сироваткового протеїну (концентрат, ізолят, гідролізат), какао, ароматизатори, лецитин, підсолоджувачі (сукралоза).
Алергени: МОЛОКО, СОЯ
| Бренд | Optimum Nutrition |
| Країна | США |
| Вага | 2270 г |
| Порцій в упаковці | 72 |
Порція 30 г (1 мірна ложка)
| На порцію | % ДН* |
|---|---|
| Білок 24 г | 48% |
| Вуглеводи 3 г | 1% |
| Жири 1.5 г | 2% |
--bg-notice і бурштин. Не червоне: це не помилка, а факт, який мусить бути помітнимtabular-nums на моноширинній нічого не робить
Заміряно в браузері: рядок 1111 8888 при 20px у IBM Plex Mono має ширину 108px і з font-variant-numeric: tabular-nums, і без нього. У Inter та сама строка дає 87.66 проти 109.13.
Це поправка до двох попередніх кроків. 7.36 писав, що .hd-old був «єдиною з восьми закреслених цін, що малює пропорційні цифри», а 7.40 - що .cbsave «отримав табличні цифри». Неузгодженість була справжня, видимого наслідку в неї не було: у моноширинної гарнітури всі гліфи однакової ширини за визначенням, і властивість нічого не змінює. Оголошення нешкідливе, але рахувати його дефектом не можна.
А ось що змінює ширину насправді
word-spacing - і в системі його 20 селекторів у 11 файлах із чотирма значеннями: −0.1em, −0.16em, −0.2em, −0.24em. Усередині цього файлу цифри .ctable кернені на −0.24em, а .spectbl td b і .pl-t td:last-child не кернені взагалі. Драбина без ступенів - етап 09.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | усе, що є | таблиця складу нічого не робить - вона показує |
| наведення | немає, і це відмова | у таблиці немає цілей: жодна клітинка не клікається. Підсвітити рядок означало б пообіцяти дію, якої немає |
| зебра | .spectbl tr:nth-child(odd) - --bg-surface | дев'ять рядків по два стовпці читаються впоперек, і смуга веде око краще за лінію |
| без JS | .pl-hw .pl-ic:empty малює рамку 26x26 | іконки «як приймати» ставить _nav.js. Сьогодні порожніх нуль - але правило не мертве, це запасний шлях |
.specempty | замість таблиці - порожній стан на всю секцію | склад не заповнений. Мовчання не перевіряється, а порожній склад у цьому магазині - не порожнеча, а сигнал |
.et і вторинний колір .es - усе це вже намальовано в empty-state.css. Звідси - рівно одне оголошення, .emptybox.specempty .es{ margin-bottom: 0 }. Значок - clock, а не doc: у наборі всередині doc намальована галочка, а перевіреного документа тут якраз і немаєЯкий із трьох розмірів, і перший доказ довелось відкликати. .empty - на цілий екран, з портретом і рядом виходів; .emptybox.mini - усередині картки кабінету; .emptybox без модифікатора - між ними. Спершу взято .emptybox тому, що він ближчий за висотою до таблиці, яку заміщає. Потім стан зібрали й заміряли зі значком на місці, на 390: таблиця 212.94, .emptybox 243.97, .mini 209.16. Ближчий якраз .mini, на 27px. Довід закреслено, а не перенацілено тихцем, - і доводом він не був ніколи: висота цієї таблиці це дані, чотири рядки в цього товару, а склад на дванадцять рядків перевалить за 400 і не збіжиться з жодним.
Вирішує робота, а вона з даними не міняється. Три розміри - це шкала обсягу: екран, секція, картка. Ця коробка - увесь вміст вкладки «Склад». Записка розміром з картку, сама посеред порожньої вкладки, читається як примітка ні до чого, а .et на 18 замість 16 - саме та сходинка, якою система говорить від імені секції. І це той розмір, якого кольоровий шар не малював жодного разу - усі 3 екземпляри в продукті це .mini, - тобто половина, яку стенд порожнього стану записав як таку, що чекає.
Виходів немає навмисно, і це не глухий кут. В усіх інших порожніх станах за реченням іде ряд .eact, і саме заради нього .es носить margin-bottom: 16. Тут за ним не йде нічого: порожня секція, а не екран, - галерея, ціна, кнопка купівлі й смуга довіри нікуди не поділись. Без правки коробка виходить кривою рівно на ці 16px: заміряно на 390, 47 від верхнього краю до значка проти 63 від останнього рядка до нижнього, висота 259.97. З правкою - 47 проти 47 і 243.97.
Чому .emptybox.specempty, а не .specempty
Це не звичка, а єдина вага, яка працює. .emptybox.mini .es задає ту саму властивість із вагою (0,3,0), тож голий .specempty .es з (0,2,0) їй програє. Заміряно: з .mini коробка виходила 209.16 і з правилом, і без нього - виправлення мовчки не робило нічого. Однакова вага плюс місце нижче в index.css (рядок 66 проти 51 в empty-state) вирішують це в обох редакціях.| Вісь | Значення | Правило вибору |
|---|---|---|
| Етикетка | 720px | Під 720 панель - один стовпець; від 720 - два, 1.05fr проти 1fr, бо ліворуч таблиця з цифрами, а праворуч блоки, і таблиці треба трохи більше. |
| Ширина ключа | .spectbl td:first-child - 200px | Фіксована, щоб значення в дев'яти рядках стали в стовпець. Єдина фіксована ширина в цьому файлі. |
| Прокрутка | .kp-scroll навколо таблиці | Три колонки з довгими назвами речовин не стискаються нижче свого змісту. На 360 таблиця прокручується всередині себе, а сторінка - ні. |
Тільки на сторінці товару, у вкладці «Склад». Це найпряміший інструмент принципу 1 - довіра спершу, потім продаж: людина, яка боїться побічних ефектів, приходить сюди й має піти звідси з відповіддю, а не з рекламою.
Правило
Цифра має бути звіряною. Те, що надруковано на упаковці, і те, що написано на сторінці, - одні й ті самі числа в однаковому вигляді. Саме тому макет етикетки стоїть під таблицею, а не замість неї.Антиправило
Не позначай цифру позицією.td:nth-child(2) означає «моноширинна там, де сьогодні число». Додайте колонку - і правило почне фарбувати слова.Сторінка звіряє себе з файлом: 23 власних класи і 4 стани оголошено в spec-table.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.
Цей контроль уже вдруге пересунув клас між файлами: на 7.43 він відправив .packlabel сюди з product-card.css, а на цьому кроці - .dl / .dk / .dv звідси в order-row.css. Заміряно: 19 екземплярів, усі на account-orders.html у панелі деталей замовлення, і 0 на сторінці товару.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col. Що саме міняється: панель складу і панель «як приймати» стають поруч. Було 720, поза реєстром. Колонки задані як 1.05fr і 1fr - навмисна асиметрія, якої auto-fit не вміє сказати, тож це лишається точкою. Зміряно на 620 із примусовим запитом: 246.9 + 235.1, нічого не обрізано.Прочитані з spec-table.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (18) | Примітиви (24) |
|---|---|
--bg-inverse --bg-inverse-soft --bg-inverse-tint --bg-notice --bg-surface --fade-page --line-hair --line-inverse --line-notice --line-oninverse-soft --line-strong --text-body --text-muted --text-oninverse --text-oninverse-muted --text-primary --text-secondary --text-warning | --container-text --font-display --font-mono --fs-12 --fs-14 --fs-24 --fw-black --fw-bold --fw-semibold --lh-airy --lh-flat --lh-snug --ls-caps --ls-lead --radius-12 --radius-4 --radius-8 --size-26 --space-12 --space-16 --space-2 --space-24 --space-4 --space-8 |
У .ctable перший рядок - th, і решта рядків без thead: таблиця маленька, а зайвий рівень нічого не додає ані очам, ані скринрідеру, який читає th як заголовок і без нього.
Якорі: .ctable .spectbl .packlabel
Заміряно в браузері на 390, 720 і 1280: по одній кожної на двох кольорових екранах - product і product-coach.
Чого бракує
- Два сірих у заголовків таблиць:
.ctable thбере--text-muted,.pl-t th---text-secondary, при однакових 12px, 700, капсі й--ls-caps. По одному читачу в кожного, більшості немає - тож це рішення про значення, а не привід його вигадати word-spacing: чотири значення в 11 файлах - див. вище- Три способи позначити цифру - за колонкою, за розміткою, за позицією. Звести їх означає домовитись, як пишеться розмітка
- Файл тримає чотири різні речі: три таблиці й макет упаковки на 30+ правил. Той самий вид, що банер. Розбити - Крок 6
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.