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

[@drakamine2012]

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

[@daniiljavoronkov9480]

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

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

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

[@Kira-lj3nz]

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

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

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

[@Alexandr_Zavgorodniy]

Проблема в том, что если использовать property, то задание значений переменной в :root - бессмысленно и там можно хоть валидные значения писать, хоть невалидные, хоть вообще ничего не писать, все равно будет использовано значение из property. А вот если значение переменной задавать для конкретного селектора, то тогда, значение будет браться уже оттуда и если вдруг там окажется невалидное значение, то только в этом случае возьмется значение из property.
Вот тут:
HTML
Lorem ipsum dolor sit amet.
CSS
@property --my-color{
inherits: false;
syntax: "";
initial-value: red;
}
:root {
--my-color: green;
}
.example{
color: var(--my-color);
}
цвет текста будет красный.
а вот тут
CSS
@property --my-color{
inherits: false;
syntax: "";
initial-value: red;
}
.example{
--my-color: green;
color: var(--my-color);
}
как и задумывалось - зеленый. И только в случае если вместо green будет что-то невалидное, текст станет красным

[@annblok_webdev]

Да, этот момент упустила в видео. В root имеет смысл записывать что-то общее для всего сайта, а что-то иное, частное - лучше указать в нужном классе.

[@annblok_webdev]

Осталось разобраться с тем, куда использовать последнее значение для syntax, о котором говорила в конце видео

[@Alexandr_Zavgorodniy]

@@annblok_webdev единственное что удалось нарыть, так это то, что с помощью него можно задать набор валидных вариантов для *значения* свойства.
Как то так:
HTML
Lorem ipsum dolor sit amet.
CSS
@property --my-color {
inherits: false;
syntax: "red | blue";
initial-value: blue;
}
.example {
--my-color: green;
color: var(--my-color);
}
В этом случае значение --my-color может быть только red или blue. Т.е. --my-color: green; не сработает и цвет текста будет таким, как указано в initial-value, то есть синим

[@Alexandr_Zavgorodniy]

@@annblok_webdev вообще наткнулся на это в блоге "bobrov dev" (ютуб ссылку не пропускает, но если вместо пробела поставить точку то получиться адрес). Там и другие примеры есть, но для меня уже слишком сложные :) Может у вас получиться разобраться и рассказать об этом нам :)

[@annblok_webdev]

@@Alexandr_Zavgorodniy мне посоветовали еще спросить ChatGPT по поводу этого, ответ опубликовала в ТГ, так как тут фото не приложить - t.me/tpverstak/4032

[@rabirai8136]

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

[@karinakovalska9851]

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

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

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

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

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

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

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

[@kopchik1000]

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

[@ПавелМинич]

Похоже дальше с такими новациями через пару лет будем тут осваивать CSS++ ))

[@annblok_webdev]

🤣

[@Takao-tl2hk]

ты умничка!!!

[@payeermillionaire8093]

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

[@rashvmatrix9387]

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

[@CityGorsk]

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

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

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

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

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

[@krakanosh]

Интересное обновление, будем тестить и ждать большей поддержки👍

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

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

[@АнатолийАнатольевич-ю6з]

Обновления обычно дают плюсы, но есть и корявые, то есть, которые не довели до ума. Надеюсь это лучшее из лучших.

[@ЕленаФ-щ1ш]

Необычное сочетание: и красивая и умная девушка! Примеры очень убедительные, спасибо!

[@medeymarsik6566]

Информативные и понятные ролики, очередной замечательный разбор

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

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

[@tolasnisar2494]

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

[@AOFTG]

Это уже что-то вроде ООП CSS )))

[@annblok_webdev]

🤣

[@cryfos]

Интересно конечно😏

[@june3878]

Не думал, что встречу красивую программистку)

[@РоманНарожнов]

Спасибо!

[@mikhaildolgov]

Молодец!

[@РамзанДымов]

Обожаю Ваш канал и Ваши объяснения для чайников..! Плюс - Вы очень красивая девушка..!

[@HelloHovo]

Ну я всегда лайки ставлю

[@Comrade-tr1fe]

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

[@annblok_webdev]

Была такая идея. Думаю, сегодня или на следующей неделе провести.

[@AntonioBenderas]

TypeScript уже в CSS )

[@progweb3036]

Обнова хороша, но проблема что со временем в css может быть много неявностей (исходя из devtools которые вы показали)

[@annblok_webdev]

DevTools постоянно обновляют, вспомнить даже, как работалось раньше с flexbox и grid там, поэтому не исключаю, что и для этого что-то потом появится.

[@progweb3036]

@@annblok_webdev надеемся на лучшее)))

[@Jfhbs]

Хорошо растёшь удачи

[@robereds245]

у меня как раз были проблемы при учебе с этой темой !

[@АндрейИванов-ц7ф7ф]

Я даже и не знал что такое возможно.

[@Alex_Presli]

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

[@Длятвоейдуши-ь7е]

Спасибо дорогая за интересную информацию!!!!)))Хочу освоить новый метод!!!

[@AlenaRisk.]

Класс

[@zzzzzzzvvvvvvvv]

У Вас звезда в кодепене вообще не двигается. Или это у меня так? Как включить её? Или это только для PRO?

[@Agent-D]

Как всегда - очень интересно но пока непонятно.

[@Shir-Na-Shir]

👍

[@farmlingarchontas2216]

Неплохо. Я об этом даже не знал. Я еще в этом новичок... очевидно, не так ли?

[@Katy-go2]

Практичные обновления функций на сайте. Так намного удобнее.

[@user-FedorVorobyev]

Ничего не понял, а разве это новое в CSS? Везде вроде есть обзоры, и если не ошибаюсь, уже давно.

[@annblok_webdev]

var() уже давно есть, а @property мало кто использует, но там и поддержки
в браузерах пока не хватает

[@yaroslav_besfalin]

Нифига не понял но очень интересно

[@DerAleksey]

снова вишенка на торте 🍒

[@CityGorsk]

А ещё, очень красивая😍

[@sergejchap62]

дайте логику if ... else в CSS, всё будет в порядке. Прошу прощение, может она того, давно есть, но не знаем?

[@annblok_webdev]

в scss есть 😁

[@drakamine2012]

ЭТО НЕ ЯЗЫК ПРОГАММИРОВАНИЯ

[@TheEmeric]

там же 3 февраля

[@code-art-school]

Это прикольно, но зачем? Таймер без js странная затея, ведь когда время закончится, должно что то происходить, а css запустить js функцию не способен. Бесконечную анимацию тоже можно было делать и ранее...

[@sapiens386]

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

[@alf1etick]

Noice

[@ЯрославБобков-э5я]

а если вместо рэд написать 0 а по умолчанию поставить 10, то какое значение будет использоваться?

[@annblok_webdev]

Просто 10 не сработает. Нужно ещё единицу измерения указать.

[@ЯрославБобков-э5я]

@@annblok_webdev это понятно, так какое значение он будет использовать

[@annblok_webdev]

@@ЯрославБобков-э5я значение в property будет приоритетным, по сути это некий аналог !important, только для var()

[@ЯрославБобков-э5я]

@@annblok_webdev спасибо!

[@jakjar5765]

очень интересно но пока непонятно.

[@annblok_webdev]

Что осталось не понятным?

[@raselbabu5131]

12 months is too long, during this time everything will change