CSS mind

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

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

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

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

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

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

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

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

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

Источник.

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

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

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

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

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

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

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

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

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

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

https://ariarzer.github.io/presentation_writing_modes

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

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

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

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

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

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

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

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

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

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

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

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

Долгое и вдумчивое обсуждение перевода variable units, которые я сначала перевела калькой, закончилось в репозитории Веб-Стандартов.

Теперь это переменные единицы.

Интересно почитать аргументы всех сторон.

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

Вы уже слышали о вариативных юнитах?

На самом деле это просто синтаксических сахар над calc().
Подробности и возможные способы использования читайте в статье.

https://ru.ariarzer.dev/articles/2022/css-variable-units.html

P.S. Перевод "вариативные юниты" еще не конечный. Обсуждение можно посмотреть здесь.

Как и зачем типизировать CSS-переменные?

Подробно рассказываю в новой статье.

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

https://ru.ariarzer.dev/articles/2022/css-variables-typing.html

P.S. Добавила в статьи раздел "Цитирования". Если вы видите ссылки на мой контент в источнике, который еще не указан в этом разделе, сообщите мне, пожалуйста.

Написала о том, как делать карточки-ссылки просто и семантично.

https://ru.ariarzer.dev/tutorials/2022/easy-semantic-card-link.html

P.S. русскоязычный сайт переехал на поддомен, rss теперь тоже на нём.

Следуя модными течениям и желанию мотивировать себя побольше писать, завела себе boosty.

Сейчас есть шанс получить открытку из Будапешта, а первая статья-туториал о том, как сделать семантичную карточку-ссылку, уже ждёт вас)

https://boosty.to/ariarzer

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

Если перейти по ссылке можно только кликнув на сам текст - это неудобно.
Особенно для мобильных устройств, где у вас большие пальцы и маленький текст.

Также нужно добавить, что клик в паддинг или границу - это клик в блок, а клик в марджин - уже нет.

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

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

Тем временем вчера CSSWG решила отложить функцию color-contrast() до следующей версии спецификации из-за сломанного алгоритма вычисления контраста WCAG.

https://github.com/w3c/csswg-drafts/issues/7310#issuecomment-1156687605

Значение свойства `box-sizing` - content-box и border-box это не просто значения. Это термины боксовой модели CSS.

На схеме можно видеть, что их на самом деле больше двух. 4 термина для краёв (edge) и 4 для областей отдельных частей бокса (area).

Прикрепляю переведенную на русский схемe и оригинальную. Для большей наглядности использовала цвета из светлой темы веб-инспектора хрома, так выглядит привычнее и лучше запоминается.

Эти термины очень часто используются в спецификации и их знание значительно облегчит ее чтение.

#box_sizing #box_model