recursal/MDN huggingface dataset:
-webkit-transition
==================

**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.

 **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.

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

The **`-webkit-transition`** Boolean non-standardCSS media feature is a WebKit extension whose value is `true` if the browsing context supports CSS transitions.

Apple has a description in Safari CSS Reference; this is now called `transition` there.

**Note:** You should not use this media feature; it was never specified, has never been widely implemented, and has been removed from most browsers. Use a `@supports` feature query instead.

Syntax
------


```css
@media (-webkit-transition) {
  /\* CSS to use if this media feature and prefixed transitions are supported \*/
}
```

Examples
--------

### Use @supports instead

Do not use the `-webkit-transition` media feature. Instead, test for transition support using the CSS `@supports` at-rule, like this:


```css
@supports (transition: initial) {
  /\* CSS to use if transitions are supported \*/
}
```

### Obsolete example

Before this became obsolete, you could use `-webkit-transition` in your CSS like this:


```css
@media (-webkit-transition) {
  /\* CSS to use if transitions are supported \*/
}
```

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-animation`
* Test page at quirksmode.org
* `transition` and using CSS transitions
* `@media` and Using media queries
* `@supports` and using feature queries
update
======

The **`update`** CSS media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.


```css
@media (update: < none | slow | fast >) {
  /\* styles to apply if the update frequency of the output device is a match \*/
}
```

Syntax
------

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

`none`

Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.

`slow`

The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.

`fast`

The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like CSS Animations can be used. Example: computer screens.

Examples
--------

### HTML


```html
<p>
  If this text animates for you, your browser supports `update` and you are
  using a fast-updating device.
</p>
```

### CSS


```css
@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}
```

### Result

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

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

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

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

See also
--------

* Using Media Queries
* @media
device-height
=============

**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:** To query for the height of the viewport, developers should use the `height` media feature instead.

The **`device-height`** CSS media feature can be used to test the height of an output device's rendering surface.

Syntax
------

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

Examples
--------

### Applying a special stylesheet for devices that are shorter than 800 pixels


```html
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://foo.bar.com/short-styles.css" />
```

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

| Specification |
| --- |
| Media Queries Level 4 # device-height |

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

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

See also
--------

* Using Media Queries
* @media
display-mode
============

The **`display-mode`** CSS media feature can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.

This feature corresponds to the Web app manifest's `display` member. Both apply to the top-level browsing context and any child browsing contexts. The feature query applies regardless of whether a web app manifest is present.

Syntax
------

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

| Display mode | Description | Fallback display mode |
| --- | --- | --- |
| `fullscreen` | All of the available display area is used and no user agent chrome is shown. | `standalone` |
| `standalone` | The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. | `minimal-ui` |
| `minimal-ui` | The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. | `browser` |
| `browser` | The application opens in a conventional browser tab or new window, depending on the browser and platform. | (none) |
| `window-controls-overlay` | In this mode, the application looks and feels like a standalone desktop application, and the Window Controls Overlay feature is enabled. | (none) |

Examples
--------

### The CSS is used if the device is at fullscreen


```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

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

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

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

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

See also
--------

* Using Media Queries
* @media
device-aspect-ratio
===================

**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:** To query for the aspect ratio of the viewport, developers should use the `aspect-ratio` media feature instead.

The **`device-aspect-ratio`** CSS media feature can be used to test the width-to-height aspect ratio of an output device.

Syntax
------

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

Examples
--------

### Using min-device-aspect-ratio


```css
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}
```

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

| Specification |
| --- |
| Media Queries Level 4 # device-aspect-ratio |

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

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

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

**Note:** This feature does not correspond to *device* orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

Syntax
------

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

### Keyword values

`portrait`

The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

`landscape`

The viewport is in a landscape orientation, i.e., the width is greater than the height.

Examples
--------

### Portrait orientation

In this example we have three boxes in the HTML, and use the `orientation` media feature to switch between a row layout (in landscape) and a column layout (in portrait).

The example output is embedded in an `<iframe>` whose height is greater than its width, so the boxes get a column layout.

#### HTML


```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```


#### CSS


```css
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```


#### Result

### Landscape orientation

This example has exactly the same code as the previous example: it has three boxes in the HTML, and uses the `orientation` media feature to switch between a row layout (in landscape) and a column layout (in portrait).

However, in this example, the example output is embedded in an `<iframe>` whose height is less than its width, so the boxes get a row layout.

#### HTML


```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```


#### CSS


```css
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

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

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

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

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

The **`aspect-ratio`** CSS media feature can be used to test the aspect ratio of the viewport.

Syntax
------

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

Examples
--------

The example below is contained in an `<iframe>`, which creates its own viewport. Resize the `<iframe>` to see `aspect-ratio` in action.

Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the `<div>` inside the `<iframe>`. See if you can find which width and height values trigger this!

### HTML


```html
<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>
```

### CSS


```css
/\* Minimum aspect ratio \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* blue \*/
  }
}

/\* Maximum aspect ratio \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* cyan \*/
  }
}

