CSS mind
Вычисление с использованием собственных размеров. Не смотря на наличие определение собственных размеров в словаре Веб-стандаров, здесь можно считать, что собственные размеры - это те, что не могут быть установлены без отрисовки документа. Например нельзя…
Вообще самая приятная вещь относительно
А то, что размеры, рассчитанные внутри
Проще говоря, скоро у нас будет возможность анимировать что-нибудь в нулевого размера до размера
Подробности в заметке:
https://ru.ariarzer.dev/2024/notes/calc-size-2024/
calc-size()
это не то, что можно растягивать блок на половину максимального размера.А то, что размеры, рассчитанные внутри
calc-size()
, считаются определелямыми. Значит они могут быть конечной точкой анимации. Проще говоря, скоро у нас будет возможность анимировать что-нибудь в нулевого размера до размера
auto
.Подробности в заметке:
https://ru.ariarzer.dev/2024/notes/calc-size-2024/
ru.ariarzer.dev
Calc-size в 2024
Как анимировать значение до auto.
❤52
У меня сегодня первый рабочий день на новой работе, и я конечно же первым делом потащила в прод container queries.
Поэтому хочу показать вам красивую адаптивную сетку с сепараторами -
https://codepen.io/ariarzer/pen/dPbEKaq
P.S. комментарии по демкам всегда принимаются в личку, ссылка в закрепе.
P.P.S на самом деле сетка красивая, а вот код не очень, писать столько выражений для каждого случая - жесть. Но в жизни редко бывают такие мелкие сетки, поэтому можно немного пострадать, пока нам не завезут в каком-нибудь виде циклы.
Поэтому хочу показать вам красивую адаптивную сетку с сепараторами -
https://codepen.io/ariarzer/pen/dPbEKaq
P.S. комментарии по демкам всегда принимаются в личку, ссылка в закрепе.
P.P.S на самом деле сетка красивая, а вот код не очень, писать столько выражений для каждого случая - жесть. Но в жизни редко бывают такие мелкие сетки, поэтому можно немного пострадать, пока нам не завезут в каком-нибудь виде циклы.
codepen.io
responsive grid with separators
...
❤58
Нам наконец-то завезут в следующем хроме функцию
Источник: https://developer.chrome.com/blog/advanced-attr
Раньше с её помощью можно было получать значение атрибута только в виде строки.
Теперь можно будет указывать тип значения, и это очень важно, потому что преобразования типов в css нет как явления. И если у вас в атрибуте лежало число, использовать его для вычислений было невозможно. Пример тут.
P.S. Для преобразования типов был только известный хак от Анны Тюдор как привести число к строке через счетчик. Можно было использовать для отображения числовых переменных через свойство
attr()
в том виде, в котором ее планировали много лет назад!Источник: https://developer.chrome.com/blog/advanced-attr
Раньше с её помощью можно было получать значение атрибута только в виде строки.
Теперь можно будет указывать тип значения, и это очень важно, потому что преобразования типов в css нет как явления. И если у вас в атрибуте лежало число, использовать его для вычислений было невозможно. Пример тут.
P.S. Для преобразования типов был только известный хак от Анны Тюдор как привести число к строке через счетчик. Можно было использовать для отображения числовых переменных через свойство
content
- https://codepen.io/ariarzer/pen/mdvwzaqChrome for Developers
CSS attr() gets an upgrade | Blog | Chrome for Developers
You can now use attr() with any CSS property–including custom properties–and it can parse values into data types other than strings.
❤36
This media is not supported in your browser
VIEW IN TELEGRAM
Мне было сегодня лет, когда я узнала, что в css оказывается есть свойство resize.
https://codepen.io/ariarzer/pen/EaxmXKY
https://codepen.io/ariarzer/pen/EaxmXKY
❤63
CSS mind
У меня сегодня первый рабочий день на новой работе, и я конечно же первым делом потащила в прод container queries. Поэтому хочу показать вам красивую адаптивную сетку с сепараторами - https://codepen.io/ariarzer/pen/dPbEKaq P.S. комментарии по демкам всегда…
This media is not supported in your browser
VIEW IN TELEGRAM
Такие красивые видео с демок теперь можно записывать так просто!
❤40