Геометрия: стандарт и проверка

Геометрия — договорённость о размерах и выравнивании, которую можно проверить замером. Здесь — стандарт геометрии, как его проверяют и как он связан с остальными правилами.

Геометрия: стандарт и проверка

Стандарт геометрии собирает правила этой части в проверяемый набор и подтверждает их замером в браузере. Он убирает мелкие расхождения в размерах и выравнивании, которые делают продукт небрежным.

Зачем стандарт

Мелкие расхождения (картинка в одном месте на 2 px меньше, чем в другом, подпись на 3 px в стороне) видны глазу, даже когда их никто не может назвать. Стандарт геометрии убирает их построением и проверяет замером. Он действует для каждого компонента при каждом изменении.

Стандарт собирает правила этой части в четыре пункта:

1. Одна лестница. У каждого размера фиксированы размеры всех частей (Части компонента — тоже со ступени).
2. Отступ отдаёт место рамке. Вертикальный отступ = (H − L) / 2 − рамка (Отступ внутри контрола и общие оси).
3. Связанные части на общих осях. Поле и список, подпись и контрол, строка и заголовок (Отступ внутри контрола и общие оси).
4. Проверка по нарисованному результату.

Мерить результат, а не механизм

Правильное правило в CSS ещё не гарантирует правильную картинку: соседний стиль, шрифт или рамка могут её сдвинуть. Поэтому проверка двойная:

• Контрактный тест держит механизм — правило, которое производит геометрию.
• Браузерный замер держит результат: открывает тестовую страницу и измеряет нарисованное для каждого вида, размера и оформления на настольной и на мобильной ширине с нулевым допуском. Замеряют после загрузки шрифтов и завершения переходов.

Замеры сравнивают выпадающее поле с его списком, поля разных видов в одной колонке, кнопки и теги рядом с полем, флажок, радио и переключатель рядом с полем, вкладки и пагинацию, строки списка и пункты меню.

• Изменение компонента не закончено, пока его размеры не сверены с лестницей, а связанные части — друг с другом.

Арифметика, устойчивая к записи переменной

Если проект может задать переменную, а правило потом с ней считает, расчёт не должен ломаться от того, как проект её записал. Безразмерный 0, вычтенный из длины, делает весь calc() недействительным, и объявление пропадает.

• Нулевую длину пишут как calc(var(--sf-px) * 0).
• Переменную, в которую пишут голый 0, регистрируют как длину через @property с syntax: '<length>'.

Порядок при изменении компонента

1. Перечислить части компонента для каждого размера и сверить с лестницей.
2. Проверить, что вертикальный отступ отдаёт место рамке, а высота равна H.
3. Найти все связанные пары (поле и список, подпись и контрол, кнопка и панель) и измерить общие оси на настольной и мобильной ширине.
4. Записать механизм в контрактный тест, добавить или расширить браузерный замер.

Смотрите также

• Одна лестница размеров — лестница размеров.
• Отступ внутри контрола и общие оси — отступ внутри контрола и общие оси.
• Что держат проверки — проверки, которые держат правила.

Как это связано

Эта глава сводит величины части в одну цепочку и показывает, какие проверки её держат. Она помогает предсказать, что изменится при изменении одного звена.

Цепочка величин выглядит так:

примитив (rem)
  └─ ступень адаптивной шкалы (моб. / наст.)
       ├─ кегль и высота строки → роли текста
       │     └─ высота строки S → высота контрола S → размеры частей контрола
       ├─ интервал → роли интервалов потока
       │     └─ отступ блока N ─┐
       └─ радиус N ─────────────┴→ правило вложенности

Практические следствия:

• изменили кегль ступени 1 — изменились высоты контролов 1, иконки в них и отступы, и всё осталось в одну линию;
• изменили шкалу интервалов — поток текста и вложенные блоки перестроились вместе;
• изменили роль фокуса, границы или радиуса — изменение дошло до всех компонентов, потому что ни один не держит своего значения.

Что держат проверки

Смотрите также

• Вертикальный контракт — вертикальный контракт.
• Геометрия: стандарт и проверка — стандарт геометрии.
• Жизненный цикл изменений и совместимость — совместимость имён при обновлении.