CSS Level 2 потребовалось 9 лет (2002-2011), чтобы получить статус рекомендации. Чтобы ускорить стандартизацию беспроблемных частей, рабочая группа CSS приняла Пекинскую доктрину, разделившую спецификацию CSS на модули.
Более подробно о причинах и процессах разделения читайте в перевода статьи CSS Modularization, написанной fantasai 2 ноября 2011 года.
https://ariarzer.dev/articles/2022/inside-csswg/css-modularization.html
Более подробно о причинах и процессах разделения читайте в перевода статьи CSS Modularization, написанной fantasai 2 ноября 2011 года.
https://ariarzer.dev/articles/2022/inside-csswg/css-modularization.html
Значение свойства `box-sizing` -
На схеме можно видеть, что их на самом деле больше двух. 4 термина для краёв (edge) и 4 для областей отдельных частей бокса (area).
Прикрепляю переведенную на русский схемe и оригинальную. Для большей наглядности использовала цвета из светлой темы веб-инспектора хрома, так выглядит привычнее и лучше запоминается.
Эти термины очень часто используются в спецификации и их знание значительно облегчит ее чтение.
#box_sizing #box_model
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
https://github.com/w3c/csswg-drafts/issues/7310#issuecomment-1156687605
GitHub
[css-color-5][css-images-4] Are these features ready to ship? · Issue #7310 · w3c/csswg-drafts
How finished are the specifications for these features? From Color 5: color-contrast() color-mix() Relative Color Syntax From Images 4: Non-sRGB interpolation of CSS Gradients They are currently pa...
Регулярное напоминание, что нужно расширять области ссылок и других контролов.
Если перейти по ссылке можно только кликнув на сам текст - это неудобно.
Особенно для мобильных устройств, где у вас большие пальцы и маленький текст.
Также нужно добавить, что клик в паддинг или границу - это клик в блок, а клик в марджин - уже нет.
Поэтому расширять интерактивную область нужно именно за счет паддинга. Или, в крайнем случае, за счет прозрачной границы.
Речь идет исключительно о ссылках-контролах, вроде пунтов меню, а не о ссылках в тексте.
Если перейти по ссылке можно только кликнув на сам текст - это неудобно.
Особенно для мобильных устройств, где у вас большие пальцы и маленький текст.
Также нужно добавить, что клик в паддинг или границу - это клик в блок, а клик в марджин - уже нет.
Поэтому расширять интерактивную область нужно именно за счет паддинга. Или, в крайнем случае, за счет прозрачной границы.
Речь идет исключительно о ссылках-контролах, вроде пунтов меню, а не о ссылках в тексте.
Следуя модными течениям и желанию мотивировать себя побольше писать, завела себе boosty.
Сейчас есть шанс получить открытку из Будапешта, а первая статья-туториал о том, как сделать семантичную карточку-ссылку, уже ждёт вас)
https://boosty.to/ariarzer
Сейчас есть шанс получить открытку из Будапешта, а первая статья-туториал о том, как сделать семантичную карточку-ссылку, уже ждёт вас)
https://boosty.to/ariarzer
Написала о том, как делать карточки-ссылки просто и семантично.
https://ru.ariarzer.dev/tutorials/2022/easy-semantic-card-link.html
P.S. русскоязычный сайт переехал на поддомен, rss теперь тоже на нём.
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. Добавила в статьи раздел "Цитирования". Если вы видите ссылки на мой контент в источнике, который еще не указан в этом разделе, сообщите мне, пожалуйста.
Подробно рассказываю в новой статье.
А еще как сделать плавные переходы между значениями переменных и как анимировать градиенты.
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. Перевод "вариативные юниты" еще не конечный. Обсуждение можно посмотреть здесь.
На самом деле это просто синтаксических сахар над calc().
Подробности и возможные способы использования читайте в статье.
https://ru.ariarzer.dev/articles/2022/css-variable-units.html
P.S. Перевод "вариативные юниты" еще не конечный. Обсуждение можно посмотреть здесь.
ru.ariarzer.dev
Вы уже слышали о вариативных юнитах?
Синтаксических сахар для создания своих единиц измерения на основе существующих. Удобно, практично, интересно, пока недоступно.
❤1
Долгое и вдумчивое обсуждение перевода variable units, которые я сначала перевела калькой, закончилось в репозитории Веб-Стандартов.
Теперь это переменные единицы.
Интересно почитать аргументы всех сторон.
https://github.com/web-standards-ru/dictionary/pull/457
Теперь это переменные единицы.
Интересно почитать аргументы всех сторон.
https://github.com/web-standards-ru/dictionary/pull/457
GitHub
Добавляет вариативные юниты by ariarzer · Pull Request #457 · web-standards-ru/dictionary
Словари по фронтенду. Contribute to web-standards-ru/dictionary development by creating an account on GitHub.
❤1
В спецификации режимов написания приведена очень интересная фотография фрагмента печатной книги на монгольском языке.
Письмо идёт вертикально, при этом английские фрагменты написаны боком.
Очень хорошая иллюстрации ориентации различных глифов относительно направления потока текста.
https://www.w3.org/TR/css-writing-modes-3/#line-directions
Письмо идёт вертикально, при этом английские фрагменты написаны боком.
Очень хорошая иллюстрации ориентации различных глифов относительно направления потока текста.
https://www.w3.org/TR/css-writing-modes-3/#line-directions
❤2
Привычная нам физическая система координат - верх, низ, право, лево - не удобна для стилизации текстового контента на разных языках.
Рассказываю, какие есть еще и чем они лучше.
https://ru.ariarzer.dev/articles/2022/css-coordinate-system.html
Рассказываю, какие есть еще и чем они лучше.
https://ru.ariarzer.dev/articles/2022/css-coordinate-system.html
ru.ariarzer.dev
О система координат в CSS
Привычная нам физическая система координат - не самая удобная для текстового контента. Рассказываю, какие есть еще и чем они лучше.
❤1
Сегодня вечером буду рассказывать про режимы написания и их поддержку в интерфейсах.
Митап проходит онлайн. Присоединяйтесь послушать)
https://gdg-minsk.timepad.ru/event/2147906/
P.S. Да, запись будет.
Митап проходит онлайн. Присоединяйтесь послушать)
https://gdg-minsk.timepad.ru/event/2147906/
P.S. Да, запись будет.
Слайды моего доклада про режимы написания текста и их поддержку в интерфейсах.
https://ariarzer.github.io/presentation_writing_modes
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
«Значения в CSS: от декларации до отображения»
22 сентября в офисе компании MTS AI, Подсосенский переулок 23 с2.
Регистрация открыта на Timepad: https://moscowcss.timepad.ru/event/2162009/
Хочешь выступить? Подавай заявку на доклад:https://clc.to/moscowcss_cfp
Между тем, последнее обновление черновика css-values-4 случилось вчера и принесло нам внятное описание того, как должны генерироваться свойства типа
Они называют "List-Valued Properties" или "свойства-списки".
Там всегда есть базовое свойство, которое определяет сколько будет значений в остальных.
Для группы
Источник.
background-*
Они называют "List-Valued Properties" или "свойства-списки".
Там всегда есть базовое свойство, которое определяет сколько будет значений в остальных.
Для группы
background-*
это background-image
.Источник.
❤1