font-optical-sizing - CSS: Cascading Style Sheets

font-optical-sizing
===================

The **`font-optical-sizing`** CSS property sets whether text rendering is optimized for viewing at different sizes.

Try it
------

Syntax
------

```css
/\* keyword values \*/
font-optical-sizing: none;
font-optical-sizing: auto; /\* default \*/

/\* Global values \*/
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: revert;
font-optical-sizing: revert-layer;
font-optical-sizing: unset;
```

### Values

none

The browser will not modify the shape of glyphs for optimal viewing.

auto

The browser will modify the shape of glyphs for optimal viewing.

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

Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by `opsz` in `font-variation-settings`.

When optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

font-optical-sizing =
  auto  |
  none

```

Examples
--------

### Disabling optical sizing

```html
<p class="optical-sizing">
  This paragraph is optically sized. This is the default across browsers.
</p>

<p class="no-optical-sizing">
  This paragraph is not optically sized. You should see a difference in
  supporting browsers.
</p>
```

```css
@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}
```

**Note:** The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can download it on GitHub.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-optical-sizing-def |

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

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

See also
--------

* `font-size`
* `font-size-adjust`
* Fundamental text and font styling


Introducing the CSS Cascade - CSS: Cascading Style Sheets

Introducing the CSS Cascade
===========================

The **cascade** is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin, cascade layer, or `@scope` block set a value for a property on an element.

The cascade lies at the core of CSS, as emphasized by the name: ***Cascading*** Style Sheets. When a selector matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater specificity.

This article explains what the cascade is and the order in which CSS declarations cascade, covering cascade layers and origin type. Understanding origin precedence is key to understanding the cascade.

Origin types
------------

The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations come from different origin types: **User-agent stylesheets**, **Author stylesheets**, and **User stylesheets**.

Though style sheets come from these different origins and can be within different layers in each of these origins, they overlap in terms of their default scope; to make this work, the cascade algorithm defines how they interact. Before addressing the interactions, we'll define some key terms in the next few sections.

### User-agent stylesheets

User-agents, or browsers, have basic style sheets that give default styles to any document. These style sheets are named **user-agent stylesheets**. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.

Some browsers let users modify the user-agent stylesheet, but this is rare and not something that can be controlled.

Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude: that means some differences exist between browsers. To simplify the development process, Web developers may use a CSS reset stylesheet, such as normalize.css, which sets common properties values to a known state for all browsers before beginning to make alterations to suit their specific needs.

Unless the user-agent stylesheet includes an `!important` next to a property, making it "important", styles declared by author styles, including a reset style sheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector.

### Author stylesheets

**Author stylesheets** are the most common type of style sheet; these are the styles written by web developers. These styles can reset user-agent styles, as noted above, and define the styles for the design of a given web page or application. The author, or web developer, defines the styles for the document using one or more linked or imported stylesheets, `<style>` blocks, and inline styles defined with the `style` attribute. These author styles define the look and feel of the website — its theme.

### User stylesheets

In most browsers, the user (or reader) of the website can choose to override styles using a custom **user stylesheet** designed to tailor the experience to the user's wishes. Depending on the user agent, user styles can be configured directly or added via browser extensions.

### Cascade layers

The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of cascade layers within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using `layer`, `layer()` or `@layer`, styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer.

Let's take a look at cascading origin type before diving into cascade layers within each origin type.

Cascading order
---------------

The cascading algorithm determines how to find the value to apply for each property for each document element. The following steps apply to the cascading algorithm:

1. **Relevance**: It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate `media` at-rule.
2. **Origin and importance**: Then it sorts these rules according to their importance, that is, whether or not they are followed by `!important`, and by their origin. Ignoring layers for the moment, the cascade order is as follows:

| Order (low to high) | Origin | Importance |
| --- | --- | --- |
| 1 | user-agent (browser) | normal |
| 2 | user | normal |
| 3 | author (developer) | normal |
| 4 | CSS @keyframe animations |  |
| 5 | author (developer) | `!important` |
| 6 | user | `!important` |
| 7 | user-agent (browser) | `!important` |
| 8 | CSS transitions |  |
3. **Specificity**: In case of equality with an origin, the specificity of a rule is considered to choose one value or another. The specificity of the selectors are compared, and the declaration with the highest specificity wins.
4. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See How `@scope` conflicts are resolved for more details and an example.
5. **Order of appearance**: In the origin with precedence, if there are competing values for a property that are in style block matching selectors of equal specificity and scoping proximity, the last declaration in the style order is applied.

The cascade is in ascending order, meaning animations have precedence of normal values, whether those are declared in user, author, or user-agent styles, important values take precedence over animations, and transitions have precedence over important values.

**Note:** **Transitions and animations**

Property values set by animation `@keyframes` are more important than all normal styles (those with no `!important` set).

Property values being set in a `transition` take precedence over all other values set, even those marked with `!important`.

The cascade algorithm is applied *before* the specificity algorithm, meaning if `:root p { color: red;}` is declared in the user stylesheet (line 2) and a less specific `p {color: blue;}` is in the author stylesheet (line 3), the paragraphs will be blue.

Basic example
-------------

Before taking a deeper look at how cascade layers impact the cascade, let's look at an example involving multiple sources of CSS across the various origins, and work through the steps of the cascade algorithm:

Here we have a user agent style sheet, two author style sheets, and a user stylesheet, with no inline styles within the HTML:

**User-agent CSS:**

```css
li {
  margin-left: 10px;
}
```

**Author CSS 1:**

```css
li {
  margin-left: 0;
} /\* This is a reset \*/
```

**Author CSS 2:**

```css
@media screen {
  li {
    margin-left: 3px;
  }
}

@media print {
  li {
    margin-left: 1px;
  }
}

