Написала статью про value definition syntax.

В ней описаны причины создания и принципы грамматики синтаксиса, который используется в спецификациях css для описания типа значения свойства, селекторов и вообще почти везде. Понимание этого синтаксиса значительно облегчает чтение спецификации 🙂

https://ariarzer.dev/value-definition-syntax.html

Относительный синтаксис цвета

Сегодня, 2021.06.01, вышла новая версия черновика спецификации css-color-5. поговорим об одном из нововведений.

В предыдущих версиях спецификации css-color функции цвета могли определять цвета только напрямую задавая все цветовые каналы. Новый относительный синтаксис цвета позволяет изменять существующие цвета с помощью функций цвета: если указан исходный цвет, то каждый цветовой канал может быть либо напрямую указан заново, либо взят из исходного цвета (и, возможно, изменен с помощью математических функций).

Точные детали изменений каждой функции для соответствия относительным цветам перечислены ниже, но все они имеют общую структуру:
1. Исходный цвет можно указать с помощью значения from <color> в начале функции.
2. Если указан исходный цвет, остальные аргументы могут быть либо указаны напрямую, как обычно, либо указаны как ключевое слово канала, относящееся к одному из каналов исходного цвета. Математические функции также могут использовать эти ключевые слова для динамического изменения каналов исходного цвета.
3. Использование относительного синтаксиса цвета не изменяет то, является ли аргумент обязательным. Однако, если значение прозрачности опущено, по умолчанию используется прозрачность исходного цвета (а не 100%, как в абсолютном синтаксисе).

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

RGB
Грамматика функции rgb(), помимо старых вариантов записи, теперь принимает еще и такую:

rgb( [ from <color> ]? [ <number> | <percentage> ]{3} [ / <alpha-value> ]? )

В этой функции цвета допустимыми ключевыми словами канала являются:
1. r, g и b - это проценты (<percentage>), которые соответствуют красному, зеленому и синему каналам исходного цвета после его преобразования в sRGB.
2. alpha - это процент (<percentage>), который соответствует альфа-прозрачности исходного цвета.

Остальные пространства
Изменения в остальных цветовых функция такие же как в rgb().
Ключевые слова каналов у них иненуются так:
1. HSL - h, s, l и alpha
2. HWB - h, w, b и alpha
3. Lab - l, a, b и alpha
4. LCH - l, c, h и alpha

Зачем это нужно?

1. Прозрачность налету
html { --bg-color: blue; }
.overlay {
background: rgb(from var(--bg-color) r g b / 80%);
}
В этом примере каналы r, g и b исходного цвета не изменяются, что указывается с помощью ключевых слов канала, извлекающих их из значения исходного цвета, но прозрачность установлена на 80%, чтобы сделать его слегка прозрачным, независимо от какая была непрозрачность исходного цвета.
Также, можно изменять прозрачность относительно исходной, например, сделать цвет чуть более прозрачным rgb(from var(--bg-color) r g b / calc(alpha * 80%)).

2. Изменение именованных цветов
color: rgb(from indianred 255 g b)
Это выражение берет значение indianred в пространстве sRGB (205 92 92) и заменяет красный канал на 255, чтобы получить rgb(255 92 92).

Дополнительно
Safari TP 122 уже имплементировал эту фичу. Можно поиграться.

Новая спецификация CSS Logical Properties позволяет делать нативный ltr-rtl (смена направления письма для разных языков) за счет того, что отступы назначаются не "справа" и "слева", а с "с начала блочной оси" и "в конце блочной оси".

Тоже самое с размерами и даже абсолютным позиционированием.

Схемы позиционирования в CSS

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

1. static
Блок не позиционируется, а размещается в соответствии с правилами его родительского контекста форматирования. Свойства inset-* не применяются.

