CSS mind

Нам наконец-то завезут в следующем хроме функцию 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.

В начале месяца вышел первый рабочий черновик спецификации CSS values and units 5, а в пятницу вечером в нем уже исправили первые опечатки и огрехи.

Напишу серию постов о том, что нового и полезного готовит нам csswg. Смотрите ниже по тегу #css_values_5.

Оказывается это работает без вложенности без каких-либо трюков, оно просто работает.

Потому что у якорей нет области видимости - "the anchor names of its descendants are visible to elements elsewhere in the page."

Я даже не проверила, была уверена, что так нельзя. Оказывается можно.

Держите красивую демку - https://codepen.io/ariarzer/pen/wvLOwKd?

Изучала вчера якорное позиционирование, собрала такую демку.

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

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

Тем не менее, все равно впечатляет, какие вещи теперь можно делать на css.

Недавно сделала на работе красивую анимацию для иконки играющего трека, делюсь демкой - https://codepen.io/ariarzer/pen/XWQGaoG.
Там можно использовать принцип цикады в работе.

Делаете циклы анимаций длинами, равнимы двум простым числам (у меня 5 и 3), накладываете друг на друга, и получаете отрезок уникальных анимаций длиной в их произведение (у меня 15).

Слайды моего доклада на CodeFest про режимы написания и их поддержку в интерфейсе.

https://presentations-inky.vercel.app/presentations/css-writing

Вот на сайте W3C текст лежит в свойстве content и переводчик не переводит его на арабский.

(не спрашивайте зачем я перевожу спецификации на арабский)

Сегодня самое время вспомнить, что на 1 апреля 2012 года csswg опубликовали проект редизайна сайта w3c, включающий в себя:

- логотип с анимированым пламенем
- ярко-желтый цвет текста
- выравнивание текста на сайте по центру для поддержвания симметрии
- анимированные радужные сепараторы между разделами

...и многое другое)

https://www.w3.org/blog/CSS/2012/04/01/csswg-proposes-w3c-wide-spec-redesign/

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

Может и вам пригодится)

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

Случайно залезла в типы реакта и сижу хихикаю )))

На самом деле делать длинные всратые названия в коде - нормальная практика для экспериментальных фич.

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

Очевидно, что больше нигде такая длинная фраза встретиться в коде не могла.

P.S. первый пост не про CSS в этом канале.

Полезно иногда смотреть в то, что происходит в CSSWG, иначе можно пропустить как в CSS появится что-то вроде этого.

Сама иногда захожу и 🤯

Источник: http://github.com/w3c/csswg-drafts/issues/9350

Недавно CSSWG рассматривало ишью о разнице в поведении селекторов :has(:is()) и просто :has().

Обсуждение показалось мне очень интересным и я хочу подсветить и разобрать его 📜

https://ru.ariarzer.dev/2024/notes/is-inside-has/

Alt-тексты для псевдоэлементов.

Общеизвестно, что псевдоэлементы не видны для скринридеров. Однако с недавнего времени это не совсем так.

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

Демо и больше подробностей в заметке: https://ru.ariarzer.dev/2024/notes/pseudo-alt/

О переводчиках и псевдо-элементах.

Не стоит класть в свойство content важный текст. А лучше вообще никакой не класть.

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

Демо в заметке: https://ru.ariarzer.dev/2024/notes/pseudo-translation/

Оказывается calc() внутри функций min(), max() и clamp() можно не писать.

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

Нижняя и верхняя строчки на картинке эквивалентны.

https://drafts.csswg.org/css-values/#comp-func