CSS mind
2.99K subscribers
38 photos
72 links
Download Telegram
CSS Level 2 потребовалось 9 лет (2002-2011), чтобы получить статус рекомендации. Чтобы ускорить стандартизацию беспроблемных частей, рабочая группа CSS приняла Пекинскую доктрину, разделившую спецификацию CSS на модули.

Более подробно о причинах и процессах разделения читайте в перевода статьи CSS Modularization, написанной fantasai 2 ноября 2011 года.

https://ariarzer.dev/articles/2022/inside-csswg/css-modularization.html
Значение свойства `box-sizing` - content-box и border-box это не просто значения. Это термины боксовой модели CSS.

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

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

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

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

https://github.com/w3c/csswg-drafts/issues/7310#issuecomment-1156687605
Регулярное напоминание, что нужно расширять области ссылок и других контролов.

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

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

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

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

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

https://boosty.to/ariarzer
Написала о том, как делать карточки-ссылки просто и семантично.

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

P.S. русскоязычный сайт переехал на поддомен, rss теперь тоже на нём.
2
Как и зачем типизировать CSS-переменные?

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

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

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

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

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

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

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

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

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

https://github.com/web-standards-ru/dictionary/pull/457
1
В спецификации режимов написания приведена очень интересная фотография фрагмента печатной книги на монгольском языке.

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

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

https://www.w3.org/TR/css-writing-modes-3/#line-directions
2
Привычная нам физическая система координат - верх, низ, право, лево - не удобна для стилизации текстового контента на разных языках.

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

https://ru.ariarzer.dev/articles/2022/css-coordinate-system.html
1
Вопрос о том, как должен подчеркиваться (text-decoration: underline) текст с вертикальным написанием очень похож на "как бы собака носила штаны?"

Только про подчеркивание есть правильный ответ)
2
Как подчеркивается вертикальный текст?
Anonymous Quiz
23%
вариант 1
77%
вариант 2
Сегодня вечером буду рассказывать про режимы написания и их поддержку в интерфейсах.
Митап проходит онлайн. Присоединяйтесь послушать)

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

P.S. Да, запись будет.
Слайды моего доклада про режимы написания текста и их поддержку в интерфейсах.

https://ariarzer.github.io/presentation_writing_modes
1
Forwarded from moscowcss (moscowcssBot)
Валитова София, UI-разработчик из Cube расскажет о том, что происходит с вашим кодом после того, как браузер его загрузил и распарсил, почему каскад есть даже если вы вообще не написали стилей и почему специфичность — это только часть каскада

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

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

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

Хочешь выступить? Подавай заявку на доклад:https://clc.to/moscowcss_cfp
Проценты в свойстве background-position разрешаются относительно свободного от фона пространства по этой оси.

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

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

Источник.
1