Media Queries

Media Query Overiew
@media / media="" Syntax
Viewport / Page Dimensions & Display
Developer Tools
Display, Color & Interaction features
Accessibility & VR Features
Play time
In SVG
viewport meta tag
Mobile & Touch
@supports

estelle.github.io/CSS/media/

General idea:

Media Type & Screen Size
Screen Resolution
Device Capability
Browser Capability

10 Media Queries (2.1)

all
aural
handheld
braille
embossed
print
projection
screen
tty
tv

<link media="screen" ...

<style media="screen"> 
      @import "myCSS.css"; ...

@import url(myCSS.css) screen;

@media screen {}

<?xml-stylesheet media="screen" ...

Varied Screen Sizes

Wrist Watch
Smart Phone
Tablet
Laptop
Monitor
TV
portrait? landscape? resolution?

Media Queries

@media screen and (max-width: 600px) {
  #presentation {
    background: red;
  }
}
@media screen and (orientation: portrait) {
  #presentation {
    background: yellow;
  }

RESIZE THE WINDOW

Media Queries

@media screen and (orientation: landscape) {
  a[href^="mailto:"]:before {
    content: url(icons/email.gif);
  }
}

Media queries

<link rel='stylesheet'
media='screen and (min-width: 320px) and (max-width: 480px)'
href='css/smartphone.css' />

Media Queries

@media screen and (max-width: 480px) {
  selector { /* small screen */
    property: value;
  }
}

@media screen and (orientation: landscape) {
  selector { /* landscape properties */
    property: value;
  }
}

Breakpoints

OpenSignal.com

Media Query Syntax

Syntax: @media / media=

@media

@media print and (orientation: landscape) { ... }

media=""

<link src="style.css" rel="stylesheet" media="screen and (min-width: 400)"/>

Syntax: only / not

"only" leaves out older browsers

media="only print and (color)"

"not" - if untrue

media="not screen and (color)"

Syntax: media type

all
aural
handheld
braille
embossed
print
projection
screen
tty
tv

Syntax: punctuation

"and" - both parts must be true

media="only screen and (orientation: portrait)"

Comma separates selectors - any part can be true

media="print, screen and (min-width: 480px)"

Syntax: media condition

In parenthesis

media="screen and (max-width: 600px)"

media="print and (orientation: landscape)"

@media screen and (prefers-reduced-motion: reduce) {...}

@media tty and (grid) {...}

Syntax: media condition

In parenthesis

media="screen and (max-width: 600px)"

media="print and (orientation: landscape)"

@media screen and (prefers-reduced-motion: reduce) {...}

@media tty and (grid) {...}

media query condition properties

Viewport / Page Dimensions

(min/max)-width: viewport width
(min/max)-height: viewport height
(min/max)-aspect-ratio: width/height
orientation: portrait(h>w) | landscape(w>h)

Display quality

(min/max)-resolution: 72dpi | 100dpcm

Interactions

(any)-pointer: one | coarse | fine
(any)-hover: none | hover

media query condition properties

Colors

(min/max)-color:
(min/max)-color-index:
(min/max)-monochrome: 0 | 1+
color-gamut: srgb | p3 | rec2020

Others

scan: progressive | interlace (tv)
grid: 0 | 1 (grids (like tty) or bitmap)
See Media Queries Spec

Notes:

case insensitive
unknown media types == false

Viewport, Page Dimensions, & Display Quality

Media Features

Viewport / Page Dimensions

width: Width of the viewport
height: Height of the viewport
aspect-ratio: Width-to-height aspect ratio of the viewport
orientation: Orientation of the viewport

Display quality

resolution: Pixel density of the output device

( min- | max- ) width

Play

range v. discrete

min-
max-
>=
> NEW
<
<=
=

@media (min-width: 600px) 
@media (max-width: 600px)
@media (width: 600px) 
@media (width >= 600px) 
@media (width > 600px)
@media (width < 600px)
@media (width = 600px)

Parentheses around expressions are required
Case-insensitive

( min- | max- ) height

Play

( min- | max- ) aspect-ratio

Play

( min- | max- ) resolution

Play

Resolution Units

dpi: dots per inch (72, 96)
dpcm: dots per centimeter (1dpcm ≈ 2.54dpi)
dppx: dots per pixel
1dppx = 96dpi (default resolution of images)

Note: 0 is invalid.

orientation: portrait | landscape

Play

DevTools

There are some cool developer tools media query features:

Selector blocks within a media query are hilighted as such.
Emulate a mobile device sizes.
"Styles" editor tab enables media query inspection
Click on one of the sized in styles tab to resize the 'viewport

Display, Color & Interaction features

Features

pointer: Is the primary input mechanism a pointing device, and if so, how accurate is it? none | coarse | fine
hover: Does the primary input mechanism allow the user to hover over elements? none | hover
any-pointer: Is any available input mechanism a pointing device, and if so, how accurate is it? none | coarse | fine
any-hover: Does any available input mechanism allow the user to hover over elements? none | hover
grid: Does the device use a grid (i.e. TTY) or bitmap screen? 0 | 1 or (grid)
color: # of bits per color component. Zero if device isn't color. @media (min-color: 1) means it's a color device

pointer: none | coarse | fine

Play

hover: none | hover

Play

any-pointer: none | coarse | fine

Play

any-hover: none | hover

Play

grid: 1 | 0

Play

( min- | max- ) color

Play

Additional Media Features

