Релиз Berry CSS 5.5

Версия вышла немного скомканная, поскольку я её несколько раз обновлял после анонса в tg-канале. Остановлюсь на основных изменениях.

«Мелкие» правки и улучшения

Добавил классы .bor-custom для произвольных бордюров, включая dark-режим. Что-то вроде такого:

class="bor-primary200 dark:bor-custom" style="--bor-custom-dark: 4px solid var(--primary500);"

То есть когда стоит задача кастомизировать border, особенно для dark-режима, то можно использовать css-переменные. Просто классы бордюров очень объёмные, а востребованность в них низкая, поэтому кастомизация через style мне видится оптимальной.

Новые классы для grid-сетки: .grid-area и .orderX. Сетки можно строить разными способами и grid-area один из них. Есть онлайн-генераторы сеток как раз под эти свойства и теперь можно напрямую использовать сгенерированный css-код. Примеры есть на MaxSite Plus.

Новые классы для текста:

.t-wrap-balance, .text-wrap-balance
.t-wrap-stable, .text-wrap-stable
.t-wrap-pretty, .text-wrap-pretty
.t-pre-line

Это новые возможности CSS по выравниванию текста. Особенно эффективно работают с заголовками.

Для pre и code прописал overflow-wrap: break-word; — оказывается для Chrome это нужно явно делать, хотя на FireFox всё и итак хорошо работает. Это перенос длинных строк так, чтобы они не выходили за пределы блока. Для смартфонов особенно актуально.

Акцентный цвет

Развиваю идею с акцентным цветом. Его задача в том, чтобы иметь какой-то выделяющийся цвет относительно primary-палитры. Поскольку цветовых палитр много, да ещё и динамически меняющиеся, то и акцентный цвет должен автоматом меняться.

Я сделал его как смещение триадного цвета — 120 градусов но с той же насыщенностью. Вот пример акцентного выделения: если менять цветовую тему и dark-режим, то будет меняться и акцент.

В развитие этой идеи я добавил и новые css-переменные для акцентных цветов по той же схеме, что и другие палитры: --accent950, --accent900, --accent850 и т.д.

Понимаю, что задача не самая распространённая, но мне бы хотелось иметь в комплекте Berry CSS какое-то готовое решение.

Dark-режим

Наверное это самое существенное изменение. Опишу суть исходной проблемы.

Обычно dark-режим делается похабно плохо: простой темный фон и безумно яркий цвет текста. Лично я вижу что примерно 90% темных сайтов делаются именно так...

Дело в том, что темный фон и яркий текст — это особый способ пытки для людей, у которых есть даже небольшие нарушения восприятия зрения (светочувствительность). Поэтому владельцы темных сайтов, видимо, настолько ненавидят людей, что оставляют тёмный режим единственным. Если на сайте нет кнопки переключения на светлый режим, то лично я сразу его закрываю. Нет ни одной причины читать такой сайт, испытывая сильный дискомфорт.

Темный режим, очевидно, не означает просто тёмный фон. Это такой же дизайн, как и «светлый», но вебмастера про это не думают. Главная сложность темного режима — это оптимальный контраст между темным фоном и светлым текстом. Он не должен быть очень высоким, но при этом не настолько слабым, чтобы буквы еле различались.

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

Особенность нашего зрения в том, что насыщенность на темном фоне воспринимается более сильно, чем на светлом. То есть текст на светлом фоне будет казаться менее насыщенным, чем этот же текст, чем на темном фоне.

Я не буду никого учить, просто призываю вас подумать над темным режимом вашего сайта. Если он есть, то почитайте теорию, посоветуйтесь с ИИ, в конце концов, и сделайте так, чтобы темный режим «не вырубал» ваших посетителей.

Итак, что я сделал в Berry CSS в этом плане.

Поскольку я использую theme-зацию (в комплекте Albireo CMS 22 цветовых темы!), то нужен алгоритм, который позволит автоматизировать dark-режим каждой цветовой темы.

В первую очередь я разделил primary для каждой темы на light (база) и dark:

:root {
    --primary-hue: 218deg;
    --primary-sat: 50%;
    
    --primary-hue-dark: 218deg;
    --primary-sat-dark: 40%;
}

Обратите внимание, что оттенок HUE для темной темы используется тоже, что и для light. А вот насыщенность SATURATION мы делаем немного меньше. Подход примерно такой: если насыщенность для light 50% и выше, то для dark её можно уменьшить на 10-20%. Таким образом темный режим не будет давать излишней насыщенности и дизайн будет восприниматься намного легче.

Цвет фона для dark-режима я устанавливаю на уровне primary800, то есть это достаточно темный цвет, но далёкий от черного, поэтому контраст с основным текстом получается оптимальным.

Насыщенность основного текста при этом уменьшается, а яркость оказывается где-то в районе primary200..300. Визуально такой текст имеет базовый оттенок, но не настолько сильный, чтобы затруднять чтение. Ну и конечно, он имеет намного меньше яркости, чем белый цвет («пыточный...»).

В итоге контраст держится на уровне 500-600 единиц, что есть лучший вариант для людей.

Что касается ссылок, они могут рассчитываться автоматом, поскольку современный CSS это уже позволяет:

/* цвет текста */
--body-color: color-mix(in hsl, var(--primary500) 60%, contrast-color(var(--body-bg)));
    
/* цвет ссылок */
--link-color: color-mix(in hsl, var(--primary500) 100%, contrast-color(var(--body-bg)));
--link-hover-color: color-mix(in hsl, var(--primary500) 80%, contrast-color(var(--body-bg)));

То есть здесь цвет рассчитывается как микширование черного или белого цвета (в зависимости от режима) к primary500. Для обычного цвета это 60%, для ссылок 100%, чтобы их визуально выделить. Для hover — 80% — выше текста, но ниже обычной ссылки. В принципе можно и вручную прописать, но мне хотелось именно автоматизацию. Тем более, что для некоторых сложных цветовых тем можно поиграть другими коэффициентами.

В итоге dark-темы Berry CSS (в реализации для Albireo CMS) получились очень «мягкими» и достаточно комфортными. Главное, что в них теперь нет перекосов по яркости и насыщенности. Даже такие сложные как «lime» и «yellow» стали выглядеть вполне адекватно.

Не все вебмастера понимают, что цвет текста и фона имеет особое значение. В погоне за красочностью, насыщенностью, они упускают из вида то, что главное — это удобство чтения текста, а вовсе не их «рюшечки» и вырвиглазные цвета. Я знаю, что большинство вебмастеров не дизайнеры и делают ошибки по незнанию. Но с другой стороны, я уже предлагаю готовое решение — Berry CSS, где все эти вопросы уже отработаны и их можно использовать прямо из коробки, не изобретая своего «велосипеда». 👍