Media Queries

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:

  1. Media Type & Screen Size
  2. Screen Resolution
  3. Device Capability
  4. Browser Capability

10 Media Queries (2.1)

  1. all
  2. aural
  3. handheld
  4. braille
  5. embossed
  6. print
  7. projection
  8. screen
  9. tty
  10. 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

  1. all
  2. aural
  3. handheld
  4. braille
  5. embossed
  6. print
  7. projection
  8. screen
  9. tty
  10. 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 {}
}
Just including it, in case you come across it

Units & Values

Next ➹