slides.oddbird.net/workshops/23-smashing-de/6-resilient/

Resilient Styles

Miriam Suzanne @ Smashing Conf Freiburg

CSS is Resilient

CSS Errors Silently

ReferenceError Variable is not defined

SyntaxError Missing } after property list 

  @what about (this: fake code I) {
    made-up :: that's not valid at all?
  }

  html {
    background: rebeccapurple;
    beep: boop;
    color: white;
    color: color(display-p3 0.9975 0.7295 0.8147);
    color: fake;
  }

The Primary Feature Of CSS

The Primary Feature Of CSS The Entire Web

Web Compatible Forwards & Backwards

Web for all. Web on everything.

– World Wide Web Consortium, 1994

A zillion different devices of all sizes (original)
Lineup of smart watches
Braille keyboard and headphones
Google Home, Amazon Echo, and Apple HomePod

No Style is Universal

Browser Support is Not A Binary

SubGrid is Cool!

SubGrid Support?

Hand written note says I like you, do you like me?
Data on support for the css-subgrid feature across the major browsers from caniuse.com
X's, checks, and question marks scribbled all over the note in random red and green variations

18%???

Arbitrary Cutoff 95% ? 100% ? Last Two ?

You can use it and not use it at the same time, because it works and it doesn’t work at the same time. It’s Quantum CSS! It’s Magic!

– Jen Simmons, Intro to Resilient CSS

We Already Know How To Do This

Responsive ➡ Resilient

Re-Define What Support Means

Not Re-Writing For Every Viewport

But Building Progressive Enhancements

Then Support Everyone Possible

Tools Keep Getting Better

2004… 

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

2009… Modernizr for CSS3

Sniff features not browsers

.no-cssgradients .header {
  background: url("images/glossybutton.png");
}

.cssgradients .header {
  background-image: linear-gradient(deeppink, rebeccapurple);
}

Now… Evergreen Browsers

Now… @media & @supports

Now… Better Dev Tools

There’s more to CanIUse

Also… MDN

Mozilla Developer Network

Browser Testing Is Great When Possible

Browser Testing Is Required Constantly

  1. No Fallback Needed

  2. Silent Override
  3. Support Queries
  4. Selector Queries
  5. Preference Queries
  6. Media Features

This Site…

  • List Markers
  • Text Decoration
  • Scroll Snap
  • Clip Path
  1. No Fallback Needed

  2. Silent Override

  3. Support Queries
  4. Selector Queries
  5. Preference Queries
  6. Media Features

Order of Appearance

Is a progressive-enhancement feature

Headshot of Jen Simmons

@jensimmons Jen Simmons

Resilient Videos

This Site

  • Responsive Font Sizes
  • Grid Layout
  • Custom Properties

ToDo… Wide gamut colors

  1. No Fallback Needed
  2. Silent Override

  3. Support Queries

  4. Selector Queries
  5. Preference Queries
  6. Media Features

This Site…

  • Background-Clip Text
  • Variable Fonts
  • Object Fit (for flexing images)

ToDo… Wide gamut colors in custom props

  1. No Fallback Needed
  2. Silent Override
  3. Support Queries

  4. Selector Queries

  5. Preference Queries
  6. Media Features
  1. No Fallback Needed
  2. Silent Override
  3. Support Queries
  4. Selector Queries

  5. Preference Queries

  6. Media Features

@media Not Just Print & Viewport Sizes

prefers-color-scheme

light | dark | no-preference

prefers-contrast

low | high | no-preference

prefers-reduced-motion

reduce | no-preference

prefers-reduced-transparency

reduce | no-preference

Reduced Motion

Not reduced animation

See the Pen Reduced Motion by @miriamsuzanne on CodePen.

  1. No Fallback Needed
  2. Silent Override
  3. Support Queries
  4. Selector Queries
  5. Preference Queries

  6. Media Features

Combining Hover & Pointer Media 

/* touch screens */
@media (hover: none) and (pointer: coarse) { }

/* stylus-based screens */
@media (hover: none) and (pointer: fine) { }

/* gesture-based screens (Wii controller, Kinect) */
@media (hover: hover) and (pointer: coarse) { }

/* mouse & touch pad */
@media (hover: hover) and (pointer: fine) { }

Platform Status

Browser Issues

More Resources

Support More Browsers With Lower Standards

Care More By Caring Less