designing for inclusion with - on.notist.cloud · designing for inclusion with media queries boston...
TRANSCRIPT
![Page 1: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/1.jpg)
Designing for Inclusion with Media QueriesBoston CSS August 16, 2017
![Page 2: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/2.jpg)
![Page 3: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/3.jpg)
![Page 4: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/4.jpg)
?
![Page 5: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/5.jpg)
Level setting
![Page 6: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/6.jpg)
What is the web?
![Page 7: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/7.jpg)
HTML JS
CSS
![Page 8: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/8.jpg)
HTML JS
CSS
![Page 9: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/9.jpg)
HTMLdescribes meaning
![Page 10: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/10.jpg)
JavaScriptadds behavior
![Page 11: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/11.jpg)
CSScreates priority
![Page 12: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/12.jpg)
What is compliance?
![Page 13: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/13.jpg)
Responsive Design is adapting design to an unknown browser.
You don’t make an assumption about where it will be accessed.
![Page 14: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/14.jpg)
Inclusive Design is adapting design to an unknown user.
You don’t make an assumption about who will use it.
![Page 15: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/15.jpg)
What is a browser?
![Page 16: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/16.jpg)
![Page 17: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/17.jpg)
![Page 18: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/18.jpg)
![Page 19: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/19.jpg)
![Page 20: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/20.jpg)
![Page 21: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/21.jpg)
![Page 22: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/22.jpg)
![Page 23: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/23.jpg)
![Page 24: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/24.jpg)
![Page 25: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/25.jpg)
![Page 26: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/26.jpg)
![Page 27: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/27.jpg)
![Page 28: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/28.jpg)
![Page 29: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/29.jpg)
![Page 30: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/30.jpg)
![Page 31: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/31.jpg)
![Page 32: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/32.jpg)
![Page 33: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/33.jpg)
How does CSS fit in?
![Page 34: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/34.jpg)
Media Queries describe meaning in context
![Page 35: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/35.jpg)
The basics
![Page 36: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/36.jpg)
The absence of support for media queries is in fact the first media query.
—Bryan Rieger
![Page 37: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/37.jpg)
![Page 38: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/38.jpg)
![Page 39: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/39.jpg)
![Page 40: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/40.jpg)
![Page 41: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/41.jpg)
![Page 42: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/42.jpg)
![Page 43: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/43.jpg)
Disabilities
![Page 44: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/44.jpg)
Disabilities
Cognitive
Physical
![Page 45: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/45.jpg)
Disabilities
Cognitive
Physical
![Page 46: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/46.jpg)
When any device’s viewport reaches a minimum width of 30 ems, do the following:
![Page 47: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/47.jpg)
@media (min-width: 30em) { … }
Media Rule keyword
Media Feature Selectors and declarations
![Page 48: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/48.jpg)
@media (min-width: 30em) { … }
Media Rule keyword
Media Feature Selectors and declarations
Why ems?
![Page 49: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/49.jpg)
When a device with a screen’s viewport reaches a
minimum width of 30 ems, do the following:
![Page 50: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/50.jpg)
@media
screen
and (min-width: 30em) { … }
Media Type
Media Rule keyword
Media Feature Selectors and declarations
![Page 51: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/51.jpg)
all
aural
braille
embossed
handheld
projection
screen
speech
tty
tv
All media type devices
Speech and sound synthesizers
Braille tactile feedback devices
Paged braille printers
Small or handheld devices
Printers
Projected presentations
Computer screens
Speech synthesizers
Teletypes and terminals
Television-type devices
![Page 52: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/52.jpg)
all
aural
braille
embossed
handheld
projection
screen
speech
tty
tv
All media type devices
Speech and sound synthesizers
Braille tactile feedback devices
Paged braille printers
Small or handheld devices
Printers
Projected presentations
Computer screens
Speech synthesizers
Teletypes and terminals
Television-type devices
![Page 53: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/53.jpg)
all
aural
braille
embossed
handheld
projection
screen
speech
tty
tv
All media type devices
Speech and sound synthesizers
Braille tactile feedback devices
Paged braille printers
Small or handheld devices
Printers
Projected presentations
Computer screens
Speech synthesizers
Teletypes and terminals
Television-type devices
![Page 54: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/54.jpg)
all
aural
braille
embossed
handheld
projection
screen
speech
tty
tv
All media type devices
Speech and sound synthesizers
Braille tactile feedback devices
Paged braille printers
Small or handheld devices
Printers
Projected presentations
Computer screens
Speech synthesizers
Teletypes and terminals
Television-type devices
![Page 55: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/55.jpg)
all
aural
braille
embossed
handheld
projection
screen
speech
tty
tv
All media type devices
Speech and sound synthesizers
Braille tactile feedback devices
Paged braille printers
Small or handheld devices
Printers
Projected presentations
Computer screens
Speech synthesizers
Teletypes and terminals
Television-type devices
![Page 56: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/56.jpg)
all
aural
braille
embossed
handheld
projection
screen
speech
tty
tv
All media type devices
Speech and sound synthesizers
Braille tactile feedback devices
Paged braille printers
Small or handheld devices
Printers
Projected presentations
Computer screens
Speech synthesizers
Teletypes and terminals
Television-type devices
![Page 57: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/57.jpg)
width and height
![Page 58: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/58.jpg)
height
width
aspect-ratio
color
color-index
grid
monochrome
orientation
resolution
scan
Height of the target media
Width of the target media
Ratio between the viewport’s height and width
The presence of color
Number of entries in the color look-up table
The device is a grid device (TTY terminal, etc.)
Uses shades of a single color
Landscape or portrait
Display density (DPI, DPCM, etc.)
Type of scanning process (ex: progressive)
![Page 59: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/59.jpg)
device-aspect-ratio
device-height
device-width
Deprecated
![Page 60: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/60.jpg)
Logic
![Page 61: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/61.jpg)
@media (min-width: 30em) { … }
if
![Page 62: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/62.jpg)
@media
screen
and (min-height: 20em)
and (min-width: 30em) { … }
and
![Page 63: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/63.jpg)
@media
(max-width: 10em),
(min-width: 20em) { … }
or
![Page 64: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/64.jpg)
@media
not monochrome
and (max-width: 10em) { … }
not
![Page 65: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/65.jpg)
.theme-background {
background: linear-gradient(to bottom, #FF9900 0%, #FFFFFF 100%);
}
@media (grid) {
.theme-background {
img {
display: none;
}
}
}
@media
print,
monochrome {
.theme-background {
background: transparent;
}
}
![Page 66: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/66.jpg)
Using them
![Page 67: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/67.jpg)
Don’t go overboard
Treat layout as an enhancement
Let content determine breakpoints
![Page 68: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/68.jpg)
.c-component {
color: #000000 ;
}
@supports (background-blend-mode: multiply) {
.c-component {
color: #FFFFFF ;
}
}
![Page 69: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/69.jpg)
.c-component {
color: #000000 ;
}
@supports (background-blend-mode: multiply) {
.c-component {
color: #FFFFFF ;
}
}
![Page 70: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/70.jpg)
.c-component {
color: #000000 ;
}
@supports (background-blend-mode: multiply) {
.c-component {
color: #FFFFFF ;
}
}
![Page 71: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/71.jpg)
.c-component {
background: linear-gradient(to bottom, #FF9900 0%, #FFFFFF 100%);
display: block;
@supports (display: flex) {
display: flex;
}
@media (grid) {
img {
display: none;
}
}
@media
print, monochrome {
background: transparent;
}
}
![Page 72: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/72.jpg)
.c-component {
background: linear-gradient(to bottom, #FF9900 0%, #FFFFFF 100%);
display: block;
@supports (display: flex) {
display: flex;
}
@media (grid) {
img {
display: none;
}
}
@media
print, monochrome {
background: transparent;
}
}
![Page 73: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/73.jpg)
The Obscure Stuff
![Page 74: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/74.jpg)
![Page 75: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/75.jpg)
![Page 76: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/76.jpg)
button svg {
fill: #B8E986;
}
@media (-ms-high-contrast: active) {
button svg {
fill: buttonFace;
}
}
![Page 77: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/77.jpg)
windowText
<a>
highlightText & highlight
buttonFace
window
Text
Links
Selected text
Button label
Background
![Page 78: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/78.jpg)
![Page 79: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/79.jpg)
.background {
animation-name: zoom-and-pan;
}
@media (prefers-reduced-motion) {
.background {
animation: none;
}
}
![Page 80: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/80.jpg)
![Page 81: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/81.jpg)
The Future
![Page 82: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/82.jpg)
Color Gamut
![Page 83: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/83.jpg)
interaction
![Page 84: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/84.jpg)
/* A pointing device with limited accuracy */
@media (pointer: coarse) { … }
/* An accurate pointing device */
@media (pointer: fine) { … }
/* No pointing device */
@media (pointer: none) { … }
![Page 85: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/85.jpg)
/* A pointing device with limited accuracy */
@media (pointer: coarse) { … }
/* An accurate pointing device */
@media (pointer: fine) { … }
/* No pointing device */
@media (pointer: none) { … }
![Page 86: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/86.jpg)
/* No hover support */
@media (hover: none) { … }
/* Device supports hovering */
@media (hover: hover) { … }
/* Device can emulate hover (i.e. long press) */
@media (hover: on-demand) { … }
![Page 87: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/87.jpg)
/* No hover support */
@media (hover: none) { … }
/* Device supports hovering */
@media (hover: hover) { … }
/* Device can emulate hover (i.e. long press) */
@media (hover: on-demand) { … }
![Page 88: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/88.jpg)
display
![Page 89: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/89.jpg)
/* 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) { … }
![Page 90: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/90.jpg)
/* Display updates infrequently */
@media (update: slow) { … }
/* Display updates frequently */
@media (update: fast) { … }
/* No update frequency info transmitted */
@media (update: none) { … }
![Page 91: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/91.jpg)
Mobile First
Andres Galante
Small, Portrait, Slow, Interlace, Monochrome,
Coarse, Non-Hover
![Page 92: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/92.jpg)
light-level
![Page 93: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/93.jpg)
@media (light-level: normal) { … }
dim
washed
![Page 94: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/94.jpg)
The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment.
The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.
The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.
normal
dim
washed
![Page 95: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/95.jpg)
scripting
![Page 96: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/96.jpg)
@media (scripting: enabled) { … }
none
initial-only
![Page 97: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/97.jpg)
initial-only
Indicates that scripting is enabled during the initial page load, but is not supported afterwards. Examples are printed pages, or pre-rendering network proxies that render a page on a server and send a nearly-static version of the page to the user.”
“
![Page 98: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/98.jpg)
initial-only
Indicates that scripting is enabled during the initial page load, but is not supported afterwards. Examples are printed pages, or pre-rendering network proxies that render a page on a server and send a nearly-static version of the page to the user.”
“
H O T D R A M A !
![Page 99: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/99.jpg)
inverted-colors
![Page 100: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/100.jpg)
@media (inverted-colors) {
img,
video {
filter: invert(100%);
}
}
![Page 101: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/101.jpg)
@media (inverted-colors) {
img,
video {
filter: invert(100%);
}
}
![Page 102: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/102.jpg)
@media (prefers-reduced-motion) { … }
![Page 103: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/103.jpg)
Custom
![Page 104: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/104.jpg)
:root {
}My cool
webpage!
![Page 105: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/105.jpg)
:root {
}
--brand-primary: #B300CC ;
--brand-secondary: #FFDE00 ;
My cool webpage!
![Page 106: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/106.jpg)
:root {
}
--brand-primary: #B300CC ;
--brand-secondary: #FFDE00 ;
My cool webpage!
body {
background-color: var(--brand-secondary);
color: var(--brand-primary);
}
My cool webpage!
![Page 107: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/107.jpg)
var themeStyles = document.body.style;
themeStyles.setProperty(
'--brand-primary', '#FFDE00'
);
themeStyles.setProperty(
'--brand-secondary', '#B300CC'
);
My cool webpage!My cool
webpage!My cool
webpage!My cool
webpage!
Invert Theme
My cool webpage!
Invert Theme
![Page 108: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/108.jpg)
var themeStyles = document.body.style;
themeStyles.setProperty(
'--brand-primary', '#FFDE00'
);
themeStyles.setProperty(
'--brand-secondary', '#B300CC'
);
My cool webpage!My cool
webpage!
![Page 109: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/109.jpg)
var themeStyles = document.body.style;
themeStyles.setProperty(
'--brand-primary', '#FFDE00'
);
themeStyles.setProperty(
'--brand-secondary', '#B300CC'
);
My cool webpage!My cool
webpage!My cool
webpage!My cool
webpage!
![Page 110: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/110.jpg)
var themeStyles = document.body.style;
themeStyles.setProperty(
'--brand-primary', '#FFDE00'
);
themeStyles.setProperty(
'--brand-secondary', '#B300CC'
);
My cool webpage!My cool
webpage!My cool
webpage!My cool
webpage!
Invert Theme
![Page 111: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/111.jpg)
var themeStyles = document.body.style;
themeStyles.setProperty(
'--brand-primary', '#FFDE00'
);
themeStyles.setProperty(
'--brand-secondary', '#B300CC'
);
My cool webpage!My cool
webpage!My cool
webpage!My cool
webpage!
Invert Theme
My cool webpage!
Invert Theme
![Page 112: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/112.jpg)
var themeStyles = document.body.style;
themeStyles.setProperty(
'--brand-primary', '#FFDE00'
);
themeStyles.setProperty(
'--brand-secondary', '#B300CC'
);
My cool webpage!My cool
webpage!My cool
webpage!My cool
webpage!
Invert Theme
![Page 113: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/113.jpg)
@custom-media --custom-bp (property: value);
@media (--custom-bp) { … }
@media (--custom-bp) { … }
My cool webpage!
![Page 114: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/114.jpg)
@custom-media --custom-bp (property: value);
@media (--custom-bp) { … }
@media (--custom-bp) { … }
My cool webpage!
![Page 115: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/115.jpg)
@custom-media --custom-bp (property: value);
@media (--custom-bp) { … }
@media (--custom-bp) { … }
My cool webpage!
![Page 116: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/116.jpg)
@custom-media --custom-bp (property: value);
@media (--custom-bp) { … }
@media (--custom-bp) { … }
My cool webpage!
![Page 117: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/117.jpg)
@custom-media --custom-bp (property: value);
@media (--custom-bp) { … }
@media (--custom-bp) { … }
My cool webpage!
![Page 118: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/118.jpg)
Thanks!
![Page 119: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/119.jpg)
ericwbailey.designericwbailey
most places (but mostly Twitter)
![Page 120: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/120.jpg)
WebAIM: Articleshttp://webaim.org/articles/
Accessibility is about people, not standards - Part of a wholehttp://incl.ca/accessibility-people-not-standards/
Think you know the top web browsers? - Samsung Internet Developershttps://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175
alrra/browser-logoshttps://github.com/alrra/browser-logos/tree/master/src
References and Resources
![Page 121: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/121.jpg)
Micah Godbolt on Twitter: “Writing correct CSS once is pretty easy. Makin…”https://twitter.com/micahgodbolt/status/864260989629353985
Rethinking the Mobile Web by Yiibuhttps://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Your Body Text Is Too Small - Marvel Bloghttps://blog.marvelapp.com/body-text-small/
A Summer Designing for Autismhttps://medium.com/google-design/a-summer-designing-for-autism-5859f8096b0b
Generation uX – how to make websites age-friendly | Be Good To Your Usershttp://whatusersdo.com/blog/make-websites-age-friendly/
![Page 122: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/122.jpg)
What I've learned about motor impairment | SimplePrimatehttp://simpleprimate.com/blog/motor
PX, EM or REM Media Querieshttps://zellwk.com/blog/media-query-units/
The EMs have it: Proportional Media Queries FTW! - Cloud Fourhttps://cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/
Media Queries Level 4: 9. Appendix A: Deprecated Media Featureshttps://www.w3.org/TR/mediaqueries-4/#mf-deprecated
Logic in Media Queries | CSS Trickshttps://css-tricks.com/logic-in-media-queries/
![Page 123: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/123.jpg)
Size Calculatorhttps://sizecalc.com/
Using media queries | MDNhttps://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 Exampleshttps://storify.com/ericwbailey/media-type-examples
@media - CSS | MDNhttps://developer.mozilla.org/en-US/docs/Web/CSS/@media
![Page 124: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/124.jpg)
7 Habits of Highly Effective Media Queries | Brad Frosthttp://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
@supports will change your life | Charlotte Jacksonhttps://www.lottejackson.com/learning/supports-will-change-your-life
cssnano: A modular minifier based on the PostCSS ecosystemhttp://cssnano.co/
User Queries | Blog | Decade Cityhttps://decadecity.net/blog/2015/06/28/user-queries
How to use -ms-high-contrast | Greg Whitworthhttp://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast
![Page 125: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/125.jpg)
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 | WebKithttps://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 Querieshttp://furbo.org/color/ResponsiveColor/
Touch Devices Should Not Be Judged By Their Size | CSS-Trickshttps://css-tricks.com/touch-devices-not-judged-size/
![Page 126: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/126.jpg)
Lighthouse | Web | Google Developershttps://developers.google.com/web/tools/lighthouse/
Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First | CSS- Trickshttps://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/
How Many People With Disabilities Use My Website? - Mightybyteshttps://www.mightybytes.com/blog/how-many-people-with-disabilities-use-my-website/
It’s Time To Start Using CSS Custom Properties - Smashing Magazinehttps://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
![Page 127: Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS](https://reader033.vdocuments.site/reader033/viewer/2022042223/5ec977bac3395877ef10b2e7/html5/thumbnails/127.jpg)
Locally Scoped CSS Variables: What, How, and Why | Una Kravets Onlinehttps://una.im/local-css-vars/
Steve Gardner on Twitter: “CSS variables (custom properties) makes…”https://twitter.com/steveg3003/status/888500276847562752