Media Queries, Part 2

Additional Media Query Options

Option	Applicable Media	Min / Max	Example	Applies To
aspect-ratio	bitmap (e.g., screen, print)	`min-aspect-ratio` `max-aspect-ratio`	`(aspect-ratio: 1280/720)`	Aspect ratios are the number of horizontal pixels over the number of vertical pixels (width relative to height); the two positive integers are separated by a `/`. The code example matches a resolution of 1280 x 720; using `(aspect-ratio: 16/9)` would be the same, as well as any other number setup that resolves to the same ratio (such as `32/18`).
color	visual	`min-color` `max-color`	`(color)`	This refers to the number of bits per color component (the number of bits per red, green, and blue) of the device. In the example, only color devices would be supported (black-and-white devices have a value of `0`, which is false for color). Specifying `(min-color: 16)` would match devices where either red, green, or blue was represented with at least 16 bits.
color-index	visual	`min-color-index` `max-color-index`	`(min-color-index: 256)`	This refers to the number of colors in the color lookup table of the device. In the example, we are looking for a minimum of 8-bit color (256 colors). Black and white devices have a `color-index` of `0`.
device-aspect-ratio	bitmap (e.g., screen, print)	`min-device-aspect-ratio` `max-device-aspect-ratio`	`(device-aspect-ratio: 1280/720)`	Very similar to `aspect-ratio` but uses device-width and device-height rather than width and height.
device-height	visual, tactile	`min-device-height` `max-device-height`	`(device-height: 300px)`	This applies to the height of the rendering surface of the output device. For continuous media this is the height of the screen. For paged media, this is the height of the page sheet size. In the example, the rendering surface would have a height of exactly 300 pixels.
device-width	visual, tactile	`min-device-width` `max-device-width`	`(device-width: 300px)`	This applies to the width of the rendering surface of the output device. For continuous media this is the width of the screen. For paged media, this is the width of the page sheet size. In the example, the rendering surface would have a width of exactly 300 pixels.
grid	all	N/A	`(grid)`	This determines whether the device is grid or bitmap. Grids use a fixed size (such as a tty terminal or a mobile device with one fixed font) and have a value of `1`. Every other device has a value of `0`, which is false. For a grid device the height and width of an em is one grid cell.
height	visual, tactile	`min-height` `max-height`	`(min-height: 400px)`	This applies to the rendering surface of the output device. For continuous media, such as a screen, the height of the viewport is used. For paged media, such as print, the page box height is used.
monochrome	visual	`min-monochrome` `max-monochrome`	`(monochrome)`	This refers to the number of bits per pixel in the monochrome frame buffer of the device. If the device is not a monochrome device, the value will be `0` and therefore false. The example looks for a positive value, thus blocking non-monochrome devices.
orientation	bitmap (e.g., screen, print)	There are no min- or max- options. The values accepted are: `portrait` `landscape`	`(orientation: portrait)`	The device has portrait orientation when height equals or exceeds width; otherwise it has landscape orientation.
resolution	bitmap (e.g., screen, print)	`min-resolution` `max-resolution`	`(min-resolution: 300dpi)`	This refers to the resolution of the display device and is often expressed in pixels; the example would work well for print media since print is a dpi (dots per inch) medium rather than a pixel-based medium. `resolution` also supports dpcm (dots per centimeter). The dpi and dpcm units are only used for `resolution`.
scan	tv	There are no min- or max- options. The values accepted are: `interlace` `progressive`	`(scan: progressive)`	This describes the scanning process of TV devices.
width	visual, tactile	`min-width` `max-width`	`(min-width: 600px)`	This applies to the rendering surface of the output device. For continuous media, such as a screen, the width of the viewport is used. For paged media, such as print, the page box width is used.

Considerations for Media Query Options and Values

min-width and max-width are by far the most commonly used and are paired up with screen.
Attempts to mix media types with unsupported queries will result in failure (such as speech with min-width).
Mixing improper units with a media type (such as px with speech or tty) will also cause the media query to fail automatically.
Negative values, such as min-width(-200px), are invalid.
If your media queries are incorporating (width), (min-width), or (max-width) and your CSS is setting the width property, keep in mind that scrollbars usually require 21-22 pixels of horizontal space. The following media query will trigger a small horizontal scrollbar at 800px if there is a vertical scrollbar visible in the browser window:
```
@media screen and (min-width: 800px) {
  .container {width: 800px;}
}
```
To alleviate the horizontal scrollbar there needs to be space allotted for the vertical scrollbar when it appears:
```
@media screen and (min-width: 800px) {
  .container {width: 775px;}
}
```

