Рассказываю, как взаимодействуют новые индивидуальные свойства трансформаций друг с другом и свойством transform, в каком порядке они применяются и почему это важно знать при вёрстке.

https://ru.ariarzer.dev/2023/notes/transformation_order/index.html

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

https://ru.ariarzer.dev/2023/tutorials/gradient-radio/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пару лет назад сделала очень красивую бургер-крестик анимацию и уже в 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