What Is @property In CSS 2023

By XiaoXin
A Bit Randomly

Install CouchDBStart the CouchDBCreate a databaseAdd documents to the databaseQuery the databaseCouchDB is a popular open-source database management system (DBMS) that is known for its simplicity and ease of use. It is a d... Read Basic Tutorial for CouchDB

Main Contents

What Is @property In CSS

The @property at-rule in CSS is part of the CSS Houdini umbrella of APIs, which allows developers to explicitly define custom CSS properties and control their behavior. The @property rule allows you to define the type of a custom property, set default values, and specify whether the property can inherit values from its parent element. This can be useful if you want to create custom properties that are strongly typed and well-defined, and that can be used consistently across your styles.

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;

The @property at-rule represents a custom property registration directly in a stylesheet, without the need to run any JavaScript. A valid @property rule results in a registered custom property, as if the CSS.registerProperty method had been called with equivalent parameters. This allows you to define and use custom properties directly in your stylesheets, without the need for additional code.

Please Share This Article Thank You!

Parts of CSS @At-Rules Explanation
What Is @supports In CSS

The @supports at-rule in CSS allows you to specify CSS declarations that depend on a browser's support for CSS features. This is commonly known as a feature query, and it allows you to write styles that are only applied if...

What Is @page In CSS

The @page at-rule in CSS is used to modify different aspects of a printed page, such as its dimensions, orientation, and margins. This allows you to control the appearance of your content when it is printed, and ensure tha...