Media Queries | CSS: Presentation Layer
Standards Based Development
| Media Feature | Description |
|---|---|
aspect-ratio | Defined as the ratio of value of the width media feature to the value of the height media feature. |
color | Describes the number of bits per color component of the output device. |
color-index | Describes the number of entries in the color lookup table of the output device. |
device-aspect-ratio | Defined as the ratio of value of the device-width media feature to the value of the device-height media feature. |
device-height | Describes the height of the rendering surface of the output device. |
device-width | Describes the width of the rendering surface of the output device. |
grid | Describes the width of the rendering surface of the output device. |
height | Used to query whether the output device is grid or bitmap. If the output device is grid-based (e.g. a tty terminal, or a phone display with only one fixed font), the value will be 1. Otherwise the value will be 0. |
monochrome | Describes the number of bits per pixel in a monochrome frame buffer. |
-ms-high-contrast | Describes whether the application is being displayed in high contrast mode, and with what color variation. |
-ms-view-state | Describes the view-state of the Windows Store app using JavaScript. |
orientation | Describes whether the orientation of the targeted display area of the output device is portrait or landscape. |
resolution | Describes the resolution of the output device—that is, the density of the pixels. |
scan | Describes the scanning process of "tv" output devices. |
width | Describes the width of the targeted display area of the output device. |
Media Features
Grid Media Feature
Example
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }
Scan Media Feature
Example
The media query below expresses that a style sheet is usable on tv devices with progressive scanning:
@media tv and (scan: progressive) { … }
-ms-high-contrast Media Feature
-ms-high-contrast media feature describes whether the application is being displayed in high contrast mode and with what color variation.
-ms-high-contrast works with -ms-high-contrast-adjust property and was introduced in Windows 8
| Keyword Value | Description |
|---|---|
-ms-high-contrast:active | Indicates that the subsequent styling rules will be applied when the system is in high contrast mode with any color variation |
-ms-high-contrast:black-on-white | Indicates that the subsequent styling rules will be applied when the system is in high contrast mode with a black-on-white color variation |
-ms-high-contrast:white-on-black | Indicates that the subsequent styling rules will be applied when the system is in high contrast mode with any white-on-black color variation |
-ms-high-contrast:none | Indicates that the subsequent styling rules will be applied when the system is in not in high contrast mode. |
Example
In the example below, the declarations will match Windows Store apps beind displayed in high contrast mode with any color variation, a black&45;on-white color variation, and a white-on-black variation, respectively:
@media screen and (-ms-high-contrast: active) {
/* All high contrast styling rules */
}
@media screen and (-ms-high-contrast: black-on-white) {
div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
div { background-image: url('image-wb.png'); }
}
-ms-high-contrast media feature
Mozilla Media Query Extensions
-moz-touch-enabled:-moz-images-in-menus:-moz-mac-graphite-theme:-moz-maemo-classic:-moz-scrollbar-end-backward:-moz-scrollbar-end-forward:-moz-scrollbar-start-backward:-moz-scrollbar-start-forward:-moz-scrollbar-thumb-proportional:-moz-windows-classic:-moz-windows-compositor:-moz-windows-default-theme:-moz-windows-theme:
WebKit Media Query Extensions
animation:transform-2d:transform-3d:transition:
Media Queries + Viewport Support in Opera Mobile 10
Loading a document in a desktop browser, the viewport width is the width of the browser window; when it is loaded in Opera Mobile 10, the viewport width defaults to 850 pixels unless overridden by the viewport meta element. Check out Media Queries + Viewport Support for Opera Mobile 10 Demo to see this in action:
On desktop: there's a three column layout (for browser widths > 800 pixels)
Opera Mobile 10: (on a device with a physical screen < 400 pixels wide, like a Nokia 5800 in portrait mode, which has a width of 360 pixels), a viewport meta of width=device-width triggers the @media screen and (max-width: 400px) { ... } style rules, which turns the three column layout for desktop, into a one column layout for mobile.