@layer namedLayer {
  li {
    margin-left: 5px;
  }
}
```

**User CSS:**

```css
.specific {
  margin-left: 1em;
}
```

**HTML:**

```html
<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>
```

In this case, declarations inside `li` and `.specific` rules should apply.

Once again, there are five steps in the cascade algorithm, in order:

1. Relevance
2. Origin and importance
3. Specificity
4. Scoping proximity
5. Order of appearance

The `1px` is for print media. Due to lack of *relevance* based on its media type, it is removed from consideration.

No declaration is marked as `!important`, so the precedence order is author style sheets over user style sheets over user-agent stylesheet. Based on *origin and importance*, the `1em` from the user stylesheet and the `10px` from the user-agent stylesheet are removed from consideration.

Note that even though the user style on `.specific` of `1em` has a higher specificity, it's a normal declaration in a user style sheet. As such, it has a lower precedence than any author styles, and gets removed by the origin and importance step of the algorithm before specificity even comes into play.

There are three declarations in author stylesheets:

```css
li {
  margin-left: 0;
} /\* from author css 1 \*/
```

```css
@media screen {
  li {
    margin-left: 3px;
  }
}
```

```css
@layer namedLayer {
  li {
    margin-left: 5px;
  }
}
```

The last one, the `5px` is part of a cascade layer. Normal declarations in layers have lower precedence than normal styles not in a layer within the same origin type. This is also removed by step 2 of the algorithm, *origin and importance*.

This leaves the `0` and the `3px`, which both have the same selector, hence the same *specificity*. Neither of them are inside a `@scope` block, so scoping proximity does not come into play in this example either.

We then look at *order of appearance*. The second one, the last of the two unlayered author styles, wins.

```css
margin-left: 3px;
```

**Note:** The declaration defined in the user CSS, while it may have greater specificity, is not chosen as the cascade algorithm's *origin and importance* is applied before the *specificity* algorithm. The declaration defined in a cascade layer, though it may come later in the code, will not have precedence either as normal styles in cascade layers have less precedence than normal unlayered styles. *Order of appearance* only matters when both origin, importance, and specificity are equal.

Author styles: inline styles, layers, and precedence
----------------------------------------------------

The table in Cascading order provided a precedence order overview. The table summarized the user-agent, user, and author origin type styles in two lines each with "origin type - normal" and "origin type - !important". The precedence within each origin type is more nuanced. Styles can be contained within layers within their origin type, and, with author styles, there is also the issue of where inline styles land in the cascade order.

The order in which layers are declared is important in determining precedence. Normal styles in a layer take precedence over styles declared in prior layers; with normal styles declared outside of any layer taking precedence over normal layered styles regardless of specificity.

In this example, the author used CSS's `@import` rule to import five external style sheets within a `<style>` information element.

```html
<style>
 @import unlayeredStyles.css;
 @import AStyles.css layer(A);
 @import moreUnlayeredStyles.css;
 @import BStyles.css layer(B);
 @import CStyles.css layer(C);
 p {
 color: red;
 padding: 1em !important;
 }
</style>
```

and then in the body of the document we have inline styles:

```html
<p style="line-height: 1.6em; text-decoration: overline !important;">Hello</p>
```

 In the CSS code block above, three cascade layers named "A", "B", and "C", were created, in that order. Three stylesheets were imported directly into layers and two were imported without creating or being assigned to a layer.
 The "All unlayered styles" in the list below (normal author style precedence - order 4) includes styles from these two stylesheets and the additional unlayered CSS style blocks. In addition, there are two inline styles, a normal `line-height` declaration and an important `text-decoration` declaration:

| Order (low to high) | Author style | Importance |
| --- | --- | --- |
| 1 | A - first layer | normal |
| 2 | B - second layer | normal |
| 3 | C - last layer | normal |
| 4 | All unlayered styles | normal |
| 5 | inline `style` | normal |
| 6 | animations |  |
| 7 | All unlayered styles | `!important` |
| 8 | C - last layer | `!important` |
| 9 | B - second layer | `!important` |
| 10 | A - first layer | `!important` |
| 11 | inline `style` | `!important` |
| 12 | transitions |  |

In all origin types, the non important styles contained in layers have the lowest precedence. In our example, the normal styles associated with the first declared layer (A) have lower precedence than normal styles in the second declared layer (B), which have lower precedence than normal styles in the third declared layer (C). These layered styles have lower precedence than all normal unlayered styles, which includes normal styles from `unlayeredStyles.css`, `moreUnlayeredStyles.css`, and the `color` of `p` in the `<style>` itself.

If any of the layered styles in A, B, or C, have selectors with higher specificity matching an element, similar to `:root body p { color: black;}`, it doesn't matter. Those declarations are removed from consideration because of *origin*; normal layered styles have less precedence than normal unlayered styles. If, however, the more specific selector `:root body p { color: black;}` was found in `unlayeredStyles.css`, as both *origin and importance* have the same precedence, *specificity* would mean the more specific, black declaration would win.

The layer order of precedence is inverted for styles declared as `!important`. Important styles declared in a layer take precedence over important styles declared outside of a layer. Important styles in the first declared layer (A) take precedence over important declarations found in layer B, which takes precedence over C, which have precedence over important declarations in the unlayered styles.

### Inline styles

Only relevant to author styles are inline styles, declared with the `style` attribute. Normal inline styles take precedence over any other normal author styles, no matter the specificity of the selector. If `line-height: 2;` were declared in a `:root body p` selector block in any of the five imported stylesheets, the line height would still be `1.6`.

Normal inline styles take precedence over any other normal author styles unless the property is being altered by a CSS animation.

All important inline styles take precedence over all author styles, important and not, inline and not, layered and not. Important styles also take precedence over animated properties, but not transitioning properties. Three things can override an important inline style: 1) an important user style, 2) an important user agent style, or 3) a property value being transitioned.

### Importance and layers

The origin type precedence order is inverted for important styles. Important styles declared outside of any cascade layer have lower precedence than those declared as part of a layer. Important values that come in early layers have precedence over important styles declared in subsequent cascade layers.

Take for example the following CSS:

```css
p {
  color: red;
}
@layer B {
  :root p {
    color: blue;
  }
}
```

Even though the red is declared first and has a less specific selector, because unlayered CSS takes precedence over layered CSS, the paragraph will be red. Had we included an inline style on the paragraph setting it to a different color, such as `<p style="color: black">`, the paragraph would be black.

When we add `!important` to this bit of CSS, the precedence order is reversed with the stylesheet:

```css
p {
  color: red !important;
}
@layer B {
  :root p {
    color: blue !important;
  }
}
```

Now the paragraph will be blue. The `!important` in the earliest declared layer takes precedence of subsequent layers and unlayered important declarations. If the inline style contained !important, such as `<p style="color: black !important">`, again the paragraph would be black. Inline importance does take precedence over all other author declared `!important` declarations, no matter the specificity.

**Note:** `!important` reverses the precedence of cascade layers. For this reason, rather than using `!important` to override external styles, import frameworks, third party styles, widget stylesheets, etc., into layers, demoting their precedence. `!important` should only be used sparingly, if ever, to guard required styles against later overrides, in the first declared layer.

Styles that are transitioning take precedence over all important styles, no matter who or how they are declared.

Complete cascade order
----------------------

Now that we have a better understanding of origin type and cascade layer precedence, we realize the table in Cascading order could have more accurately been represented by the following table:

| Precedence Order(low to high) | Style Origin | Importance |
| --- | --- | --- |
| 1 | user-agent - first declared layer | normal |
| user-agent - last declared layer |
| user-agent - unlayered styles |
| 2 | user - first declared layer | normal |
| user - last declared layer |
| user - unlayered styles |
| 3 | author - first declared layer | normal |
| author - last declared layer |
| author - unlayered styles |
| inline `style` |
| 4 | animations |  |
| 5 | author - unlayered styles | `!important` |
| author - last declared layer |
| author - first declared layer |
| inline `style` |
| 6 | user - unlayered styles | `!important` |
| user - last declared layer |
| user - first declared layer |
| 7 | user-agent - unlayered styles | `!important` |
| user-agent - last declared layer |
| user-agent - first declared layer |
| 8 | transitions |  |

Which CSS entities participate in the cascade
---------------------------------------------

Only CSS property/value pair declarations participate in the cascade. This means that at-rules containing entities other than declarations, such as a `@font-face` rule containing *descriptors*, don't participate in the cascade.

For the most part, the properties and descriptors defined in at-rules don't participate in the cascade. Only at-rules as a whole participate in the cascade. For example, within a `@font-face` rule, font names are identified by `font-family` descriptors. If several `@font-face` rules with the same descriptor are defined, only the most appropriate `@font-face`, as a whole, is considered. If more than one are identically appropriate, the entire `@font-face` declarations are compared using steps 1, 2, and 4 of the algorithm (there is no specificity when it comes to at-rules).

While the declarations contained in most at-rules — such as those in `@media`, `@document`, or `@supports` — participate in the cascade, the at-rule may make an entire selector not relevant, as we saw with the print style in the basic example.

Declarations in `@keyframes` don't participate in the cascade. As with `@font-face`, only the `@keyframes` as a whole is selected via the cascade algorithm. The precedence order of animation is described below.

When it comes to `@import`, the `@import` doesn't participate itself in the cascade, but all of the imported styles do participate. If the `@import` defines a named or anonymous layer, the contents of the imported stylesheet are placed into the specified layer. All other CSS imported with `@import` is treated as the last declared layer. This was discussed above.

Finally, `@charset` obeys specific algorithms and isn't affected by the cascade algorithm.

CSS animations and the cascade
------------------------------

CSS animations, using `@keyframes` at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single `@keyframes`, and never mixes multiple ones together.

If the several keyframe animations are defined with the same animation name, the last defined `@keyframes` in the origin and layer with the greatest precedence. Only one `@keyframes` definition is used, even if the `@keyframes` animate different property. `@keyframes` with the same name are never combined.

```css
p {
  animation: infinite 5s alternate repeatedName;
}
@keyframes repeatedName {
  from {
    font-size: 1rem;
  }
  to {
    font-size: 3rem;
  }
}