2. relative
Бокс позиционируется как статический, а затем смещается свойствами inset-* относительно полученной позиции. Это смещение является чисто визуальным эффектом и не влияет на размер или положение любого другого блока, за исключением того, что оно увеличивает прокручиваемую область переполнения его родителя. Эта схема позиционирования называется относительным позиционированием.

3. sticky
Идентично относительному позиционированию, за исключением того, что смещения бокса автоматически корректируются по отношению к области прокрутки ближайшего предка, являющегося контейнером прокрутки (как изменено свойствами inset-*), в любых осях, по которым свойства inset-* не являются автоматическими, чтобы попытаться сохранить бокс в поле зрения в пределах. Эта схема позиционирования называется липким позиционированием.

4. absolute
Бокс выводится из потока, так что он не влияет на размер или положение своих соседей и предков и не участвует в контексте форматирования своего родителя.
Вместо этого блок позиционируется и меняет размер исключительно в соответствии с его абсолютным позиционированием, содержащим блок, как изменено свойствами inset-*. Он может перекрывать текущее содержимое или другие абсолютно позиционированные элементы и включается в прокручиваемую область переполнения бокса, относительно которого позиционируется. Эта схема позиционирования называется абсолютным позиционированием.

5. fixed
То же, что и absolute, за исключением того, что бокс позиционируется свойствами inset-* и имеет размер относительно исходного содержащего блока (от области вьюпорта на непрерывном носителе или от области страницы на страничном носителе). Положение блока фиксировано относительно этого прямоугольника: он не перемещается при прокрутке документа и реплицируется на каждой странице при разбивке на страницы. Эта схема позиционирования называется фиксированным позиционированием и считается подмножеством абсолютного позиционирования.

Источник: https://drafts.csswg.org/css-position-3/#position-property

#css_position

Слайды моего доклада про цвета в CSS

https://ariarzer.github.io/presentation_css_colors/

Основные тезисы:

1. Цвет - это характеристика реакции среднестатистического человеческого глаза на излучение, а не самого излучения.

2. Раньше мониторы и другие отображающие устройства не имели охват больше, чем sRGB, который составляет меньше 50% от того, что может видеть человек.

3. Теперь существует много разных мониторов с разными охватами. Например, устройства Apple имеют охват DCI-P3.

4. Большинство браузеров используют цвета из sRGB, вне зависимости от того, какой охват поддерживает монитор. Исключение - safari.

5. Цетовые функции из #css_color_4 позволяют задавать цвета в большем охвате, чем sRGB.

6. Использование таких функций повышает контрастность интерфейса и является частью "адаптивности".

7. Скорее всего цветовая палитры вашего сайта задана с помощью хекса или фукнции rgb() и вы можете очень легко сделать поддержку новых цветов в помощью функции color().

Про дизайн-токены

В прошлую пятницу вышел первый публичный черновик спецификации формата описания дизайн-токенов.

Зачем?

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

Пока нет спецификации каждый городит свой велосипед, чтобы удобно работать со всеми платформами одновременно. У нас, например, токены лежат на гитхабе как json. Когда что-то обновляется, выпускается релиз, и все платформы генерируют для себя новые наборы переменных, в том числе и фигма.

У всех по разному.
Когда появится спецификация - появятся стандартные, хорошо поддерживаемые инструменты, возможно даже встроенные.

Что дальше?

Спецификация находится на стадии разработки, там много открытых проблем, например:
1. Должны ли токены обязательно иметь тип?
2. Должны ли имена токенов быть регистро-зависимы?
3. Обязательно ли описывать токены текстом?

Надеюсь, что этот формат скоро появится в нашей жизни, поэтому важно дать свой фидбек, чтобы формат стал удобным и для вас тоже 🙂

#design_tokens

Пару дней назад в черновик спецификации #css_values_4 добавили функцию mix() для интерполяции значения между двумя заданными.

