Почему CSS кастомные свойства (CSS custom properties типа --color-text-1) нельзя называть "CSS переменными"?

Потому что одно и то же свойство может одновременно иметь одно значение в одном компоненте, другое во втором, и третье - в третьем.

Переменные так не умеют.

#css #learning

Как отключить scroll страницы, когда показываешь модальный диалог через <dialog>?

body:has(dialog[open]) {
  overflow: hidden;
}

Размыть фон/overlay?

dialog::backdrop {
  backdrop-filter: blur(2px);
}

#css #tip #scroll

Интересная опен-сорсная дизайн система для вдохновения

open-props

#css

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

h1 {
  font-size: clamp(24px, 4vw, 48px);
}

.container {
  width: clamp(300px, 50%, 900px);
}

.element {
  padding: clamp(10px, 2vw, 1.5rem);
}

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

#css

Интересное решение на CSS определить, что содержимое блока не помещается в нем и сделать что-то - через определение появления скролла и установку CSS кастомного свойства

https://codepen.io/robinrendle/pen/MWRxNJr

#css

В Chrome Canary уже тестируются CSS custom functions

@function --negate(--value) {
    result: calc(-1 * var(--value));
}

:root {
  padding: --negate(1px);    /* = -1px */
}

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

Интересно, что внутрь тела этих функций можно ставить, например, @media

Через три года в GitLub-е опять будут переписывать свою дизайн систему. Хочешь снизить прибыль компании и обеспечить фронтендеров большой зарплатой на много лет вперёд - используй Atomic CSS.

#css #chrome #gitlab

Если работаете с CSS properties в VS Code, то вот полезное расширение

CSS Variable Autocomplete

#css #tip

CSS свойства transform, opacity, filter и некоторые другие используют GPU компьютера для рендеринга.

Проверяйте в browser devtols, что им хватает ресурсов, они не грузят процессор и нет отброшенных фреймов

Свойство will-change используется чтобы явно включить GPU оптимизацию на элементе

#css #tip

Варианты анимации кнопок для вдохновения с кодом

#css