Урок 37. Use CSS Variables to change several elements at once връзка>>
CSS променливите са мощен начин да промените много свойства на CSS стил наведнъж, като промените само една стойност. Следвайте инструкциите по-долу, за да видите как промяната на само три стойности може да промени стила на много елементи.В penguin - класа променете стойността на черното на сиво, на сивото на бяло и на жълтото на оранжево.
penguin class трябва да декларира променлива --penguin-skin и да ѝ присвои gray.
penguin class трябва да декларира променлива --penguin-belly и да ѝ присвои white.
penguin class трябва да декларира променлива --penguin-beak и да ѝ присвои orange.
Урок 38. Create a custom CSS Variable
За да създадете CSS променлива, просто трябва да й дадете име с две тирета пред нея и да й присвоите стойност като тази:
--penguin-skin: gray;
Това ще създаде променлива с име --penguin-skin и ще ѝ присвои стойност grey. Сега можете да използвате тази променлива във вашия CSS, за да промените стойността на други свойства на grey.
В класа пингвини създайте име на променлива --penguin-skin и ѝ дайте стойност grey.
Урок 39. Use a custom CSS Variable
След като създадете променливата си, можете да присвоите нейната стойност на други свойства на CSS, като се позовавате на името, което сте ѝ дали.
Например:
background: var(--penguin-skin);
Това ще промени фона на който и да е елемент в сив, защото това е стойността на променливата
--penguin-skin. Имайте предвид, че стиловете няма да се прилагат, освен ако имената на променливите не съвпадат точно.
Приложете променливата --penguin-skin към background свойството на класовете penguin-top, penguin-bottom, righthand и left-hand.
Урок 40. Attach a Fallback value to a CSS Variable
Когато използвате вашата променлива като стойност на свойството на CSS, можете да прикачите резервна стойност, към която вашият браузър ще се върне, ако дадената променлива е невалидна.
Забележка: Този резервен вариант не се използва за увеличаване на съвместимостта на браузъра и няма да работи в IE браузъри. По-скоро се използва, така че браузърът да има цвят за показване, ако не може да намери вашата променлива.
Ето как го правите:
background: var(--penguin-skin, black);
Това ще зададе фона на черен, ако вашата променлива не е зададена. Имайте предвид, че това може да бъде полезно за отстраняване на грешки.
Изглежда, че има проблем с променливите, предоставени на класовете .penguin-top и .penguin-bottom. Вместо да коригирате печатната грешка, добавете резервна стойност на black към background свойството на класовете .penguin-top и .penguin-bottom.
Урок 41. Improve Compatibility with Browser Fallbacks
Когато работите с CSS, вероятно ще срещнете проблеми със съвместимостта на браузъра. Ето защо е важно да осигурите резервни функции на браузъра, за да избегнете потенциални проблеми.
Когато вашият браузър анализира CSS на уеб страницата, той игнорира всички свойства, които не разпознава или не поддържа. Например, ако използвате CSS променлива, за да зададете цвят на фона на сайт, Internet Explorer ще игнорира цвета на фона, защото не поддържа CSS променливи. В този случай браузърът ще използва каквато стойност има за това свойство. Ако не може да намери друга стойност, зададена за това свойство, ще се върне към стойността по подразбиране, която обикновено не е идеална.
Това означава, че ако искате да предоставите грешки от браузър, трябва да предоставите друга по-широко поддържана стойност непосредствено преди вашата декларация. По този начин по-стар браузър ще има на какво да се върне, докато по-нов браузър просто ще интерпретира всяка декларация, която идва по-късно в каскадата.
Изглежда, че се използва променлива за задаване на цвета на фона на класа .red-box. Нека подобрим съвместимостта на нашия браузър, като добавим друга background декларация точно преди съществуващата декларация и зададем нейната стойност на red.
Урок 42. Inherit CSS Variables
Когато създавате променлива, тя е достъпна за използване в селектора, в който я създавате. Той също така е наличен във всеки от потомците на този селектор. Това се случва, защото CSS променливите се наследяват, точно както обикновените свойства.
За да се използва наследяването, CSS променливите често се дефинират в :root елемент.
:root е селектор на псевдоклас, който съответства на основния елемент на документа, обикновено html елемента. Като създадете вашите променливи в :root, те ще бъдат достъпни глобално и ще могат да бъдат достъпни от всеки друг селектор в стиловата таблица.
Дефинирайте променлива с име --penguin-belly в :root селектор и ѝ дайте стойност pink. След това можете да видите, че променливата е наследена и че всички дъщерни елементи, които я използват, получават розов фон.
Урок 43. Change a variable for a specific area
Когато създадете вашите променливи в :root, те ще зададат стойността на тази променлива за цялата страница.
След това можете да презапишете тези променливи, като ги зададете отново в конкретен селектор.
Променете стойността на --penguin-belly на white в класа penguin.
Урок 44. Use a media query to change a variable
CSS променливите могат да опростят начина, по който използвате медийни заявки.
Например, когато екранът ви е по-малък или по-голям от точката на прекъсване на вашата медийна заявка, можете да промените стойността на променлива и тя ще приложи стила си, където и да се използва.
В селектора :root на медийната заявка го променете, така че --penguin-size да бъде предефиниран и да му бъде дадена стойност от 200px. Също така, предефинирайте --penguin-skin и му дайте стойност на black. След това преоразмерете визуализацията, за да видите тази промяна в действие.
С това темите от раздел Basic CSS завършиха.
За други уроци отидете в Responsive Web Design>>