/\* Exact aspect ratio, put it at the bottom to avoid override\*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* red \*/
  }
}
```

### Result
```

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
 id="outer"
 srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9af; } } @media (max-aspect-ratio: 3/2) { div { background: #9ff; } } @media (aspect-ratio: 1/1) { div { background: #f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
</iframe>
```


```
iframe {
  display: block;
}
```


```
outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = () => {
  outer.style.width = `${w.value}px`;
  wf.textContent = `width: ${w.value}`;
};
h.onchange = h.oninput = () => {
  outer.style.height = `${h.value}px`;
  hf.textContent = `height: ${h.value}`;
};
```

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

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

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

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

See also
--------

* Using Media Queries
* @media
-webkit-transform-3d
====================

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

**Note:** While this media feature is currently supported by most browsers. If possible, use an `@supports` feature query instead.

Syntax
------

`-webkit-transform-3d` is a Boolean CSS media feature whose value is `true` if the browser supports `-webkit` prefixed CSS 3D `transform`s.

### Values

`true`

The browser supports the 3D CSS transforms with the `-webkit` prefix and supports non-standard, prefixed media queries.

`false`

The 3D CSS transforms prefixed with `-webkit` are not supported by the browser.

Examples
--------

### Examples of media queries with -webkit-transform-3d


```css
@media (-webkit-transform-3d) {
  .foo {
    transform-style: preserve-3d;
  }
}
```


A better method for checking for browser support is using a feature query:


```css
@supports (transform-style) {
  .foo {
    transform-style: preserve-3d;
  }
}
```

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

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-transform-3d |

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

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

See also
--------

* `-webkit-transform-2d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org
* `transform` and using CSS transforms
* `@media` and Using media queries
* `@supports` and using feature queries
prefers-reduced-transparency
============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`prefers-reduced-transparency`** CSS media feature is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users.

Syntax
------

`no-preference`

Indicates that a user has made no preference known on the device. This keyword value evaluates as false in the boolean context.

`reduce`

Indicates that a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects.

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

 Various operating systems provide a preference for reducing transparency, and user agents are likely to rely on these system settings.
 They may also rely on less explicit signals on platforms which don't offer a specific setting.

* In Windows 10/11: Settings > Personalization > Colors > Transparency effects.
* In macOS: System Preferences > Accessibility > Display > Reduce transparency.
* In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.
Examples
--------

This example has a translucent box by default. If the setting to reduce transparency is enabled in the accessibility preferences on your device, the translucent box becomes more opaque.

### HTML


```html
<div class="translucent">translucent box</div>
```

### CSS


```css
.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}
```

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-transparency |

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

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

See also
--------

* CSS prefers-reduced-motion media query
* Using media queries
-webkit-transform-2d
====================

**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.

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

The **`-webkit-transform-2d`** Boolean CSS media feature is a WebKit extension whose value is `true` if vendor-prefixed CSS 2D `transform`s and non-standard vendor-prefixed media queries are supported.

Apple has a description in Safari CSS Reference.

Syntax
------

`-webkit-transform-2d` is a Boolean CSS media feature whose value is `true` if the browser supports `-webkit` prefixed CSS 2D `transform`s.

### Values

`true`

The browser supports the 2D CSS transforms with the `-webkit` prefix.

`false`

The 2D CSS transforms prefixed with `-webkit` are not supported by the browser.

Examples
--------

### Basic example


```css
@media (-webkit-transform-2d) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```


This media feature is only supported by WebKit. The unprefixed `transform` property is supported in all modern browsers. If possible, use an `@supports` feature query instead:


```css
@supports (-webkit-transform: translate(100px, 100px)) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```

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-transition`
* `-webkit-animation`
* Test page at quirksmode.org
* `transform` and using CSS transforms
* `@media` and Using media queries
* `@supports` and using feature queries
prefers-reduced-data
====================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

**Note:** This feature is not supported by any user agent and its specifics are subject to change.

The **`prefers-reduced-data`** CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.

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.

`reduce`

Indicates that user has expressed the preference for lightweight alternate content.

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

Currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely rely on the settings provided by the operating system.

Examples
--------

**Note:** No browser currently implements this feature so the following example will not work.

In this example the `montserrat-regular.woff2` font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font:

### HTML


```html
<head>
  <link
 rel="preload"
 href="fonts/montserrat-regular.woff2"
 as="font"
 media="(prefers-reduced-data: no-preference)"
 crossorigin />
  <link rel="stylesheet" href="style.css" />
</head>
```

### CSS


```css
@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /\* latin \*/
    src:
      local("Montserrat Regular"),
      local("Montserrat-Regular"),
      url("fonts/montserrat-regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

body {
  font-family:
    Montserrat,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Microsoft YaHei",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}
```

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-data |

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

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

See also
--------

* `Save-Data` HTTP header
any-hover
=========

The **`any-hover`** CSS media feature can be used to test whether *any* available input mechanism can hover over elements.

Syntax
------

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

`none`

None of the available input mechanism(s) can hover conveniently, or there is no pointing input mechanism.

`hover`

One or more available input mechanisms can conveniently hover over elements.

Examples
--------

### Testing whether input methods can hover

#### HTML


```html
<a href="#">Try hovering over me!</a>
```


#### CSS


```css
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}
```


#### Result

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

| Specification |
| --- |
| Media Queries Level 4 # any-input |

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

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

See also
--------

* the `hover` media feature