Designing forInclusion withMedia Queries
Boston CSS August 16, 2017

?

Level setting

What is the web?

HTMLCSSJSJSHTMLCSSHTMLdescribes meaning

JavaScriptadds behavior

CSScreates priority

What is compliance?

Responsive Design is adapting
design to an unknown browser.
You don’t make an assumption
about where it will be accessed.

Inclusive Design is adapting
design to an unknown user.
You don’t make an assumption
about who will use it.

What is a browser?

How does CSS fit in?

Media Queries describe
meaning in context

The basics

The absence of
support for media
queries is in fact thefirst media query.
—Bryan RiegerDisabilities

Physical

Disabilities
CognitivePhysicalDisabilities
Cognitive

When any device’s viewportreaches a minimum width of30 ems, do the following:Media Rule keyword@media (min-width: 30em) { … }Media Feature

Selectors anddeclarations

Media Rule keyword

Why ems?

@media (min-width: 30em) { … }Media Feature

Selectors anddeclarations

When a device with ascreen’s viewport reaches aminimum width of 30 ems,
do the following:Media Rule keywordMedia Type@media
screenand (min-width: 30em) { … }Media Feature

Selectors anddeclarations

all

All media type devices

aural

Speech and sound synthesizers

brailleBraille tactile feedback devices

embossed

Paged braille printershandheld

Small or handheld devices

print

Printers

projection

Projected presentations

screenComputer screens

speechSpeech synthesizers

tty

Teletypes and terminals

tv

Television-type devices

allAll media type devices

aural

Speech and sound synthesizers

brailleBraille tactile feedback devices

embossed

Paged braille printershandheld

Small or handheld devices

printPrinters

projection

Projected presentations

screenComputer screens

speechSpeech synthesizers

tty

Teletypes and terminals

tv

Television-type devices

allAll media type devices

aural

Speech and sound synthesizers

brailleBraille tactile feedback devices

embossed

Paged braille printershandheld

Small or handheld devices

print

Printers

projection

Projected presentations

screenComputer screens

speechSpeech synthesizers

tty

Teletypes and terminals

tv

Television-type devices

allAll media type devices

aural

Speech and sound synthesizers

brailleBraille tactile feedback devices

embossed

Paged braille printershandheld

Small or handheld devices

printPrinters

projection

Projected presentations

screenComputer screens

speechSpeech synthesizers

tty

Teletypes and terminals

tv

Television-type devices

allAll media type devices

aural

Speech and sound synthesizers

brailleBraille tactile feedback devices

embossed

Paged braille printershandheld

Small or handheld devices

print

Printers

projection

Projected presentations

screenComputer screens

speechSpeech synthesizers

tty

Teletypes and terminals

tv

Television-type devices

allAll media type devices

aural

Speech and sound synthesizers

brailleBraille tactile feedback devices

embossed

Paged braille printershandheld

Small or handheld devices

printPrinters

projection

Projected presentations

screenComputer screens

speechSpeech synthesizers

tty

Teletypes and terminals

tv

Television-type devices

width andheightheight

Height of the target media

width

Width of the target media

aspect-ratio

Ratio between the viewport’s height and widthcolor

The presence of color

color-index

Number of entries in the color look-up tablegrid

The device is a grid device (TTY terminal, etc.)

monochrome

Uses shades of a single color

orientation

Landscape or portrait

resolutionDisplay density (DPI, DPCM, etc.)

scan

Type of scanning process (ex: progressive)Deprecateddevice-aspect-ratio
device-heightdevice-width

