recursal/MDN huggingface dataset:
Using media queries for accessibility
=====================================

**CSS media queries** can be used to help users with disabilities better experience your website.

Reduced Motion
--------------

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity. The `prefers-reduced-motion` media query enables providing an experience with fewer animations and transitions to users who have set their operating system's accessibility preferences to reduce motion.

Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.

### Syntax

`no-preference`

Indicates that the user has made no preference known to the system.

`reduce`

Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.

### Example

This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.

#### HTML


```html
<div class="animation">animated box</div>
```


#### CSS


```css
.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
```


The value of `prefers-reduced-motion` is `reduce`, not "none". Users are not expecting no animation, such as could be set with `* {animation: none !important;}`. Rather, they expect motion animation triggered by interaction to be disabled, unless the animation is essential to the functionality or the information being conveyed (see WCAG: Animation from Interactions).

See also
--------

* `prefers-contrast`: to adjust page styles based on user's contrast preference
* `prefers-reduced-transparency`
* `prefers-color-scheme`
* `inverted-colors`
* Designing With Reduced Motion For Motion Sensitivities
base-palette
============

The **`base-palette`** CSS descriptor is used to specify the name or index of a pre-defined palette to be used for creating a new palette. If the specified `base-palette` does not exist, then the palette defined at index 0 will be used.

Syntax
------


```css
@font-palette-values --one {
  base-palette: 1;
}
```


The `base-palette` descriptor is specified using a zero-based index of the font-maker created palettes.

### Values

`<index>`

Specifies the index of the pre-defined palette to use.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-palette-values` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

base-palette =   
  light            |  
  dark             |  
  <integer [0,∞]>    
  
```

Examples
--------

### Changing the default palette in a font

Using the Rocher Color Font, this example shows two instances of switching the default palette in the font to an alternate palette created by the font-maker.

#### HTML


```html
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
```


#### CSS


```css
@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}

h2 {
  font-family: "Rocher";
}

@font-palette-values --two {
  font-family: "Rocher";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Rocher";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}
```


#### Result

![Example showing 3 different base-palettes of Rocher color font](/en-US/docs/Web/CSS/@font-palette-values/base-palette/rocher-color-font-alt-base-palettes.jpg)

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # base-palette-desc |

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

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

See also
--------

* `@font-palette-values`
* `font-family` descriptor
* `override-colors` descriptor
* `font-palette` property
* `CSSFontPaletteValuesRule.basePalette`
font-family
===========

The @font-palette-values descriptor **`font-family`** is used to specify which font-family palette values are to be applied to. This need to match exactly the values used when setting the CSS font-family.

Syntax
------


```css
@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /\* other palette settings follow \*/
}
```


Other palette values that follow apply only to the specified font family. You can create @font-palette-values for other font families by using the same <dashed-ident>s. This means that if you have multiple Color Fonts and can use the same identifier for each.

### Values

`<family-name>`

Specifies the name of the font-family.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-palette-values` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

font-family =   
  <family-name>#    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

Examples
--------

### Using matching family names

In this example, when the `font-family` descriptor is used in the @font-palette-values at-rule, the same value is used for the `font-family`, as when it is declared.

#### HTML


```html
<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>
```


#### CSS


```css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --bungee-extra-spicy {
  font-family: "Bungee Spice";
  override-colors:
    0 DarkRed,
    1 Red;
}

h2 {
  font-family: "Bungee Spice";
}

h2.extra-spicy {
  font-palette: --bungee-extra-spicy;
}
```


#### Result

### Using the same palette identifier for multiple font-families

In this example, two @font-palette-values at-rules are set for two font families, but both the at-rules use the same dashed-ident identifier, `--Dark Mode`. This helps to set the font-palette property for multiple elements, `h1` and `h2` in this case, at the same time. This can be useful when you want to update font colors to match your site's branding.


```css
@font-palette-values --Dark-Mode {
  font-family: "Bungee Spice";
  /\* palette settings for Bungee Spice \*/
}

@font-palette-values --Dark-Mode {
  font-family: Bixa;
  /\* palette settings for Bixa \*/
}

h1,
h2 {
  font-palette: --Dark-Mode;
}

h1 {
  font-family: "Bungee Spice";
}

