A concept,

@ Property is a new CSS at-rule that is part of the CSS Houdini API. It allows developers to explicitly define CSS custom properties, perform property type checking, set default values, and define whether the custom property can be inherited. @Property can register custom properties directly in the stylesheet without running any JS code; It is also equipped with the corresponding JS syntax to register custom attributes. @property Is an updated version of CSS variables. It is more standardized and strict than CSS variables.

Let’s take a closer look at @property. Before we do that, take a quick look at CSS Houdini. Knowing the CSS Houdini helps us understand and master the development direction and design ideas of the CSS.

2. CSS Houdini

CSS Houdini is a set of low-level apis that expose parts of the CSS engine, enabling developers to extend CSS by adding styles and layout processes to the browser rendering engine. Giving developers direct access to the CSS object Model (CSSOM) allows developers to write code that the browser can parse into CSS to create new CSS features without waiting for them to be implemented locally in the browser.

The CSS Houdini API consists of the following parts:

  • CSS Parser API: AN API that more directly exposes CSS parsers. It parses any CSS class language into an intermediate type

  • CSS Properties and Values API: defines an API for registering new CSS Properties. Properties registered through the API can define their type, inheritance behavior, and initial values

  • CSS Typed OM (CSSOM) : This API converts CSSOM strings into Typed JavaScript. The CSSOM value is exposed as a typed JavaScript object so that its presentation can be controlled

  • CSS Layout API: An API designed to improve CSS scalability, it enables developers to write their own Layout algorithms, such as navigation or line snapping

  • CSS Painting API: An API designed to improve CSS extensibility, this API allows developers to write JavaScript functions using the paint() method to control the background, border, or content area of painted elements

  • Worklets: This API allows scripts to run at various stages of the rendering process independent of the JavaScript execution environment. Worklets are similar in concept to Web Workers and are called by and extend the rendering engine

  • CSS Animation API: This API allows us to drive key Animation effects based on user input

The development and improvement of the CSS Houdini API will greatly improve CSS access speed, programmability, scalability, and controllability. So much for CSS Houdini. The main purpose is to clarify that @Property is an important part of the CSS Properties and Values API.

@property syntax

1. Standard grammar

Standard grammar consists of the following three parts

  • @ property keyword
  • A custom property name (custom-property-name) must be prefixed with –. For example, – primary – color
  • Declaration-list
@property <custom-property-name> {
  <declaration-list>
}
Copy the code

2. The statement field

Declaration fields include syntax, inherits, and initial-value

  • Syntax: Type string. Defines the type of a custom property. For example, number, color, and percentage
  • [inherits: Type Boolean] Defines whether custom attributes allow inheritance
  • Initial-value: type conforming to the type defined by syntax, which defines the initial value
  • Syntax and inherits descriptors are required, and if either of them is missing, the entire rule is invalidated and ignored
  • The initial-value descriptor is optional only if the SYNTAX descriptor is a general SYNTAX definition, and is otherwise required

In the past, CSS variables have been used to declare variable examples

:root {
  --primary-color:green;
}

.box {
    background-color: var(--primary-color);
}
Copy the code

Now declare the variable example using @property

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: green;
}

:root{
    --primary-color: blue;
}

.box {
    background-color: var(--primary-color);
}
Copy the code

3. Syntax is available as a valid field

Many of the supported syntax in the CSS values and unit specifications can be used when registering custom properties

  • < length >
  • < number >
  • < percentage >
  • < length-percentage >
  • < color >
  • < image >
  • < url >
  • < integer >
  • < angle >
  • < time >
  • < resolution >
  • < transform-list >
  • < transform-function >
  • < custom-ident > (a custom identifier string)

4. Declare compound property values

Syntax supports compound attribute values, for example, font: Arial, Verdana, Geneva, SANS-serif, and border:1px solid # CCC, which are comma – or space-separated lists of values. For this scenario, syntax provides grammar +, #, | statement symbol

  • The symbol (+) is used to declare that a whitespace separated list of values is accepted

For example: “< length > +”

@property --padding{
    syntax: '<lenth>+';
    inherits: false;
}

