Персонализирана CSS свойства

Този превод на "CSS потребителски свойства - Основи" - първото от поредица от статии за Serdzhio Gomesa обичай CSS свойства. Той обяснява основните неща: това, което е най-потребителски свойства и как да ги използвате.

Подкрепа браузър

Да започнем с най-важното: където работата по поръчка CSS собственост? В действителност, подкрепа е вече доста добре на пълен работен ден в Chrome, Opera, Firefox и Safari; Ръба, за да се развива. Track може да бъде по Мога ли да използвам променливите в CSS (персонализирани свойства).

Това означава, че те вече могат да се използват за постепенното подобрение, и веднага след като основен метод. В края на статията малко за това как да се копира функционалността на потребителски свойства PostCSS плъгини.

Задайте стойността на всяка стойност

Какво е обичай имот? С една дума, това CSS собственост, която може да се нарече и се използва от строителя. За разлика от вградените свойства, като например цвят или позиция, всеки от които браузър разбира по определен начин, има обичай имот няма друга стойност от тази, която той ще поиска от вас.

Персонализирани свойства са различни от нормално, просто като име - те имат представката '-'. Браузърът не прави нищо с нов имот. Ако зададете цвят собственост. тогава елементи, които съответстват на селектора, за да промените цвета на текста, ако зададете стойността на имота --text-цвят. непосредствена промяната няма да се случи.

Свойствата на потребителски CSS могат да се съхраняват всеки валиден CSS стойност.

повторна употреба

От обичай имоти ще бъде от голяма полза, ако само с тях да зададете стойности. Най-малкото, имате нужда от повече и да им се връща!

За да направите това, има Var () функция.

Ето, ние присвояване на стойността на фона на бутона, който се съхранява в имот --theme цвят на потребителя. На пръв поглед може да изглежда, че има малка разлика между този метод и прякото възлагане. Но ползите стават все по-очевидни, когато започнем да се използва --theme цвят в много селектори и свойства.

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

Какво става, ако --theme цвят никога настроен? Var () може да вземе втори незадължителен параметър, чиято стойност се използва по подразбиране.

Важно: Ако искате да използвате като стойност по подразбиране друга потребителска собственост, правилният синтаксис фон-цвят: Var (- тема цвят, Var (- резервно-цвят));

Обхват и каскада

Къде трябва да зададете тези стойности преди употреба? Персонализирани свойства следват стандартните правила относно обхвата и каскадни, така че вие ​​вече знаете как става това!

Например, за нещо като --theme цвят е най-добре да се използва глобалния обхват, че стойността е достъпна навсякъде. Най-лесният начин да направите това с помощта на псевдо-класовете: корен:

Стойността ще бъде на разположение навсякъде в документа и той ще бъде в състояние да използва всичките си бутони, заглавия и снимки.

Но какво, ако искате да сте имали свой собствен цвят на всяка част от вашия сайт? Можете да направите всичко, същите като преди, но сега ви се иска един обичай имот, вместо да се променя всеки имот, където тя се използва.

И разбира се, винаги може да направи изключение като задава сложни селектори какво имате нужда.

CSS математика

Функцията изчислено () често се комбинират различни мерни единици:

По време на изпълнението на браузъра изчислява окончателния размер в пиксели, което зависи от ширината на родителя.

Друг ас В Calc на дупка () - може да се използва с потребителски свойства! Тази комбинация може да бъде много полезно, така че тя да се обърне особено внимание на потребителя спецификация свойства.

Можете дори да комбинирате различни единици, при условие, че крайният резултат ще бъде от значение.

Сравнявайки персонализирани свойства с променливи в Sass, по-малко, PostCSS или други Предкомпилатори имайте предвид, че персонализирани свойства - те са истинската същност на браузъра. Това означава, че те могат да се променя динамично по време на изпълнение, за разлика от предварителна обработка на резултатите.

Персонализирани свойства са на разположение за всякакви методи член getPropertyValue и setProperty.

Промяна на стойността на един обичай веднага се отрази на всички свойства, които зависят от него, като че ли ги променили директно. Така че това е един чудесен начин да се промени веднага набор от елементи, с помощта на скриптове.

Повече информация по тази тема и най-добрите практики в използването на потребителски свойства в следната статия.

Приложение: плъгини PostCSS

Ако искате да започнете да използвате CSS потребителски свойства в момента, но трябва да се работи в браузъри, които не ги подкрепят все още, можете да попълнят празните места с помощта на PostCSS плъгини.

Ето кратък преглед на основните приложения на потребителски свойства и тяхната подкрепа в един чифт популярни плъгини.