color-gamut: Approx. range of supported colors. srgb | p3 | rec2020 (Ch,Op,Sf)
display-mode: The display mode of the application, as specified in the web app manifest's display member (Defined in the Manifest Spec) full-screen | standalone | minimal-ui | browser (Ch,Op,FF)
monochrome: Bits per pixel in the output device's monochrome frame buffer, or 0 if the device isn't monochrome (FF,Ch,Op,Sf)
overflow-block: How is content that overflows the block axis handled? none | scroll | optional-paged | paged (FF)
overflow-inline: Can content that overflows the viewport along the inline axis be scrolled? (FF)

Unsupported Media Features

scan: Scanning process of the output device/ interlace | progressive
update: Frequency capability of content modification appearance. none | slow | fast
color-index: Number of entries in the color lookup table. (color-index) | (min|max-color-index: n)
inverted-colors: Are colors being inverted. none | inverted
light-level: Light level of the environment. dim | normal | washed
scripting: Tests whether scripting (JS) is available. none | initial-only | enabled

Deprecated Media Features

device-width: Width of the rendering surface of the output device - Deprecated
device-height: Height of the rendering surface of the output device - Deprecated
device-aspect-ratio: Width-to-height aspect ratio of the output device - Deprecated

Accessibility & VR Features

Upcoming Media Features

prefers-reduced-motion: The user prefers less motion on the page. no-preference | reduce (Ch,FF,SF)
prefers-reduced-transparency: The user prefers reduced transparency. no-preference | reduce
prefers-contrast: Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors. no-preference | high | low
prefers-color-scheme: Detect if the user prefers a light or dark color scheme. no-preference | light | dark (Ch,FF,SF)
forced-colors: Detect whether user agent restricts color pallete. none | active
environment-blending: Is screen a transparent surface? VR, head up display, in a mirror?. opaque | additive | subtractive

prefers-color-scheme: no-preference | light | dark

Play

prefers-reduced-motion: no-preference | reduce

Play

Exercises

Open in new window

Play

In SVG

Media Queries in SVG

Play

Media Queries in SVG

Play

viewport

Viewport

<meta name="viewport" content="width=device-width,
            initial-scale=1, maximum-scale=1"/>

width: Size of the viewport in number of pixels or device-width (width of screen)
height: Height of the viewport in number of pixels or device-height (height of screen)
initial-scale: zoom level when page is first loaded
maximum-scale
minimum-scale
user-scalable: Are users allowed to zoom the page

Viewport

@viewport {
  width: device-width; zoom: 0.5;
}

min-width
max-width
width
min-height
max-height
height: ‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
zoom: auto, positive number or percentage
min-zoom: Minimum zoom factor allowed. auto, positive number or percentage
max-zoom: Maximum zoom factor allowed. auto, positive number or percentage
user-zoom: zoom or fixed. User can or can't zoom in/out.
orientation: auto, portrait or landscape.

Viewport Sidenotes

Notes:

If <meta> is set to disable zoom, there is no delay on onClick events.
If <meta> is set to disable zoom, you're a jerk!

Mobile & Touch

Mobile Specific CSS

Tap Highlight Color

 -webkit-tap-highlight-color: #bada55;

Prevent Select & Hold dialogue

user-select: none; /* (auto | text | none | contain | all) */

Prevent Images Dialog

 -webkit-touch-callout: none;

Prevent accidental OS popups (panning)

touch-action: none;

touch-action

sets how an element's region can be manipulated by a touchscreen user

touch-action: auto;
touch-action: none; /* disables gestures */
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation; /* removes click event delay */

`touch-action` property

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Specified as the keywords auto, none, manipulation, OR one of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.

Multiple directions can be combined
pan-left pan-right is not valid (use pan-x).
pan-up pan-down is not valid (use pan-y).

`touch-action` property

auto: Enable all panning and zooming gestures.
none: Disable all panning and zooming gestures.
pan-x: Enables single-finger horizontal panning. Can be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
pan-y: Enables single-finger vertical panning. Can be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
manipulation: Alias for "pan-x pan-y pinch-zoom". Enables panning and pinch zoom. Disables non-standard gestures like double-tap to zoom, which removes delay of tap click events.
pan-left, pan-right, pan-up, pan-down: Enables single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right.
pinch-zoom: Enables multi-finger panning and zooming. Can be combined with any pan- values.

`user-select` property

Controls whether the user can select text.

auto | text | none | contain | all

none

Element and its sub-elements are not selectable

text

text can be selected by the user.

all

In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

~~contain~~

Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

auto

::before and ::after pseudo elements same as none
On editable element, same as contain
If parent's user-select is all or none, it's the same
Otherwise, text

user-select

Not fully supported

- Generate Text -

@supports

Capability Detection

@supports

@supports (display: flex) {
  /* rules for browsers supporting flex box (with no prefix) */
}

@supports (will-change) {
  /* rules for browsers supporting improved performance */
}

`@supports`

or and ()

@supports ((transition-property: color) or (animation-name: foo)) and
          (transform: rotate(10deg)) {
   ... 
}

not

@supports not ( display: flex ) {
  main { width: 100%; }
  main > nav { width: 25%; }
  main > article { width: 75%; }
}

What CSS does your browser support?

Play

Legacy Detection

Don't use this legacy support detection:

@media screen and (transform-3d) {
  .transforms {}
}

RESIZE THE WINDOW

Viewport / Page Dimensions

Display quality

Next ➹