London CSS

what's new in 2020

Specs.then(Tools)

slides = [...Specs, ...Tools]

Rapid Fire

From risky and never in your browser
to stable and across many browsers!

Rad Proposals

Motion Blur

            .animated {
              motion-rendering: blur; 
              motion-shutter-angle: 180deg;
            }
          

@scroll-timeline

            @scroll-timeline feature-timeline {
              source: selector(#feature-carousel);
            }

            #feature-scrollspy {
              animation-timeline: feature-timeline;
            }
          

Leading Trim

            p {
              leading-trim: both;
            }
          

Cascade Layers

            @layer reset {
              * { box-sizing: border-box; }
              body { margin: 0; }
            }
            ...
            @layer reset { /* add more later */ }
          

Rad Drafts

Spleling & Grammar

            [spellcheck]::spelling-error {
              text-decoration: wavy underline var(--neon-red);
            }

            [spellcheck]::grammar-error {
              text-decoration: wavy underline var(--neon-blue);
            }
          

Will allow a limited set of allowable styles

::cue()

            ::cue {
              color: white;
              background-color: hsl(0 0% 0% / 90%);
            }
          

Will allow a limited set of allowable styles

:target-within

            article:target-within {
              background-color: hsl(var(--surfaceHSL) / 10%);
            }
          

& > and @nest

            article {
              & > p { ... }
              @nest section > & { ... }
            }
          

🆕 Relative Units

            p {
              margin: 1cap 1lh 1rlh;
              padding: 1vi 1vb;
            }
          

Color Level 4

            .colour {
              --fn-notation: hsl(2rad 50% 50% / 80%);
              --neon-pink: color(display-p3 1 0 1);
              --gray: lch(50% 0 0);
              --fallback: color(lab 25 25 25, display-p3 1 0 1, #ccc);
            }
          

Color Level 5

            .colour {
              --pink: color-mix(red, white);
              --halfpink: color(var(--pink) / 50%);
              --halfred: rgb(from #f00 / 50%);
              --darkred: hsl(from red h s calc(l * .25));
            }
          

Rad Specs

Contrast 3.0

• AA & AAA merge into one guideline
• Function updates include modern perceptual color research
• Font families, weights, etc are vectors in the score

HD Color

            @media (dynamic-range: high) {
              .neon-pink {
                --neon-glow: color(display-p3 1 0 1);
              }
            }
          

::marker

            li::marker {
              color: var(--neon-pink);
            }
          

:focus-visible

            button:focus:not(:focus-visible) {
              box-shadow: 0 10px 25px -10px hsl(0 0% 0% / 25%);
            }
          

Browser provided hook into focus heuristics

Logical Props

            p {
              max-inline-size: 40ch;
              margin-block: 1ch;
              padding-inline: 1ch;
              text-align: end;
            }
          

Web Animations

            element.animate(
              [{transform: `translate(${x}px, ${y}px)`}],
              {composite: 'add'},
            })
          

Data Saver

            @media (prefers-reduced-data: reduce) {
              header {
                background-image: url(/grunge.avif);
              }
            }
          

Rad Tools

WTF

Firefox Devtools

1. Flexbox tools
2. OG Grid tools
3. Font tools
4. .. plenty more

Chromium Devtools

1. Grid tools
2. Emulation tools
3. Font tools
4. CSS Overview
5. CSS <type> Components

Safari Devtools

1. Safari color() picker
2. Layers view

VisBug

1. Artboard illusion
2. Flexbox tools
3. Cross Browser Support

CSS is

CRUISIN

Thank You

London CSS

🎉 CSS 🎉

Hear it hot 👉 @argyleink