recursal/MDN huggingface dataset:
-webkit-device-pixel-ratio
==========================

The **`-webkit-device-pixel-ratio`** is a non-standard Boolean CSS media feature which is an alternative to the standard `resolution` media feature.

**Note:** If possible, use the `resolution` media feature query instead, which is a standard media feature. While this prefixed media feature is a WebKit feature, other browser engines may support it. See browser compatibility below.

Syntax
------

The `-webkit-device-pixel-ratio` feature is specified as a `<number>` value. It is a range feature, meaning that you can also use the prefixed **`-webkit-min-device-pixel-ratio`** and **`-webkit-max-device-pixel-ratio`** variants to query minimum and maximum values, respectively.

### Values

`<number>`

The number of device pixels used to represent each CSS `px`. Although the value is a `<number>`, and thus doesn't syntactically allow units, its implicit unit is `dppx`.

Implementation
--------------


```css
/\* A unit of "dppx" is implied: \*/
@media (-webkit-min-device-pixel-ratio: 2) {
  /\* … \*/
}
/\* It is equivalent to: \*/
@media (min-resolution: 2dppx) {
  /\* … \*/
}

/\* Similarly: \*/
@media (-webkit-max-device-pixel-ratio: 2) {
  /\* … \*/
}
/\* It is equivalent to: \*/
@media (max-resolution: 2dppx) {
  /\* … \*/
}
```

Examples
--------

### HTML


```html
<p>This is a test of your device's pixel density.</p>
```

### CSS


```css
/\* Exact resolution \*/
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}

/\* Minimum resolution \*/
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}

/\* Maximum resolution \*/
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using media queries
* `<resolution>`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* W3C Suggested Method to UnPrefix
-webkit-animation
=================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Note:** All browsers support the `animation` property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers supports the `-webkit-animation` media feature. No browsers support `animation`, without the prefix, as a media query. Use the `@supports (animation)` feature query instead.

The **`-webkit-animation`** Boolean CSS media feature is a WebKit extension whose value is `true` if vendor-prefixed CSS `animation`s are supported.

Apple has a description in Safari CSS Reference.

**Note:** This media feature is only supported by WebKit. If possible, use an `@supports` feature query instead.

Syntax
------

The `-webkit-animation` media feature is a Boolean whose value is `true` if the vendor-prefixed CSS animation properties are supported *and* the browser supports prefixed property media queries.

### Values

`true`

The browser supports `-webkit` prefixed CSS `animation`.

`false`

The browser doesn't support these prefixed CSS animations.

Examples
--------

### Example of -webkit-animation


```css
@media (-webkit-animation) {
  /\* CSS to use if -webkit- prefixed animations are supported AND the browser supports prefixed properties as media queries \*/
}
```

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-transition`
* Test page at quirksmode.org
* `animation` and using CSS animations
* `@media` and Using media queries
* `@supports` and using feature queries
width
=====

The **`width`** CSS media feature can be used to test the width of the viewport (or the page box, for paged media).

Syntax
------

The `width` feature is specified as a `<length>` value representing the viewport width. It is a range feature, meaning that you can also use the prefixed **`min-width`** and **`max-width`** variants to query minimum and maximum values, respectively.

Examples
--------

### HTML


```html
<div>Watch this element as you resize your viewport's width.</div>
```

### CSS


