• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS @property Quiz

Q1: What is the purpose of @property in CSS?

A. To define typed custom properties
B. To import stylesheets
C. To load fonts
D. To create classes

Q2: Which of the following is a valid @property syntax value?

A. <size>
B. <color>
C. <string>
D. <file>

Q3: What happens if a custom property is not defined but has initial-value?

A. The initial-value is used
B. Nothing is applied
C. Error is thrown
D. Value is inherited

Q4: Can @property be used to animate variables?

A. No
B. Yes
C. Only with JS
D. Only with !important

Q5: Which browsers currently support @property?

A. All browsers
B. Chrome & Edge
C. Firefox only
D. Safari only

Q6: Which is the correct way to define a color variable with @property?

A. syntax: '<color>';
B. syntax: color;
C. type: color;
D. color: true;

Q7: What is the purpose of the inherits field in @property?

A. Enables animation
B. Determines inheritance from parent
C. Changes specificity
D. Removes variable

Q8: Can you use @property without defining the variable with --name?

A. No
B. Yes
C. Only in JavaScript
D. Only with @keyframes

Q9: What is the initial value used for in @property?

A. A fallback value
B. To name the property
C. To control specificity
D. To define animation timing

Q10: Which of these is NOT a valid @property syntax type?

A. <number>
B. <string>
C. <color>
D. <length>
← Previous Next →
Login
Go Back Top