h2 {
  font-family: Bixa;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-2-desc |

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

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

See also
--------

* `font-family`
* `@font-palette-values`
* `font-family` descriptor
* `override-colors` descriptor
* `font-palette` property
* `CSSFontPaletteValuesRule.fontFamily`
inset()
=======

The **`inset()`** CSS function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the `<basic-shape>` data types.

Try it
------

Syntax
------


```css
shape-outside: inset(20px 50px 10px 0 round 50px);
```

### Values

`<length-percentage>{1,4}`

When all of the four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.

`<border-radius>`

The optional `<border-radius>` argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

Examples
--------

### Basic inset example

In the example below we have an `inset()` shape used to pull content over the floated element. Change the offset values to see how the shape changes.

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-inset |

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

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

See also
--------

* Properties that use this data type: `clip-path`, `shape-outside`
* CSS shapes module
* Guide to basic shapes
ellipse()
=========

The **`ellipse()`** CSS function is one of the `<basic-shape>` data types.

Try it
------

Syntax
------


```css
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);
```


An ellipse is essentially a squashed circle and so `ellipse()` acts in a very similar way to `circle()` except that we have to specify two radii x and y.

### Values

`<shape-radius>`

Two radii, x and y in that order. These may be a `<length>`, or a `<percentage>` or values `closest-side` and `farthest-side`.

`closest-side`

Uses the length from the center of the shape to the closest side of the reference box. For ellipses, this is the closest side in the radius dimension.

`farthest-side`

Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension.


`<position>`

Moves the center of the ellipse. May be a `<length>`, or a `<percentage>`, or a values such as `left`. The `<position>` value defaults to center if omitted.

Examples
--------

### Basic ellipse() example

This example shows an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.

### Using closest-side / farthest-side values

The keyword values of `closest-side` and `farthest-side` are useful to create a quick ellipse based on the size of the floated element reference box.

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse |

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

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

See also
--------

* Properties that use this data type: `clip-path`, `shape-outside`
* Guide to Basic Shapes
circle()
========

The **`circle()`** CSS function is one of the `<basic-shape>` data types.

Try it
------

Syntax
------


```css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
```

### Values

`<shape-radius>`

This may be a `<length>`, or a `<percentage>` or values `closest-side` and `farthest-side`.

`closest-side`

Uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension.

`farthest-side`

Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the closest side in any dimension.


`<position>`

Moves the center of the circle. May be a `<length>`, or a `<percentage>`, or a values such as `left`. The `<position>` value defaults to center if omitted.

Examples
--------

### Basic circle

In the example below, the `shape-outside` property has a value of `circle(50%)`, which defines a circle on a floated element for the text to flow round.

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-circle |

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

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

See also
--------

* Properties that use this data type: `clip-path`, `shape-outside`
* Guide to Basic Shapes
CSS nesting at-rules
====================

Any at-rule whose body contains style rules can be nested inside another style rule using CSS nesting. Style rules nested inside at-rules take their nesting selector definition from the nearest ancestor style rule. Properties can be directly included inside a nested at-rule, acting as if they were nested in a `& {...}` block.

at-rules that can be nested
---------------------------

* `@media`
* `@supports`
* `@layer`
* `@scope`
* `@container`
Examples
--------

### Nesting `@media` at-rule

In this example we see three blocks of CSS. The first one shows how to write typical at-rule nesting, the second is an expanded way of writing the nesting as the browser parses it, and the third one shows the non-nested equivalent.

#### Nested CSS


```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
```


#### Expanded nested CSS


```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    & {
      grid-auto-flow: column;
    }
  }
}
```


#### Non-nested equivalent


```css
.foo {
  display: grid;
}

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
```

### Multiple nested `@media` at-rules

At-rules can be nested within other at-rules. Below you can see an example of this, and how it would be written without nesting.

#### Nested at-rules


```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (min-width: 1024px) {
      max-inline-size: 1024px;
    }
  }
}
```


#### Non-nested equivalent


```css
.foo {
  display: grid;
}
@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
@media (orientation: landscape) and (min-width: 1024px) {
  .foo {
    max-inline-size: 1024px;
  }
}
```

### Nesting Cascade Layers (`@layer`)

Cascade Layers can be nested to create child-layers. These are joined with a `.`(dot).

#### Defining the parent & child layers

We start by defining the named cascade layers, prior to using them, without any style assignments.


```css
@layer base {
  @layer support;
}
```


#### Assigning rules to layers with nesting

Here the `.foo` selector assigns its rules to the **base** `@layer`. The nested **support** `@layer` creates the `base.support` sub-layer, and the `&` nesting selector is used to create the rules for the `.foo .bar` selector .


```css
.foo {
  @layer base {
    block-size: 100%;
    @layer support {
      & .bar {
        min-block-size: 100%;
      }
    }
  }
}
```


#### Equivalent without nesting


```css
@layer base {
  .foo {
    block-size: 100%;
  }
}
@layer base.support {
  .foo .bar {
    min-block-size: 100%;
  }
}
```

See Also
--------

* CSS Nesting module
* `&` nesting selector
* Using CSS nesting
* Nesting and specificity
CSS nesting and specificity
===========================

The `specificity` of the `&` nesting selector is calculated using the largest specificity in the associated selector list. This is identical to how specificity is calculated when using the `:is()` function.


```html
<b class="foo">
  <c>Blue text</c>
</b>
```

`&` nesting syntax
------------------


```css
#a, b {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}
```

`:is()` syntax
--------------


```css
:is(#a, b) {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}
```


In this example, the id selector (`#a`) has a specificity of `1-0-0`, while the type selector (`b`) has a specificity of `0-0-1`. The `&` nesting selector and `:is()` pseudo-class both take a specificity of `1-0-0`, even though the `#a` id selector is never used.

The `.foo` class selector has a specificity of `0-1-0`. This makes the total specificity `1-0-1` for `& c` and `0-1-1` for `.foo c`, meaning that `color: blue;` wins out.

See Also
--------

* CSS nesting module
* `&` nesting selector
* Using CSS nesting
* Nesting at-rules
suffix
======

The **`suffix`** descriptor of the `@counter-style` rule specifies content that will be added to the end of the marker representation.

Syntax
------


```css
/\* <symbol> value: string, image, or identifier \*/
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
```

### Values

The **`suffix`** descriptor takes as its value a single `<symbol>`:

`<symbol>`

Specifies a `<symbol>` that is appended to the marker representation. It may be a `<string>`, `<image>`, or `<custom-ident>`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | ". " (full stop followed by a space) |
| Computed value | as specified |

Formal syntax
-------------
```

suffix =   
  <symbol>    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Setting a suffix for a counter

#### HTML


```html
<ul class="choices">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>None of the above</li>
</ul>
```


#### CSS


```css
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.choices {
  list-style: options;
}
```


#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-suffix |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `range`, `pad`, `speak-as`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles
* CSS counter styles module
* CSS lists and counters module
prefix
======

The `@counter-style` rule's **`prefix`** descriptor specifies content that will be added to the beginning of the counter's marker representation.

When the counter value is negative, the `prefix` comes before the negative sign and any other `<symbol>`s added by the `negative` descriptor.

Syntax
------


```css
/\* <symbol> value: string, image, or identifier \*/
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);
```

### Values

The **`prefix`** descriptor takes as its value a single `<symbol>`:

`<symbol>`

Specifies a `<symbol>` — a `<string>`, `<image>`, or `<custom-ident>` — that is prepended to the marker representation.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | "" (the empty string) |
| Computed value | as specified |

Formal syntax
-------------
```

