DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Powerful @property πŸ”₯
Alwar G
Alwar G

Posted on

Powerful @property πŸ”₯

After reading the wonderful post by @una, I know what is @property in CSS?

Β Β Β Β First of all, it's a CSS Houdini custom property. If you don't know what is CSS Houdini, then read this first.

ok, let's start.

CSS syntax:

// For Chromium 85 and above
  @property --MyColor {
    syntax: '<color>';
    initial-value: red;
    inherits: false;
  }
Enter fullscreen mode Exit fullscreen mode

Β Β Β Β  If your Chromium browser is from 78 and above and below 85, then you should include some javascript code to make this functionality to work.

Fallback JS code:

CSS.registerProperty({
  name: '--MyColor',
  syntax: '<color>',
  initialValue: 'red',
  inherits: false
});
Enter fullscreen mode Exit fullscreen mode

structure:

  • name - name of the property(eg: myColor, columnPercentage, etc...).
  • syntax - syntax of the property.
    Allowable values are

    1). length

    2). number

    3). percentage

    4). length-percentage

    5). color

    6). image

    7). url

    8). integer

    9). angle

    10). time

    11). resolution

    12). transform-list

    13). transform-function

    14). custom-ident

  • initial-value - Begining value of the property

  • inherits - Defines whether inherit the value from the parent or not

Β Β Β Β After knowing this thing as a web developer, you might have the following question.

How it defers from normal CSS variables?πŸ€”

Β Β Β Β In the CSS variable, we can only give value. But using the @property, we can define the syntax like value should be in color.

So, we can write the code with a more semantical meaning πŸ”₯.

Let's explore this property with the following Example

Note:

Β Β Β Β We can able to overwrite the values in the particular block like below.

  @property --Mycolor {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}
.text {
  --Mycolor: blue;
  color: var(--Mycolor); // blue
}
Enter fullscreen mode Exit fullscreen mode

Β Β Β Β If we give invalid value, then it will back off to the initial value. for example, if we give some number value(67) in the color property, then it will back off to the initial value(red).

.text {
  --Mycolor: 67;
  color: var(--Mycolor); // red
}
Enter fullscreen mode Exit fullscreen mode

I hope you enjoyed this post 😍. Thanks for reading.

Source Url: https://web.dev/at-property/

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.