CSS variable talk

Stage 1 - outline button

1. CSS fallback must be used

   1. To reduce specificity
   2. User need not know the implementation (like have we uses css class, id or element )
2. Private variables approach --_color: black
3. @property and initial value

   1. Con - It will be global fallback
   2. --color is too generic to provide as fallback

Stage 2 - glossy button

1. Space toggle technique

   1. --glossy: provide space as a value to the variable is valid
   2. --glossy: var(--On) should toggle glossy from CSS without JS
   3. Technique works cause of invalid value at computed time (ivct)
   4. invct makes properties unset
   5. unset refer to

      1. inherit properties becomes inherit
      2. other properties becomes initial
   6. Good for upcoming properties

      1. @supports with properties like future color gamut oklab

Stage 3 - Bar graph

1. Couter reset technique
2. Integer (number with decimal point) does not work with counters
3. @property could create number -> integer converter
4. Which rounds the % in bar
5. Future round() in css & text()
6. works with min() & I thought clamp could help
7. mapping one range to another [0, 100] -> [100px, 250px] - needs math formula
8. Color changing of the bar is done mapping range of hue value
9. number -> unit easy but reverse is not possible
10. future divide by unit var(--width) / 1px
11. Conditials

Stage 4 - Final act