```css
/\* Exact width \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* Minimum width \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* Maximum width \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # width |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using media queries
* @media
overflow-block
==============

The **`overflow-block`** CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.

Syntax
------

The `overflow-block` feature is specified as a keyword value chosen from the list below.

`none`

Content that overflows the block axis is not displayed.

`scroll`

Content that overflows the block axis can be seen by scrolling to it.

`optional-paged`

Content that overflows the block axis can be seen by scrolling to it, but page breaks can be manually triggered (such as via `break-inside`, etc.) to cause the following content to display on the following page.

`paged`

Content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page.

Examples
--------

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS


```css
@media (overflow-block: scroll) {
  p {
    color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-block |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media
grid
====

The **`grid`** CSS media feature can be used to test whether the output device uses a grid-based screen.

Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.

Syntax
------

The `grid` feature is specified as a `<mq-boolean>` value (`0` or `1`) representing whether or not the output device is grid-based.

Examples
--------

### HTML


```html
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>
```

### CSS


```css
:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # grid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media
monochrome
==========

The **`monochrome`** CSS media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.

Syntax
------

The `monochrome` feature is specified as an `<integer>` representing the number of bits per pixel in the monochrome frame buffer. If the device is not a monochrome device, the value is zero. It is a range feature, meaning that you can also use the prefixed **`min-monochrome`** and **`max-monochrome`** variants to query minimum and maximum values, respectively.

Examples
--------

### HTML


```html
<p class="mono">Your device supports monochrome pixels!</p>
<p class="no-mono">Your device doesn't support monochrome pixels.</p>
```

### CSS


```css
p {
  display: none;
}

/\* Any monochrome device \*/
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/\* Any non-monochrome device \*/
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # monochrome |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
pointer
=======

The **`pointer`** CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the *primary* pointing device is.

**Note:** If you want to test the accuracy of *any* pointing device, use `any-pointer` instead.

Syntax
------

The `pointer` feature is specified as a keyword value chosen from the list below.

`none`

The primary input mechanism does not include a pointing device.

`coarse`

The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.

`fine`

The primary input mechanism includes an accurate pointing device, such as a mouse.

Examples
--------

This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.

### HTML


```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS


```css
input[type="checkbox"] {
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # pointer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `any-pointer` media feature
scripting
=========

The **`scripting`** CSS media feature can be used to test whether scripting (such as JavaScript) is available.

Syntax
------

The `scripting` feature is specified as a keyword value chosen from the list below.

`none`

Scripting is completely unavailable on the current document.

`initial-only`

Scripting is enabled during the initial page load, but not afterwards.

`enabled`

Scripting is supported and active on the current document.

Examples
--------

### HTML


```html
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">
  Your scripting is only enabled during the initial page load. Weird.
</p>
<p class="script-enabled">You have scripting enabled! :-)</p>
```

### CSS


```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # scripting |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* @media
* Using media queries
color-index
===========

The **`color-index`** CSS media feature can be used to test the number of entries in the output device's color lookup table.

Syntax
------

The `color-index` feature is specified as an `<integer>` value representing the number of entries in the output device's color lookup table. (This value is zero if the device does not use such a table.) It is a range feature, meaning that you can also use the prefixed **`min-color-index`** and **`max-color-index`** variants to query minimum and maximum values, respectively.

Examples
--------

### Basic example

#### HTML


```html
<p>This is a test.</p>
```


#### CSS


```css
p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}
```


#### Result

### Custom stylesheet

This HTML will apply a special stylesheet for devices that have at least 256 colors.


```html
<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://foo.bar.com/color-stylesheet.css" />
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color-index |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media
-moz-device-pixel-ratio
=======================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 **Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`-moz-device-pixel-ratio`** Gecko-only CSS media feature can be used to apply styles based on the number of device pixels per CSS pixel.

**Warning:** Do not use this feature. Use the `resolution` feature with the `dppx` unit instead.

**Note:** This media feature is also implemented by WebKit as `-webkit-device-pixel-ratio`. The min and max prefixes as implemented by Gecko are named `min--moz-device-pixel-ratio` and `max--moz-device-pixel-ratio`; but the same prefixes as implemented by Webkit are named `-webkit-min-device-pixel-ratio` and `-webkit-max-device-pixel-ratio`.

Syntax
------

`<number>`

The number of device pixels per CSS pixel.


**Media:** `@media`
**Accepts min/max prefixes:** yes

Examples
--------

### Basic compatibility example

`-moz-device-pixel-ratio` may be used for compatibility with Firefox older than 16, and alongside `-webkit-device-pixel-ratio` for compatibility with WebKit-based browsers that do not support `dppx`.

Example:


```css
/\* First, set for Webkit-based browsers \*/
@media (-webkit-min-device-pixel-ratio: 2),
  (min--moz-device-pixel-ratio: 2) /\* Older Firefox browsers (prior to firefox 16) \*/,
  (min-resolution: 2dppx) /\* The standard way \*/,
  (min-resolution: 192dpi); /\* dppx fallback \*/
```


**Note:** See this CSSWG article for compatibility good practices regarding `resolution` and `dppx`.

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media
color-gamut
===========

The **`color-gamut`** CSS media feature is used to apply CSS styles based on the approximate range of color gamut supported by the user agent and the output device.

Syntax
------

The `color-gamut` feature is specified as one of the following keyword values:

`srgb`

The user agent and the output device can support approximately the sRGB gamut or more. This includes the vast majority of color displays.

`p3`

The user agent and the output device can support approximately the gamut specified by the Display P3 color space or more. The P3 gamut is larger than and includes the sRGB gamut.

`rec2020`

The user agent and the output device can support approximately the gamut specified by the ITU-R Recommendation BT.2020 color space or more. The REC. 2020 gamut is larger than and includes the P3 gamut.

Examples
--------

### HTML


```html
<p>This is a test.</p>
```

### CSS


```css
p {
  padding: 10px;
  border: solid;
}

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color-gamut |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* color() function to specify colors in a defined colorspace.
* @media at-rule that is used to specify the color-gamut expression.
* Using media queries to understand when and how to use a media query.
prefers-contrast
================

The **`prefers-contrast`** CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.

Syntax
------

`no-preference`

Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the Boolean context.

`more`

Indicates that user has notified the system that they prefer an interface that has a higher level of contrast.

`less`

Indicates that user has notified the system that they prefer an interface that has a lower level of contrast.

`custom`

Indicates that user has notified the system for using a specific set of colors, and the contrast implied by these colors matches neither `more` nor `less`. This value will match the color palette specified by users of `forced-colors: active`.

User preferences
----------------

Various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system.

Examples
--------

This example has an annoying low contrast by default.

### HTML


```html
<div class="contrast">low contrast box</div>
```

### CSS


```css
.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-contrast |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS forced-colors media query
dynamic-range
=============

The **`dynamic-range`** CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device.

**Note:** Some devices have high dynamic range capabilities that are not always 'on' and need to be activated (sometimes programmatically, sometimes by the user, sometimes based on the content). This media feature does not test whether the dynamic range capability is active; it only tests whether the device is capable of high dynamic range visuals.

Syntax
------

The `dynamic-range` feature is specified as a keyword value chosen from the list below.

`standard`

This value matches any visual device and excludes devices lacking visual capabilities. A user agent or an output device that matches `high` will also match the `standard` value.

`high`

This value matches user agents and output devices that support high peak brightness, high contrast ratio, and color depth greater than 24 bit or 8 bit per color component of RGB. **Peak brightness** refers to how bright the brightest point a light-emitting device, such as an LCD screen, can produce. In the case of a light-reflective device, such as paper or e-ink, peak brightness refers to the point that at least absorbs light. **Contrast ratio** refers to the ratio of the luminance of the brightest color to that of the darkest color that the system is capable of producing. Currently, there is no precise way to measure peak brightness and contrast ratio, and the determination of what counts as high peak brightness and high contrast ratio depends on the user agent.

Examples
--------


```css
@media (dynamic-range: standard) {
  p {
    color: red;
  }
}

@media (dynamic-range: high) {
  p {
    color: green;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # dynamic-range |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media