Пару дней назад в черновик спецификации #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

Тем временем вчера CSSWG решила отложить функцию color-contrast() до следующей версии спецификации из-за сломанного алгоритма вычисления контраста WCAG.

https://github.com/w3c/csswg-drafts/issues/7310#issuecomment-1156687605

Регулярное напоминание, что нужно расширять области ссылок и других контролов.

Если перейти по ссылке можно только кликнув на сам текст - это неудобно.
Особенно для мобильных устройств, где у вас большие пальцы и маленький текст.

Также нужно добавить, что клик в паддинг или границу - это клик в блок, а клик в марджин - уже нет.

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

Речь идет исключительно о ссылках-контролах, вроде пунтов меню, а не о ссылках в тексте.

Следуя модными течениям и желанию мотивировать себя побольше писать, завела себе boosty.

Сейчас есть шанс получить открытку из Будапешта, а первая статья-туториал о том, как сделать семантичную карточку-ссылку, уже ждёт вас)

https://boosty.to/ariarzer

Написала о том, как делать карточки-ссылки просто и семантично.

https://ru.ariarzer.dev/tutorials/2022/easy-semantic-card-link.html

P.S. русскоязычный сайт переехал на поддомен, rss теперь тоже на нём.

Как и зачем типизировать CSS-переменные?

Подробно рассказываю в новой статье.

А еще как сделать плавные переходы между значениями переменных и как анимировать градиенты.

https://ru.ariarzer.dev/articles/2022/css-variables-typing.html

P.S. Добавила в статьи раздел "Цитирования". Если вы видите ссылки на мой контент в источнике, который еще не указан в этом разделе, сообщите мне, пожалуйста.