У меня сегодня первый рабочий день на новой работе, и я конечно же первым делом потащила в прод container queries.
Поэтому хочу показать вам красивую адаптивную сетку с сепараторами -
https://codepen.io/ariarzer/pen/dPbEKaq

P.S. комментарии по демкам всегда принимаются в личку, ссылка в закрепе.

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

Нам наконец-то завезут в следующем хроме функцию attr() в том виде, в котором ее планировали много лет назад!

Источник: https://developer.chrome.com/blog/advanced-attr

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

P.S. Для преобразования типов был только известный хак от Анны Тюдор как привести число к строке через счетчик. Можно было использовать для отображения числовых переменных через свойство content - https://codepen.io/ariarzer/pen/mdvwzaq

Мне было сегодня лет, когда я узнала, что в css оказывается есть свойство resize.

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

Такие красивые видео с демок теперь можно записывать так просто!

Сегодня день рождения CSS2 🥳🎂

Между прочим в сегодняшнюю агенду CSS Working Group включено обсуждение возможности вынимать единичные значения из шортхендов.

Из аудитории поступил вопрос что такое шортхенды.

Это от английского short hand, короткие руки.

Так вот, представьте тиранозавра. У него лапки короткие, печатать неудобно.
Поэтому он печатает не border-width, border-color и border-style отдельно, а сразу все в border.
Чтобы меньше печатать короткими лапками.

А вообще официальное определение есть на MDN, например.

🦖🦖🦖

Между прочим interpolate-size завезли в хром аж полгода назад. Смотрите что мы теперь можем делать с details.

https://dimox.name/animate-details-element-using-css/

И еще сегодня очередной день рождения CSS2 🥳🎂

28 годиков. Старше меня!

А вы знали, что next ломает вам типизацию перменных?

Если вы напишите ...

@property --var {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

...то next оптимизирует до initial-value: 0;, потому что cssnano в текущей последней версии next считает что это хорошо.
И работать конечно ничего не будет.

Что делать?

Писать initial-value: 0.0%;, либо менять тип на <length-percentage>.

Ну и ждать пока next обновит версию cssnano.

P.S. первый ночной пост в канале 👩‍💻🌚

Просто напоминаю, что существует сайт на старомонгольском.
У него уникальный режим письма: сверху вниз и слева направо.

https://president.mn/mng/

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

Что-то вроде условных импортов.

На скрине буквально написано, что если ты сейчас в директории freelance, то сходи и возьми вот этот файл конфига.

А то что выше в секции core, и если бы там еще что-то было, остается для всех вне зависимости от директории.