Принципы
Несколько решений, на которых стоит кит. Они объясняют, почему компонент ведёт себя так, а не иначе, и чего от него ждать.
Облик — Material Design 3#
Кит не придумывает свой дизайн, а следует Material Design 3: цвет ролями, шрифт шкалой, скругления формами, тени уровнями возвышения, наведение и нажатие слоями состояний. Всё это — токены --md-sys-*, которые сервер печатает в голове страницы.
Движение — по образцу MUI: рябь от точки нажатия, плавающая подпись поля, меню, вырастающее из угла у кнопки, выезжающая шторка. Подробности — в разделе Движение.
Сервер решает, браузер показывает#
Каждый экран целиком собирается на сервере. Активная вкладка, раскрытая ветка дерева, ошибка поля, текущая страница списка — всё это поля модели, а не состояние скрипта.
Активная вкладка — поле модели, а не скрипт
Вкладки = Новый Массив();
Вкладки.Добавить(Новый Структура("Подпись, Адрес, Активна", "Описание", "/проект", Истина));
Вкладки.Добавить(Новый Структура("Подпись, Адрес, Счётчик", "Редакции", "/проект/редакции", 12));
HTML = Набор.Табы().Отрисовать(Новый Структура("Вкладки", Вкладки));Скрипт только улучшает#
Без скрипта страница работает целиком: формы отправляются, меню и диалоги открывает движок браузера по атрибутам popover и command, раскрывашки — нативный <details>.
Скрипт кита oscript-ui.js добавляет четыре вещи: рябь, пустоту поля для плавающей подписи, тень шапки при прокрутке и скольжение индикатора вкладок между страницами. Отключите его — пропадёт движение, но не функция.
Закрытые наборы#
Вид, вариант, размер, роль — значения из закрытого списка, а не имена CSS-классов. Неизвестное значение кит не печатает молча пустым классом, а останавливает сборку исключением с подсказкой, какие значения есть.
Вариант — слово из списка, а не класс
HTML = Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Отмена", "вторичная"));Так опечатка в виде даёт ошибку у разработчика, а не неоформленный экран у человека.
Безопасно по умолчанию#
- Весь текст модели экранируется. Доверенный HTML принимают только поля, где это сказано явно.
- Адреса ссылок проверяются:
javascript:и подобные не печатаются. - Цвет из cookie или профиля попадает в CSS только после проверки формата: инъекции в
<style>не пройдут. - Адрес отправки формы — только своего приложения: вместе с формой уходит токен CSRF.
Байт в байт#
Одна и та же модель даёт одну и ту же разметку. Новая возможность кита не меняет разметку тех, кто ею не пользуется: тесты сравнивают такие места байт в байт.
Проверено тестами#
Кит проверяет себя больше чем двумя сотнями тестов. Среди них — соответствие Material: все роли цвета в обеих темах, читаемость пар ролей на девяти акцентах, шкала шрифта, отсутствие в листе цветов, скруглений, теней и длительностей мимо токенов. Страницы этой документации тоже под тестом: каждый образец на них обязан собираться.