Релиз Berry CSS 5.4

Накопившиеся изменения я решил зафиксировать как новую версию фреймворка.

Изменения по Berry CSS для ИИ

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

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

Мелкие правки

Было всего две мелкие правки. В одном случае я поменял для блоков white-space : nowrap; на white-space: pre-wrap; для того, чтобы pre и code всё таки позволяли переносить текст на новую строку. Это особенно актуально для смартфонов.

Вторая правка — это тэг абзаца в цитате может иметь свой отступ margin.

/* по умолчанию: 5px 0 */
blockquote p {
  margin: var(--blockquote-p-margin);
}

Это немного улучшает типографику.

Модуль background

Он обзавелся новыми классами, которые можно использовать для позиционирования фоновых изображений. Изначально я не хотел его сильно развивать, поскольку возможностей CSS не всегда хватало и это привело бы к сильному раздуванию css-кода. Сейчас уже есть свойство вида background-position-x, что позволяют сделать вёрстку чуть проще. Ну и дополнительно добавил классы, которые могут пригодится для особых случаев.

Dark-режим

Здесь самые важные изменения.

Berry CSS теперь позволяет использовать css-функцию light-dark(), которая в свою очередь завязана на css-свойство color-scheme. По умолчанию используется схема light, а для класса .dark меняется на dark. Соответственно light-dark() позволяет указывать значения для двух режимов сразу.

<div style="background-color: light-dark(var(--red200), var(--green800))">Text</div>

Здесь для светлого режима цвет будет красный, а для темного — зеленый.

Такой подход позволяет сильно упростить задачи, где нужно менять цвет (или что-то другое) для светового режима без необходимости создания отдельных css-классов. Это актуально для тех случаев, когда стандартных berry-классов недостаточно.