/*
* @param {<percentage>} --percentage Точка интерполяции
* @param { <any> } --start-value Начальное значение
* @param { <any> } --end-value Конечное значение
*/
mix( var(percentage) ; var(--start-value) ; var(--end-value) );

Условно "взять промежуточный цвет между синим и красным, на 20% ближе к синему, чем к красному" будет выглядеть как mix(20%, blue, red);

Думаю, это будет удобно для остановок в промежуточных точках анимации.

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

Интересно, что в качестве разделителей аргументов использованы точки с запятыми. Это необычно. Причина: сами интерполиемые значения могут содержать в себе запятые, например какие-то сложные фоны.
Решение не конечное, есть предложения сделать вложенные функции mix(<percentage> from(<value>) to(<value>)) или даже дополнительные скобки mix(<percentage> , (<start-value>), (<end-value>)), в общем скорее всего это так не останется.

Так же пока не ясно запретят ли инперполирование вне указанного диапазона с помощью отрицательного первого аргумента или больше 100%.

P.S. В твиттер мне справедливо напомнили, что:
"Не будет лишним напомнить, что всё то же самое можно сделать с помощью JS, установив вебпак и скачав всего лишь несколько библиотек с npmjs"

Спецификация туть.

Содержащий блок

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

Например, в такой ситуации размеры блока будут считаться не относительно родителя и блок .c будет иметь высоту 100px, тогда как его родитель .b имеет нулевую высоту:

<div class='a'>
<div class='b'>
<div class='c'></div>
</div>
</div>
<style>
.a {position: relative; height: 200px}
.c {position: absolute; height: 50%;}
</style>

Если прибегать к упрощенным определениям, можно сказать, что содержащий блок - это родитель элемента не по DOM, а по потоку документа.

Содержащий блок элемента определяется следующим образом:

1. Содержащий блок, в котором находится корневой (не имеющий родителей) элемент, представляет собой прямоугольник, который называется начальным содержащим блоком. Для веба и дргуих непрерывных (без страниц) носителей он имеет размеры области просмотра и закреплен в левом верхнем углу окна. Свойство direction начального содержащего блока такое же, как и для корневого элемента.

2. Для других элементов, если свойство position определено как static или relative, содержащий блок формируется краем содержимого блока ближайшего блока-предка.

3. Если элемент имеет position: fixed, содержащий блок определяется областью просмотра.

4. Если элемент имеет position: absolute, содержащий блок устанавливается ближайшим предком, у которого значение свойства position уставновлено как absolute, relative или fixed, следующим образом:
◦ В случае, если предок является строчным элементом, содержащий блок является прямоугольником, охватывающим поля заполнения первого и последнего инлайн-блоков, созданных для этого элемента.
◦ В остальных случаях содержащий блок формируется краем padding-бокса предка. Если такого предка нет, содержащим блоком назначается начальнй содержащий блок.

Источник: https://drafts.csswg.org/css2/#containing-block-details

#css_box_model

Придумала идеальный заголовок-картинку для статьи про RTL.

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

https://codepen.io/ariarzer/pen/qBPPKXV

У меня несколько новостей относительно моего блога + небольшой ребрендинг.

1. У меня теперь есть логотип. Планирую, что он повысит узнаваемость моего блога.

2. Я начала дублировать посты из этого канала в rss и в блог (в том числе прошлые). Полный список постов здесь. На rss можно подписаться по адресу блога.

3. Я начинаю публиковать контент для патронов на пару дней раньше. Полностью платного контента я по прежнему не делаю, только ранне-платный. Подписывайтесь )

Написала про поведение незамещаемого блока в нормальных условиях.

