Mastering Modern CSS: Unleashing @property and @supports for Dynamic Designs

CSS @property Rule

The CSS @property rule lets developers declare custom properties (CSS variables) with types, default values, and inheritance. It provides typed CSS variables that are more stable and easier to use in animations.

1. Syntax

@property --variable-name {
  syntax: "<data-type>";  /* Defines the type (color, length, number, etc.) */
  inherits: true | false;  /* Specifies if it should be inherited */
  initial-value: value;    /* Sets a default value */
}

1. Example: Typed CSS Variable

@property --main-color {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

div {
  background-color: var(--main-color);
}

🔹 Ensures that --main-color is always a color and defaults to blue.

1. Example: Animating a Custom Property

@property --border-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

.box {
  border: var(--border-size) solid black;
  transition: --border-size 0.5s ease-in-out;
}

.box:hover {
  --border-size: 10px;
}

🔹Allows --border-size to be animated, something that cannot be achieved with normal CSS variables.

1. Why Use @property?
   ✅ Better control over custom properties (type restriction, set defaults).
   ✅ Allow CSS transitions & animations on custom properties.
   ✅ Easier to maintain with variables being used properly.

2. Supported Data Types

6. Browser Support
🔹@property is experimental and only supported in Chromium-based browsers (Chrome, Edge, Opera) for now.

🔹Not supported yet in Firefox & Safari.

1. Animated Gradient with @property This example animates a gradient background color smoothly using a typed CSS variable.

@property --hue {
  syntax: "<number>";  /* Restrict to number values */
  inherits: false;
  initial-value: 0;    /* Default hue is 0 (red) */
}

.animated-box {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  animation: hueShift 5s linear infinite;
  background: linear-gradient(135deg, hsl(var(--hue), 100%, 50%), hsl(calc(var(--hue) + 60), 100%, 50%));
}

/* Animate the custom property */
@keyframes hueShift {
  from {
    --hue: 0;   /* Red */
  }
  to {
    --hue: 360; /* Full spectrum */
  }
}

🔹How It Works

1.@property --hue declares a custom property that stores a number (hue value for HSL colors).

1. hueShift animation alters --hue from 0 (red) to 360 (the entire color spectrum).
2. background applies hsl(var(--hue), 100%, 50%) to generate a smoothly transitioning gradient.
3. animation is configured to repeat indefinitely, producing a never-ending color-shifting effect.

✨ Live Effect
This effect produces a shimmering rainbow-colored animated gradient!

CSS @supports Rule

CSS @supports rule, also known as CSS Feature Query, enables developers to conditionally apply styles depending on the support for a specific CSS feature or property by the browser. It's similar to @media queries but checks for feature support instead of viewport size.

1. Syntax

@supports (property: value) {
/* CSS rules applied if the browser supports the property */
}

Example:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

🔹In case the browser supports CSS Grid (display: grid), styles within @supports will be enabled.

2. Using Multiple Conditions

• AND (and): All the conditions should be fulfilled.
• OR (or): Need at least one condition to be true.
• NOT (not): Only apply the styles if the feature is not supported. Examples:

/* Both flexbox and gap must be supported */
@supports (display: flex) and (gap: 10px) {
  .flex-container {
    display: flex;
    gap: 10px;
  }
}

/* Apply styles if either grid or flexbox is supported */
@supports (display: grid) or (display: flex) {
  .container {
    display: grid;
  }
}

/* Apply styles if display: grid is NOT supported */
@supports not (display: grid) {
  .container {
    display: block;
  }
}

Use Cases:

🔹Progressive Enhancement: Apply new CSS features only when supported.

🔹Graceful Fallbacks: Supply alternative styles when some features are not available.

🔹Cross-Browser Compatibility: Deal with inconsistencies in various browsers.