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

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

@media (min-width: 20em), (min-height: 40em) {
	@media not all and (pointer: none) {
		…
	}
}

@media ((min-width: 20em) or (min-height: 40em))
       and
       (not (pointer: none)) {
	…
}

Shortcut

@media not (foo: none) { /* or 0, or falsy value */
	…
}

@media (foo) {
	…
}

All improvements together

@media (min-width: 20em), not all and (min-height: 40em) {
	@media not all and (pointer: none) {
		…
	}
}

@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

Media features

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

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