Между тем, последнее обновление черновика css-values-4 случилось вчера и принесло нам внятное описание того, как должны генерироваться свойства типа background-*
Они называют "List-Valued Properties" или "свойства-списки".

Там всегда есть базовое свойство, которое определяет сколько будет значений в остальных.
Для группы background-* это background-image.

Источник.

Терминология не берется из неоткуда, и в нашей сфере ее обычно переводят с английского языка.

Заходите обсудить перевод термина keyframe selector. Я предлагаю "селекор ключевого кадра".

https://github.com/web-standards-ru/dictionary/pull/465

Наверняка у вас бывали ситуации, когда из стандартного правила вроде "блок с position: absolute позиционируется от предка с position не static" были странные исключения.

Разбираю случай, когда эти исключения вызваны свойством transform.

https://ru.ariarzer.dev/articles/2022/transformations-and-containing/

P.S. то же само в виде треда в твиттере - https://twitter.com/ariarzer/status/1588531521484472324

Существует свойство font, которое является шортхендом для всех свойств font-* и еще для line-height. Поддержка идеальная, еще c 11ie.

Идеально подходит для ваших систем типографики.
Вмеcто 3-5 строчек пишите одну - font: var(--h1_font);

В новых разделах спецификации сделали очень удобное подсвечивание одинаковых терминов на небольшом отрывке текста по клику. Стало легче читать.

https://www.w3.org/TR/css-lists-3/#inheriting-counters

Наследование счетчиков.

На значения счетчиков могут влиять предки и дети предков, а на наличие самих счетчиков только предки. Подробнее в статье.

https://ru.ariarzer.dev/2023/articles/counter_inheritance/

P.S. Статья максимально теоретическая. Практические туториалы на ее основе будут чуть-чуть попозже.

Основываясь на предыдущей статье, рассказываю что такое самонаследуемость CSS-счетчиков и как с её помощью сделать нумерацию сколь угодно вложенного списка на всего одном счетчике.

https://ru.ariarzer.dev/2023/tutorials/counters-self-inheritance/

Рассказываю, как взаимодействуют новые индивидуальные свойства трансформаций друг с другом и свойством 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.