CSS mind

В начале месяца вышел первый рабочий черновик спецификации CSS values and units 5, а в пятницу вечером в нем уже исправили первые опечатки и огрехи.

Напишу серию постов о том, что нового и полезного готовит нам csswg. Смотрите ниже по тегу #css_values_5.

Оказывается это работает без вложенности без каких-либо трюков, оно просто работает.

Потому что у якорей нет области видимости - "the anchor names of its descendants are visible to elements elsewhere in the page."

Я даже не проверила, была уверена, что так нельзя. Оказывается можно.

Держите красивую демку - https://codepen.io/ariarzer/pen/wvLOwKd?

Изучала вчера якорное позиционирование, собрала такую демку.

https://codepen.io/ariarzer/pen/mdZodep

Как сделать без такой дикой вложеннсоти пока не придумала, но буду рада услышать ваши идеи.

Тем не менее, все равно впечатляет, какие вещи теперь можно делать на css.

Недавно сделала на работе красивую анимацию для иконки играющего трека, делюсь демкой - https://codepen.io/ariarzer/pen/XWQGaoG.
Там можно использовать принцип цикады в работе.

Делаете циклы анимаций длинами, равнимы двум простым числам (у меня 5 и 3), накладываете друг на друга, и получаете отрезок уникальных анимаций длиной в их произведение (у меня 15).

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

https://presentations-inky.vercel.app/presentations/css-writing

Вот на сайте W3C текст лежит в свойстве content и переводчик не переводит его на арабский.

(не спрашивайте зачем я перевожу спецификации на арабский)

Сегодня самое время вспомнить, что на 1 апреля 2012 года csswg опубликовали проект редизайна сайта w3c, включающий в себя:

- логотип с анимированым пламенем
- ярко-желтый цвет текста
- выравнивание текста на сайте по центру для поддержвания симметрии
- анимированные радужные сепараторы между разделами

...и многое другое)

https://www.w3.org/blog/CSS/2012/04/01/csswg-proposes-w3c-wide-spec-redesign/

Пару лет назад сделала очень красивую бургер-крестик анимацию и уже в 5 проектов в разных компаниях с тех пор её вставила.

Может и вам пригодится)

https://codepen.io/ariarzer/pen/MWOROBv

Случайно залезла в типы реакта и сижу хихикаю )))

На самом деле делать длинные всратые названия в коде - нормальная практика для экспериментальных фич.

Мы как-то назвали большую группу компонентов с постфиксом LetItSnow (релиз был под новый год 🎄), чтобы потом безопасно удалить из кода, гарантированно найдя по ней их все.

Очевидно, что больше нигде такая длинная фраза встретиться в коде не могла.

P.S. первый пост не про CSS в этом канале.

Полезно иногда смотреть в то, что происходит в CSSWG, иначе можно пропустить как в CSS появится что-то вроде этого.

Сама иногда захожу и 🤯

Источник: http://github.com/w3c/csswg-drafts/issues/9350

Недавно CSSWG рассматривало ишью о разнице в поведении селекторов :has(:is()) и просто :has().

Обсуждение показалось мне очень интересным и я хочу подсветить и разобрать его 📜

https://ru.ariarzer.dev/2024/notes/is-inside-has/

Alt-тексты для псевдоэлементов.

Общеизвестно, что псевдоэлементы не видны для скринридеров. Однако с недавнего времени это не совсем так.

В свойстве content через слэш можно написать текст, который окажется в дереве доступности и будет озвучет при прочтении документа.

Демо и больше подробностей в заметке: https://ru.ariarzer.dev/2024/notes/pseudo-alt/

О переводчиках и псевдо-элементах.

Не стоит класть в свойство content важный текст. А лучше вообще никакой не класть.

Помимо того, что он не озвучивается скрин-ридерами и в целом существует только для людей, которые могут его увидеть, он так же не может быть переведен автоматическими переводчиками, потому что буквально для них не существует (его не существует в DOM).

Демо в заметке: https://ru.ariarzer.dev/2024/notes/pseudo-translation/

Оказывается calc() внутри функций min(), max() и clamp() можно не писать.

Все записанные через запятую аргументы уже рассматриваются как токены "вычислений", то есть как бы обернуты в calc() по умолчанию.

Нижняя и верхняя строчки на картинке эквивалентны.

https://drafts.csswg.org/css-values/#comp-func

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

https://ru.ariarzer.dev/2023/tutorials/gradient-radio/

Рассказываю, как взаимодействуют новые индивидуальные свойства трансформаций друг с другом и свойством transform, в каком порядке они применяются и почему это важно знать при вёрстке.

https://ru.ariarzer.dev/2023/notes/transformation_order/index.html

Основываясь на предыдущей статье, рассказываю что такое самонаследуемость CSS-счетчиков и как с её помощью сделать нумерацию сколь угодно вложенного списка на всего одном счетчике.

https://ru.ariarzer.dev/2023/tutorials/counters-self-inheritance/

Наследование счетчиков.

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

https://ru.ariarzer.dev/2023/articles/counter_inheritance/

P.S. Статья максимально теоретическая. Практические туториалы на ее основе будут чуть-чуть попозже.

В новых разделах спецификации сделали очень удобное подсвечивание одинаковых терминов на небольшом отрывке текста по клику. Стало легче читать.

https://www.w3.org/TR/css-lists-3/#inheriting-counters

Существует свойство font, которое является шортхендом для всех свойств font-* и еще для line-height. Поддержка идеальная, еще c 11ie.

Идеально подходит для ваших систем типографики.
Вмеcто 3-5 строчек пишите одну - font: var(--h1_font);