Future CSS today

Modern CSS techniques we could use today.

Goals:

• No tooling 🔥
• More with less
• Great browser support

More goals:

More with less.

• Support for Opera Mini (1%), IE11 (0.5%), Safari 12-14 (0.5%), Android Browser 4.4.4 (0.3%), Chrome 69-89 (1.2%), Firefox 3.6
• No tooling*
• Same code for "mobile", "tablet", "desktop": no media queries
• Same code for touch, click, keyboard interfaces: no @hover, :hover, :focus
• Same code for LTR and RTL UI: no physical properties
• Same code for light and dark mode: ???
• Same code for Contrast themes: ???
• Same code for print stylesheets

Non-goals:

• Support for IE6-10 (0.1%), EdgeHTML (0.1%), Safari 3-12 (0.1%), Chrome 4-68 (0.3%)
• Best possible performance

Tools:

• https://preset-env.cssdb.org/
• https://codepen.io/argyleink/pen/LYEegOO
• https://github.com/csstools/cssdb
• Project Wallace
• ChatGPT
• cssnano
• Prettier

In:

https://2023.stateofcss.com/en-US/features/

• Layout
  • Logical properties and values
  • gap
  • Dynamic viewport units
• Animation
  • View transition API
• Images
  • image-set
• Fonts
  • system-ui
  • clamp
• Architecture
  • Custom selectors
  • Nesting
  • :has
• Custom properties
• Colors
  • color-mix
  • contrast
  • System colors
  • currentColor

If I had more time:

• Anchor positioning

For real-world Torchbox projects:

• Aspect ratio media queries
• Media query ranges
• Custom media queries
• Container queries
• Place properties
• Layers

---

• Django admin CSS
• Writing my own slide deck stylesheet
• Bakerydemo