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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Группа функций с постфиксом *-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

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

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

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

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

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

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