3 малоизвестные особенности CSS-переменных

Патрик Броссет — разработчик Edge — написал статью про малоизвестные особенности CSS-переменных — "3 things about CSS variables you might not know".

  1. Если переменная используется в наследуемом свойстве и она оказывается неопределена (например, из-за опечатки), то в этом случае значение свойства будет унаследовано. Если свойство ненаследуемое, оно будет установлено в значение по умолчанию.

  2. В var(--foo, fallback) вторым аргументом передаётся значение, которое будет использовано по умолчанию, если переменная будет неопределена. Также в var() можно вкладывать другие var'ы как фоллбеки: color: var(--foo, var(--bar, var(--baz))).

  3. Значение CSS-переменных это обычный текст. Это означает, что в них может содержаться строка с запятыми. То есть такое определение вполне валидно --my-variable: one, two, three;. Более того такую строку можно использовать в фоллбеке: content: var(--foo, one, two, three);, в этом случае в var содержится не четыре, а два аргумента.

Интересная статья. Рекомендую почитать всем, кто хочет узнать больше подробностей.

https://patrickbrosset.com/articles/2020-09-21-3-things-about-css-variables-you-might-not-know/

← На главную