100 Days Of More Or Less Modern CSS

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

  1. Day 46: ordering layers
  2. Day 45: the specificity of ::slotted() content
  3. Day 44: logical floating and clearing
  4. Day 43: grouping layers
  5. Day 42: aspect-ratio
  6. Day 41: custom properties and url()s
  7. Day 40: unlayered styles
  8. Day 39: comma-separated functional color notations
  9. Day 38: vh, svh, lvh, and dvh
  10. Day 37: cascade layers
  11. Day 36: :has() and pseudo-elements
  12. Day 35: forgiving selectors
  13. Day 34: :is() or :where()
  14. Day 33: Mathematical expressions in min(), max(), clamp()
  15. Day 32: the clamp() function
  16. Day 31: logical border properties
  17. Day 30: the hwb() color function
  18. Day 29: !important custom properties
  19. Day 28: custom properties and web components
  20. Day 27: the font-variation-settings property
  21. Day 26: using combinators in :has()
  22. Day 25: scrollbar gutters in body and html
  23. Day 24: the backdrop-filter property
  24. Day 23: the lab() color function
  25. Day 22: the ::backdrop pseudo-element
  26. Day 21: conic gradients
  27. Day 20: the scrollbar-gutter property
  28. Day 19: the placeholder-shown pseudo-class
  29. Day 18: inheritable styles and web components
  30. Day 17: the :picture-in-picture pseudo-class
  31. Day 16: the specificity of :has()
  32. Day 15: the :modal pseudo-class
  33. Day 14: the difference between :is() and :where()
  34. Day 13: the :where() and :is() pseudo-classes
  35. Day 12: max() trickery
  36. Day 11: space-separated functional color notations
  37. Day 10: global styles and web components
  38. Day 9: the inset shorthand property
  39. Day 8: nesting :has()
  40. Day 7: subgrids
  41. Day 6: the :has() pseudo-class
  42. Day 5: the max() function
  43. Day 4: the min() function
  44. Day 3: logical property shorthands
  45. Day 2: logical properties
  46. Day 1: custom properties and fallbacks