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