Отключване на магията на CSS: задълбочен поглед върху @property и дефинициите на персонализирани типове свойства

Персонализираните CSS свойства (известни още като CSS променливи) революционизираха начина, по който пишем и поддържаме CSS. Те предлагат възможност за преизползване, гъвкавост и лесна поддръжка, правейки нашите стилове по-динамични и управляеми. Въпреки това, доскоро персонализираните свойства нямаха възможността да дефинират очакваните от тях типове данни, което ограничаваше потенциала им за напреднало стилизиране и анимации. Тук се появява правилото @property – ключова промяна, която ни позволява изрично да дефинираме типа, синтаксиса и началната стойност на нашите персонализирани свойства.

Какво е правилото @property?

Правилото @property е част от семейството API-та на CSS Houdini, което цели да разкрие вътрешната работа на CSS енджина пред разработчиците. По-конкретно, @property е част от Custom Properties and Values API. То ви позволява да регистрирате персонализирано свойство в браузъра, като посочите неговите:

• name: Името на персонализираното свойство (напр. --my-color).
• syntax: Очакваният тип данни на свойството (напр. <color>, <number>, <length>).
• inherits: Дали свойството трябва да наследи стойността си от своя родителски елемент (true или false).
• initial-value: Стойността по подразбиране на свойството, ако не е посочена друга стойност.

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

Защо да използваме @property? Предимствата

Използването на @property предлага няколко значителни предимства:

1. Безопасност на типовете и валидация

Без @property, CSS третира всички персонализирани свойства като низове (strings). Това може да доведе до неочаквано поведение, когато се опитате да ги използвате в изчисления или анимации, които изискват специфични типове данни. Например, ако възнамерявате персонализирано свойство да представлява число, но случайно му присвоите стойност тип низ, вашите анимации може да се счупят или да дадат неправилни резултати.

@property решава този проблем, като ви позволява да посочите очаквания синтаксис (тип данни) на персонализираното свойство. След това браузърът ще валидира присвоената стойност спрямо този синтаксис, като гарантира, че тя отговаря на очаквания тип. Ако стойността не съответства на синтаксиса, браузърът ще използва началната стойност (ако е предоставена) или ще третира свойството като невалидно.

2. Плавни анимации и преходи

Истинската сила на @property се проявява, когато става въпрос за анимации и преходи. Без него, анимирането на персонализирани свойства може да бъде сложно, защото браузърът не знае как да интерполира между различните стойности на един обикновен низ. Може да се наложи да прибягвате до JavaScript трикове или да използвате ограничени CSS функции, за да постигнете желания ефект.

Като дефинирате синтаксиса на персонализирано свойство, вие казвате на браузъра как да интерполира между неговите стойности по време на анимации и преходи. Например, ако дефинирате персонализирано свойство със синтаксис <color>, браузърът знае, че трябва да интерполира между цветовете, използвайки плавен цветен градиент. По същия начин, ако дефинирате свойство със синтаксис <number>, браузърът знае, че трябва да интерполира между числата, използвайки линейна прогресия.

3. Подобрена четимост и поддръжка на кода

@property подобрява четимостта и поддръжката на вашия CSS код, като изяснява какъв тип данни се очаква да представлява дадено персонализирано свойство. Това помага на други разработчици (и на бъдещото ви аз) да разберат целта на свойството и как трябва да се използва.

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

4. Подобрена производителност

В някои случаи използването на @property може да подобри производителността на вашия CSS код. Като предоставяте на браузъра повече информация за очакваните типове данни на вашите персонализирани свойства, вие му позволявате да оптимизира процеса на рендиране. Това може да доведе до по-бързи анимации и преходи, особено при сложни оформления.

Синтаксисът на @property

Правилото @property се дефинира със следния синтаксис:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

Нека разгледаме всеки от тези компоненти:

