TIL was die Stunde von CSS geschlagen hat

A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann

Gunnar Bittersmann
Gunnar Bittersmann
@gunnarbittersmann
1 / 32
  • Share
  • Download
  • View all slides
  • Present

building a clock with modern CSS, including:

  • CSS counters, @counter-style and the ::marker pseudoelement
  • CSS nesting
  • custom properties
  • the aspect-ratio property
  • the :has() pseudoclass
  • container query units
  • the clamp() function
  • the @supports() query and the selector() function
  • quantity selectors
  • OpenType features: the font-feature-settings and
    font-variant-* properties
  • math functions sin(), cos(), tan(), sqrt()

polyfill with JavaScript:

  • the CSS.supports() query
  • MutationObserver

clockwork with JavaScript:

  • Intl.DateTimeFormat()

Code

The following code examples from the presentation can be tried out live.

Resources

The following resources were mentioned during the presentation or are useful additional information.