Property

2 snippets across 2 stacks — HTML & CSS, Python

Also written as at property

HCHTML & CSS

@property (Typed Custom Properties)

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.