str:tokenize() - EXSLT

str:tokenize()
==============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`str:tokenize()` splits a string using a set of characters as delimiters that determine where the splits should occur, returning a node-set containing the resulting strings.

Syntax
------
```

str:tokenize(string, delimiters)
```

### Parameters

`string`

The string to tokenize.

`delimiters`

Each character in this string is used as a word separator while tokenizing.

### Returns

A node-set of `token` elements, each containing one token from the `string`.

Example
-------
```

str:tokenize('2007-09-14-03T11:40:23', '-T:')
```

Returns a node set like this:

```xml
<token>2007</token>
<token>09</token>
<token>14</token>
<token>11</token>
<token>40</token>
<token>23</token>
```

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

EXSLT - STR:TOKENIZE

See also
--------

* `str:split()`


str:split() - EXSLT

str:split()
===========

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`str:split()` splits a string using a pattern string to determine where the splits should occur, returning a node-set containing the resulting strings.

Syntax
------
```

str:split(string, pattern)
```

### Parameters

`string`

The string to split.

`pattern`

The pattern indicating where to split the string.

### Returns

A node-set of `token` elements, each containing one token from the `string`.

Example
-------
```

str:split('book, phone, computer, chair', ', ')
```

Returns a node set like:

```xml
<token>book</token>
<token>phone</token>
<token>computer</token>
<token>chair</token>
```

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

EXSLT - STR:SPLIT

See also
--------

* `str:tokenize()`


math:max() - EXSLT

math:max()
==========

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:max()` returns the maximum value of a node-set.

To compute the maximum value of the node-set, the node set is sorted into descending order as it would be using `xsl:sort()` with a data type of `number`. The maximum value is then the first node in the sorted list, converted into a number.

Syntax
------
```

math:max(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose highest value is to be returned.

### Returns

A result tree fragment representing the highest valued node's numeric value as a string.

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

EXSLT - MATH:MAX


math:min() - EXSLT

math:min()
==========

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:min()` returns the minimum value of a node-set.

To compute the minimum value of the node-set, the node set is sorted into ascending order as it would be using `xsl:sort()` with a data type of `number`. The minimum value is then the first node in the sorted list, converted into a number.

Syntax
------
```

math:min(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose lowest value is to be returned.

### Returns

A result tree fragment representing the lowest valued node's numeric value as a string.

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

EXSLT - MATH:MIN


math:lowest() - EXSLT

math:lowest()
=============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:lowest()` returns the node in the specified node-set with the lowest value (where the lowest value calculated using `math:min()`).

A node has this minimum value if converting its string value to a number equals the minimum value.

Syntax
------
```

math:lowest(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose lowest value is to be returned.

### Returns

A result tree fragment consisting of copies of the nodes returned by `math:min()`.

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

EXSLT - MATH:LOWEST


math:highest() - EXSLT

math:highest()
==============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:highest()` returns the node in the specified node-set with the highest value (where the highest value calculated using `math:max()`).

A node has this maximum value if converting its string value to a number equals the maximum value.

Syntax
------
```

math:highest(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose highest value is to be returned.

### Returns

A result tree fragment consisting of copies of the nodes returned by `math:max()`.

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

EXSLT - MATH:HIGHEST


transition-property - CSS: Cascading Style Sheets

transition-property
===================

The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.

Try it
------

If you specify a shorthand property (e.g., `background`), all of its longhand sub-properties that can be animated will be.

Syntax
------

```css
/\* Keyword values \*/
transition-property: none;
transition-property: all;

/\* <custom-ident> values \*/
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/\* Multiple values \*/
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

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

### Values

`none`

No properties will transition.

`all`

All properties that can transition will.

`<custom-ident>`

A string identifying the property to which a transition effect should be applied when its value changes.

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

|  |  |
| --- | --- |
| Initial value | all |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

transition-property =
  none                           |
  <single-transition-property>#

<single-transition-property> =
  all             |
  <custom-ident>

```

Examples
--------

### Basic example

When the button is hovered or focused, it undergoes a one-second color transition; the `transition-property` is `background-color`.

#### HTML

```html
<button class="target">Focus me!</button>
```

#### CSS
```

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
```

```css
.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #ccc;
}

.target:hover,
.target:focus {
  background-color: #eee;
}
```

See our Using CSS transitions guide for more `transition-property` examples.

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

| Specification |
| --- |
| CSS Transitions # transition-property-property |

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

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

See also
--------

* Using CSS transitions
* `transition`
* `transition-duration`
* `transition-timing-function`
* `transition-delay`
* `TransitionEvent`


CSS nesting - CSS: Cascading Style Sheets

CSS nesting
===========

The **CSS nesting** module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

Reference
---------

### Selectors

* `&` nesting selector
Guides
------

Using CSS nesting

Explains how to use CSS nesting.

CSS nesting at-rules

Explains how to nest at-rules.

CSS nesting and specificity

Explains the differences in specificity when nesting CSS.

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

* Selectors and combinators
* Pseudo-classes
* CSS preprocessor
Specifications
--------------

| Specification |
| --- |
| CSS Nesting Module  |

See also
--------

* Specificity
* CSS cascade and inheritance module
* CSS selectors module


text-emphasis - CSS: Cascading Style Sheets

text-emphasis
=============

The **`text-emphasis`** CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for `text-emphasis-style` and `text-emphasis-color`.

Try it
------

The `text-emphasis` property is quite different from `text-decoration`. The `text-decoration` property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendants.

The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and `text-emphasis` may affect line height when the current leading is not enough for the marks.

**Note:** `text-emphasis` doesn't reset the value of `text-emphasis-position`. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, use the property `text-emphasis-position`.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `text-emphasis-color`
* `text-emphasis-style`
Syntax
------

```css
/\* Initial value \*/
text-emphasis: none; /\* No emphasis marks \*/

/\* <string> value \*/
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "\*" #555;
text-emphasis: "foo"; /\* Should NOT use. It may be computed to or rendered as 'f' only \*/

/\* Keywords value \*/
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/\* Keywords value combined with a color \*/
text-emphasis: filled sesame #555;

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

### Values

`none`

No emphasis marks.

`filled`

The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.

`open`

The shape is hollow.

`dot`

Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).

`circle`

Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`). This is the default shape in horizontal writing modes when no other shape is given.

`double-circle`

Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).

`triangle`

Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).

`sesame`

Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`). This is the default shape in vertical writing modes when no other shape is given.

`<string>`

Display the given string as marks. Authors should not specify more than one *character* in `<string>`. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

`<color>`

Defines the color of the mark. If no color is present, it defaults to `currentcolor`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `text-emphasis-style`: `none`
* `text-emphasis-color`: `currentcolor`
 |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:* `text-emphasis-style`: as specified
* `text-emphasis-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `text-emphasis-color`: a color
* `text-emphasis-style`: discrete
 |

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

text-emphasis =
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>

```

Examples
--------

### A heading with emphasis shape and color

This example draws a heading with triangles used to emphasize each character.

#### CSS

```css
h2 {
  text-emphasis: triangle #d55;
}
```

#### HTML

```html
<h2>This is important!</h2>
```

#### Result

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-property |

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

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

See also
--------

* The longhand properties `text-emphasis-style`, `text-emphasis-color`.
* The `text-emphasis-position` property allowing to define the position of the emphasis marks.


border-block-start-color - CSS: Cascading Style Sheets

border-block-start-color
========================

The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Syntax
------

```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;

/\* Global values \*/
border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;
```

Related properties are `border-block-end-color`, `border-inline-start-color`, and `border-inline-end-color`, which define the other border colors of the element.

### Values

`<color>`

The color of the border.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | no |
| Computed value | computed color |
| Animation type | by computed value type |

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

border-block-start-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

Examples
--------

### Border color with vertical text

#### HTML

```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}
```

#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-color |

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`


