recursal/MDN huggingface dataset:
height
======

The **`height`** CSS media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media).

Syntax
------

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

Examples
--------

### HTML


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

### CSS


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

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

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

### Result

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

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

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

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

See also
--------

* Using media queries
* @media
any-pointer
===========

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

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

Syntax
------

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

`none`

No pointing device is available.

`coarse`

At least one input mechanism includes a pointing device of limited accuracy.

`fine`

At least one input mechanism includes an accurate pointing device.


**Note:** More than one value can match if the available devices have different characteristics, although `none` only matches when none of them are pointing devices.

Examples
--------

This example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. The big checkbox takes precedence because it is declared after the small one.

### HTML


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

### CSS


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

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

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

### 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 `pointer` media feature
device-width
============

**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 width of the viewport, developers should use the `width` media feature instead.

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

Syntax
------

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

Examples
--------

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


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

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

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

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

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

See also
--------

* Using Media Queries
* @media
aural
=====

**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 `aural` CSS media type is used for devices that have speech output capabilities.

Syntax
------

The `aural` CSS media type was used to specify a block of CSS that applied only when the content is being presented using a speech synthesis device.


```css
@media aural {
  /\* speech-specific styles here \*/
}
```

Examples
--------

### Basic example


```css
@media aural {
  body {
    voice-family: Paul;
  }
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |

See also
--------

* Media queries
* Using media queries
* `@media`
overflow-inline
===============

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

Syntax
------

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

`none`

Content that overflows the inline axis is not displayed.

`scroll`

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

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
p {
  white-space: nowrap;
}

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

### Result

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
video-dynamic-range
===================

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

Some user agents, including many TVs, render video and graphics in two separate planes (bi-plane) with distinct screen characteristics. The `video-dynamic-range` feature is used to test the characteristics in the video plane.

Syntax
------

The `video-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.

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

| Specification |
| --- |
| Media Queries Level 5 # video-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
shape
=====

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

The `shape` CSS media feature can be used to test the shape of the device to distinguish rectangular and round displays.

Syntax
------

The `shape` discrete feature is specified as one of two acceptable strings, either `rect` representing a rectangular screen or `round` representing a circular, oval or elliptical screen.

`rect`

The shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate.

`round`

The shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate.

Examples
--------

### Basic example

#### HTML


```html
<h1>Hello World!</h1>
```


#### CSS


```css
h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}
```

### Custom stylesheet

This HTML will apply a special stylesheet for devices that have round screens.


```html
<head>
  <link rel="stylesheet" href="default.css" />
  <link
 media="screen and (shape: rect)"
 rel="stylesheet"
 href="rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>
```

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

| Specification |
| --- |
| CSS Round Display Level 1 # shape-media-feature |

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

There is no browser implementing this feature.

See also
--------

* Using Media Queries
* @media
inverted-colors
===============

The **`inverted-colors`** CSS media feature is used to test if the user agent or the underlying operating system has inverted all colors.

Inversion of colors can have unpleasant side effects, such as shadows turning into highlights, which can reduce the readability of the content. Using this media feature, you can detect if inversion is happening and style the content accordingly while respecting user preference.

Syntax
------


```css
/\* Keyword value \*/
@media (inverted-colors: inverted) {
  /\* styles to apply if inversion of colors is detected \*/
}
```


The `inverted-colors` feature is specified as one of the following keyword values:

`none`

Indicates that the colors are displayed normally and no inversion of colors has happened. This keyword value evaluates as false.

`inverted`

Indicates that all pixels within the displayed area have been inverted. This keyword value evaluates as true.

Examples
--------

### Applying styles if color inversion is detected

This example demonstrates the effects of both `inverted-colors` media feature keyword values and when the `inverted-colors` media feature is not supported.

#### HTML


```html
<p>
  If color inversion is detected, this text will appear blue on white (the
  inverse of yellow on black) along with a line over the text. If no color
  inversion is happening, the text will appear red on light gray without the
  line over the text.
</p>
<p>
  If the text is gray and no overline is present, it means your browser doesn't
  support the
  <code>inverted-colors</code> media feature.
</p>
```


#### CSS


```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
    text-decoration: overline;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```


#### Result

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

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

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

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

See also
--------

* @media
* CSS media queries module
* Using media queries
resolution
==========

The **`resolution`** CSS media feature can be used to test the pixel density of the output device.

Syntax
------

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

Examples
--------

### HTML


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

### CSS


```css
/\* Exact resolution \*/
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/\* Minimum resolution \*/
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/\* Maximum resolution \*/
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}
```

### Result

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

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

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

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

See also
--------

* `window.devicePixelRatio`
* The `image-resolution` property
Using multiple backgrounds
==========================

You can apply **multiple backgrounds** to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

Specifying multiple backgrounds is easy:


```css
.myclass {
  background:
    background1,
    background2,
    /\* …, \*/ backgroundN;
}
```


You can do this with both the shorthand `background` property and the individual properties thereof except for `background-color`. That is, the following background properties can be specified as a list, one per background: `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`.

Example
-------

In this example, three backgrounds are stacked: the Firefox logo, an image of bubbles, and a linear gradient:

### HTML


```html
<div class="multi-bg-example"></div>
```

### CSS