• --property-name: Това е името на персонализираното свойство, което дефинирате. Трябва да започва с две тирета (--) и може да съдържа всякакви валидни символи за CSS идентификатор. Например: --primary-color, --font-size, --spacing-unit.
• syntax: Това указва очаквания тип данни на персонализираното свойство. Дефинира се с помощта на дескриптор за тип стойност в CSS. Някои често срещани стойности за синтаксис включват:
• <color>: Представлява стойност за цвят (напр. #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Представлява числова стойност (напр. 1, 3.14, -42).
• <length>: Представлява стойност за дължина (напр. 10px, 2em, 50vh, 1rem).
• <percentage>: Представлява процентна стойност (напр. 50%, 100%, 25.5%).
• <string>: Представлява стойност тип низ (напр. "Hello", "World").
• <image>: Представлява стойност за изображение (напр. url("image.jpg"), linear-gradient(...)).
• <angle>: Представлява стойност за ъгъл (напр. 45deg, 0.5rad, 1turn).
• *: Представлява всяка валидна CSS стойност. Използвайте с повишено внимание, тъй като това обезсмисля проверката на типовете.
• Персонализиран синтаксис: Позволява ви да дефинирате сложни синтаксиси, използвайки модели, подобни на регулярни изрази.
• inherits: Тази булева стойност определя дали персонализираното свойство трябва да наследи стойността си от своя родителски елемент. Ако е зададено на true, свойството ще се наследи. Ако е зададено на false, свойството няма да се наследи и ще използва своята начална стойност, ако не е изрично дефинирано на елемента. Стойността по подразбиране е false.
• initial-value: Това указва стойността по подразбиране на персонализираното свойство. Ако свойството не е изрично зададено на елемент, то ще използва тази стойност. Началната стойност трябва да бъде валидна стойност според посочения синтаксис. Ако не е предоставена начална стойност и не е зададена друга стойност, свойството ще се третира, сякаш има своята нулирана стойност (unset value).

Практически примери за @property в действие

Нека разгледаме някои практически примери за това как да използвате @property във вашия CSS код.

Пример 1: Анимиране на цвят

В този пример ще създадем персонализирано свойство, наречено --background-color, и ще го анимираме с помощта на CSS преходи. Ще дефинираме синтаксиса като <color>, за да гарантираме, че браузърът ще интерполира правилно между цветовете.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

В този код:

• Дефинираме персонализирано свойство --background-color със синтаксис <color>, задаваме inherits на false и initial-value на бяло (#ffffff).
• Прилагаме това свойство към background-color на елемент .box, използвайки var(--background-color).
• Добавяме преход към свойството --background-color, така че то да се анимира плавно при промяна на стойността.
• Променяме стойността на --background-color на синьо (#007bff) при посочване с мишката, създавайки плавен ефект на преход на цвета.

Пример 2: Анимиране на число

В този пример ще създадем персонализирано свойство, наречено --blur-radius, и ще го анимираме с помощта на CSS преходи. Ще дефинираме синтаксиса като <length>, за да гарантираме, че браузърът ще интерполира правилно между стойностите за дължина. Този пример също така показва популярен случай на употреба на дължини: стойности в пиксели. Това лесно може да се прехвърли и към други типове мерни единици. Важно е също да се отбележи, че задаването на начална стойност на `0px` е от решаващо значение, тъй като браузърът се нуждае от базова единица, за да извършва правилно преходите.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

В този код:

• Дефинираме персонализирано свойство --blur-radius със синтаксис <length>, задаваме inherits на false и initial-value на 0px.
• Прилагаме това свойство към функцията filter: blur() на елемент .image, използвайки var(--blur-radius).
• Добавяме преход към свойството --blur-radius, така че то да се анимира плавно при промяна на стойността.
• Променяме стойността на --blur-radius на 5px при посочване с мишката, създавайки плавен ефект на замъгляване.

Пример 3: Създаване на тематичен интерфейс с наследени свойства

В този пример ще създадем прост тематичен потребителски интерфейс, използвайки наследени персонализирани свойства. Ще дефинираме персонализирано свойство, наречено --theme-color, и ще го зададем на елемента :root. Това ще позволи на всички дъщерни елементи да наследят цвета на темата.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

В този код:

• Дефинираме персонализирано свойство --theme-color със синтаксис <color>, задаваме inherits на true и initial-value на зелено (#4caf50).
• Задаваме стойността на --theme-color на елемента :root, правейки я достъпна за всички елементи в документа.
• Използваме това свойство, за да зададем background-color на елемент .button.
• Променяме стойността на --theme-color на по-тъмно зелено (#388e3c) при посочване с мишката, демонстрирайки как наследените свойства могат лесно да бъдат актуализирани, за да се промени темата на потребителския интерфейс.

Пример 4: Дефиниране на персонализиран синтаксис

Свойството syntax може да приеме и низ за дефиниране на по-специфичен модел, което е особено полезно за валидиране на по-сложни стойности. Синтаксисът използва система, подобна на регулярни изрази, документирана в MDN (Mozilla Developer Network). Този пример илюстрира как да се дефинира и използва персонализиран синтаксис за позиция на фона, който приема ключовите думи `top`, `bottom`, `left` и `right` като валидни стойности.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Тук syntax е указан чрез строково представяне на валидните ключови думи. Нотацията `[ ]` дефинира набор от опции, символът `|` ги разделя, а `{1,2}` ограничава броя на разрешените стойности до една или две ключови думи. Ако се използва невалидна стойност като `center`, браузърът ще се върне към initial-value от `top left`.

Поддръжка от браузъри

Поддръжката на @property от браузърите е като цяло добра в съвременните браузъри, включително:

• Chrome (версия 64 и по-нова)
• Edge (версия 79 и по-нова - базиран на Chromium)
• Firefox (версия 72 и по-нова)
• Safari (версия 14.1 и по-нова)

Въпреки това, винаги е добра идея да проверявате най-новите таблици за съвместимост на браузърите на уебсайтове като Can I use..., за да се уверите, че функциите, които използвате, се поддържат от браузърите, които вашите потребители е вероятно да използват.

При по-стари браузъри, които не поддържат @property, браузърът ще игнорира правилото @property и просто ще третира персонализираното свойство като обикновена CSS променлива. Това означава, че анимациите и преходите може да не работят както се очаква, но кодът все пак ще бъде функционален.

Добри практики при използване на @property

Ето някои добри практики, които да имате предвид, когато използвате @property:

• Винаги дефинирайте синтаксиса: Уверете се, че винаги дефинирате syntax на вашите персонализирани свойства, за да осигурите безопасност на типовете и да позволите плавни анимации и преходи.
• Задайте начална стойност: Предоставете initial-value, за да осигурите стойност по подразбиране и да предотвратите неочаквани визуални проблеми.
• Използвайте описателни имена: Избирайте описателни имена за вашите персонализирани свойства, които ясно показват тяхната цел и тип данни. Например, използвайте --button-background-color вместо --color.
• Обмислете наследяването: Решете дали вашите персонализирани свойства трябва да се наследяват от техните родителски елементи или не. Използвайте inherits: true за свойства, които трябва да се споделят в целия потребителски интерфейс, като цветове на темата или размери на шрифта.
• Тествайте обстойно: Тествайте кода си в различни браузъри, за да се уверите, че работи както се очаква. Използвайте резервни механизми за по-стари браузъри, които не поддържат @property.
• Документирайте вашите персонализирани свойства: Добавете коментари към вашия CSS код, за да обясните целта и употребата на вашите персонализирани свойства. Това ще улесни другите разработчици (и бъдещото ви аз) да разберат кода ви. Инструменти като Stylelint също могат да бъдат конфигурирани да налагат тези добри практики.

@property и CSS Houdini

Както бе споменато по-рано, @property е част от семейството API-та на CSS Houdini. CSS Houdini е колекция от API-та на ниско ниво, които разкриват вътрешната работа на CSS енджина пред разработчиците, позволявайки им да разширяват CSS с персонализирани функции и поведения.

Други Houdini API-та включват:

• Paint API: Позволява ви да дефинирате персонализирани фонови изображения, рамки и маски с помощта на JavaScript.
• Animation Worklet API: Позволява ви да създавате високопроизводителни анимации с помощта на JavaScript.
• Layout API: Позволява ви да дефинирате персонализирани алгоритми за оформление на елементи, като грид системи или зидария (masonry layouts).
• Parser API: Позволява ви да анализирате и манипулирате CSS код с помощта на JavaScript.

Като комбинирате @property с други Houdini API-та, можете да създадете наистина мощни и персонализируеми CSS решения.

Заключение

Правилото @property е мощно допълнение към CSS, което ви позволява да дефинирате персонализирани типове свойства, позволявайки усъвършенствано стилизиране, анимации и преходи. Използвайки @property, можете да подобрите безопасността на типовете, четимостта, поддръжката и производителността на вашия CSS код.

Въпреки че поддръжката от браузърите е като цяло добра, е важно да тествате кода си в различни браузъри и да предоставяте резервни механизми за по-стари браузъри, които не поддържат @property.

Като следвате добрите практики, очертани в тази статия, можете да използвате силата на @property, за да създадете наистина невероятни уеб преживявания.

Допълнителни ресурси

• MDN Web Docs: @property
• Houdini.how: A Guide to CSS Houdini
• Can I use @property