• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS @property

← Previous Next →

🔹 What is CSS @property?

CSS @property is an at-rule that allows developers to define typed custom properties (variables) in CSS with additional control like defining the expected data type, syntax, and inheritance behavior.

It enhances the capabilities of regular CSS variables (--custom-property) by making them more animation-friendly and type-safe.

🔧 Note: @property is supported in modern browsers like Chrome and Edge. Firefox support is still experimental.

🔸 Syntax

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

Parameters:

Property Description
syntax Defines the type of value (<color>, <length>, <number>, etc.)
inherits Boolean. Whether the variable should inherit from its parent
initial-value The default value if none is defined

🔸 Example 1: Defining a Color Variable with @property

@property --main-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

:root {
  --main-color: red;
}

h1 {
  color: var(--main-color);
}

🔸 Example 2: Animating a Custom Property

@property --progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  --progress: 0;
  animation: fill 3s forwards;
}

@keyframes fill {
  to {
    --progress: 100;
  }
}

Now this value can be used in width, transform, etc., dynamically.

🔸 Why Use @property?

✅ Enables animation of custom properties
✅ Adds type-checking to variables
✅ Allows default/fallback values
✅ Controls inheritance behavior

🔸 Supported Syntax Values

Syntax Meaning
<color> Any valid CSS color
<length> px, em, rem, etc.
<number> Any number (no unit)
<percentage> % values
<angle> deg, rad, etc.
<transform-function> rotate(), scale(), etc.

Practice Questions

Q1. Define a typed color custom property --accent-color with default blue.

Q2. Create a <number> property --scale-factor for animations.

Q3. Animate --width-percent from 0 to 100.

Q4. Use --angle in a rotate() transform with animation.

Q5. Make a --padding-size custom property using <length>.

Q6. Create an @property and use it in a box-shadow color.

Q7. Add a fallback color using initial-value in @property.

Q8. Create an inherited variable --font-scale and apply it.

Q9. Use --lightness property and animate HSL values.

Q10. Declare a custom property with <percentage> syntax for responsive layout.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top