```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(30
          75 115 / 100%), rgb(255 255 255 / 0%));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

### Result

(If image does not appear in CodePen, click the 'Tidy' button in the CSS section)

As you can see here, the Firefox logo (listed first within `background-image`) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'. Each subsequent sub-property (`background-repeat` and `background-position`) applies to the corresponding backgrounds. So the first listed value for `background-repeat` applies to the first (frontmost) background, and so forth.

See also
--------

* Using CSS gradients
Box-shadow generator
====================

This tool lets you construct CSS `box-shadow` effects, to add box shadow effects to your CSS objects.

The box-shadow generator enables you to add one or more box shadows to an element.

On opening the tool, you'll find a rectangle in the top-right section of the tool. That's the element you're going to be applying shadows to. When this element is selected (as it is, when you first load the page) you can apply some basic styling to it:

* Set the element's `color` using the color picker tool.
* Give the element a `border` using the "border" checkbox.
* Use the sliders to set the element's `top`, `left`, `width`, and `height` properties.

To add a box shadow, click the "+" button at the top-left. This adds a shadow, and lists it in the column on the left. Now you can set the values of the new shadow:

* Set the shadow's `color` using the color picker tool.
* Set the shadow to be inset using the "inset" checkbox.
* Use the sliders to set the element's position, blur, and spread.

To add another shadow, click "+" again. Now any values you set will apply to this new shadow. Change the order in which these two shadows are applied using the ↑ and ↓ buttons at the top-left. Select the first shadow again by clicking it in column on the left. To update the element's own styles, select it by clicking the button labelled "element" along the top.

You can add `::before` and `::after` pseudo-elements to the element, and give them box shadows as well. To switch between the element and its pseudo-elements, use the buttons along the top labeled "element", ":before", and ":after".

The box at the bottom-right contains the CSS for the element and any `before::` or `::after` pseudo-elements.

See also
--------

Border-image generator

This interactive tool lets you visually create border images (the `border-image` property).

Border-radius generator

This interactive tool lets you visually create rounded corners (the `border-radius` property).
Border-radius generator
=======================

This tool can be used to generate CSS `border-radius` effects.

See also
--------

Border-image generator

This interactive tool lets you visually create border images (the `border-image` property).

Box-shadow generator

This interactive tool lets you visually create shadows behind elements (the `box-shadow` property).
Border-image generator
======================

This tool can be used to generate CSS `border-image` values.

See also
--------

Border-radius generator

This interactive tool lets you visually create rounded corners (the `border-radius` property).

Box-shadow generator

This interactive tool lets you visually create shadows behind elements (the `box-shadow` property).
Understanding z-index
=====================

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The `z-index` attribute lets you adjust the order of the layering of objects when rendering content.

> 
> *In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.*
> 
> 
> 

(from CSS 2.1 Section 9.9.1 - Layered presentation)

This means that CSS style rules allow you to position boxes on layers in addition to the default rendering layer (layer 0). The position on an imaginary z-axis of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Control the position on this z-axis with the CSS `z-index` property.

Using `z-index` appears extremely easy: a single property assigned a single integer number with an easy-to-understand behavior. When `z-index` is applied to complex hierarchies of HTML elements, its behavior can be hard to understand or predict. This is due to complex stacking rules. In fact, a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

This guide will try to explain those rules, with some simplification and several examples.

Articles
--------

1. Stacking without the z-index property: The stacking rules that apply when `z-index` is not used.
2. Stacking floating elements: How floating elements are handled with stacking.
3. Using z-index: How to use `z-index` to change default stacking.
4. Stacking context: Notes on the stacking context.
Examples
--------

1. Stacking context example 1: 2-level HTML hierarchy, `z-index` on the last level
2. Stacking context example 2: 2-level HTML hierarchy, `z-index` on all levels
3. Stacking context example 3: 3-level HTML hierarchy, `z-index` on the second level
Stacking context example 2
==========================

Description
-----------

This is a very simple example, but it is the key for understanding the concept of *stacking context*. There are the same four DIVs of the previous example, but now `z-index` properties are assigned on both levels of the hierarchy.

You can see that DIV #2 (`z-index`: 2) is above DIV #3 (`z-index`: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked.

What can be considered strange is that DIV #2 (`z-index`: 2) is above DIV #4 (`z-index`: 10), despite their z-index values. The reason is that they do not belong to the same stacking context. DIV #4 belongs to the stacking context created by DIV #3, and as explained previously DIV #3 (and all its content) is under DIV #2.

To better understand the situation, this is the stacking context hierarchy:

* Root stacking context
    + DIV #2 (`z-index`: 2)
    + DIV #3 (`z-index`: 1)
        - DIV #4 (`z-index`: 10)

**Note:** It is worth remembering that the HTML hierarchy is different from the stacking context hierarchy. In the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent.

Example
-------

### HTML


```html
<div id="div1">
  <br />
  <span class="bold">DIV #1</span><br />
  position: relative;
  <div id="div2">
    <br />
    <span class="bold">DIV #2</span><br />
    position: absolute;<br />
    z-index: 2;
  </div>
</div>

<br />

<div id="div3">
  <br />
  <span class="bold">DIV #3</span><br />
  position: relative;<br />
  z-index: 1;
  <div id="div4">
    <br />
    <span class="bold">DIV #4</span><br />
    position: absolute;<br />
    z-index: 10;
  </div>
</div>
```

### CSS


```css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

Result
------

See also
--------

* Stacking without the z-index property: The stacking rules that apply when `z-index` is not used.
* Stacking floating elements: How floating elements are handled with stacking.
* Using z-index: How to use `z-index` to change default stacking.
* Stacking context: Notes on the stacking context.
* Stacking context example 1: 2-level HTML hierarchy, `z-index` on the last level
* Stacking context example 3: 3-level HTML hierarchy, `z-index` on the second level