@layer A {
  @keyframes repeatedName {
    from {
      background-color: yellow;
    }
    to {
      background-color: orange;
    }
  }
}
@layer B {
  @keyframes repeatedName {
    from {
      color: white;
    }
    to {
      color: black;
    }
  }
}
```

In this example, there are three separate animation declaration named `repeatedName`. When `animation: infinite 5s alternate repeatedName` is applied to the paragraph, only one animation is applied: the keyframe animation defined in the unlayered CSS takes precedence over the layered keyframe animation declarations based on origin and cascade layer precedence order. In this example, only the element's font size will be animated.

**Note:** There are no important animations, as property declarations in a `@keyframes` block that contain `!important` as part of the value are ignored.

Resetting styles
----------------

After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property `all` lets you quickly set (almost) everything in CSS back to a known state.

`all` lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |

See also
--------

* A very simple introduction to the CSS cascade
* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements


:user-invalid - CSS: Cascading Style Sheets

:user-invalid
=============

The **`:user-invalid`** CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it.

The `:user-invalid` pseudo-class must match an `:invalid`, `:out-of-range`, or blank-but `:required` element between the time the user has attempted to submit the form and before the user has interacted again with the form element.

Syntax
------

```css
:user-invalid {
  /\* ... \*/
}
```

Examples
--------

### Setting a color and symbol on :user-invalid

 In the following example, the red border and ❌ only display once the user has interacted with the field.
 Try typing something other than an email address to see it in action.

```html
<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>
```

```css
input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # user-invalid-pseudo |

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

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

See also
--------

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-valid`


resize - CSS: Cascading Style Sheets

resize
======

The **`resize`** CSS property sets whether an element is resizable, and if so, in which directions.

Try it
------

`resize` does not apply to the following:

* Inline elements
* Block elements for which the `overflow` property is set to `visible`
Syntax
------

```css
/\* Keyword values \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/\* Global values \*/
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;
```

The `resize` property is specified as a single keyword value from the list below.

### Values

`none`

The element offers no user-controllable method for resizing it.

`both`

The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.

`horizontal`

The element displays a mechanism for allowing the user to resize it in the *horizontal* direction.

`vertical`

The element displays a mechanism for allowing the user to resize it in the *vertical* direction.

`block`
Experimental

The element displays a mechanism for allowing the user to resize it in the *block* direction (either horizontally or vertically, depending on the `writing-mode` and `direction` value).

`inline`
Experimental

The element displays a mechanism for allowing the user to resize it in the *inline* direction (either horizontally or vertically, depending on the `writing-mode` and `direction` value).

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

resize =
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

```

Examples
--------

### Disabling resizability of textareas

In many browsers, `<textarea>` elements are resizable by default. You may override this behavior with the `resize` property.

#### HTML

```html
<textarea>Type some text here.</textarea>
```

#### CSS

```css
textarea {
  resize: none; /\* Disables resizability \*/
}
```

#### Result

### Using resize with arbitrary elements

You can use the `resize` property to make any element resizable. In the example below, a resizable `<div>` contains a resizable paragraph (`<p>` element).

#### HTML

```html
<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>
```

#### CSS

```css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # resize |

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

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

See also
--------

* `<textarea>`


CSS lists and counters - CSS: Cascading Style Sheets

CSS lists and counters
======================

The **CSS lists and counters** module enables styling and positioning of list item bullets and manipulating their values with a combination of strings, counters, and other features.

A list item's marker, whether a bullet symbol or ordinal counter, is its defining feature. List items are not limited to `<li>` elements nested within `<ol>` or `<ul>` elements. Rather, list items are any element with `display: list-item` set.

This module defines CSS features to set and reset a list's counters, set which counter-styles or symbols to use as its markers, and position those markers. It also provides developers with the ability to create customized markers.

Reference
---------

### Properties

* `counter-increment`
* `counter-reset`
* `counter-set`
* `list-style-image`
* `list-style-type`
* `list-style-position`
* `list-style` shorthand

There is also a `marker-side` property, which is yet to be fully defined or implemented.

### Pseudo-elements

* `::marker`
### Functions

* `counter()`
* `counters()`
### Data types

* `<counter>`
* `<counter-name>`
* `<counter-style>`
Guides
------

Consistent list indentation

Explains how to achieve consistent list indentation across different browsers.

Using CSS Counters

Explains how to use the CSS counter properties to control list counters.

Related concepts
----------------

* CSS counter styles
    + `@counter-style` at-rule
    + `<counter-style-name>` data type
    + `<symbol>` data type
    + `symbols()` function
* `<ol>` `start`, `reversed`, and `type` attributes
* `<ul>` `type` attribute
* `<li>` `type` and `value` attributes
Specifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3  |

See also
--------

* CSS counter styles module
* CSS pseudo-elements module
* CSS generated content module


revert - CSS: Cascading Style Sheets

revert
======

The **`revert`** CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current **style origin** to the current element. Thus, it resets the property either to user agent set value, to user set value, to its inherited value (if it is inheritable), or to initial value. It can be applied to any CSS property, including the CSS shorthand property `all`.

This keyword removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.

* If used by a site's own styles (the author origin), `revert` rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.
* If used in a user's custom stylesheet, or if the style was applied by the user (the user origin), `revert` rolls back the cascaded value to the user agent's default style.
* If used within the user agent's default styles, this keyword is functionally equivalent to `unset`.

The `revert` keyword works exactly the same as `unset` in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

Revert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). So if you have a `color: green` for all sections and `all: revert` on a specific section, the color of the section will be black. But if you have a rule to make all paragraphs red, then all paragraphs will still be red in all sections.

**Note:** Revert is just a value. It is still possible to override the `revert` value using specificity.

**Note:** The `revert` keyword is different from and should not be confused with the `initial` keyword, which uses the initial value defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

For example, the initial value for the `display` property is `inline`, whereas a normal user-agent stylesheet sets the default `display` value of `<div>`s to `block`, of `<table>`s to `table`, etc.

Examples
--------

### Revert vs. unset

Although `revert` and `unset` are similar, they differ for some properties for some elements.

So in the below example, we set custom `font-weight`, but then try to `revert` and `unset` it inline in the HTML document. The `revert` keyword will revert the text to bold because that is the default value for headers in most browsers. The `unset` keyword will keep the text normal because, as an inherited property, the `font-weight` would then inherit its value from the body.

#### HTML

```html
<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>
```

#### CSS

```css
h3 {
  font-weight: normal;
  color: blue;
}
```

#### Result

### Revert all

Reverting all values is useful in a situation where you've made several style changes and then you want to revert to the browser default values. So in the above example, instead of reverting `font-weight` and `color` separately, you could just revert all of them at once - by applying the `revert` keyword on `all`.

#### HTML

```html
<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>
```

#### CSS

```css
h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}
```

#### Result

### Revert on a parent

Reverting effectively removes the value for the element you select with some rule and this happens only for that element. To illustrate this, we will set a green color on a section and red color on a paragraph.

#### HTML

```html
<main>
  <section>
    <h3>This h3 will be dark green</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be dark green.
  </section>
  <section class="with-revert">
    <h3>This h3 will be steelblue</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be steelblue.
  </section>