align-items - CSS: Cascading Style Sheets

align-items
===========

The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

The interactive example below demonstrates some of the values for `align-items` using grid layout.

Try it
------

Syntax
------

```css
/\* Basic keywords \*/
align-items: normal;
align-items: stretch;

/\* Positional alignment \*/
/\* align-items does not take left and right values \*/
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;

/\* Baseline alignment \*/
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /\* Overflow alignment (for positional alignment only) \*/
align-items: safe center;
align-items: unsafe center;

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

### Values

`normal`

The effect of this keyword is dependent of the layout mode we are in:

* In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
* For flex items, the keyword behaves as `stretch`.
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* The property doesn't apply to block-level boxes, and to table cells.

`flex-start`

Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.

`flex-end`

Used in flex layout only, aligns the flex items flush against the flex container's main-end or cross-end side.

`center`

The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.

`start`

The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.

`end`

The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.

`self-start`

The items are packed flush to the edge of the alignment container's start side of the item, in the appropriate axis.

`self-end`

The items are packed flush to the edge of the alignment container's end side of the item, in the appropriate axis.

`baseline`, `first baseline`, `last baseline`

All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

`stretch`

If the items are smaller than the alignment container, auto-sized items will be equally enlarged to fill the container, respecting the items' width and height limits.

`safe`

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

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

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

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

align-items =
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

Examples
--------

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-items: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
const values = document.getElementById("values");
const display = document.getElementById("display");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.alignItems = evt.target.value;
});

display.addEventListener("change", (evt) => {
  container.className = evt.target.value;
});
```

### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-items-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `align-self` property


overscroll-behavior - CSS: Cascading Style Sheets

overscroll-behavior
===================

The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `overscroll-behavior-x`
* `overscroll-behavior-y`
Syntax
------

```css
/\* Keyword values \*/
overscroll-behavior: auto; /\* default \*/
overscroll-behavior: contain;
overscroll-behavior: none;

/\* Two values \*/
overscroll-behavior: auto contain;

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

The `overscroll-behavior` property is specified as one or two keywords chosen from the list of values below.

Two keywords specifies the `overscroll-behavior` value on the `x` and `y` axes respectively. If only one value is specified, both x and y are assumed to have the same value.

### Values

`auto`

The default scroll overflow behavior occurs as normal.

`contain`

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

`none`

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

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

By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content at the top of a page that also has scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

In some cases, these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

Note that this property applies only to scroll containers. In particular, since an `<iframe>` is not a scroll container, setting this property on an iframe has no effect. To control scroll chaining from an iframe, set `overscroll-behavior` on both the `<html>` and the `<body>` elements of the iframe's document.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `overscroll-behavior-x`: as specified
* `overscroll-behavior-y`: as specified
 |
| Animation type | discrete |

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

overscroll-behavior =
  [ contain | none | auto ]{1,2}

```

Examples
--------

### Preventing an underlying element from scrolling

In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.

![A popup chat window titled 'Active chat', showing a conversation between Chris and Bob. Behind the chat window is a contact list titled 'overscroll-behavior demo'.](/en-US/docs/Web/CSS/overscroll-behavior/example.png)

Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using `overscroll-behavior-y` (`overscroll-behavior` would also work) on the chat window, like this:

```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```

We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting `overscroll-behavior: none` on the `<html>` element:

```css
html {
  margin: 0;
  overscroll-behavior: none;
}
```

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties |

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects on developer.chrome.com (2017)


Syntax - CSS: Cascading Style Sheets

Syntax
======

