feat(curriculum): add interactive examples to "What Is the @Property Rule, and How Does It Work with Fallbacks?" lesson (#63123)

curriculum/challenges/english/blocks/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-at-property-rule
 ---
 
-# --description--
+# --interactive--
 
 The `@property` rule is a powerful CSS feature that allows developers to define custom properties with greater control over their behavior, including how they animate and their initial values. 
 
@@ -31,6 +31,13 @@ The `--property-name` is the name of the custom property you're defining. Like a
 
 Here's a practical example of using the `@property` rule:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<button class="button">Click Me</button>
+```
+
 ```css
 @property --main-color {
   syntax: '<color>';
@@ -43,10 +50,19 @@ Here's a practical example of using the `@property` rule:
 }
 ```
 
+:::
+
 In this example, we're defining a custom property `--main-color` as a `color` value, setting it to not inherit, and giving it an initial value of `#3498db`.
 
 One of the key benefits of the `@property` rule is that it allows for animation of custom properties, which wasn't possible before:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="gradient-box"></div>
+```
+
 ```css
 @property --gradient-angle {
   syntax: '<angle>';
@@ -66,6 +82,8 @@ One of the key benefits of the `@property` rule is that it allows for animation
 }
 ```
 
+:::
+
 The code above creates a gradient that smoothly animates when the element is hovered over, something that wasn't achievable with standard custom properties.
 
 Now, let's discuss how the `@property` rule works with fallbacks. 
@@ -74,6 +92,12 @@ Fallbacks are crucial in CSS to ensure that styles degrade gracefully in browser
 
 For browsers that don't support the `@property` rule, you can provide a fallback by declaring the custom property in the traditional way:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+```
+
 ```css
 :root {
   --main-color: #3498db;
@@ -84,22 +108,44 @@ For browsers that don't support the `@property` rule, you can provide a fallback
   inherits: false;
   initial-value: #3498db;
 }
+
+body {
+  background-color: var(--main-color);
+}
 ```
 
+:::
+
 In this case, browsers that support `@property` will use the more strictly defined version, while others will fall back to the standard custom property declaration.
 
 When using the custom property, you can provide a fallback value using the `var()` function, just as you would with standard custom properties:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<button class="button">Click Me</button>
+```
+
 ```css
 .button {
   background-color: var(--main-color, #3498db);
 }
 ```
 
+:::
+
 This ensures that even if the `--main-color` property is not defined or is invalid, the button will still have a background color.
 
 The `@property` rule also allows for more complex fallback scenarios. For instance, you can use it to provide type-safe fallbacks:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="box">Colored box</div>
+```
+
 ```css
 @property --padding {
   syntax: '<length>';
@@ -108,10 +154,16 @@ The `@property` rule also allows for more complex fallback scenarios. For instan
 }
 
 .box {
+  width: 100px;
+  height: 100px;
+  background-color: darkred;
+  color: white;
   padding: var(--padding);
 }
 ```
 
+:::
+
 In this case, if someone tries to set `--padding` to an invalid value, like a color, the browser will fall back to the initial value of `10px`, maintaining type safety.
 
 It's worth noting that the `@property` rule itself is not yet universally supported. As of mid-2023, it's supported in Chrome, Edge, and Opera, with Firefox support behind a flag. For broader browser support, it's important to provide fallbacks and use feature detection.