Мастер настройки тем

Архитектура модуля и технические параметры

Мастер настройки тем на платформе Carafan.ru базируется на компонентной микроархитектуре, где каждый блок — оболочка для CSS-каскадов и JS-обработчиков. В отличие от монолитных решений, где изменения темы затрагивают всю DOM-структуру, здесь используется изолированный Shadow DOM для каждого виджета. Это гарантирует, что замена палитры или толщины обводки не сломает соседние элементы.

• Форматы шрифтов: внедрены только WOFF2 и WOFF2+ZSTD (сжатие без потерь). Поддержка TTF отключена для снижения размера загружаемого пакета на 40–60% в зависимости от кеглей.
• Цветовые пространства: модуль работает исключительно в sRGB (IEC 61966-2-1) с возможностью переключения на Display P3 для мониторов с широким охватом. Калибровка оттенков привязана к профилю ICC v4.
• Единицы измерения: все размеры виджетов задаются в rem и ch, что гарантирует бесшовную адаптацию под текущий кегль браузера. Пиксельные px допускаются только для толщины границ (border-width).

Спецификация материалов и допустимые операции

Каждая тема — это набор JSON-манифестов с привязкой к сессионному токену пользователя. Мастер обрабатывает не более 8 одновременных изменений виджетов без пересборки CSS-файла — при превышении лимита изменения объединяются в один batch-запрос. Это обеспечивает стабильность FPS на уровне 120 кадров/с при анимациях перехода, в отличие от аналогов (например, Themely или ColorMe), где заметны просадки до 30 FPS.

1. Запись изменений производится через MutationObserver с задержкой Debounce в 150 мс, что исключает конфликты при быстрой замене параметров.
2. Все пользовательские данные (например, логотип или фон) проходят преобразование в WebP (lossless) или SVG-спрайты через серверный pipeline на основе libvips 8.15.
3. Размер одного сохранённого профиля темы не превышает 32 кБ — это в 4 раза меньше, чем у стандартных решений на базе full-page CSS inject.

Отличия от альтернативных конструкторов тем

Основное отличие мастера от аналогов — отсутствие перезагрузки страницы при применении настроек. Конкуренты (например, ThemeBuilder от Wix или FluidThemes) используют инъекцию inline-стилей в head, что увеличивает кумулятивный сдвиг макета (CLS). На Carafan.ru применяется технология CSS Custom Properties с привязкой к :root — перекрашивание происходит мгновенно, без пересборки StyleSheet.

• Безопасность данных: в отличие от решений, где виджеты обращаются к сторонним CDN, все ресурсы (градиенты, текстуры, маски) хранятся в BLOB-таблицах PostgreSQL 16 с шифрованием AES-256-GCM.
• Качество рендеринга: используется Subpixel-рендеринг для границ и теней. В ThemeX и LiveColor от Apple часто возникают артефакты на весах 0.5px — мастер платформы округляет до 1px, сохраняя чёткость при DPI от 1x до 3x.
• Стандарты доступности: при выборе шрифта или цвета автоматически проверяются контрасты WCAG AA (соотношение 4.5:1) и AAA (7:1). Если сочетание не проходит — система блокирует выбор и предлагает ближайшие допустимые комбинации.

Производственные стандарты и контроль качества

Каждая новая тема или виджет перед публикацией проходят цикл валидации из 4 этапов:

Этап 1: статический анализ кода через ESLint (набор правил airbnb-base) и Stylelint (стандарт order/properties-alphabetical). Обнаружение устаревших CSS-функций (например, calc без кастомных свойств) приводит к автозамене.

Этап 2: визуальное регрессионное тестирование в Puppeteer на 12 эмуляторах (браузеры Chromium 120+, Firefox 122+, Safari 17.2). Сравнение с эталонными скриншотами осуществляется по порогу пикселей — разница не более 0.1%.

Этап 3: нагрузочное тестирование — симуляция 500 одновременных сессий с разными настройками виджетов. Допустимое время отклика мастера — не более 200 мс (p95) до появления визуального ответа.

Этап 4: аудит безопасности OWASP Top 10 — особое внимание уделяется инъекциям через поля ввода (нейминг виджетов, пользовательские шрифты) и защите от XSS в контексте Shadow DOM.

Технические характеристики спектра настроек

Мастер позволяет оперировать 27-ю дискретными параметрами виджета, включая тип заливки (linear-gradient с углами 0–360°, radial-gradient, конусные градиенты), прозрачность слоёв (диапазон 0.000–1.000 с шагом 0.001), углы скругления с опциональным mask-image. Для пользовательских данных (например, загрузка личного фона) применяется автоматическая обрезка до соотношения сторон 3:2 и сжатие JPEG с качеством 85 (метрика SSIM ≥ 0.92).

В интерфейсе мастера отсутствует кнопка «Сбросить» — вместо неё реализован системный снапшот предыдущей конфигурации с возможностью восстановления последних 10 состояний (циклическая очередь RAM с сжатием LZ4). Это исключает необратимую потерю данных даже при закрытии вкладки — всё дублируется в IndexedDB с TTL 24 часа.

Добавлено: 08.05.2026