Media Queries Level 4

Media Queries Level 4 By Florian Rivoal @frivoal Slides at florian.rivoal.net/talks/mq4/

MQ Basics

Media Types @media screen { a { color: cyan; text-decoration: underline; } } @media print { a::after { content: " (" attr(href) ")"; } } On screen: Foo On paper: Foo (http://foo.com)

Media Features @media (min-width: 20em) { blockquote { float: left; margin-top: 0; margin-left: 0; } }

Level 3 Media Features Only a few are useful in practice width

height

aspect-ratio

orientation

resolution

scan

grid

color

monochrome

color-index

device-width

device-height

device-aspect-ratio

Everything Together @media screen and (orientation: portrait), print { @media (min-width: 20em) and (max-width: 40em) { … } }

Syntax improvements in Level 4

Boolean Logic Syntax Before @media (min-width: 20em), (min-height: 40em) { @media not all and (pointer: none) { … } } After @media ((min-width: 20em) or (min-height: 40em)) and (not (pointer: none)) { … }

Shortcut @media not (foo: none) { /* or 0, or falsy value */ … } is the same as @media (foo) { … }

All improvements together Before @media (min-width: 20em), not all and (min-height: 40em) { @media not all and (pointer: none) { … } } After @media ((width >= 20em) or (height < 40em)) and (pointer) { … }

Unknown Values @media (width > 1px) or (weight < 40kg) { … } @media (width > 9000px) and (taste: sweet) { … } unknown or true = true unknown and false = false unknown and true = unknown unknown or false = unknown not unknown = unknown @media unknown = @media false

Media Types are dead, long live Media Features

The initial idea Must match exactly 1 of these: screen

print

speech

handheld

tv

projection

tty

braille

embossed

The problem @media screen { a { color: cyan; text-decoration: underline; } } @media print { a::after { content: " (" attr(href) ")"; } } 📵

😢

Media Features to the rescue pointer hover update overflow-block scripting laptop fine hover fast scroll enabled phone coarse none fast scroll enabled Wii coarse hover fast scroll enabled TV none none fast scroll enabled print none none none paged initial-only e-ink none none slow paged enabled Vivliostyle.js fine hover fast paged enabled

Media features width <length> Level 3 height <length> aspect-ratio <ratio> orientation portrait | landscape resolution <resolution> | infinite scan interlace | progressive grid <mq-boolean> color <integer> color-index <integer> monochrome <integer> color-gamut srgb | p3 | rec2020 update none | slow | fast overflow-block none | scroll | optional-paged | paged overflow-inline none | scroll pointer none | coarse | fine hover none | hover any-pointer none | coarse | fine any-hover none | hover light-level dim | normal | washed Level 5 inverted-colors none | inverted prefers-reduced-motion no-preference | reduce scripting none | initial-only | enabled

Best Practices

2. Break-points Don’t: Set breakpoints based on popular devices @media (width: 320px) { /* iPhone design */ } @media (width: 320px), (width: 375px) { /* iPhone design */ } @media (width: 320px), (width: 375px), (width: 414px) { /* iPhone design */ } Do: Set breakpoints at the point where your design would otherwise break. @media (width < 20em) { /* narrow design*/ }

3. Use Different Units Don’t: Measure everything in px @media (width > 640px) { /* wide design */ } Do: Use the full range of units. Especially think of em . @media (width > 40em) { /* wide design*/ }

4. Keep it simple Bad: Don’t be too specific @media (pointer: coarse) or (pointer: fine) { … } Good: @media (pointer) { … }

5. Use the right query Don’t: Use the wrong media features as a proxy. @media (width: 320px) { /* big touch targets because iPhone */ } Do: Use all tools in the box. @media (pointer: coarse) { /* big touch targets */ }