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

Письмо идёт вертикально, при этом английские фрагменты написаны боком.

Очень хорошая иллюстрации ориентации различных глифов относительно направления потока текста.

https://www.w3.org/TR/css-writing-modes-3/#line-directions

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

Рассказываю, какие есть еще и чем они лучше.

https://ru.ariarzer.dev/articles/2022/css-coordinate-system.html

Вопрос о том, как должен подчеркиваться (text-decoration: underline) текст с вертикальным написанием очень похож на "как бы собака носила штаны?"

Только про подчеркивание есть правильный ответ)

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

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/