Logicif@media (min-width: 30em) { … }and@media
screenand (min-height: 20em)
and (min-width: 30em) { … }or@media(max-width: 10em),(min-width: 20em) { … }not@media
not monochromeand (max-width: 10em) { … }.theme-background {background: linear-gradient(to bottom, #FF9900 0%, #FFFFFF 100%);}@media (grid) {.theme-background {img {display: none;}@mediaprint,monochrome {.theme-background {background: transparent;}}}}

Using them

Don’t go overboard
Treat layout as anenhancement
Let content
determinebreakpoints

.c-component {color: #000000 ;}@supports (background-blend-mode: multiply) {.c-component {color: #FFFFFF ;}}.c-component {color: #000000 ;}@supports (background-blend-mode: multiply) {.c-component {color: #FFFFFF ;}}.c-component {color: #000000 ;}@supports (background-blend-mode: multiply) {.c-component {color: #FFFFFF ;}}.c-component {background: linear-gradient(to bottom, #FF9900 0%, #FFFFFF 100%);
display: block;@supports (display: flex) {display: flex;}@media (grid) {img {display: none;}}@mediaprint, monochrome {background: transparent;}}

.c-component {background: linear-gradient(to bottom, #FF9900 0%, #FFFFFF 100%);
display: block;@supports (display: flex) {display: flex;}@media (grid) {img {display: none;}}@mediaprint, monochrome {background: transparent;}}TheObscureStuffbutton svg {fill: #B8E986;}@media (-ms-high-contrast: active) {button svg {fill: buttonFace;}
}

Text

windowText

Links

<a>

Selected text

highlightText & highlight

Button label

buttonFace

Backgroundwindow

.background {animation-name: zoom-and-pan;}@media (prefers-reduced-motion) {.background {animation: none;}}

The FutureColor Gamut

interaction

/* A pointing device with limited accuracy */@media (pointer: coarse) { … }/* An accurate pointing device */@media (pointer: fine) { … }/* No pointing device */@media (pointer: none) { … }/* A pointing device with limited accuracy */@media (pointer: coarse) { … }/* An accurate pointing device */@media (pointer: fine) { … }/* No pointing device */@media (pointer: none) { … }/* No hover support */@media (hover: none) { … }/* Device supports hovering */@media (hover: hover) { … }/* Device can emulate hover (i.e. long press) */@media (hover: on-demand) { … }/* No hover support */@media (hover: none) { … }/* Device supports hovering */@media (hover: hover) { … }/* Device can emulate hover (i.e. long press) */@media (hover: on-demand) { … }display

/* Normal browser appearance (tabs and other UI chrome) */@media (display-mode: browser) { … }/* Browser viewport uses all available space, no UI chrome */@media (display-mode: fullscreen) { … }/* Browser will behave like a native app */@media (display-mode: minimal-ui) { … }/* Will behave like a native app, with some minor exceptions */@media (display-mode: standalone) { … }/* Display updates infrequently */@media (update: slow) { … }/* Display updates frequently */@media (update: fast) { … }/* No update frequency info transmitted */@media (update: none) { … }Mobile First
Small, Portrait, Slow,Interlace, Monochrome,Coarse, Non-Hover
Andres Galantelight-level@media (light-level: normal) { … }dimwashednormal

The device is used in a environment with a light level inthe ideal range for the screen, and which does notnecessitate any particular adjustment.

dim

The device is used in a dim environment, whereexcessive contrast and brightness would be distracting
or uncomfortable to the reader. For example: nighttime, or a dimly illuminated indoor environment.

washedThe device is used in an exceptionally brightenvironment, causing the screen to be washed out anddifficult to read. For example: bright daylight.

scripting

@media (scripting: enabled) { … }noneinitial-onlyinitial-only“ Indicates that scripting is enabled during

the initial page load, but is not supported
afterwards. Examples are printed pages, orpre-rendering network proxies that rendera page on a server and send a nearly-static
version of the page to the user.”initial-only!
AAM“ Indicates that scripting is enabled during

RDOT

the initial page load, but is not supported
afterwards. Examples are printed pages, orpre-rendering network proxies that rendera page on a server and send a nearly-static
version of the page to the user.”Hinverted-colors

@media (inverted-colors) {img,video {filter: invert(100%);}}

@media (inverted-colors) {img,video {filter: invert(100%);}}

@media (prefers-reduced-motion) { … }Custom:root {}My cool
webpage!

:root {--brand-primary: #B300CC ;--brand-secondary: #FFDE00 ;}My cool
webpage!

:root {--brand-primary: #B300CC ;--brand-secondary: #FFDE00 ;}My cool
webpage!

body {
background-color: var(--brand-secondary);color: var(--brand-primary);}var themeStyles = document.body.style;themeStyles.setProperty(My cool
webpage!

'--brand-primary', '#FFDE00');
themeStyles.setProperty(

Invert Theme'--brand-secondary', '#B300CC');

var themeStyles = document.body.style;themeStyles.setProperty(My cool
webpage!

'--brand-primary', '#FFDE00');
themeStyles.setProperty('--brand-secondary', '#B300CC');

var themeStyles = document.body.style;themeStyles.setProperty(

My cool
webpage!

'--brand-primary', '#FFDE00');
themeStyles.setProperty('--brand-secondary', '#B300CC');

var themeStyles = document.body.style;themeStyles.setProperty(My cool
webpage!

'--brand-primary', '#FFDE00');
themeStyles.setProperty(

Invert Theme'--brand-secondary', '#B300CC');

var themeStyles = document.body.style;themeStyles.setProperty(My cool
webpage!

'--brand-primary', '#FFDE00');
themeStyles.setProperty(

Invert Theme'--brand-secondary', '#B300CC');

var themeStyles = document.body.style;themeStyles.setProperty(

My cool
webpage!

'--brand-primary', '#FFDE00');
themeStyles.setProperty(

Invert Theme'--brand-secondary', '#B300CC');

@custom-media --custom-bp (property: value);@media (--custom-bp) { … }@media (--custom-bp) { … }My cool
webpage!

@custom-media --custom-bp (property: value);@media (--custom-bp) { … }@media (--custom-bp) { … }My cool
webpage!

@custom-media --custom-bp (property: value);@media (--custom-bp) { … }@media (--custom-bp) { … }My cool
webpage!

@custom-media --custom-bp (property: value);@media (--custom-bp) { … }@media (--custom-bp) { … }My cool
webpage!

@custom-media --custom-bp (property: value);@media (--custom-bp) { … }@media (--custom-bp) { … }My cool
webpage!

Thanks!

ericwbailey.design
ericwbailey

most places (but mostly Twitter)References and Resources
WebAIM: Articles
http://webaim.org/articles/

Accessibility is about people, not standards - Part of a whole
http://incl.ca/accessibility-people-not-standards/

Think you know the top web browsers? - Samsung Internet Developers
https://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175

alrra/browser-logos
https://github.com/alrra/browser-logos/tree/master/src

Micah Godbolt on Twitter: “Writing correct CSS once is pretty easy. Makin…”
https://twitter.com/micahgodbolt/status/864260989629353985

Rethinking the Mobile Web by Yiibu
https://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Your Body Text Is Too Small - Marvel Blog
https://blog.marvelapp.com/body-text-small/

A Summer Designing for Autism
https://medium.com/google-design/a-summer-designing-for-autism-5859f8096b0b

Generation uX – how to make websites age-friendly | Be Good To Your Users
http://whatusersdo.com/blog/make-websites-age-friendly/What I've learned about motor impairment | SimplePrimate
http://simpleprimate.com/blog/motor

PX, EM or REM Media Queries
https://zellwk.com/blog/media-query-units/

The EMs have it: Proportional Media Queries FTW! - Cloud Four
https://cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/

Media Queries Level 4: 9. Appendix A: Deprecated Media Features
https://www.w3.org/TR/mediaqueries-4/#mf-deprecated

Logic in Media Queries | CSS Tricks
https://css-tricks.com/logic-in-media-queries/Size Calculator
https://sizecalc.com/

Using media queries | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

James Kyle on Twitter: “The biggest thing that breaks down CSS…”
https://twitter.com/thejameskyle/status/861539784312840192

Media Type Examples
https://storify.com/ericwbailey/media-type-examples@media - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

7 Habits of Highly Effective Media Queries | Brad Frost
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/@supports will change your life | Charlotte Jackson
https://www.lottejackson.com/learning/supports-will-change-your-life

cssnano: A modular minifier based on the PostCSS ecosystem
http://cssnano.co/

User Queries | Blog | Decade City
https://decadecity.net/blog/2015/06/28/user-queries

How to use -ms-high-contrast | Greg Whitworth
http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast

Shaun Finglas on Twitter: “Protip - max brightness and high contrast…”
http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast

Responsive Design for Motion | WebKit
https://webkit.org/blog/7551/responsive-design-for-motion/Media Queries Level 5: Editor’s Draft, 16 May 2017https://drafts.csswg.org/mediaqueries-5/

Responsive Color with Media Queries
http://furbo.org/color/ResponsiveColor/

Touch Devices Should Not Be Judged By Their Size | CSS-Tricks
https://css-tricks.com/touch-devices-not-judged-size/Lighthouse | Web | Google Developers
https://developers.google.com/web/tools/lighthouse/

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover,First | CSS- Tricks
https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/

How Many People With Disabilities Use My Website? - Mightybytes
https://www.mightybytes.com/blog/how-many-people-with-disabilities-use-my-website/

It’s Time To Start Using CSS Custom Properties - Smashing Magazine
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/

Locally Scoped CSS Variables: What, How, and Why | Una Kravets Online
https://una.im/local-css-vars/

Steve Gardner on Twitter: “CSS variables (custom properties) makes…”
https://twitter.com/steveg3003/status/888500276847562752