Things I want to get better at

CSS

• Nesting!! (needs to be default everywhere)
• Stacked Gradients
• Clip Path
• blend modes
• multiple backgrounds
• min() & max() & minmax()
• container queries
• CSS reduced motion best practices
• CSS Accessibilty best practices (ex: relative font sizes like ch vs rem)
• var() best practices
• clamp()
• CSS functions
• pretty text wrapping
• Counter properties
  • counter
  • counter-reset
  • reversed
  • counter-increment
• Lesser known pseudo-elements
  • ::marker
  • ::first-letter
  • :focus-widthin
  • ::grammar-error
  • ::highlight()
• Lesser known pseudo-class selectors
  • :is()
  • :has()
  • :where()
  • ::marker
  • :empty
  • :blank
  • :not
  • :default
  • :valid / :invalid
• Interaction Media Queries

  • @media (pointer: fine) {
      /* using a mouse or stylus */
    }
    @media (pointer: coarse) {
      /* using touch */
    }
    @media (hover: hover) {
      /* can be hovered */
    }
    @media (hover: none) {
      /* can't be hovered */
    }

• Randomly found:
  • @property
  • @scope
  • @starting-style
  • content-visibility
  • offset-position
  • text-wrap
  • white-space-collapse
  • zoom
  • mod()
  • round()

Javascript

• Copy SVG to CSS

HTML

• Semantic HTML tag best practices
• Lesser known HTML tags
  • mark
  • modal
• Code/Pre/Samp best practices
  • Comment I found: Use < code > for inline code that can wrap and < pre >< code > for block code that must not wrap. < samp > is for sample output, so I would avoid using it to represent sample code (which the reader is to input).

Other

• List of toggles/buttons/etc (example)
• Dark/light mode toggle best practice
• New reset using :where()? (example)
• Centering a div best practices (Good thread)

Just Modern CSS

Copy, paste, learn.