.box{-padding:0 10px;
    padding: var(--padding);
}
Copy the code
  • Symbol (#), used to declare that a comma-separated list of values is accepted

For example: “< url > #”

@property --img-url{
    syntax: '<url>#';
    inherits: false;
}

.box{-img-url:url(img01.png),url(img02.png);
    background-image: var(--img-url);
}
Copy the code
  • Symbol (|), used to declare a different type of value

For example: “< length > | < length > + | auto”

@property --padding{
    syntax: '<length> | <lenth>+ | auto';
    inherits: false;
}

.box{-padding:10px auto;
    padding: var(--padding);
}
Copy the code

5. JS syntax for @property

The css. registerProperty method is used to register CSS custom properties. RegisterProperty is used in much the same way as @Property, including name, syntax, inherits, and initialValue, except that it registers custom properties and executes them in the JS context.

Register custom properties in JS

window.CSS.registerProperty({
    name: '--primary-color'.syntax: '<color>'.inherits: false.initialValue: 'green',})Copy the code

The CSS uses custom properties

.box{
    background-color:var(--primary-color);
    color:white;
}
Copy the code

Iv. Application and practice of @ Property

1. @property declaration custom attribute, more specification:

  • Value type detection can be added, and invalid attribute values are ignored.

Unlike CSS variables, @property is a custom property declaration. Values that are not valid for type checking are ignored. Invalid attribute values in CSS variables overwrite values inherited from external containers, invalidating custom variables.

@property --bg-color{
   syntax: '<color>+';
   inherits: false;
   initial-value: green;
}

.box{
    --bg-color:20px;
    background-color:var(--bg-color);
}
Copy the code

The final background of box is green. 20px is not valid and is ignored. In contrast to the CSS variable, 20px is not a valid value, but overwrites green, causing the background to fail

:root{--bg1-color:green; }.box1{
    --bg1-color:20px;
    background-color:var(--bg1-color);
}
Copy the code

View comparison Examples

  • You can set whether attribute values are allowed to inherit values from external containers
@property --custom-color{
    syntax: '<color>+';
    inherits: false;
    initial-value: green;
}

@property --font-color{
    syntax: '<color>+';
    inherits: true;
    initial-value: white;
}

:root{-font-color:yellow;
    --custom-color:blue;
}

.box{
    color:var(--font-color);
    background-color:var(--custom-color);
}
Copy the code

Box ends up with a green background and yellow font. Because we disallow –custom-color from inheriting values from external containers; Allows –font color to inherit values from external containers. See the effect

The 2.@property property supports transition animations

The custom property of the @property declaration supports the Transition animation. Don’t underestimate this small shift as it opens the door to the world of CSS animation. As long as your imagination is strong enough, you can create amazing CSS animations.

In the past, CSS variables were used to define the background gradient and animate the background without gradient

:root{
    --start-color1:red;
    --end-color1:black;
}

.child{
    background-image:linear-gradient(
    to bottom,
    var(--start-color1),
    var(--end-color1)
  );
}

.child:hover{
    --start-color1:green;
}
Copy the code

— child:nth-child(1)

Now, define the background gradient with @Property. The background has an animated gradient

@property --start-color{
    syntax:'<color>';
    inherits:false;
    initial-value:orange;
}

@property --end-color{
    syntax:'<color>';
    inherits:false;
    initial-value:black;
}

.child{
  background-image:linear-gradient(
    to bottom,
    var(--start-color),
    var(--end-color)
 );
}

.child:hover{
    --start-color: blue;
}
Copy the code

— child:nth-child(2)

Further, you can extend the gradient animation to [color gradient position].

@property --color-pos{
    syntax:'<length>|<length-percentage>|<percentage>';
    inherits:false;
    initial-value:90%;
}

.child{
  background-image:linear-gradient(
    to bottom,
    #f05b72 0,
    black var(--color-pos),
    #f05b72 100%
  );
}

.child:hover{-color-pos:10%;
}
Copy the code

— child:nth-child(3)

Further, animation can be extended to color channels, such as HSL

@keyframes huechange {
  to{-color-hue:360}}.child{
  background-color:hsl(var(--color-hue), 80%.50%);
}
.child:hover{
  animation:huechange 2s infinite linear;
}
Copy the code

— child:nth-child(4)

Use your imagination and turn it into a rainbow

@keyframes huechange {
  to{-color-hue:360}}.child{
  display:flex;
}
.child .rainbow{
  flex:1;
  background-color: hsl(var(--color-hue), 80%.50%);
  animation:huechange 2s calc(var(--index, 0) * -0.2 s) infinite linear;
}
Copy the code

— child:nth-child(5)

Five, the reference

Developer.mozilla.org/zh-CN/docs/…

Developer.mozilla.org/en-US/docs/…

Developer.mozilla.org/zh-CN/docs/…

Segmentfault.com/a/119000003…

Css-tricks.com/exploring-p…

www.w3cplus.com/css/css-at-…

Houdini. Glitch. Me/custom – prop…