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