</main>
```

#### CSS
```

main {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}
```

```css
main {
  color: steelblue;
}
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}
```

#### Result

Notice how the paragraph is still red even though a `color` property for the section was reverted. Also, note that both the header and plain text node are `steelblue`. The result of reverting makes it as if `section { color: darkgreen; }` did not exist for the section with `color: revert` applied.

Also, if neither the user agent nor the user override the `<h3>` or `<section>` color values, then the `steelblue` color is inherited from `<main>`, as the `color` property is an inherited property.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # default |

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

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

See also
--------

* Use the `initial` keyword to set a property to its initial value.
* Use the `inherit` keyword to make an element's property the same as its parent.
* Use the `revert-layer` keyword to reset a property to the value established in a previous cascade layer.
* Use the `unset` keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


timeline-scope - CSS: Cascading Style Sheets

timeline-scope
==============

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

The **`timeline-scope`** CSS property modifies the scope of a named animation timeline.

By default, a named timeline (i.e. declared using `scroll-timeline-name` or `view-timeline-name`) can only be set as the controlling timeline of a direct descendant element (i.e. by setting `animation-timeline` on it with the timeline name as its value). This is the timeline's default "scope".

`timeline-scope` is given the name of a timeline defined on a descendant element; this causes the scope of the timeline to be increased to the element that `timeline-scope` is set on and any of its descendants. In other words, that element and any of its descendant elements can now be controlled using that timeline.

**Note:** If no timeline (or more than one timeline) exists with the name given for the `timeline-scope` value, an inactive timeline with the specified name is created.

Syntax
------

```css
timeline-scope: none;
timeline-scope: custom_name_for_timeline;
```

### Values

Allowed values for `timeline-scope` are:

`none`

There is no change in timeline scope.

`<dashed-ident>`

Specifies the name of an existing named timeline (i.e. declared using `scroll-timeline-name` or `view-timeline-name`) defined on a descendant element. This causes the timeline scope to be increased to the element that `timeline-scope` is set on and any of its descendants.

**Note:** `<dashed-ident>` values must start with `--`, which helps to avoid name clashes with standard CSS keywords.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | `none` or an ordered list of identifiers |
| Animation type | Not animatable |

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

timeline-scope =
  none             |
  <dashed-ident>#

```

Examples
--------

In this example, a scroll timeline named `--myScroller` is defined using the `scroll-timeline-name` property on the element with the `scroller` class (the scrolling element). This is then applied to the animation on the element with the `box` and `animation` classes (the animated element) using `animation-timeline: --myScroller`. The key point to note here is that the animated element is not a descendant of the scrolling element — to make this work, we increase the scope of the `--myScroller` timeline by setting `timeline-scope: --myScroller` on the `<body>`.

### HTML

The HTML for the example is shown below.

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

<div class="scroller">
  <div class="long-element"></div>
</div>
```

### CSS

The CSS is as follows.

First of all, we set the `<body>`'s height to `100vh`, and lay its two child elements out as two equal columns using flexbox. We also set `timeline-scope: --myScroller` on it so that the `--myScroller` timeline can be set as the controlling timeline for an animation set on the `<body>` and any element inside it.

```css
body {
  margin: 0;
  height: 100vh;
  display: flex;

  /\* increases the timeline scope from the .scroller <div> element
 to the whole <body> \*/
  timeline-scope: --myScroller;
}

.content,
.scroller {
  flex: 1;
}
```

Next, the scrolling element has the `--myScroller` timeline set on it, `overflow` so that it will scroll, and it is given a background color so that its boundary is clear to see. The scrolling element's child long element is given a large height so that the scrolling element will actually scroll.

```css
.scroller {
  overflow: scroll;
  scroll-timeline-name: --myScroller;
  background: deeppink;
}

.long-element {
  height: 2000px;
}
```

Next, we give the animated element some rudimentary styling, and apply an animation to it. We also apply the `--myScroller` timeline to it using `animation-timeline: --myScroller`. To reiterate, this is only possible because earlier we set `timeline-scope: --myScroller` on the `<body>` element — the animated element is **not** a descendant of the scrolling element.

```css
.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 20px;
  left: 0%;
}

.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    left: 0%;
  }

  to {
    rotate: 720deg;
    left: 100%;
  }
}
```

### Result

Scroll the vertical bar on the pink area to see the square animate.

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

| Specification |
| --- |
| Scroll-driven Animations # propdef-timeline-scope |

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

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

See also
--------

* `animation-timeline`
* `scroll-timeline`, `scroll-timeline-name`
* `view-timeline`, `view-timeline-name`
* CSS scroll-driven animations


@namespace - CSS: Cascading Style Sheets

@namespace
==========

**`@namespace`** is an at-rule that defines XML namespaces to be used in a CSS style sheet.

Try it
------

Syntax
------

```css
/\* Default namespace \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* Prefixed namespace \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

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

The defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace. The `@namespace` rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

Any `@namespace` rules must follow all `@charset` and `@import` rules, and precede all other at-rules and style declarations in a style sheet.

`@namespace` can be used to define the **default namespace** for the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements in that namespace.

The `@namespace` rule can also be used to define a **namespace prefix**. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace *and* name of the element or attribute matches.

In HTML, known foreign elements will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the `<svg>` and `<math>` elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`, respectively).

**Note:** In XML, unless a prefix is defined directly on an attribute (*e.g.*, `xlink:href`), that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behavior, the default namespace in CSS does not apply to attribute selectors.

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

@namespace =
  @namespace <namespace-prefix>? [ <string> | <url> ] ;

<namespace-prefix> =
  <ident>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Specifying default and prefixed namespaces

```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace \*/
a {
}

