Правило @property в CSS для переменных

Демо:

Видео:

Статья:

Таймкоды:
00:00 Вступление
01:16 Поддержка правила
01:38 Зачем обновлять браузер?
02:23 Реклама SkillFactory и МИФИ
03:58 Свойства для @property
05:22 @property и анимация
06:05 Простой пример
09:07 Тема для размышлений

[КсенияВарганова-шр]

Очень подробно и доступно рассказали как это работает.Мне было очень интересно.Посмотрела с удовольствием и с пользой.

[Kira-ljnz]

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

[СвітланаМартинюк-мр]

Не лише красуня а й справжня молодчинка. Дякую за таке цікаве і корисне відео.

[МаксонЮмагулов]

Аня давно не видел ваших видео насчёт работы с @property спасибо что рассказали

[rabirai]

Как это всё сложно но хорошо что есть ваши ролики Анна.

[ВалентинаМатвієнко-цы]

Все ясно и понятно рассказьіваете 👍 и очень приятно Вас смотреть и слушать.

[kopchik]

Ничего не понял но слушал с удовольствием. И смотрел тоже с удовольствием. Какие же у нее глаза😉

[СергейИванов]

Понятно и просто всё объяснили, видео получилось информативным и полезным.

[daniiljavoronkov]

Неужели еще и типы в css появились... И как обычно я об этом узнал от Анны. Спасибо!

[karinakovalska]

Вау . Вы так подробно и просто все объяснили . Благодарю

[payeermillionaire]

Уже давно занимаюсь версткой сайтов. Спасибо узнал новое)

[rashvmatrix]

Многое стало более понятно из ваших видео, продолжайте в том же духе.

[ЕвгешаГуденко]

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

[Alexandr_Zavgorodniy]

Проблема в том, что если использовать property, то задание значений переменной в :root - бессмысленно и там можно хоть валидные значения писать, хоть невалидные, хоть вообще ничего не писать, все равно будет использовано значение из property. А вот если значение переменной задавать для конкретного селектора, то тогда, значение будет браться уже оттуда и если вдруг там окажется невалидное значение, то только в этом случае возьмется значение из property.
Вот тут:
HTML
<p class="example">Lorem ipsum dolor sit amet.</p>

CSS
@property --my-color{
inherits: false;
syntax: "<color>";
initial-value: red;
}

:root {
--my-color: green;
}

.example{
color: var(--my-color);
}

цвет текста будет красный.

а вот тут
CSS

@property --my-color{
inherits: false;
syntax: "<color>";
initial-value: red;
}

.example{
--my-color: green;
color: var(--my-color);
}

как и задумывалось - зеленый. И только в случае если вместо green будет что-то невалидное, текст станет красным

[CityGorsk]

Вы очень образованная, хорошо и доходчиво объясняете каждый урок.

[drakamine]

моя жизнь больше никогда не будет прежней... css превращается в язык программирования...

[СергійКапустинський-св]

Вы хороший педагог, объясняете все очень просто и понятно.

[ВадимШторм-дю]

Очень хорошое видео, мне понравилось буду тестить

[tolasnisar]

У вас хороший канал, много полезной информации.

[Яблоньцвет]

Теперь и я в курсе. Мне нравится такое обновление.