Вычисление с использованием собственных размеров.

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

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

Но функция calc-size() можно позволить это делать некоторым образом.

calc-size( <calc-size-basis>, <calc-sum> )

Она принимает два аргумента, базис и выражение, которое должно быть рассчитано на основе этого базиса. При этом внутри выражения разрешено ключевое слово size, значения которого будет равно базису. А в качетве базиса можно указать не только численные значения, но и <intrinsic-size-keyword>, то есть вещи типа auto, min-content, max-content и тому подобное. Значение базиса будет рассчитано на основе контекста свойства, в котором используется выражение.

Например, так можно сделать блок равным половине максимально возможной ширины по контенту:

width: calc-size(max-content, size / 2);

P.S. Пост из серии про новый пятый уровень спецификации CSS values, остальные смотрите по тегу #css_values_5

Вообще самая приятная вещь относительно calc-size() это не то, что можно растягивать блок на половину максимального размера.
А то, что размеры, рассчитанные внутри calc-size(), считаются определелямыми. Значит они могут быть конечной точкой анимации.
Проще говоря, скоро у нас будет возможность анимировать что-нибудь в нулевого размера до размера auto.

Подробности в заметке:

https://ru.ariarzer.dev/2024/notes/calc-size-2024/

У меня сегодня первый рабочий день на новой работе, и я конечно же первым делом потащила в прод container queries.
Поэтому хочу показать вам красивую адаптивную сетку с сепараторами -
https://codepen.io/ariarzer/pen/dPbEKaq

P.S. комментарии по демкам всегда принимаются в личку, ссылка в закрепе.

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

Нам наконец-то завезут в следующем хроме функцию attr() в том виде, в котором ее планировали много лет назад!

Источник: https://developer.chrome.com/blog/advanced-attr

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

P.S. Для преобразования типов был только известный хак от Анны Тюдор как привести число к строке через счетчик. Можно было использовать для отображения числовых переменных через свойство content - https://codepen.io/ariarzer/pen/mdvwzaq

Мне было сегодня лет, когда я узнала, что в css оказывается есть свойство resize.

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

Такие красивые видео с демок теперь можно записывать так просто!

Сегодня день рождения CSS2 🥳🎂

Между прочим в сегодняшнюю агенду CSS Working Group включено обсуждение возможности вынимать единичные значения из шортхендов.

Из аудитории поступил вопрос что такое шортхенды.

Это от английского short hand, короткие руки.

Так вот, представьте тиранозавра. У него лапки короткие, печатать неудобно.
Поэтому он печатает не border-width, border-color и border-style отдельно, а сразу все в border.
Чтобы меньше печатать короткими лапками.

А вообще официальное определение есть на MDN, например.

🦖🦖🦖

Между прочим interpolate-size завезли в хром аж полгода назад. Смотрите что мы теперь можем делать с details.

https://dimox.name/animate-details-element-using-css/

И еще сегодня очередной день рождения CSS2 🥳🎂

28 годиков. Старше меня!

А вы знали, что next ломает вам типизацию перменных?

Если вы напишите ...

@property --var {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

...то next оптимизирует до initial-value: 0;, потому что cssnano в текущей последней версии next считает что это хорошо.
И работать конечно ничего не будет.

Что делать?

Писать initial-value: 0.0%;, либо менять тип на <length-percentage>.

Ну и ждать пока next обновит версию cssnano.

P.S. первый ночной пост в канале 👩‍💻🌚

Просто напоминаю, что существует сайт на старомонгольском.
У него уникальный режим письма: сверху вниз и слева направо.

https://president.mn/mng/

Кстати если у вас разные конфиги для разных директорий (например у меня для работы один юзернейм и имеил в одном конфиге, а для фриланса другой в другом), то у гита есть вот такая штука.

Что-то вроде условных импортов.

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

А то что выше в секции core, и если бы там еще что-то было, остается для всех вне зависимости от директории.