/\* This matches all SVG <a> elements \*/
svg|a {
}

/\* This matches both XHTML and SVG <a> elements \*/
\*|a {
}
```

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

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

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

See also
--------

* Namespaces crash course


atan() - CSS: Cascading Style Sheets

atan()
======

The **`atan()`** CSS function is a trigonometric function that returns the inverse tangent of a number between `-∞` and `+∞`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `-90deg` and `90deg`.

Syntax
------

```css
/\* Single <number> values \*/
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/\* Other values \*/
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));
```

### Parameter

The `atan(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-∞` and `+∞`.

### Return value

The inverse tangent of an `number` will always return an `<angle>` between `-90deg` and `90deg`.

* If `number` is `0⁻`, the result is `0⁻`.
* If `number` is `+∞` the result is `90deg`.
* If `number` is `-∞` the result is `-90deg`.

That is:

* `atan(-infinity)` representing `-90deg`.
* `atan(-1)` representing `-45deg`
* `atan(0)` representing `0deg`
* `atan(1)` representing `45deg`
* `atan(infinity)` representing `90deg`.
### Formal syntax
```

<atan()> =
  atan( <calc-sum> )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

Examples
--------

### Rotate elements

The `atan()` function can be used to `rotate` elements as it return an `<angle>`.

#### HTML

```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```

#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

See also
--------

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan2()`


vertical-align - CSS: Cascading Style Sheets

vertical-align
==============

The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.

Try it
------

The vertical-align property can be used in two contexts:

* To vertically align an inline-level element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text.
* To vertically align the content of a cell in a table.

Note that `vertical-align` only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.

Syntax
------

```css
/\* Keyword values \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* <length> values \*/
vertical-align: 10em;
vertical-align: 4px;

/\* <percentage> values \*/
vertical-align: 20%;

/\* Global values \*/
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;
```

The `vertical-align` property is specified as one of the values listed below.

### Values for inline elements

#### Parent-relative values

These values vertically align the element relative to its parent element:

`baseline`

Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like `<textarea>`, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

`sub`

Aligns the baseline of the element with the subscript-baseline of its parent.

`super`

Aligns the baseline of the element with the superscript-baseline of its parent.

`text-top`

Aligns the top of the element with the top of the parent element's font.

`text-bottom`

Aligns the bottom of the element with the bottom of the parent element's font.

`middle`

Aligns the middle of the element with the baseline plus half the x-height of the parent.

`<length>`

Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

`<percentage>`

Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the `line-height` property. A negative value is allowed.

#### Line-relative values

The following values vertically align the element relative to the entire line:

`top`

Aligns the top of the element and its descendants with the top of the entire line.

`bottom`

Aligns the bottom of the element and its descendants with the bottom of the entire line.

For elements that do not have a baseline, the bottom margin edge is used instead.

### Values for table cells

`baseline` (and `sub`, `super`, `text-top`, `text-bottom`, `<length>`, and `<percentage>`)

Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

`top`

Aligns the top padding edge of the cell with the top of the row.

`middle`

Centers the padding box of the cell within the row.

`bottom`

Aligns the bottom padding edge of the cell with the bottom of the row.

Negative values are allowed.

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

|  |  |
| --- | --- |
| Initial value | `baseline` |
| Applies to | inline-level and table-cell elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the `line-height` of the element itself |
| Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |

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

vertical-align =
  [ first | last ]        ||
  <'alignment-baseline'>  ||
  <'baseline-shift'>

```

Examples
--------

### Basic example

#### HTML

```html
<div>
  An <img src="frame\_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>
```

#### CSS

```css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}
```

#### Result

### Vertical alignment in a line box

#### HTML

```html
<p>
top:         <img style="vertical-align: top" src="star.png" alt="star"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:       <img style="vertical-align: super" src="star.png" alt="star"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>
```

```
#\* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
```

#### Result

### Vertical alignment in a table cell

#### HTML

```html
<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>
        There is a theory which states that if ever anyone discovers exactly
        what the Universe is for and why it is here, it will instantly disappear
        and be replaced by something even more bizarre and inexplicable.
      </p>
      <p>
        There is another theory which states that this has already happened.
      </p>
    </td>
  </tr>
</table>
```

#### CSS

```css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}
```

#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

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

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

See also
--------

* Typical use cases of Flexbox, section "Center item"
* `line-height`, `text-align`, `margin`
* Understanding `vertical-align`, or "How (Not) To Vertically Center Content"
* Vertical-Align: All You Need To Know


-webkit-prefixed CSS extensions - CSS: Cascading Style Sheets

-webkit-prefixed CSS extensions
===============================

User agents based on WebKit or Blink, such as Safari and Chrome, support several special extensions to CSS. These extensions are prefixed with `-webkit-`.

-webkit-prefixed properties without standard equivalents
--------------------------------------------------------

**Note:** Avoid using on websites. These properties will only work in WebKit- or Blink-based browsers except where specified.

### A-C

* `-webkit-app-region`
* `-webkit-border-horizontal-spacing`
* `-webkit-border-vertical-spacing`
* `-webkit-box-reflect` (supported with `-webkit-` by every browser, for compatibility reasons)
* `-webkit-column-axis`
* `-webkit-column-progression`
* `-webkit-cursor-visibility`
### D-I

* `-webkit-font-smoothing`
* `-webkit-hyphenate-limit-after`
* `-webkit-hyphenate-limit-before`
* `-webkit-hyphenate-limit-lines`
### L

* `-webkit-line-align`
* `-webkit-line-box-contain`
* `-webkit-line-clamp`
* `-webkit-line-grid`
* `-webkit-line-snap`
* `-webkit-locale`
* `-webkit-logical-height`
* `-webkit-logical-width`
### M

* `-webkit-margin-after`
* `-webkit-margin-before`
* `-webkit-mask-attachment`
* `-webkit-mask-box-image-outset`
* `-webkit-mask-box-image-repeat`
* `-webkit-mask-box-image-slice`
* `-webkit-mask-box-image-source`
* `-webkit-mask-box-image-width`
* `-webkit-mask-box-image`
* `-webkit-mask-composite`
* `-webkit-mask-position-x` (supported with `-webkit-` by every browser, for compatibility reasons)
* `-webkit-mask-position-y` (supported with `-webkit-` by every browser, for compatibility reasons)
* `-webkit-mask-repeat-x` (also supported without prefix)
* `-webkit-mask-repeat-y` (also supported without prefix)
* `-webkit-mask-source-type`
* `-webkit-max-logical-height`
* `-webkit-max-logical-width`
* `-webkit-min-logical-height`
* `-webkit-min-logical-width`
### N-R

* `-webkit-nbsp-mode`
* `-webkit-perspective-origin-x`
* `-webkit-perspective-origin-y`
* `-webkit-rtl-ordering`
### T

* `-webkit-tap-highlight-color`
* `-webkit-text-decoration-skip`
* `-webkit-text-decorations-in-effect`
* `-webkit-text-fill-color`
* `-webkit-text-security`
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
* `-webkit-text-zoom`
* `-webkit-touch-callout`
* `-webkit-transform-origin-x`
* `-webkit-transform-origin-y`
* `-webkit-transform-origin-z`
### U-Z

* `-webkit-user-drag`
* `-webkit-user-modify`
-webkit-prefixed properties with standard equivalents
-----------------------------------------------------

Several old `-webkit-`prefixed properties have standard equivalents. Even if the name and syntax may be different, they shouldn't be used anymore at all.

For each of them, use the standard equivalent provided.

### A-B

`-webkit-border-after`

Use the standard `border-block-end` property instead.

`-webkit-border-after-color`

Use the standard `border-block-end-color` property instead.

`-webkit-border-after-style`

Use the standard `border-block-end-style` property instead.

`-webkit-border-after-width`

Use the standard `border-block-end-width` property instead.

`-webkit-border-before`

Use the standard `border-block-start` property instead.

`-webkit-border-before-color`

Use the standard `border-block-start-color` property instead.

`-webkit-border-before-style`

Use the standard `border-block-start-style` property instead.

`-webkit-border-before-width`

Use the standard `border-block-start-width` property instead.

`-webkit-border-end`

Use the standard `border-inline-end` property instead.

`-webkit-border-end-color`

Use the standard `border-inline-end-color` property instead.

`-webkit-border-end-style`

Use the standard `border-inline-end-style` property instead.

`-webkit-border-end-width`

Use the standard `border-inline-end-width` property instead.

`-webkit-border-start`

Use the standard `border-inline-start` property instead.

`-webkit-border-start-color`

Use the standard `border-inline-start-color` property instead.

`-webkit-border-start-style`

Use the standard `border-inline-start-style` property instead.

`-webkit-border-start-width`

Use the standard `border-inline-start-width` property instead.

`-webkit-box-align`

Use the CSS flexible box layout with the standard `align-items` property instead.

`-webkit-box-direction`

Use the CSS flexible box layout with the standard `flex-direction` property instead.

`-webkit-box-flex-group`

Use the CSS flexible box layout with the standard `flex-basis`, `flex-grow`, and `flex-shrink` properties instead.

`-webkit-box-flex`

Use the CSS flexible box layout with the standard `flex-grow` property instead.

`-webkit-box-lines`

Use the CSS flexible box layout with the standard `flex-flow` property instead.

`-webkit-box-ordinal-group`

Use the CSS flexible box layout with the standard `order` property instead.

`-webkit-box-orient`

Use the CSS flexible box layout with the standard `flex-direction` property instead.

`-webkit-box-pack`

Use the CSS flexible box layout with the standard `justify-content` property instead.

### C-I

`-webkit-column-break-after`

Use the CSS multicolumn layout with the standard `break-after` property instead.

`-webkit-column-break-before`

Use the CSS multicolumn layout with the standard `break-before` property instead.

`-webkit-column-break-inside`

Use the CSS multicolumn layout with the standard `break-inside` property instead.

`-webkit-hyphenate-character`

Use the standard `hyphenate-character` property instead.

`-webkit-initial-letter`

Use the standard `initial-letter` property instead.

### J-Z

`webkit-margin-end`

Use the standard `margin-block-end` property instead.

`-webkit-margin-start`

Use the standard `margin-block-start` property instead.

`-webkit-padding-after`

Use the standard `padding-block-end` property instead.

`-webkit-padding-before`

Use the standard `padding-block-start` property instead.

`-webkit-padding-end`

Use the standard `padding-inline-end` property instead.

`-webkit-padding-start`

Use the standard `padding-inline-start` property instead.

Pseudo-classes
--------------

* `:-webkit-animating-full-screen-transition`
* `:-webkit-any()`
* `:-webkit-any-link`\*
* `:-webkit-autofill`
* `:-webkit-autofill-strong-password`
* `:-webkit-drag`
* `:-webkit-full-page-media`
* `:-webkit-full-screen`\*
* `:-webkit-full-screen-ancestor`
* `:-webkit-full-screen-document`
* `:-webkit-full-screen-controls-hidden`

\* Now standard.

**Note:** If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

Pseudo-elements
---------------

For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with `::-webkit-` as valid.

* `::-webkit-file-upload-button`\*
* `::-webkit-inner-spin-button`
* `::-webkit-input-placeholder`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-inner-element`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
* `::-webkit-progress-bar`
* `::-webkit-progress-inner-element`
* `::-webkit-progress-value`
* `::-webkit-search-cancel-button`
* `::-webkit-search-results-button`
* `::-webkit-slider-runnable-track`
* `::-webkit-slider-thumb`

\* Now standard.

**Note:** Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.

Media features
--------------

* `-webkit-animation`
* `-webkit-device-pixel-ratio`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
See also
--------

* Vendor Prefix glossary entry
* Mozilla vendor-prefixed CSS extensions
* Styling Form Controls on the WebKit Trac


top - CSS: Cascading Style Sheets

top
===

The **`top`** CSS property sets the vertical position of a positioned element. It does not effect non-positioned elements.

Try it
------

The effect of `top` depends on how the element is positioned (i.e., the value of the `position` property):

* When `position` is set to `absolute` or `fixed`, the `top` property specifies the distance between the element's outer margin of top edge and the inner border of the top edge of its containing block.
* When `position` is set to `relative`, the `top` property specifies the distance the element's top edge is moved below its normal position.
* When `position` is set to `sticky`, the `top` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `top` property has *no effect*.

When both `top` and `bottom` values are specified, there are three different cases:

* If `position` is set to `absolute` or `fixed` and `height` is unspecified (either `auto` or `100%`), both the `top` and `bottom` values are respected.
* If `position` is set to `relative` or `height` is constrained, the `top` property takes precedence and the `bottom` property is ignored.
* If `position` is set to `sticky`, both `top` and `bottom` values are considered. This means that a sticky element can potentially move up and down within its containing block based on the values of these two properties as long as the element's position box remains contained within its containing block.
Syntax
------

```css
/\* <length> values \*/
top: 3px;
top: 2.4em;

/\* <percentage>s of the height of the containing block \*/
top: 10%;

/\* Keyword value \*/
top: auto;

/\* Global values \*/
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;
```

### Values

`<length>`

A negative, null, or positive `<length>` that represents:

* for *absolutely positioned elements*, the distance to the top edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved below its normal position.

`<percentage>`

A `<percentage>` of the containing block's height.

`auto`

Specifies that:

* for *absolutely positioned elements*, the position of the element is based on the `bottom` property, while `height: auto` is treated as a height based on the content; or if `bottom` is also `auto`, the element is positioned where it should vertically be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the `bottom` property; or if `bottom` is also `auto`, the element is not moved vertically at all.

`inherit`

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a `<length>`, `<percentage>`, or the `auto` keyword.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | refer to the height of the containing block |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

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

top =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### A positioned element set 10% from the top

```css
body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
```

```html
<div>The size of this content is determined by the position of its edges.</div>
```

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

See also
--------

* `inset`, the shorthand for all related properties: `top`, `bottom`, `left`, and `right`
* The mapped logical properties: `inset-block-start`, `inset-block-end`, `inset-inline-start`, and `inset-inline-end` and the shorthands `inset-block` and `inset-inline`
* `position`


exp() - CSS: Cascading Style Sheets

exp()
=====

The **`exp()`** CSS function is an exponential function that takes an number as an argument and returns the mathematical constant `e` raised to the power of the given number.

The mathematical constant e is the base of natural logarithms, and is approximately `2.718281828459045`.

The `exp(number)` function contains a calculation which returns the same value as `pow(e, number)`.

Syntax
------

```css
/\* A <number> value \*/
width: calc(100px * exp(-1)); /\* 100px \* 0.367879441171442 = 36px \*/
width: calc(100px * exp(0)); /\* 100px \* 1 = 100px \*/
width: calc(100px * exp(1)); /\* 100px \* 2.718281828459045 = 217px \*/
```

### Parameter

The `exp(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>`. Representing the value to be raised by a power of `e`.

### Return value

Returns a non-negative `<number>` representing enumber, which is the result of calculating `e` raised to the power of `number`.

* If `number` is `-Infinity`, the result is `0`.
* If `number` is `0`, the result is `1`.
* If `number` is `1`, the result is `e` (i.e. `2.718281828459045`).
* If `number` is `Infinity`, the result is `Infinity`.
### Formal syntax
```

<exp()> =
  exp( <calc-sum> )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

Examples
--------

### Rotate elements

The `exp()` function can be used to `rotate` elements as it return a `<number>`.

#### HTML

```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```

#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); // 0.3678794411714423turn
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); // 0.4723665527410147turn
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); // 0.6065306597126334turn
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); // 0.7788007830714049turn
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); // 1turn
}
```

#### Result

### Scale headings by fixed ratio

The `exp()` function can be useful for strategies like CSS modular scale, which relates all the font-sizes on a page to each other by a fixed ratio.

#### HTML

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

#### CSS

```css
h1 {
  font-size: calc(1rem * exp(1.25)); // 3.4903429574618414rem
}
h2 {
  font-size: calc(1rem * exp(1)); // 2.718281828459045rem
}
h3 {
  font-size: calc(1rem * exp(0.75)); // 2.117000016612675rem
}
h4 {
  font-size: calc(1rem * exp(0.5)); // 1.6487212707001282rem
}
h5 {
  font-size: calc(1rem * exp(0.25)); // 1.2840254166877414rem
}
h6 {
  font-size: calc(1rem * exp(0)); // 1rem
}
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # exponent-funcs |

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

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