Efficient Media Queries

The CSS you write for a responsive design does not need to be long and repetitive. If you find yourself writing the same CSS multiple times across multiple @media blocks, there's a better approach!
The wisest approach is to only override the things that are changing, and to sequence your code so that the overrides are easily done.

A Basic Framework

/* begin with the CSS that needs to apply to all media types */
@media all {

}

/* then the CSS that applies to all screen display sizes, such as fonts */
@media screen {

}

/* next is the CSS for the largest display sizes; 
   the exact breakpoint value (max-width) will vary based on the layout;
   when this is true all the previous @media blocks also apply, 
   so you are just overriding what you need to override */
@media screen and (max-width: 1200px) {

}

/* then you target the next smaller breakpoint;
   the exact breakpoint value (max-width) will vary based on the layout;
   when this is true all the previous @media blocks also apply, 
   so you are just overriding what you need to override */
@media screen and (max-width: 900px) {

}


/* let's assume this is the smallest breakpoint (you could also have many more breakpoints);
   the exact breakpoint value (max-width) will vary based on the layout;
   when this is true all the previous @media blocks also apply, 
   so you are just overriding what you need to override */
@media screen and (max-width: 600px) {

}


/* typically I specify print styles last, although they could go anywhere 
   after @media all {} */
@media print {

}

Responsive Layout Example

See the Pen Responsive Layout by Jason Withrow (@jwithrow) on CodePen.

To see the breakpoints in action, view the full-screen responsive layout rendering and resize your browser window.

Responsive Tables

Tables that are wider than 375 pixels always present a responsive design dilemma, because the browser can only squeeze the table content so far. Eventually, the text content cannot wrap any more and a horizontal scrollbar appears in the browser window.
One solution to this dilemma is to shrink the font size at smaller window sizes. However, you risk introducing accessibility issues and, frankly, annoying your site visitors.
Another solution is to linearize the table, so that each row is condensed into a block of information.
The challenge with linearizing a data table is that you still need to provide context for the data values, otherwise the user is just reading a bunch of data with no idea what it means. One way to provide this context is through custom data attributes and generated CSS:
- HTML5 introduced the concept of custom data- attributes, which are attributes you create that begin with data-.
- Of course, spaces are not allowed in attribute names, so replace what would have been a space between words with a hyphen.
- These custom attributes allow us to embed all sorts of information in our HTML, so they are very frequently used with JavaScript.
- And thanks to generated CSS, we can also leverage their values in our output.
- It is important to remember that assistive technology, such as screen readers, will ignore your custom data- attributes. Assistive technology encounters them, but has no idea what they mean or how to handle the data in any meaningful fashion.
An alternative to leveraging custom data attributes is to use CSS generated content and nth-child(), so that td:nth-child(3) has one label before its value, and td:nth-child(4) has a different label before its data. However, it always seemed less than ideal to be embedding labels into a stylesheet. The appropriate place for the label to live is with the data.

Responsive Table Code Example

See the Pen Responsive Table by Jason Withrow (@jwithrow) on CodePen.

To see the table reflow, view the full-screen responsive table rendering and resize your browser window. At 940px and smaller, the CSS will linearize the table.

Also be sure to check the HTML to see the data-label custom attribute.

Options for Non-Supportive Browsers

If you need to support very old browsers, or any browser that has poor (or completely absent) media query support, you have a couple of options.

Option 1: Hide the Media Queries Using `only` or `not`

There are not (corresponding to the logical NOT) and only keywords, which must precede the media type.
The following stylesheet would be used by devices that are not supportive of the handheld media type:
```
<link rel="stylesheet" media="not handheld" type="text/css" href="screen.css" />
```
Note that devices not supportive of media queries will only see media="not" so they will ignore the stylesheet (because "not" is an invalid / non-existent media type).
The only keyword is also useful for hiding styles from devices not supportive of media queries, since they would just get the only value and ignore the rest of the directive, as they do not support the only media type (it is not a valid media type):
```
<style>
@media only screen and (max-width: 1200px) {

}
</style>
```
Thankfully, the vast majority of the time there is no need for those keywords.

Option 2: Polyfills

A polyfill is additional code, typically JavaScript, that adds capabilities to a browser that are otherwise lacking.

In this code example, we are adding media queries support and HTML5 markup support:

<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

These were intended for adding support to older versions of Internet Explorer, so this is no longer a priority. However, you might find that you have a case where these are needed.