CSS Custom Properties (CSS променливи)

В CSS съществуват променливи, макар и да не са много популярни. Правилното им име всъщност е custom properties. Chrome и Safari ги поддържат от 5 години насам, а Firefox — даже от 7. Може би не са особено популярни, защото IE не ги поддържа. Последната му версия (11) обаче вече има пазарен дял по-малък от 1% (поне по някои статистики), така че е крайно време да се възползваме от всичко, което CSS custom property-тата предлагат.

Правилата за преводи в WordPress обществото предлагат думата “custom” да се представя на български като “собствен”, а “property” — като “свойство”. Затова в бъдеще може да използвам наименованието “собствени свойства”.

Синтаксис

Та, собствени свойства в CSS се наименуват като първо се изпишат две тирета: --, а след това и някакво име, което искаме да дадем на свойството. Могат да се ползват чрез функцията var() за да се зададат динамични стойности в други декларации.

Примерно:

Примерът е доста базов (и грозен), но представя най-елементарното предназначение на променливите в CSS. То е, ако в някой момент решим да променим често срещан параметър (като например цвят), да не се налага да правим find-replace в целия source code на сайта. Вместо това, custom property-тата позволяват да променим цвета на едно единствено място и той да окаже влияние навсякъде.

Разбира се не сме ограничени до цветове, а можем да записваме шрифтове, размери и каквото друго се сетите.

Обхват (scope)

Променливите са дефинирани за елемента html. Това прави променливите глобални. Тоест — могат да се ползват навсякъде по-долу.

Да разгледаме следния пример:

Това което е различно от първия пример е:

• премахнали сме --light-text-color дефиницията
• вместо body използваме * за да зададем цвят на текста по подразбиране
• вътре в .header, .footer селектора сме добавили повторно --text-color, но този път със стойност white

По този начин презаписваме стойността на --text-color, но само за елементи вътре в .header, .footer.

Тъй като селекторът * match-ва всичко (включително и .footer), а не само body, сега вече футърът от примера не наследява черния цвят на текста от body, а сам назначава цвят на текста със стойност var(--text-color). Тъй като тази променлива има стойност white за този елемент, текстът всъщност е бял.

Стойности по подразбиране

Функцията var() приема и втори аргумент: стойност по подразбиране. Тя се използва, ако собственото свойство не е било дефинирано преди и не може да се определи неговата стойност.

Така можем да си спестим дефинирането на --text-color в html и да използваме директно var(--text-color, black):