The basic goal of the Cascading Stylesheet (CSS) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The *CSS syntax* reflects this goal and its basic building blocks are:

* The **property** which is an identifier, that is a human-readable *name*, that defines which feature is considered.
* The **value** which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
CSS declarations
----------------

Setting CSS properties to specific values is the core function of the CSS language. A property and value pair is called a **declaration**, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.

Both properties and values are case-insensitive by default in CSS. The pair is separated by a colon, '`:`' (`U+003A COLON`), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored.

![css syntax - declaration.png](/en-US/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

There are hundreds of different properties in CSS and a practically endless number of different values. Not all pairs of properties and values are allowed and each property defines what are the valid values. When a value is not valid for a given property, the declaration is deemed *invalid* and is wholly ignored by the CSS engine.

CSS declaration blocks
----------------------

Declarations are grouped in **blocks**, that is in a structure delimited by an opening brace, '`{`' (`U+007B LEFT CURLY BRACKET`), and a closing one, '`}`' (`U+007D RIGHT CURLY BRACKET`). Blocks sometimes can be nested, so opening and closing braces must be matched.

![css syntax - block.png](/en-US/docs/Web/CSS/Syntax/css_syntax_-_block.png)

Such blocks are naturally called **declaration blocks** and declarations inside them are separated by a semicolon, '`;`' (`U+003B SEMICOLON`). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semicolon, though it is often considered *good style* to do it as it prevents forgetting to add it when extending the block with another declaration.

A CSS declaration block is visualized in the diagram below.

![css syntax - declarations block.png](/en-US/docs/Web/CSS/Syntax/declaration-block.png)

**Note:** The content of a CSS declaration block, that is a list of semicolon-separated declarations, without the initial and closing braces, can be put inside an HTML `style` attribute.

CSS rulesets
------------

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated **selectors**, which are conditions selecting some elements of the page. A selector list and an associated declarations block, together, are called a **ruleset**, or often a **rule**.

A CSS ruleset (or rule) is visualized in the diagram below.

![css syntax - ruleset.png](/en-US/docs/Web/CSS/Syntax/ruleset.png)

As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

**Note:** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole *selector* is invalid and therefore the entire rule is ignored (as invalid too).

CSS statements
--------------

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semicolon (outside a string, non-escaped and not included into another {}, () or [] pair).

![css syntax - statements Venn diag.png](/en-US/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

There are two kinds of statements:

* **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
* **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up to the end of the statement, that is up to the next semicolon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like `@charset` or `@import`), conditional information (like `@media` or `@document`), or descriptive information (like `@font-face`).

Any statement which isn't a ruleset or an at-rule is invalid and ignored.

### Nested statements

There is another group of statements – the **nested statements**. These are statements that can be used in a specific subset of at-rules – the *conditional group rules*. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which the browser runs matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only *rulesets* could be used inside conditional group rules. That was very restrictive and this restriction was lifted in *CSS Conditionals Level 3*. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.

See also
--------

* CSS key concepts:
    + **CSS syntax**
    + 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


:placeholder-shown - CSS: Cascading Style Sheets

:placeholder-shown
==================

The **`:placeholder-shown`** CSS pseudo-class represents any `<input>` or `<textarea>` element that is currently displaying placeholder text.

Try it
------

Syntax
------

```css
:placeholder-shown {
  /\* ... \*/
}
```

Examples
--------

### Basic example

This example applies special font and border styles when the placeholder is shown.

#### HTML

```html
<input placeholder="Type something here!" />
```

#### CSS

```css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}
```

#### Result

### Overflowing text

When form fields are too small, placeholder text can get cropped in an undesirable way. You can use the `text-overflow` property to alter the way overflowing text is displayed.

#### HTML

```html
<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />
```

#### CSS

```css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}
```

#### Result

### Customized input field

The following example highlights the Student ID field with a custom style.

#### HTML

```html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```

#### CSS

```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

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

See also
--------

* The `::placeholder` pseudo-element styles the placeholder *itself*.
* Related HTML elements: `<input>`, `<textarea>`
* HTML forms


grid-area - CSS: Cascading Style Sheets

grid-area
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
The **`grid-area`** CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

Try it
------

If four `<grid-line>` values are specified, `grid-row-start` is set to the first value, `grid-column-start` is set to the second value, `grid-row-end` is set to the third value, and `grid-column-end` is set to the fourth value.

When `grid-column-end` is omitted, if `grid-column-start` is a `<custom-ident>`, `grid-column-end` is set to that `<custom-ident>`; otherwise, it is set to `auto`.

When `grid-row-end` is omitted, if `grid-row-start` is a `<custom-ident>`, `grid-row-end` is set to that `<custom-ident>`; otherwise, it is set to `auto`.

When `grid-column-start` is omitted, if `grid-row-start` is a `<custom-ident>`, all four longhands are set to that value. Otherwise, it is set to `auto`.

The grid-area property can also be set to a `<custom-ident>` which acts as a name for the area, which can then be placed using `grid-template-areas`.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
Syntax
------

```css
/\* Keyword values \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> values \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? values \*/
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] values \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

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

### Values

`auto`

Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement or a default span of `1`.

`<custom-ident>`

If there is a named line with the name '`<custom-ident>-start`'/'`<custom-ident>-end`', it contributes the first such line to the grid item's placement.

**Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-area: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).

Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

`<integer> && <custom-ident>?`

Contributes the n-th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

An `<integer>` value of `0` is invalid.

`span && [ <integer> || <custom-ident> ]`

Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is *n* lines from the opposite edge.

