CSS mind

Говорят верстать легко, а мне вот сегодня калькулятор с регрессиией понадобился

P.S. Кстати пользуйтесь десмосом, он удобный https://www.desmos.com/calculator

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

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

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

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

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

https://president.mn/mng/

А вы знали, что 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. первый ночной пост в канале 👩‍💻🌚

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

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

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

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

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

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

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

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

🦖🦖🦖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но функция 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

Меня часто спрашивают почему я люблю читать спецификации, особенно черновики, а это иногда просто очень весело))

https://www.w3.org/TR/css-values-5/#interpolate-size

Функции интерполяции

Группа функций с постфиксом *-progress(), позволяющих посчитать положение значения на заданном промежутке между двумя другими в заданном контексте.

Функция без префикса, просто progress(), принимает три значения и возвращает пропорцию (progress_value - start_value) / (end_value - start_value).
То есть, грубо говоря, где находится progress_value на шкале между start_value и end_value.

/*
* @param {<calc-sum>} --progress_value
* @param {<calc-sum>} --start_value
* @param {<calc-sum>} --end_value
* @return {<number>}
*/
progress(var(--progress_value) from var(--start_value) to var(--end_value));

Обратите внимания, что типы агрументов указаны как <calc-sum>. Так же, как, например, у фукнций min(), max() и clamp(). Это значит, что можно писать вычисления внутри, не оборачивая их в calc().

Аналогично, функция media-progress() возвращает число, представляющее собой текущее положение между двумя заданними значениями в контексте указанного медиа-запроса.

/*
* @param {<media-feature>} --media_feature
* @param {<calc-sum>} --start_value
* @param {<calc-sum>} --end_value
* @return {<number>}
*/
media-progress(var(--media_feature) from var(--start_value) to var(--end_value));

И такая же функция для интерполяции в контексте контейнера, где необязательный аргумент <container-name> позволяет допольнительно указать имя контейнера:

/*
* @param {<size-feature>} --size_feature
* @param {<calc-sum>} --start_value
* @param {<calc-sum>} --end_value
* @param {<container-name>} [optional] --container_name
* @return {<number>}
*/
container-progress(var(--size_feature) of <container-name> from var(--start_value) to var(--end_value));


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

Запятые в аргументах функции

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

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

Эти два примера эквивалентны:

list-style: random-item(--x, disc, circle, square);
list-style: random-item(--x; disc; circle; square);

А здесь три аргумента, один из которых состоит из списка двух значений через запятую:

list-style: random-item(--x; disc, circle; square);


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

P.S Напоминаю, что следить за работой csswg можно, подписавшись на их рассылку.
Кнопку подписки выделила на скриншоте.

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

Так же ссылки на протоколы публикуются на сайте W3C и в твиттере рабочей группы css.