See also
--------

* `pow()`
* `sqrt()`
* `hypot()`
* `log()`


view-timeline-inset - CSS: Cascading Style Sheets

view-timeline-inset
===================

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

The **`view-timeline-inset`** CSS property is used to specify one or two values representing an adjustment to the position of the scrollport (see Scroll container for more details) in which the subject element of a *named view progress timeline* animation is deemed to be visible. Put another way, this allows you to specify start and/or end inset (or outset) values that offset the position of the timeline.

 This can be combined with or used instead of `animation-range` and its longhand properties, which can be used to set the attachment range of an animation along its timeline.
 See CSS scroll-driven animations for more details.

Syntax
------

```css
/\* Single value \*/
view-timeline-inset: auto;
view-timeline-inset: 200px;
view-timeline-inset: 20%;

/\* Two values \*/
view-timeline-inset: 20% auto;
view-timeline-inset: auto 200px;
view-timeline-inset: 20% 200px;
```

### Values

Allowed values for `view-timeline-inset` are:

`auto`

If set, the corresponding `scroll-padding` (or equivalent longhand value) for that edge of the scrollport is used. If this is not set (or set to `auto`), the value will usually be 0, although some user agents may use heuristics to determine a different default value if appropriate.

`<length-percentage>`

Any valid `<length-percentage>` value is accepted as an inset/outset value.