If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-row-start`: `auto`
* `grid-column-start`: `auto`
* `grid-row-end`: `auto`
* `grid-column-end`: `auto`
 |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `grid-row-start`: as specified
* `grid-column-start`: as specified
* `grid-row-end`: as specified
* `grid-column-end`: as specified
 |
| Animation type | discrete |

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

grid-area =
  <grid-line> [ / <grid-line> ]{0,3}

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

Examples
--------

### Setting grid areas

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # propdef-grid-area |

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

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

See also
--------

* Related CSS properties: `grid-row`, `grid-row-start`, `grid-row-end`, `grid-column`, `grid-column-start`, `grid-column-end`, `grid-template-areas`
* Grid Layout Guide: *Grid template areas*
* Video tutorial: *Grid Template Areas*


border-image-slice - CSS: Cascading Style Sheets

border-image-slice
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
The **`border-image-slice`** CSS property divides the image specified by `border-image-source` into regions. These regions form the components of an element's border image.

Try it
------

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

![The nine regions defined by the border-image or border-image-slice properties](/en-US/docs/Web/CSS/border-image-slice/border-image-slice.png)

The above diagram illustrates the location of each region.

* Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
* Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
* Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword `fill` is set.

The `border-image-repeat`, `border-image-width`, and `border-image-outset` properties determine how these regions are used to form the final border image.

Syntax
------

```css
/\* All sides \*/
border-image-slice: 30%;

/\* top and bottom | left and right \*/
border-image-slice: 10% 30%;

/\* top | left and right | bottom \*/
border-image-slice: 30 30% 45;

/\* top | right | bottom | left \*/
border-image-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
border-image-slice: 10% fill;
border-image-slice: fill 10%;

/\* Global values \*/
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
```

The `border-image-slice` property may be specified using one to four `<number-percentage>` values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to `100%`.

* When **one** position is specified, it creates all four slices at the same distance from their respective sides.
* When **two** positions are specified, the first value creates slices measured from the **top and bottom**, the second creates slices measured from the **left and right**.
* When **three** positions are specified, the first value creates a slice measured from the **top**, the second creates slices measured from the **left and right**, the third creates a slice measured from the **bottom**.
* When **four** positions are specified, they create slices measured from the **top**, **right**, **bottom**, and **left** in that order (clockwise).

The optional `fill` value, if used, can be placed anywhere in the declaration.

### Values

`<number>`

Represents an edge offset in *pixels* for raster images and *coordinates* for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

`<percentage>`

Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.

`fill`

Preserves the middle image region and displays it like a background image, but stacked above the actual `background`. Its width and height are sized to match the top and left image regions, respectively.

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

|  |  |
| --- | --- |
| Initial value | `100%` |
| Applies to | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the size of the border image |
| Computed value | one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified |
| Animation type | by computed value type |

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

border-image-slice =
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?

```

Examples
--------

### Adjustable border width and slice

The following example shows a simple `<div>` with a border image set on it. The source image for the borders is as follows:

![nice multi-colored diamonds](/en-US/docs/Web/CSS/border-image-slice/border-diamonds.png)

The diamonds are 30px across, therefore setting 30 pixels as the value for both `border-width` and `border-image-slice` will get you complete and fairly crisp diamonds in your border:

```css
border-width: 30px;
border-image-slice: 30;
```

These are the default values we have used in this example. However, we have also provided two sliders to allow you to dynamically change the values of the above two properties, allowing you to appreciate the effect they have:

`border-image-slice` Changes the size of the image slice sampled for use in each border and border corner (and the content area, if the `fill` keyword is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects.

`border-width`: Changes the width of the border. The sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixelated (unless of course you use an SVG image).

#### HTML

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

<ul>
  <li>
    <label for="width">slide to adjust <code>border-width</code></label>
    <input type="range" min="10" max="45" id="width" />
    <output id="width-output">30px</output>
  </li>
  <li>
    <label for="slice">slide to adjust <code>border-image-slice</code></label>
    <input type="range" min="10" max="45" id="slice" />
    <output id="slice-output">30</output>
  </li>
</ul>
```

#### CSS

```css
.wrapper {
  width: 400px;
  height: 300px;
}

div > div {
  width: 300px;
  height: 200px;
  border-width: 30px;
  border-style: solid;
  border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
  border-image-slice: 30;
  border-image-repeat: round;
}

li {
  display: flex;
  place-content: center;
}
```

#### JavaScript

```js
const widthSlider = document.getElementById("width");
const sliceSlider = document.getElementById("slice");
const widthOutput = document.getElementById("width-output");
const sliceOutput = document.getElementById("slice-output");
const divElem = document.querySelector("div > div");

widthSlider.addEventListener("input", () => {
  const newValue = `${widthSlider.value}px`;
  divElem.style.borderWidth = newValue;
  widthOutput.textContent = newValue;
});

sliceSlider.addEventListener("input", () => {
  const newValue = sliceSlider.value;
  divElem.style.borderImageSlice = newValue;
  sliceOutput.textContent = newValue;
});
```

#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-slice |

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

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

See also
--------

* Illustrated description of the 1-to-4-value syntax
* Border images in CSS: A key focus area for Interop 2023 on MDN blog (2023)


page-break-after - CSS: Cascading Style Sheets

page-break-after
================

**Warning:** This property has been replaced by the `break-after` property.

The **`page-break-after`** CSS property adjusts page breaks *after* the current element.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/\* Global values \*/
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: revert-layer;
page-break-after: unset;
```

This property applies to block elements that generate a box. It won't apply on an empty `<div>` that won't generate a box.

### Values

`auto`

Initial value. Automatic page breaks (neither forced nor forbidden).

`always`

Always force page breaks after the element.

`avoid`

Avoid page breaks after the element.

`left`

Force page breaks after the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

`right`

Force page breaks after the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

`recto`
Experimental

If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

`verso`
Experimental

If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

Page break aliases
------------------

The `page-break-after` property is now a legacy property, replaced by `break-after`.

For compatibility reasons, `page-break-after` should be treated by browsers as an alias of `break-after`. This ensures that sites using `page-break-after` continue to work as designed. A subset of values should be aliased as follows:

| page-break-after | break-after |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

page-break-after =
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit

```

Examples
--------

### Setting a page break after footnotes

```css
/\* move to a new page after footnotes \*/
div.footnotes {
  page-break-after: always;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-after |

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

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

See also
--------

* `break-before`, `break-after`, `break-inside`
* `page-break-before`, `page-break-inside`
* `orphans`, `widows`


:-moz-handler-crashed - CSS: Cascading Style Sheets

:-moz-handler-crashed
=====================

**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 **`:-moz-handler-crashed`** CSS pseudo-class is a Mozilla extension that matches elements that can't be displayed because the plugin responsible for drawing them has crashed.

**Note:** This selector is mainly intended to be used by theme developers.

Syntax
------

```css
:-moz-handler-crashed {
  /\* ... \*/
}
```

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

Not part of any standard.

See also
--------

* `:-moz-handler-blocked`
* `:-moz-handler-disabled`


:checked - CSS: Cascading Style Sheets

:checked
========

The **`:checked`** CSS pseudo-class selector represents any **radio** (`<input type="radio">`), **checkbox** (`<input type="checkbox">`), or **option** (`<option>` in a `<select>`) element that is checked or toggled to an `on` state.

Try it
------

The user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.

**Note:** Because browsers often treat `<option>`s as replaced elements, the extent to which they can be styled with the `:checked` pseudo-class varies from browser to browser.

Syntax
------

```css
:checked {
  /\* ... \*/
}
```

Examples
--------

### Basic example

#### HTML

```html
<div>
  <input type="radio" name="my-input" id="yes" value="yes" />
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no" value="no" />
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>
```

#### CSS

```css
div,
select {
  margin: 8px;
}

/\* Labels for checked inputs \*/
input:checked + label {
  color: red;
}

/\* Radio element, when checked \*/
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/\* Checkbox element, when checked \*/
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/\* Option elements, when selected \*/
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}
```

#### Result

### Toggling elements with a hidden checkbox

This example utilizes the `:checked` pseudo-class to let the user toggle content based on the state of a checkbox, all without using JavaScript.

#### HTML

```html
<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr>
      <th>Column #1</th>
      <th>Column #2</th>
      <th>Column #3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
```

#### CSS

```css
/\* Hide the toggle checkbox \*/
#expand-toggle {
  display: none;
}

/\* Hide expandable content by default \*/
.expandable {
  visibility: collapse;
  background: #ddd;
}

/\* Style the button \*/
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/\* Show hidden content when the checkbox is checked \*/
#expand-toggle:checked ~ \* .expandable {
  visibility: visible;
}

/\* Style the button when the checkbox is checked \*/
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}
```

#### Result

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

| Specification |
| --- |
| HTML Standard # selector-checked |
| Selectors Level 4 # checked |

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

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

See also
--------

* Web forms — working with user data
* Styling web forms
* Related HTML elements: `<input type="checkbox">`, `<input type="radio">`, `<select>`, and `<option>`
* Replaced elements


!important - CSS: Cascading Style Sheets

!important
==========

A `!` delimiter followed by the `important` keyword marks the declaration as important. The `!important` flag alters the rules selecting declarations inside the cascade. A declaration that is not *important* is called *normal*.

To mark a declaration important, add the *important flag* (`!important`) after the value in the declaration. While white space is allowed between the delimiter and the keyword, the flag is generally written as `!important` without any white space.

```css
selector {
  property: value; /\* normal declaration \*/
  property: value !important; /\* important declaration (preferred) \*/
  property: value ! important; /\* important declaration (not preferred) \*/
}
```

The `!important` comes after the value of the property value pair declaration, preceded by at least one space. The important flag must be the last token in the declaration. In other words, there can be white space and comments between the flag and the declaration's ending semicolon, but nothing else.

Impact on the cascade
---------------------

When it comes to important declarations, the cascade origin and layer orders are reversed. Without the important flag, declarations in the author's style sheets override declarations in a user's style sheet, which override declarations in the user-agent's default style sheet.

When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author's style sheets. Finally, all important declarations take precedence over all animations.

**Note:** All important declarations take precedence over all animations. `!important` is not valid within @keyframes animation declarations.

Reversing the precedence order for important declarations ensures users with special needs, such as personalized color schemes or large fonts, can override author styles when needed by marking some declarations in their user's style sheet as important. It also guarantees malicious extensions can't override important user-agent styles, which might break functionality or negatively impact security.

Does anything have precedence over important declarations? Yes, transitions. CSS transitions are a way to control the speed at which the property changes from one value to another. While transitioning from one value to another, a property will not match a specific important declaration.

```css
a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}
```

In this example, the `color` and `background-color` properties will transition to the hovered state over two seconds. Even though default states are normal declarations and hover states are `!important` declarations, the transition does happen.

### Cascade layers

Within each of the three origins for style sheets – author, user, and user-agent – normal declarations in unlayered styles override layered style declarations, with the last declared having precedence over the layers declared before it. Important declarations reverse the order of precedence: important declarations in the first layer take precedence over important declarations in the next layer, and so on. Also, all the important declarations have precedence over important declarations made outside any layer.

### Inline styles

Inline styles are styles defined using the `style` attributes. They can also be normal or important. Inline *normal* styles take precedence over all *normal* declarations, no matter the origin. Inline *important* styles take precedence over all other *important* author styles, no matter the layer, but important styles from user's or user-agent's style sheets and transitions override them.

### !important and specificity

While `!important` is not part of determining specificity, it is related. Important declarations override all other declarations from the same origin and cascade layer.

```css
#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}
```

This example displays a case of over-specifying a selector. No matter how high the selector specificity matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red.

When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity.

```css
#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}
```

In this case, the selector specificity matters. Only if the selectors had the same specificity would source order matter.

Impact on shorthand properties
------------------------------

Declaring a shorthand property with `!important` sets all of sub-properties as important. The two following selector style blocks are equivalent:

```css
p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}
```

This example shows one of the several reasons avoiding the important flag is generally recommended.

Impact on custom properties
---------------------------

When the `!important` flag is added to a custom property value declaration, it makes the value assignment important. The `!important` flag is then stripped from the custom property value. The `!important` flag is not passed as part of the custom property value to the `var()` function.

```css
:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}
```

```
<p>This is a paragraph</p>
<blockquote>This is a blockquote</blockquote>
```

In this example, the paragraph will be red, not blue, as the custom property value assignment is important. The blockquote will be purple, because the purple normal declaration comes after the normal red declaration.

Best practices
--------------

Avoid using `!important` to override specificity. When intentionally creating important declarations for UI requirements, comment in your CSS code to explain to maintainers why they should not override that feature.

Even when working to override high-specificity styles not under your control, such as styles in a 3rd party plugin declared with an id selector, you don't need to use `!important`. Consider instead importing the 3rd party stylesheet script into a named or anonymous layer as your first cascade layer, instead of using `!important`. As long as the external styles do not include important declarations, your styles will take precedence over the widget styles, no matter the specificity.

If you need to override an external stylesheet containing important declarations, create a cascade layer containing the needed overrides, and declare that layer first.

### Accessibility concerns

Important styles from a user stylesheet take precedence over the author style sheet's important declarations, meaning adding an `!important` flag to a site's styles will not prevent individual users with special requirements, such as large fonts, from being able to override your styles by adding important styles in their own user's style sheet.

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

This feature is supported in all browsers.

See also
--------

* CSS Specificity
* CSS Cascade


offset - CSS: Cascading Style Sheets

offset
======

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`offset`** CSS shorthand property sets all the properties required for animating an element along a defined path. The offset properties together help to define an *offset transform*, a transform that aligns a point in an element (offset-anchor) to an *offset position* (offset-position) on a path (offset-path) at various points along the path (offset-distance) and optionally rotates the element (offset-rotate) to follow the direction of the path.

**Note:** Early versions of the spec called this property `motion`.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
Syntax
------

```css
/\* Offset position \*/
offset: auto;
offset: 10px 30px;
offset: none;

/\* Offset path \*/
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/\* Offset path with distance and/or rotation \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* Including offset anchor \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

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

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `offset-position`: `normal`
* `offset-path`: `none`
* `offset-distance`: `0`
* `offset-anchor`: `auto`
* `offset-rotate`: `auto`
 |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `offset-position`: refer to the size of containing block
* `offset-distance`: refer to the total path length
* `offset-anchor`: relative to the width and the height of the element's reference box
 |
| Computed value | as each of the properties of the shorthand:* `offset-position`: for `<length>` the absolute value, otherwise a percentage
* `offset-path`: as specified
* `offset-distance`: for `<length>` the absolute value, otherwise a percentage
* `offset-anchor`: for `<length>` the absolute value, otherwise a percentage
* `offset-rotate`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `offset-position`: a position
* `offset-path`: by computed value type
* `offset-distance`: a length, percentage or calc();
* `offset-anchor`: a position
* `offset-rotate`: as <angle>, <basic-shape> or <path()>
 |
| Creates stacking context | yes |

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

offset =
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

```

Examples
--------

### Animating an element along a path

#### HTML

```html
<div id="offsetElement"></div>
```

#### CSS

```css
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```

#### Result

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

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

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

See also
--------

* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`


box-orient - CSS: Cascading Style Sheets

box-orient
==========

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

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

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.

The **`box-orient`** CSS property sets whether an element lays out its contents horizontally or vertically.

Syntax
------

```css
/\* Keyword values \*/
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/\* Global values \*/
box-orient: inherit;
box-orient: initial;
box-orient: unset;
```

The `box-orient` property is specified as one of the keyword values listed below.

### Values

`horizontal`

The box lays out its contents horizontally.

`vertical`

The box lays out its contents vertically.

`inline-axis` (HTML)

The box displays its children along the inline axis.

`block-axis` (HTML)

The box displays its children along the block axis.

The inline and block axes are the writing-mode dependent keywords which, in English, map to `horizontal` and `vertical` respectively.

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

HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS `display` value of `box` or `inline-box`.

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

|  |  |
| --- | --- |
| Initial value | `inline-axis` (`horizontal` in XUL) |
| Applies to | elements with a CSS `display` value of `box` or `inline-box` |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-orient =
  horizontal | vertical | inline-axis | block-axis | inherit
```

Examples
--------

### Setting horizontal box orientation

Here, the `box-orient` property will cause the two `<p>` sections in the example to display in the same line.

#### HTML

```html
<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>
```

#### CSS

```css
div.example {
  display: -moz-box; /\* Mozilla \*/
  display: -webkit-box; /\* WebKit \*/
  display: box; /\* As specified \*/

  /\* Children should be oriented vertically \*/
  -moz-box-orient: horizontal; /\* Mozilla \*/
  -webkit-box-orient: horizontal; /\* WebKit \*/
  box-orient: horizontal; /\* As specified \*/
}
```

#### Result

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

* `box-direction`
* `box-pack`
* `box-align`
* `flex-direction`


background-blend-mode - CSS: Cascading Style Sheets

background-blend-mode
=====================

The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.

Try it
------

Blending modes should be defined in the same order as the `background-image` property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

Syntax
------

```css
/\* One value \*/
background-blend-mode: normal;

/\* Two values, one per background \*/
background-blend-mode: darken, luminosity;

/\* Global values \*/
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;
```

### Values

`<blend-mode>`

The blending mode to be applied. There can be several values, separated by commas.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

background-blend-mode =
  <mix-blend-mode>#

```

Examples
--------

### Basic example

```css
.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}
```

### Try out different blend modes
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

```
document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

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

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

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

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

See also
--------

* `<blend-mode>`
* `mix-blend-mode`


cos() - CSS: Cascading Style Sheets

cos()
=====

The **`cos()`** CSS function is a trigonometric function that returns the cosine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a `<number>` or an `<angle>` by interpreting the result of the argument as radians. That is, `cos(45deg)`, `cos(0.125turn)`, and `cos(3.14159 / 4)` all represent the same value, approximately `0.707`.

Syntax
------

```css
/\* Single <angle> values \*/
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));

/\* Single <number> values \*/
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));

/\* Other values \*/
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
```

### Parameter

The `cos(angle)` function accepts only one value as its parameter.

`angle`

A calculation which resolves to a `<number>` or an `<angle>`. When specifying unitless numbers they are interpreted as a number of radians, representing an `<angle>`.

### Return value

The cosine of an `angle` will always return a number between `−1` and `1`.

* If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
### Formal syntax
```

<cos()> =
  cos( <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
--------

### Keep the size of a rotated box

The `cos()` function can be used to keep the size of a rotated box.

When the element is rotated using `rotate()`, it goes beyond its initial size. To fix this, we will use `cos()` to update the element size.

For example, if you rotate a `100px`/`100px` square `45deg`, the diamond it creates will be wider and taller than the original square. To shrink the diamond into the box allotted for the original square, you would have to scale down the diamond using this formula: `width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px`. You need to also adjust the `transform-origin` and add `translate()` to correct the position:

#### HTML

```html
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>
```

#### CSS
```

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

```css
div.original-square {
  width: 100px;
  height: 100px;
  background-color: blue;
}
div.rotated-diamond {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
div.rotated-scaled-diamond {
  width: calc(100px * cos(45deg));
  height: calc(100px * cos(45deg));
  margin: calc(100px / 4 * cos(45deg));
  transform: rotate(45deg);
  transform-origin: center;
  background-color: green;
}
```

#### 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()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`


::marker - CSS: Cascading Style Sheets

::marker
========

The **`::marker`** CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to `display: list-item`, such as the `<li>` and `<summary>` elements.

Try it
------

Allowable properties
--------------------

The `::marker` pseudo-element supports a limited number of CSS properties, including:

* All font properties
* The `white-space` property
* `color`
* `text-combine-upright`, `unicode-bidi`, and `direction` properties
* The `content` property
* All animation and transition properties

**Note:** The specification states that additional CSS properties may be supported in the future.

Syntax
------

```css
::marker {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS

```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

See also
--------

* HTML elements that have marker boxes by default: `<ol>`, `<li>`, `<summary>`
* CSS generated content module
* CSS lists and counters module
* CSS counter styles module


::first-line - CSS: Cascading Style Sheets

::first-line
============

The **`::first-line`** CSS pseudo-element applies styles to the first line of a block container.

Try it
------

The effects of `::first-line` are limited by the length and content of the first line of text in the element. The length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. `::first-line` has no effect when the first child of the element, which would be the first part of the first line, is an inline block-level element, such as an inline table.

**Note:** Selectors Level 3 introduced the double-colon notation (`::`) to distinguish pseudo-elements from the single-colon (`:`) pseudo-classes. Browsers accept both `::first-line` and `:first-line`, which was introduced in CSS2.

For the purposes of CSS `background`, the `::first-line` pseudo-element is like an inline-level element meaning that in a left-justified first line, the background may not extend all the way to the right margin.

Allowable properties
--------------------

Only a small subset of CSS properties can be used with the `::first-line` pseudo-element:

* All font-related properties: `font`, `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, and `font-family`
* All background-related properties: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* The `color` property
* `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, and `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, and `vertical-align`.
Syntax
------

```css
::first-line {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<p>
  Styles will only be applied to the first line of this paragraph. After that,
  all text will be styled like normal. See what I mean?
</p>

<span>
  The first line of this text will not receive special styling because it is not
  a block-level element.
</span>
```

### CSS

```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* WARNING: DO NOT USE THESE \*/
  /\* Many properties are invalid in ::first-line pseudo-elements \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

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

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

See also
--------

* `::first-letter`


scroll-padding-inline-start - CSS: Cascading Style Sheets

scroll-padding-inline-start
===========================

The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
scroll-padding-inline-start: auto;

/\* <length> values \*/
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;

/\* Global values \*/
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;
```

### Values

`<length-percentage>`

An inwards offset from the inline start edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-inline-start =
  auto                       |
  <length-percentage [0,∞]>

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

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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


hyphenate-character - CSS: Cascading Style Sheets

hyphenate-character
===================

The **`hyphenate-character`** CSS property sets the character (or string) used at the end of a line before a hyphenation break.

Both automatic and soft hyphens are displayed according to the specified hyphenate-character value.

Try it
------

Syntax
------

```css
hyphenate-character: <string>;
hyphenate-character: auto;
```

The value either sets the string to use instead of a hyphen, or indicates that the user agent should select an appropriate string based on the current typographic conventions (default).

### Values

`<string>`

 The `<string>` to use at the end of the line before a hyphenation break.
 The user agent may truncate this value if too many characters are used.

`auto`

 The user-agent selects an appropriate string based on the content language's typographic conventions.
 This is the default property value, and only needs to be explicitly set in order to override a different inherited value.

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

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

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

hyphenate-character =
  auto      |
  <string>

```

Examples
--------

 This example shows two identical blocks of text that have `hyphens` set to ensure that they break wherever needed, and on soft hyphen breaks (created using ``).
 The first block has the value of the hyphen changed to the equals symbol ("`=`").
 The second block has no hyphenate-character set, which is equivalent to `hyphenate-character: auto` for user agents that support this property.

### HTML

```html
<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Supercalifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Supercalifragilisticexpialidocious</dd>
</dl>
```

### CSS

```css
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}
```

### Result

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

| Specification |
| --- |
| CSS Text Module Level 4 # propdef-hyphenate-character |

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

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

See also
--------

* Related CSS properties: `hyphens`, `overflow-wrap`.


::view-transition-old - CSS: Cascading Style Sheets

::view-transition-old
=====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`::view-transition-old`** CSS pseudo-element represents the "old" view state of a view transition — a static screenshot of the old view, before the transition.

During a view transition, `::view-transition-old` is included in the associated pseudo-element tree as explained in The view transition process, provided there's an "old" view state to represent. It is only ever a child of a `::view-transition-image-pair`, and never has any children.

It is a replaced element, and therefore can be manipulated with properties such as `object-fit` and `object-position`. It has natural dimensions equal to the content's size.

The following default styling is included in the UA stylesheet:

```css
@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

html::view-transition-old(\*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-out;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

**Note:** Additional view transition style sheet styles are also setup to animate `::view-transition-old`. These are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.

Syntax
------

```css
::view-transition-old(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` can be one of the following values:

`*`

Causes the pseudo-element to match all view transition groups.

`root`

Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page, meaning any element not assigned to its own specific view transition group via the `view-transition-name` property.

`<custom-ident>`

Causes the pseudo-element to match a specific view transition group created by assigning the given `<custom-ident>` to an element via the `view-transition-name` property.

Examples
--------

```css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-old |

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

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

See also
--------

* View Transitions API
* Smooth and simple transitions with the View Transitions API


-webkit-touch-callout - CSS: Cascading Style Sheets

-webkit-touch-callout
=====================

**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-touch-callout` CSS property controls the display of the default callout shown when you touch and hold a touch target.

When a target is touched and held on iOS, Safari displays a callout information about the link. This property allows disabling that behavior.

Syntax
------

```css
/\* Keyword values \*/
-webkit-touch-callout: default;
-webkit-touch-callout: none;

/\* Global values \*/
-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: revert;
-webkit-touch-callout: revert-layer;
-webkit-touch-callout: unset;
```

### Values

`default`

The default callout is displayed.

`none`

The callout is disabled.

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

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

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

-webkit-touch-callout =
  default | none
```

Examples
--------

### Turn off touch callout

```css
.example {
  -webkit-touch-callout: none;
}
```

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

Not part of any standard. Apple has a description in the Safari CSS Reference.

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

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

See also
--------

* WebKit CSS extensions
* -webkit-touch-callout in the Apple developer documentation


element() - CSS: Cascading Style Sheets

element()
=========

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

The **`element()`** CSS function defines an `<image>` value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.

A particularly useful scenario for using this would be to render an image in an HTML `<canvas>` element, then use that as a background.

On Gecko browsers, you can use the non-standard `document.mozSetImageElement()` method to change the element being used as the background for a given CSS background element.

Syntax
------

```css
element(id)
```

where:

*id*

The ID of an element to use as the background, specified using the HTML attribute #*id* on the element.

Examples
--------

These examples work in builds of Firefox that support `-moz-element()`.

### A somewhat realistic example

This example uses a hidden `<div>` as a background. The background element uses a gradient, but also includes text that is rendered as part of the background.

```html
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>
```

The `<div>` element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

### Page Preview

 This example based on Vincent De Oliveira's creates a preview of
 the `<div id="css-source">` inside `<div id="css-result">`.

#### HTML

```html
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>
```

#### CSS

```css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}
```

#### Result

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

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

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

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

See also
--------

* `image()`
* `image-set()`
* `<image>`
* `<gradient>`
* `cross-fade()`
* `document.mozSetImageElement()`


:target-within - CSS: Cascading Style Sheets

:target-within
==============

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

The **`:target-within`** CSS pseudo-class represents an element that is a target element or *contains* an element that is a target. A target element is a unique element with an `id` matching the URL's fragment. In other words, it represents an element that is itself matched by the `:target` pseudo-class or has a descendant that is matched by `:target`. (This includes descendants in shadow trees.)

```css
/\* Selects a <div> when one of its descendants is a target \*/
div:target-within {
  background: cyan;
}
```

Syntax
------

```css
:target-within {
  /\* ... \*/
}
```

Examples
--------

### Highlighting an article

The `:target-within` pseudo-class can be used to highlight the article if anything inside it has been directly linked to. The `:target` pseudo-class is also being used to show which item has been targeted.

#### HTML

```html
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
</ol>

<article>
  <h3>My Fun Article</h3>
  <p id="p1">
    You can target <i>this paragraph</i> using a URL fragment. Click on the link
    above to try out!
  </p>
  <p id="p2">
    This is <i>another paragraph</i>, also accessible from the links above.
    Isn't that delightful?
  </p>
</article>
```

#### CSS

```css
article:target-within {
  background-color: gold;
}

/\* Add a pseudo-element inside the target element \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Style italic elements within the target element \*/
p:target i {
  color: red;
}
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-target-within-pseudo |

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

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

See also
--------

* `:target`