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

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!