Порожній стан

Розмітка звідси - та сама, що на listing-empty.html. До 7.73 круглий портрет робила саме секція навколо - правило читало section[aria-label="Результати"], тобто речення інтерфейсу, вжите як селектор. Тепер це каже .empty .ei:has(img): ілюстрація, у якій є зображення. Секція лишається в демо, бо вона є в справжній розмітці, але оформлення вона більше не тримає - перейменуйте ярлик, і нічого не станеться.

За вашими фільтрами нічого не знайдено

Спробуйте прибрати частину фільтрів або оберіть ціль - підберемо безпечний набір.

Очистити фільтри Набір маси Схуднення

.hint - рядок ПІД дією, доданий на 8.30 з coach-session-empty.html, єдиного порожнього стану в продукті, якому є що сказати після кнопки. Це не другий .es: .es каже, ЩО за стан, і стоїть над дією; .hint каже, що буде далі, і стоїть під нею - і вони ніколи не бувають найгучнішими обидва. Найтихіше чорнило і рунґ під тілом: 11.5 -> --fs-12, маргін 14 -> --space-12.

Пунктир виживає тільки в першої. Структура дає всім трьом однакову рамку, а кольоровий блок дві з них перефарбовує в суцільні. Це не помилка сама по собі - у коробки помилки й має бути своя рамка, - але сказано це в двох місцях, і читання структури дає відповідь, якої браузер не вживає.

Три відступи на одну ідею: 40, 46, 48. По одному читачеві в кожного, більшості немає, тож це рішення про значення, а не право вигадати. Так само, як два сірих для заголовків таблиць на 7.46.

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

Файл звався «порожній стан» і тримав дві речі, які порожнім станом не є.

Перший стоїть у дірці, яку йому лишає власне правило SEO-блока: padding-right: 310px від 760 і вище. Дірка була в одному файлі, а ведмідь - в іншому. Другий - обгортка, що обрізає ведмедя по нижньому краю панелі довіри; її другу половину, .uiv-trustbear, trust-strip.css тримав від самого початку.

Жоден з двох класів не оголошено більше ніде в системі, тож переїзд не може зрушити каскад. Перевірено A/B у три проходи на 40 екранах і чотирьох ширинах: нульовий прохід 0, різниця 0. Це переїзд, а не рішення.

.empty - на цілий екран результатів: лістинг, пошук, ціль. .emptybox.mini - усередині картки кабінету. .errbox - коли дані не прийшли, а не коли їх немає.

Порожньо і зламалось - різні речі, і плутати їх не можна. «Нічого не знайдено» це результат вибору людини, і виходи звідти ведуть уперед (зняти фільтр, обрати ціль). «Не вдалося завантажити» це наша поломка, і вихід звідти один - спробувати ще раз.

Правило вище було написане на 7.28 і жоден екран тренера його не читав. .errbox носив один екран у всьому продукті - account-error, - а п'ять екранів помилки тренерського потоку малювали власну коробку. Токен --line-danger-soft мав рівно одне вживання в системі: ту єдину коробку.

Плюс те, що ці екрани домальовували руками: .err-btns .btn{ padding: 13px 24px } - розмір поверх btn--s, той самий, що пішов на 8.30 з .cs-empty .btn; .ord-empty і .ord-err в одному селекторі, тобто одна плашка на дві протилежні роботи; і p.lead на двох екранах клієнтів - це .es під іншим ім'ям, з мірою 42ch на одному й 46ch на другому.

Двом екранам додано гліф ⚠️, який несуть усі інші коробки помилки: коробка, якій компонент фарбує --text-danger, - це коробка, що його чекає. Це рішення про вигляд, не замір, і воно оборотне одним словом у розмітці. Заодно воно тримає правило 8.15 чесним: .errbox немає в селекторі :first-child, бо після цього кроку немає жодної коробки помилки без гліфа, а селектор, що не покриває нічого, - це той самий шум, що й порожній виняток.

Правила вживання, які називають саме цей компонент: U5. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Один порожній стан на екран - але .emptybox це порожнеча блока, і їх буває три на одному екрані (account-empty). Плутати два класи не можна: .empty каже «екран порожній», .emptybox - «порожня ця картка».

.ei--wide - той самий значок порожнього стану, але коли всередині нього малюнок, а не гліф: малюнок читається меншим за той самий розмір, тож коробка росте до 126.

Сторінка звіряє себе з файлом: 9 власних класів і 4 стани оголошено в empty-state.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.

Прочитані з empty-state.css: 10 семантичних ролей і 19 примітивів.

Сім чисел стоять повз шкалу: 1.5px (рамка, тричі), 46px і 48px (відступи), 118px і 126px (кола), 420px і 440px (ширина пояснення). Два останні - одна й та сама межа читабельного рядка, написана двічі з різницею у 20 пікселів.

Усі три коробки просять border: 1.5px. Заміряно при DPR 1, 2 і 3: використане значення скрізь 1px, тоді як 2px лишається 2px. Chrome округлює товщину рамки вниз до цілого CSS-пікселя.

У системі 24 файли пишуть 1.5px, і два з них носять коментар, який пояснює вибір: checkbox.css - «1.5px rather than 1px», radio.css - «1.5px changing shade is legible under a mouse pointer». Різниці, яку код вважає, що робить, у Chrome немає.

aria-label секції несе оформлення, і це слабке місце. Два правила файлу чіпляються за section[aria-label="Результати"] і section[aria-label="Помилка"], тобто за український текст усередині атрибута доступності. Перейменують ярлик - і портрет розсиплеться на емодзі. Той самий клас питання, що обличчя бейджа, яке design/_nav.js виводить з української назви регуляркою.

Якорі: .empty .emptybox .errbox .loadnote

Заміряно на 7.28 в браузері на 360, 390, 720 і 1280 по тодішніх 40 кольорових екранах: 3 + 3 + 1 коробки на п'яти екранах, плюс .loadnote на трьох екранах завантаження. Мертвих селекторів: 0 з 26.

Перезаміряно 16.08.2026 по 88 кольорових екранах: tools/inventory.mjs --screens дає 19 екранів - 14 до кроку 8.39 і 5, що зайшли ним. Числа селекторів, правил і оголошень у шапці зняті кроком 5 із двох джерельних таблиць стилів до розколу, а не з цього файлу, тому вони звідти прибрані, а не переписані: замінити число, метод якого не відтворюється, значить видати здогад за замір.