0Pricing
CSS Academy · Lektion

CSS Properties and Values API (@property)

Registrieren Sie mit @property Custom Properties einschließlich Typen und Vererbung, damit CSS-Variablen animiert werden können.

CSS Properties and Values API (@property) ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist @property?

@property ist die CSS-Möglichkeit, eine benutzerdefinierte Eigenschaft mit einem Typ, einem Vererbungsverhalten und einem Anfangswert zu registrieren. Es ist die deklarative Form der CSS Properties and Values API (CSS.registerProperty).

@property-Syntax

Registrieren Sie eine benutzerdefinierte Eigenschaft mit drei erforderlichen Deskriptoren:

<div class="box"></div>

syntax-Deskriptor

Der syntax-Deskriptor definiert den Typ der Eigenschaft mithilfe von CSS-Typnamen:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" – akzeptiert jeden Wert (wie eine nicht registrierte Eigenschaft)

inherits-Deskriptor

Steuert, ob die Eigenschaft durch das DOM vererbt wird. Setzen Sie den Wert auf false, wenn die Eigenschaft pro Element isoliert sein soll.

initial-value-Deskriptor

Stellt einen garantierten Anfangswert bereit, wenn die Eigenschaft nicht gesetzt ist. Dadurch kann die Eigenschaft animiert werden.

Benutzerdefinierte Eigenschaften animieren

Der wichtigste Vorteil von @property: Registrierte benutzerdefinierte Eigenschaften können per Transition verändert und animiert werden, weil der Browser ihren Typ kennt und zwischen den Werten interpolieren kann:

<div class="element is-hovered"></div>

Ohne @property

Ohne Registrierung kennt CSS die Typen benutzerdefinierter Eigenschaften nicht. Übergänge zwischen zwei Variablenwerten springen statt zu interpolieren, da der Browser den Mittelpunkt eines unbekannten Typs nicht berechnen kann.

@property für die Animation von Farbverläufen

Farbverlaufsstopps animieren (zuvor ohne @property nicht möglich):

<div class="loader loading"></div>

JavaScript-Entsprechung

Sie können Eigenschaften auch über die JavaScript-API registrieren:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Browserunterstützung

@property wird in Chrome 85+, Edge 85+, Safari 16.4+ und Firefox 128+ unterstützt. In modernen Browsern ist die Funktion weit verbreitet verfügbar.

Praktische Einsatzmöglichkeiten von @property

Häufige Einsatzmöglichkeiten:

  • Positionen und Farben von Farbverläufen animieren
  • Farbton und Sättigung in HSL-Farben animieren
  • Füllanimationen für Fortschrittsbalken
  • Zähleranimationen zum Einblenden von Zahlen
  • Sanfte Übergänge zwischen dunklem und hellem Modus durch Animationen von Farb-Token

Schnelltest

Warum ist @property erforderlich, um benutzerdefinierte CSS-Eigenschaften zu animieren?

Zusammenfassung

@property registriert benutzerdefinierte Eigenschaften mit einem syntax-Typ, einem inherits-Flag und einem initial-value. Registrierte Eigenschaften können animiert und per Transition verändert werden, weil der Browser ihre typisierten Werte interpolieren kann. Dadurch werden Farbverlaufsanimationen, Farbtonübergänge und Zähleranimationen möglich, die mit nicht registrierten benutzerdefinierten Eigenschaften nicht möglich sind.

Häufig gestellte Fragen

Ist die Lektion „CSS Properties and Values API (@property)“ kostenlos?

Ja — der vollständige Text von „CSS Properties and Values API (@property)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS Properties and Values API (@property)“?

Registrieren Sie mit @property Custom Properties einschließlich Typen und Vererbung, damit CSS-Variablen animiert werden können. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „CSS Properties and Values API (@property)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das CSS Typed Object Model (OM)
  2. CSS Properties and Values API (@property)
  3. CSS Paint API: Worklets
  4. CSS Layout API und Geltungsbereich
← Zurück zu CSS Academy