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