* If the value is positive, the position of the animation's start/end will be moved inside the scrollport by the specified length or percentage.
* If the value is negative, the position of the animation's start/end will be moved outside the scrollport by the specified length or percentage, i.e. it will start animating before it appears in the scrollport, or finish animating after it leaves the scrollport.

If two values are provided, the first value represents the start inset/outset in the relevant axis (where the animation begins) and the second value represents the end inset/outset (where the animation ends). If only one value is provided, the start and end inset/outset are both set to the same value.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | no |
| Percentages | Relative to the corresponding dimension of the relevant scrollport |
| Computed value | A list where each item may be either 'auto' or a length percentage |
| Animation type | by computed value type |

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

view-timeline-inset =
  [ [ auto | <length-percentage> ]{1,2} ]#

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Creating a named view progress timeline with inset

 A view progress timeline named `--subjectReveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`.
 This is then set as the timeline for the same element using `animation-timeline: --subjectReveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled.

A `view-timeline-inset` declaration is also set to make the animation begin later than expected, and finish earlier.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

The `<div>` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. We also give it a `view-timeline-inset` declaration to make the animation begin later than expected, and finish earlier. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed.

Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.

```css
.animation {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### Result

Scroll to see the subject element being animated.

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

| Specification |
| --- |
| Scroll-driven Animations # view-timeline-inset |

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

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

See also
--------

* `animation-timeline`
* `timeline-scope`
* `view-timeline`, `view-timeline-axis`, `view-timeline-name`
* CSS scroll-driven animations


scroll-snap-align - CSS: Cascading Style Sheets

scroll-snap-align
=================

The `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* when two values set first is block, second inline \*/
scroll-snap-align: center;

/\* Global values \*/
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;
```

### Values

`none`

The box does not define a snap position in that axis.

`start`

The start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

`end`

The end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

`center`

The center alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

scroll-snap-align =
  [ none | start | end | center ]{1,2}

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-align |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap


<display-outside> - CSS: Cascading Style Sheets

<display-outside>
=================

The `<display-outside>` keywords specify the element's outer `display` type, which is essentially its role in flow layout. These keywords are used as values of the `display` property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the `<display-inside>` keywords.

Syntax
------

Valid `<display-outside>` values:

`block`

The element generates a block element box, generating line breaks both before and after the element when in the normal flow.

`inline`

The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.

**Note:** When browsers encounter a display property with only an **outer** `display` value (e.g., `display: block` or `display: inline`), the inner value defaults to `flow` (e.g., `display: block flow` and `display: inline flow`).
 This is backwards-compatible with single-keyword syntax.

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

<display-outside> =
  block   |
  inline  |
  run-in

```

Examples
--------

In the following example, span elements (normally displayed as inline elements) are set to `display: block` and so break onto new lines and expand to fill their container in the inline dimension.

### HTML

```html
<span>span 1</span> <span>span 2</span>
```

### CSS

```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### Result

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

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-outside |

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

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

See also
--------

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Block and Inline layout in Normal Flow
* Formatting Contexts explained


CSS text decoration - CSS: Cascading Style Sheets

CSS text decoration
===================

The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.

Reference
---------

### Properties

* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-shadow`
* `text-underline-offset`
* `text-underline-position`
Examples
--------

```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```

```html
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |


url() - CSS: Cascading Style Sheets

url()
=====

The **`url()`** CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The **`url()`** function can be passed as a parameter of another CSS functions, like the `attr()` function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The `url()` functional notation is the value for the `<url>` data type.

**Note:** There is a difference between a URI and a URL. A URI identifies a resource. A URL is a type of URI, and describes the *location* of a resource. A URI can be either a URL or a name (URN) of a resource.

In CSS Level 1, the `url()` functional notation described only true URLs. In CSS Level 2, the definition of `url()` was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that `url()` could be used to create a `<uri>` CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, `url()` denotes only true `<url>`s.

```css
/\* Simple usage \*/
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

/\* associated properties \*/
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/\* Properties with fallbacks \*/
cursor: url(pointer.cur), pointer;

/\* Associated short-hand properties \*/
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/\* As a parameter in another CSS function \*/
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(rgb(0 0 0 / 100%), transparent));

/\* as part of a non-shorthand multiple value \*/
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/\* at-rules \*/
@document url("https://www.example.com/") { /\* … \*/ }
    Experimental

@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);
```

Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

 The **`url()`** function can be included as a value for
 `background`, `background-image`, `border`, `border-image`, `border-image-source`, `content`, `cursor`, `filter`, `list-style`, `list-style-image`, `mask`, `mask-image`, `offset-path`, `clip-path`,
 src as part of a @font-face block, and @counter-style/symbol

Syntax
------

### Values

`<string>`

A string which may specify a URL or the ID of an SVG shape.

<url>

A URL, which is a relative or absolute address, or pointer, to the web resource to be included, or a data URL, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:

```css
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)
```

If you choose to write the URL without quotes, use a backslash (`\`) before any parentheses, whitespace characters, single quotes (`'`) and double quotes (`"`) that are part of the URL.

path

References the ID of an SVG shape — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect` — using the shape's geometry as the path.

`<url-modifier>`
Experimental

In the future, the `url()` function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string. This is not supported and not fully defined in the specification.

### Formal syntax

```css
url( <string> <url-modifier>\* )
```

Examples
--------

### A url used in the background property

```css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}
```

### A url loading an image as a list bullet

```css
ul {
  list-style: square url(http://www.example.com/redball.png);
}
```

### Usage in the content property

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

#### CSS

```css
li::after {
  content: " - " url(star.gif);
}
```

#### Result

### Using a data URL

#### HTML

```html
<div class="background"></div>
```

#### CSS
```

.background {
  height: 100vh;
}
```

```css
.background {
  background: yellow;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}
```

### Usage in filters

When a URL is used as a path for a filter, the URL must be one of the following:

1. The path to an SVG file with the ID of the filter appended.
2. the ID of the filter, if the SVG already exists on the page.

```css
.blur {
  filter: url(my-file.svg#svg-blur); /\* the URL of an SVG file used as a filter \*/
}

.inline-blur {
  filter: url(#svg-blur); /\* the ID of an SVG that is embedded in the HTML page \*/
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # urls |

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

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

See also
--------

* `<gradient>`
* `element()`
* `image()`
* `image-set()`
* `cross-fade()`


<hue> - CSS: Cascading Style Sheets

<hue>
=====

 The **`<hue>`** CSS data type represents the hue angle of a color.
 It is used in the color functions that accept hue expressed as a single value, specifically `hsl()`, `hwb()`, `lch()`, and `oklch()` functional notations.

![An sRGB color wheel](/en-US/docs/Web/CSS/hue/color_wheel.svg)

The color wheel above shows hues at all angles in the sRGB color space. In particular, *red* is at `0deg`, *yellow* is at `60deg`, *lime* is at `120deg`, *cyan* is at `180deg`, *blue* is at `240deg`, and *magenta* is at `300deg`.

**Note:** The angles corresponding to particular hues depend on the color space. For example, the hue angle of sRGB green is `120deg` in the sRGB color space, but `134.39deg` in the CIELAB color space.

The following table lists typical colors at various angles in the sRGB (used by `hsl()` and `hwb()`), CIELAB (used by `lch()`), and Oklab (used by `oklch()`) color spaces:

|  | 0° | 60° | 120° | 180° | 240° | 300° |
| --- | --- | --- | --- | --- | --- | --- |
| sRGB |  |  |  |  |  |  |
| CIELAB |  |  |  |  |  |  |
| Oklab |  |  |  |  |  |  |

Syntax
------

A `<hue>` can be either an `<angle>` or a `<number>`.

### Values

`<angle>`

An angle expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively.

`<number>`

A real number, representing degrees of the hue angle.

As an `<angle>` is periodic, `<hue>` is normalized to the range `[0deg, 360deg)`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on.

### Interpolation

`<hue>` values are interpolated as `<angle>` values, and the default interpolation algorithm is `shorter`. In some color-related CSS functions, this can be overridden by the `<hue-interpolation-method>` component.

### Formal syntax
```

<hue> =
  <number>  |
  <angle>

```

Examples
--------

### Changing the hue of a color using a slider

The following example shows the effect of changing the `hue` value of the `hsl()` functional notation on a color.

#### HTML

```html
<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>Hue: <span id="hue-value">0deg</span></p>
<div id="box"></div>
```

#### CSS
```

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 10%);
  padding: 3px;
}
#hue-slider {
  width: 90%;
}
```

```css
#box {
  background-color: hsl(0 100% 50%);
}
```

#### JavaScript

```js
const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
  box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});
```

#### Result

### Approximating red hues in different color spaces

 The following example shows a similar red color in different color spaces.
 The values in the `lch()` and `oklch()` functions are rounded for readability.

#### HTML

```html
<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>
```

#### CSS

```css
[data-color="hsl-red"] {
  /\* hsl(<hue> <saturation> <lightness>) \*/
  background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
  /\* hwb(<hue> <whiteness> <blackness>) \*/
  background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
  /\* lch(<lightness> <chroma> <hue>) \*/
  background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
  /\* oklch(<lightness> <chroma> <hue>) \*/
  background-color: oklch(0.6 0.4 20);
}
```

```
div {
  font-family: monospace;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
  display: inline-block;
}
```

#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-hue |

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

### css.types.color.hsl

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

### css.types.color.hwb

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

### css.types.color.lch

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

### css.types.color.oklch

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

See also
--------

* `<color>`
* `<hue-interpolation-method>`


-webkit-mask-position-x - CSS: Cascading Style Sheets

-webkit-mask-position-x
=======================

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

The `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image.

Syntax
------

```css
/\* Keyword values \*/
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/\* <percentage> values \*/
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/\* <length> values \*/
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/\* Multiple values \*/
-webkit-mask-position-x:
  50px,
  25%,
  -3em;

/\* Global values \*/
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: revert;
-webkit-mask-position-x: revert-layer;
-webkit-mask-position-x: unset;
```

### Values

`<length-percentage>`

A length indicating the position of the left edge of the image relative to the box's left padding edge. Percentages are calculated against the horizontal dimension of the box padding area. That means, a value of `0%` means the left edge of the image is aligned with the box's left padding edge and a value of `100%` means the right edge of the image is aligned with the box's right padding edge.

`left`

Equivalent to `0%`.

`center`

Equivalent to `50%`.

`right`

Equivalent to `100%`.

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

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements |
| Inherited | no |
| Percentages | refer to the size of the box itself |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | discrete |

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

-webkit-mask-position-x =
  [ <length-percentage> | left | center | right ]#
```

Examples
--------

### Horizontally positioning a mask image

```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}
```

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-mask-position`, `-webkit-mask-position-y`, `-webkit-mask-origin`, `-webkit-mask-attachment`