slides.oddbird.net/rws/smashing/resilient/

Modern & Resilient

Miriam Suzanne @ Smashing Online

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);
  }

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

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

Browser Support is Not A Binary

Do Browsers Support CSS Grid?

Can I Use CSS Grid?

Do you like grid? check yes or no
Mixed yes/no/maybe answers

Arbitrary Cutoff 95% ? 100% ? Last Two ?

List of Supported Browsers

meme: That's not how this works! That's not how any of this works!

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

We Can Use Hover or Cursor Styles

Not worth much on touch devices…

Responsive To Viewport Height/Width

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

First… Browser Sniffing 

/* 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 }
/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

00s… IE Conditional Comments 

<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="css/ie7.css" />
< ![endif]-->
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="css/ie6.css" />
< ![endif]-->

2008… IE Conditional Classes

From Paul Irish 

<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->
div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

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… Cross-OS Browsers

https://www.microsoft.com/en-us/edge

Now… @media & @supports

Now… Better Dev Tools

CanIUse

StatCounter

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
Headshot of Jen Simmons

@jensimmons Jen Simmons

Resilient Videos

This Site

  • Responsive Font Sizes
  • Grid Layout
  • Custom Properties
  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)

Nova Website

  • Wide-Gamut Colors
  • Skew & Reverse-Skew (no fallback)
  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

CSS (Motion) Remedy 

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1s !important;
    animation-duration: 1s !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }
}
  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