Это должно было быть постом здесь, а не на сайте, но текст по длине не влезает в пост(

Это перевод одно из разделов спецификации про расчет ширины и отступов. Планирую перевести их все и потом оформить в полноценную статью с демками.

https://ariarzer.dev/notes/2022/20220107.html

#css_box_model

Написала небольшой тред об одной из самых важных частей сss.
https://twitter.com/ariarzer/status/1480902208136876040

Я поняла, что мне слишком часто хочется вставлять в заметки материалы, которые нельзя вставить в телеграмм-пост. Например демки прямо в тексте, а не ссылками на codepen.io .

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

Вторая опция - ничего не меняется, я продолжаю писать заметки без демок и прочего, а позже собираю их в полноценную статью, где уже будет все необходимое.

Хочется узнать, что вы по этому поводу думаете)

Добавила демки в свою статью про нативную валидацию. Сделала в итоге через iframe.

https://ariarzer.dev/articles/2021/native-css-validation.html

Теперь можно пощупать и посмотреть, как работает то, что описано текстом.

Замещаемые элементы и где они обитают

Принято говорить, что замещаемые элементы - это те элементы, на отображение которых мы не можем влиять из css.

В спецификации html написано, что:

"Следующие элементы могут быть замещаемыми: audio, canvas, embed, iframe, img, input, object, и video."

В спецификации css чуть более развернуто:

"Элемент, содержимое которого выходит за рамки модели форматирования CSS, например изображение или iframe. Так, содержимое img заменяется изображением, которое обозначает его атрибут src."

Замещаемые элементы имеют собственные размеры (natural dimensions). Например, растровое изображение имеет собственную ширину и собственную высоту, указанные в абсолютных единицах (из которых, очевидно, можно определить собственное соотношение (ratio)).

Также, замещаемый элемент может и не иметь одного или нескольких, или всех собственных размеров.

Объекты, добавляемые с помощью CSS-свойства content являются анонимными замещаемыми элементами.
Анонимным в css называется то, к чему нельзя напрямую обратится.

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

Версия поста в блоге.

#css_display

Теперь, в догонку к предыдущему посту, еще один, опирающийся на него.

Строчные замещаемые элементы

Если вычисленное значение margin-left или margin-right равно auto, то их используемое значение становится равным 0.

Если height и width имеют вычисленные значения auto и элемент также имеет собственную (natural) ширину, тогда эта ширина является используемым значением width.

Если и height, и width имеют вычисленные значения auto, а элемент не имеет собственной ширины, но имеет собственную высоту и собственное соотношение, или если ширина имеет вычисленное значение auto, а высота нет, и элемент имеет собственное соотношение, тогда ширина вычисляется как:

(used height) * (natural ratio);

Если для высоты и ширины вычисленные значения auto, и элемент имеет собственное соотношение, но не имеет внутренней высоты или ширины, то используемое значение ширины не определено в CSS 2. Однако предполагается, что, если ширина содержащего блока не зависит от ширины замещаемого элемента, то есть используемое значение ширины вычисляется из уравнения ограничения, используемого для незамещенных блочных элементов в нормальном потоке.

Если ширина имеет вычисленное значение auto, и элемент имеет собственную ширину, тогда эта собственная ширина является используемым значением ширины.

Если ширина имеет вычисленное значение auto, но ни одно из вышеперечисленных условий не выполняется, то используемое значение ширины становится 300 пикселей.

Если 300 пикселей слишком широкие для устройства, UA должны использовать ширину самого большого прямоугольника, который имеет соотношение 2: 1 и подходит для устройства.

Например, это iframe'ы. Будучи вставленными на страницу без стилей, они имеют ширину 300 и высоту 150 пикселей.

Источник - https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

Версия поста в блоге.

#css_display

CSS Level 2 потребовалось 9 лет (2002-2011), чтобы получить статус рекомендации. Чтобы ускорить стандартизацию беспроблемных частей, рабочая группа CSS приняла Пекинскую доктрину, разделившую спецификацию CSS на модули.

Более подробно о причинах и процессах разделения читайте в перевода статьи CSS Modularization, написанной fantasai 2 ноября 2011 года.

https://ariarzer.dev/articles/2022/inside-csswg/css-modularization.html