Media Queries Level 4

By Florian Rivoal

@frivoal

Slides at florian.rivoal.net/talks/mq4/

MQ Basics

History

Where it all began:
CSS2.1 section 7 & HTML 4.01 section 6.13
What everybody has been using:
Media Queries Level 3
What’s coming:
Media Queries Level 4
Media Queries Level 5

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

Range Syntax

Before

@media (min-width: 20em) and
       (max-width: 40em)
{ … }
After

@media (20em <= width <= 40em)
{ … }
Variants
( ( feature name/value feature name/value > > <= <= < < = = >= >= feature value/name feature value/name value value < < <= <= feature name feature name < < <= <= value value value value > > >= >= feature name feature name > > >= >= value value ) )

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

iPhone Smart TV Nintendo DS Nintendo Wii Smart watch Ebook reader

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

📵

😢

Media Features to the rescue

pointerhoverupdateoverflow-blockscripting
laptopfinehoverfastscrollenabled
phonecoarsenonefastscrollenabled
Wiicoarsehoverfastscrollenabled
TVnonenonefastscrollenabled
printnonenonenonepagedinitial-only
e-inknonenoneslowpagedenabled
Vivliostyle.jsfinehoverfastpagedenabled

Media features

width<length>
Level 3
height<length>
aspect-ratio<ratio>
orientationportrait | landscape
resolution<resolution> | infinite
scaninterlace | progressive
grid<mq-boolean>
color<integer>
color-index<integer>
monochrome<integer>
color-gamutsrgb | p3 | rec2020
updatenone | slow | fast
overflow-blocknone | scroll | optional-paged | paged
overflow-inlinenone | scroll
pointernone | coarse | fine
hovernone | hover
any-pointernone | coarse | fine
any-hovernone | hover
light-leveldim | normal | washed
Level 5
inverted-colorsnone | inverted
prefers-reduced-motionno-preference | reduce
scriptingnone | initial-only | enabled

Best Practices

1. Don’t use MQ

Make inherently robust sites using Flexbox, grid, Multicol, vh & vw, min-width & max-width
Demo by Jen Simmons

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 */ }

6. Progressive Enhancement

Don’t:

/* Complex design */

@media (/* Detect limiting media */) {
	/* Turn off fancy features,
	   insert fallback */
}
Do:

/* Simple design */

@media (/* Detect capable media */) {
	/* Turn on fancy feature */
}
@media (/* Detect other capability */) {
	/* Other fancy feature */
}

The end


florian.rivoal.net/talks/mq4/

@frivoal