Protips

• Set `:focus` for Form Elements

  • Demo

• Vertically-Center Anything

  • a nice write-up
  • Demo

• Use `aspect-ratio` Instead of Height/Width

  • web.dev post
  • Demo
  • Demo

• Select Items Using Negative `nth-child`

  • Demo

• Use SVG for Icons

  • back to IE9 - jif-whatev files.
  • back to IE9 - jif-whatev files.
  • back to IE9 - jif-whatev files.

• Use a CSS Reset

  • Demo

• Inherit `box-sizing`

  • Demo

• Use `:not()` to Apply/Unapply Borders on Navigation

  • Demo

• Check if Font Is Installed Locally

  • demo

• Add `line-height` to `body`

  • Demo

• Use the "Lobotomized Owl" Selector

  • Heydon Pickering's post
  • Demo
  • Heydon Pickering's post
  • Demo

• Equal-Width Table Cells

  • Demo
  • Demo

• Use Attribute Selectors with Empty Links

  • Demo

• Control Specificity Better with `:is()`

  • Demo

• Intrinsic Ratio Boxes

  • Demo
  • Demo

• Style Broken Images

  • Ire Aderinokun's post
  • Ire Aderinokun's post

• Use `:root` for Flexible Type

  • Demo
  • Demo

• Inherit `font` on Form Elements for a Better Mobile Experience

  • MDN's guide to styling web forms

• Use Pointer Events to Control Mouse Events

  • Pointer events

• Set `display: none` on Line Breaks Used as Spacing

  • Harry Roberts pointed out