SyntaxShelf

Property

2 snippets across 2 stacks - HTML & CSS, Python

Also written as at property

HCHTML & CSS

@property (Typed Custom Properties)

HC · Modern CSS
Syntax
@property --name {
  syntax: "<type>";
  inherits: true | false;
  initial-value: value;
}
Example
@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.gradient-box {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), #3b82f6, #8b5cf6);
  transition: --gradient-angle 0.5s ease;
}

.gradient-box:hover {
  --gradient-angle: 180deg;
}

Note @property registers a custom property with a specific type, enabling the browser to animate it. Without registration, custom properties are strings that cannot be transitioned. Supported types include <color>, <length>, <angle>, <number>, <percentage>.

PYPython

@property (Getters & Setters)

PY · Classes & OOP
Syntax
@property
def attr(self): ...
@attr.setter
def attr(self, value): ...
Example
class Temperature:
    def __init__(self, celsius: float):
        self._celsius = celsius

    @property
    def fahrenheit(self) -> float:
        return self._celsius * 9 / 5 + 32

    @property
    def celsius(self) -> float:
        return self._celsius

    @celsius.setter
    def celsius(self, value: float) -> None:
        if value < -273.15:
            raise ValueError("Below absolute zero")
        self._celsius = value

t = Temperature(100)
print(t.fahrenheit)
t.celsius = 0
print(t.fahrenheit)
Output
212.0
32.0

Note @property lets you expose computed values as attributes and add validation to setters without changing the caller's syntax.

Frequently asked questions

How does HTML & CSS handle property?
This task is covered in 2 stacks on this page: HTML & CSS, Python. The "@property (Typed Custom Properties)" snippet in HTML & CSS uses `@property --name {`.
Which code does the HTML & CSS example use?
The "@property (Typed Custom Properties)" snippet uses `@property --name {`, from the Modern CSS section of the HTML & CSS cheat sheet.
Which stacks cover "property" on this page?
HTML & CSS, Python. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "@property (Typed Custom Properties)": @property registers a custom property with a specific type, enabling the browser to animate it. Without registration, custom properties are strings that cannot be transitioned. Supported types include <color>, <length>, <angle>, <number>, <percentage>.

Browse all tasks by intent