prefix =   
  <symbol>    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Adding a prefix to a counter

In this example, each counter number is prefixed by "Book " (with a space) and followed by a colon (`:`). The colon is added with the `suffix` descriptor.

#### HTML


```html
<ol class="books">
  <li>Flamer, by Mike Curato</li>
  <li>Gender Queer: A Memoir, by Maia Kobabe</li>
  <li>Tricks, by Ellen Hopkins</li>
  <li>The Handmaid’s Tale: The Graphic Novel, by Margaret Atwood</li>
  <li>Crank, by Ellen Hopkins</li>
</ol>
```


#### CSS


```css
@counter-style books {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Book ";
  suffix: ": ";
}

.books {
  list-style: books;
  padding-left: 15ch;
}
```


#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-prefix |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `suffix`, `range`, `pad`, `speak-as`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles
* CSS counter styles module
* CSS lists and counters module
fallback
========

The **`fallback`** descriptor of the `@counter-style` at-rule can be used to specify a counter style to fall back to if the counter style being defined cannot create a marker representation for a particular counter value.

Syntax
------


```css
/\* Keyword values \*/
fallback: lower-alpha;
fallback: custom-gangnam-style;
```

Value
-----

The descriptor takes a single `<counter-style-name>` as its value:

`<counter-style-name>`

Provides the name of the counter style to be used as the fallback, which is either the case-sensitive `<custom-ident>` of a custom CSS counter style (without quotes) or a case-insensitive `list-style-type` property value such as `decimal`, `disc`, and so on.

If omitted, the counter fallback defaults to `decimal`.

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

The counter style provided as the value of the `fallback` descriptor is used when a `range` descriptor is specified for a counter style; the `fallback` style is used to represent all the values that fall outside the range. The `fallback` style is also used when the `fixed` `system` is used and there are not enough symbols to cover all the list items; the `fallback` style is used to represent all the values beyond the scope of the fixed system. In both these cases, and any other time the defined counter cannot create a specific counter value, the `fallback` style is used.

If the specified fallback style is also unable to construct a representation, then the `fallback` value of that fallback counter is used. If that fallback style's fallback is also unable to construct a representation, then that fallback's fallback is used. This falling back continues until a fallback is found that can construct the counter-representation. If no fallback `fallback` value is able to construct a representation―if a fallback style doesn't have a `fallback` value set, or if a `fallback` value is not specified or invalid―the `fallback` defaults to `decimal`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `decimal` |
| Computed value | as specified |

Formal syntax
-------------
```

fallback =   
  <counter-style-name>    
  
```

Examples
--------

### Specifying a fallback counter style

#### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```


#### CSS


```css
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}
```


#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-fallback |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `suffix`, `range`, `pad`, and `speak-as`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles