Little Known
CSS Basics Media (& Other) Queries

Media Queries: Syntax

HTML

<link
  rel="stylesheet"
  media="screen and (min-width: 16em)"
  href="example.css" />

CSS At-Media

@media screen and (min-width: 16em) {
  /* example css */
}

CSS At-Import

@import url(example.css)
  screen and (min-width: 16em);

CSS At-Document

@document url(https://example.com) {
  /* custom CSS for example.com */
}

Nesting

Preprocessors, PostCSS, and some CSS-in-JS tools allow you to nest a query inside a selector block.

.selector {
  @media (min-width: 36em) {
    /* CSS */
  }
}

Media Query Options

screen and (min-width: 16em)

media type: screen

media feature: (min-width: 16em)

Media Types

(Useful Ones)

• all
• screen
• print
• speech

Media Types

(Deprecated Ones)

• braille
• embossed
• projection
• handheld
• tv
• tty
• aural

Media Features

Some key-value pairs

Some keyword-only

Media Features: Screen Width

• width
• min-width
• max-width
• device-width 👎
• min-device-width 👎
• max-device-width 👎

Example: Screen Width

.card {
  width: 100%;
}
@media (min-width: 45em) {
  .card {
    width: 50%;
  }
}

Media Features: Screen Height

• height
• min-height
• max-height
• device-height 👎
• min-device-height 👎
• max-device-height 👎

Example: Screen Height

.nav {
  height: 120px;
}
@media (max-height: 40em) {
  .nav {
    height: 70px;
  }
}

Media Features: Resolution

• resolution
• min-resolution
• max-resolution
• -webkit-device-pixel-ratio 👎

Example: Resolution

.picture {
  background-image: url(pic-1x.jpg);
}
@media (min-resolution: 150dpi) {
  .picture {
    background-image: url(pic-2x.jpg);
  }
}

Media Features: Orientation

• portrait
• landscape

Media Features: Aspect Ratio

• aspect-ratio
• min-aspect-ratio
• max-aspect-ratio
• device-aspect-ratio 👎
• min-device-aspect-ratio 👎
• max-device-aspect-ratio 👎

Example: Aspect Ratio

.media--16-9 {
  height: 100vh;
  width: 177.778vh;
}
@media (min-aspect-ratio: 16/9) {
  .media--16-9 {
    height: 56.25vw;
    width: 100vw;
  }
}

Codepen

Media Features: Color

• color (boolean)
• color-index (integer)
• min-color-index (integer)
• max-color-index (integer)
• monochrome (boolean)
• min-monochrome (integer)
• max-monochrome (integer)
• color-gamut (keyword):
  srgb, p3, rec2020

Example: Color

a {
  color: #304FFE; /* custom blue */
  text-decoration: none;
}
@media (monochrome) {
  a {
    text-decoration: underline;
  }
}

Media Features: Scan

• progressive
• interlace

Just for television sets

Media Features: Grid

• grid (1 || 0)

Screen is bitmap or grid layout

Media Features: Future

• inverted-colors
• pointer
• hover
• any-pointer
• any-hover
• light-level
• scripting

Media Queries: Combinations

Operators

• and
• not
• only
• , (or)
• () (group logic)

Operators: Examples

@media screen and (min-width: 36em) { }

@media not screen { }

@media only screen and (min-width: 36em) { }

@media print, (monochrome) { }

@media ((min-width: 36em)
  and (aspect-ratio: portrait)),
((max-width: 35.9375em)
  and (aspect-ratio: landscape)) { }

Media Queries: Advice

Size: Min vs. Max

Pick a direction and stick with it (as much as possible).

Start small and override up.

Size: Units

em is most consistent with user/browser zoom

px is “easiest” if you’re mixing min and max

Choosing Breakpoints

As much as you can, use the same set of limited breakpoints.

Let your content decide where breakpoints go.

Adjust your browser size to the point where your content breaks.

That’s a breakpoint.

Friendly reminder that frameworks don’t set breakpoint values: content does.

— James Steinbach (@jdsteinbach) April 27, 2015

Choosing Breakpoints

Don’t pick breakpoints based on specific device sizes; put breakpoints in the gaps between clusters of common device sizes.

Some components will need a breakpoint that’s not one of your “major” breakpoints: create tweakpoint for that component.

Not Choosing Breakpoints

Watch for a future talk about creating responsive components without media queries!

Someday container queries might be a thing, but that day is not yet on the calendar.

Media Queries in JavaScript

Window.matchMedia()

var mq = matchMedia("(min-width: 36em)");
if (mq.matches) {
  // do some code specific to that breakpoint
}

Media Queries in JavaScript

MediaQueryList.addListener()

var mq = matchMedia("(min-width: 36em)");
mq.addListener(mqTriggeredFunction);
function mqTriggeredFunction(event) {
  if (event.matches) {
    // do some code specific to that breakpoint
  }
}

Feature (Supports) Queries

The Old Way

modernizr.js

Load a JS file that tests for all the conditions/features you need then adds a class to `html` so you can scope CSS selectors.

Syntax

@supports (display: grid) {
  display: grid;
}

Accepts CSS property-value pair: the browser evaluates both the property and the value.

Syntax

(display: grid) and (filter: blur(3px))

(display: grid) or (filter: blur(3px))

Detect New Properties

@supports (grid-gap: 20px) {
  /* Grid styles */
}

Detect New Values

@supports (margin: env(safe-area-inset-left)) {
  /* iPhone X styles */
}

Browser Support

All modern browsers but IE support feature queries.

@supports (top: 0) {
  /* Code for not-IE browsers */
}

Feature Queries: Advice

Use them when you can do something with new CSS… that requires you to change properties in your fallback/original CSS.