Сегодня вечером буду рассказывать про режимы написания и их поддержку в интерфейсах.
Митап проходит онлайн. Присоединяйтесь послушать)

https://gdg-minsk.timepad.ru/event/2147906/

P.S. Да, запись будет.

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

https://ariarzer.github.io/presentation_writing_modes

Теперь есть и запись доклада про режимы написания.

https://www.youtube.com/watch?v=ubDcMQMSoxI

Валитова София, UI-разработчик из Cube расскажет о том, что происходит с вашим кодом после того, как браузер его загрузил и распарсил, почему каскад есть даже если вы вообще не написали стилей и почему специфичность — это только часть каскада

«Значения в CSS: от декларации до отображения»

22 сентября в офисе компании MTS AI, Подсосенский переулок 23 с2.

Регистрация открыта на Timepad: https://moscowcss.timepad.ru/event/2162009/

Хочешь выступить? Подавай заявку на доклад:https://clc.to/moscowcss_cfp

Проценты в свойстве background-position разрешаются относительно свободного от фона пространства по этой оси.

Пример на картинке.
Формулы, объяснения и демка в заметке.

Между тем, последнее обновление черновика 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