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 102: selecting the scoping root
  2. Day 101: scoping
  3. Day 100: it's over, or is it!?
  4. Day 99: native nesting
  5. Day 98: oklab() and oklch()
  6. Day 97: animating grids
  7. Day 96: the margin-trim property
  8. Day 95: the color-mix() function
  9. Day 94: the accent-color property
  10. Day 93: the lch() color function
  11. Day 92: relative color syntax
  12. Day 91: a previous sibling selector with :has()
  13. Day 90: scoped styles in container queries
  14. Day 89: higher-order custom properties
  15. Day 88: CSS Motion Path
  16. Day 87: mask properties
  17. Day 86: the initial-letter property
  18. Day 85: typed custom properties in container style queries
  19. Day 84: the @property at-rule
  20. Day 83: computed values in container style queries
  21. Day 82: value processing
  22. Day 81: the order of individual transform properties
  23. Day 80: container style queries
  24. Day 79: font-tech() and font-format()
  25. Day 78: container query units
  26. Day 77: block-size, inline-size, vi, and vb
  27. Day 76: overwriting colors in font palettes
  28. Day 75: font palettes
  29. Day 74: using !important in cascade layers
  30. Day 73: size container features
  31. Day 72: the masonry-auto-flow property
  32. Day 71: the masonry keyword
  33. Day 70: the defined pseudo-class
  34. Day 69: width in container queries
  35. Day 68: cascade layers and browser support
  36. Day 67: counting children
  37. Day 66: individual transform properties
  38. Day 65: using the em unit in container queries
  39. Day 64: the revert-layer keyword
  40. Day 63: explicit defaulting with inherit, initial, unset, and revert
  41. Day 62: the container shorthand
  42. Day 61: color-scheme
  43. Day 60: the ::part() pseudo-element
  44. Day 59: naming containers
  45. Day 58: ordering nested layers
  46. Day 57: media queries: range syntax
  47. Day 56: container queries
  48. Day 55: anonymous layers
  49. Day 54: testing for the support of a selector
  50. Day 53: disabling pull-to-refresh
  51. Day 52: declaring multiple layer lists
  52. Day 51: aspect-ratio and replaced elements
  53. Day 50: :has(:not()) vs. :not(:has())
  54. Day 49: layering entire style sheets
  55. Day 48: inset 0
  56. Day 47: the overscroll-behavior property
  57. Day 46: ordering layers
  58. Day 45: the specificity of ::slotted() content
  59. Day 44: logical floating and clearing
  60. Day 43: grouping layers
  61. Day 42: aspect-ratio
  62. Day 41: custom properties and url()s
  63. Day 40: unlayered styles
  64. Day 39: comma-separated functional color notations
  65. Day 38: vh, svh, lvh, and dvh
  66. Day 37: cascade layers
  67. Day 36: :has() and pseudo-elements
  68. Day 35: forgiving selectors
  69. Day 34: :is() or :where()
  70. Day 33: Mathematical expressions in min(), max(), clamp()
  71. Day 32: the clamp() function
  72. Day 31: logical border properties
  73. Day 30: the hwb() color function
  74. Day 29: !important custom properties
  75. Day 28: custom properties and web components
  76. Day 27: the font-variation-settings property
  77. Day 26: using combinators in :has()
  78. Day 25: scrollbar gutters in body and html
  79. Day 24: the backdrop-filter property
  80. Day 23: the lab() color function
  81. Day 22: the ::backdrop pseudo-element
  82. Day 21: conic gradients
  83. Day 20: the scrollbar-gutter property
  84. Day 19: the placeholder-shown pseudo-class
  85. Day 18: inheritable styles and web components
  86. Day 17: the :picture-in-picture pseudo-class
  87. Day 16: the specificity of :has()
  88. Day 15: the :modal pseudo-class
  89. Day 14: the difference between :is() and :where()
  90. Day 13: the :where() and :is() pseudo-classes
  91. Day 12: max() trickery
  92. Day 11: space-separated functional color notations
  93. Day 10: global styles and web components
  94. Day 9: the inset shorthand property
  95. Day 8: nesting :has()
  96. Day 7: subgrids
  97. Day 6: the :has() pseudo-class
  98. Day 5: the max() function
  99. Day 4: the min() function
  100. Day 3: logical property shorthands
  101. Day 2: logical properties
  102. Day 1: custom properties and fallbacks