CSS RULEZ

• **@property** (*create types variables*) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property
• **@registerProperty** (*register properties as the one above*) https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty_static
• **align-content** (*works in blocks*) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-content
• **sibling-index()** https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sibling-index
• **sibling-count()** https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sibling-count
• ## Maths
• # Collecting cool CSS (and HTML) rules I find around so I can lower my websites' dependence on JavaScript
• ## Forms
• **@starting-style** (*makes transitions between (e.g. but not only) display none/display block smooth rather than instantaneous*) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
• **Snap control** (*define panning and scrolling by defining snap behaviour*) https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
• ## Select
• ## Colour
• **oklab()** (*express color in Oklab colour space*) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklab
• **Using relative colour syntax** https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors
• **@support** (*specify declaration based on browser support*) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports
• I'm starting to add some useful JS API which basically will save adding extra dependencies. Need to think if I want to keep them here and rename the board or move them somewhere else.
• **accent-color** https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/accent-color
• **Scroll-driven animations** (*define animations on a scroll-based timeline rather than default time-based*) https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations
• **color-scheme** https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
• ## Popover and DIalog
• ## Carousels
• **contrast-color()** (*takes a color value and return a contrasting color* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color
• **light-dark()** (*setup light and dark color scheme variants side-by-side in your CSS*) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark
• ## ViewTransition
• ## Layout
• **Background Fetch API** https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API
• **Battery Status API** https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API
• **downlink** (*shows network bandwidth*) https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink