tan() - CSS: Cascading Style Sheets

tan()
=====

The **`tan()`** CSS function is a trigonometric function that returns the tangent of a number, which is a value between `−infinity` and `infinity`. 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.

Syntax
------

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

/\* Single <number> values \*/
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 - 1));

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

### Parameter

The `tan(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 tangent of an `angle` will always return a number between `−∞` and `+∞`.

* If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
* If `angle` is `0⁻`, the result is `0⁻`.
* If `angle` is one of the asymptote values (such as `90deg`, `270deg`, etc.), the result is *explicitly undefined*. Authors *must not* rely on `tan()` returning any particular value for these inputs.
### Formal syntax
```

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

### Drawing parallelograms

The `tan()` function can be used to draw a parallelogram with a given bounding box.

#### HTML

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

#### CSS
```

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

```css
.parallelogram {
  --w: 400;
  --h: 200;
  --angle: 30deg;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}
.parallelogram::before {
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(calc(0deg - var(--angle)));
  background-color: red;
}
```

#### Result

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

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

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

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

See also
--------

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


:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets

:-moz-locale-dir(rtl)
=====================

**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-locale-dir(rtl)`** CSS pseudo-class is a Mozilla extension that matches an element if the user interface is being displayed right-to-left. This is determined by the preference `intl.uidirection.locale` (where `locale` is the current locale) being set to "rtl".

**Note:** This selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (This can vary from window to window, and even from tab to tab.) It also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics.

**Warning:** This selector does not work properly from HTML; it never matches, no matter whether the UI locale is left-to-right or right-to-left.

Syntax
------

```css
:-moz-locale-dir(rtl) {
  /\* ... \*/
}
```

Examples
--------

This example will not work if you're not using Firefox, and might not work properly even in Firefox due to an issue with using this selector in HTML.

### HTML

```html
<p>If you're using a right-to-left interface, this should be red.</p>
```

### CSS

```css
p:-moz-locale-dir(rtl) {
  color: red;
}
```

### Result

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

Not part of any standard.

See also
--------

* `:dir(…)`
* `:-moz-locale-dir(ltr)`


CSS media queries - CSS: Cascading Style Sheets

CSS media queries
=================

**CSS media queries** are a key component of responsive design that allow you to apply CSS styles depending on the presence or value of device characteristics.

 It's common to apply a media query based on the viewport size so that layout choices can be made for devices with different screen sizes.
 For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens.

![A laptop and a mobile device with different viewport sizes that can be queried using media queries where we can see the content being laid out differently.](/en-US/docs/Web/CSS/CSS_media_queries/media-queries.svg)

 In CSS, use the `@media` at-rule to conditionally apply part of a style sheet based on the result of a media query.
 To conditionally apply an entire style sheet, use `@import`.

When designing reusable HTML components, you may also use container queries, which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.

### Media queries in HTML

In HTML, media queries can be applied to various elements:

* In the `<link>` element's `media` attribute, they define the media to which a linked resource (typically CSS) should be applied.
* In the `<source>` element's `media` attribute, they define the media to which that source should be applied. (This is only valid inside `<picture>` elements.)
* In the `<style>` element's `media` attribute, they define the media to which the style should be applied.
### Media queries in JavaScript

 In JavaScript, you can use the `Window.matchMedia()` method to test the window against a media query.
 You can also use `MediaQueryList.addListener()` to be notified whenever the state of a query changes.
 With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

You can learn more about programmatically using media queries in Testing media queries.

Reference
---------

### At-rules

* `@import`
* `@media`
Guides
------

Using media queries

Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.

Testing media queries programmatically

Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).

Using media queries for accessibility

Learn how Media Queries can help users understand your website better.

Printing

Tips and techniques for helping improve web content printer output.

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

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

See also
--------

* Container queries
* Use `@supports` to apply styles that depend on browser support for various CSS technologies.


inline-size - CSS: Cascading Style Sheets

inline-size
===========

The **`inline-size`** CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `width` or the `height` property, depending on the value of `writing-mode`.

If the writing mode is vertically oriented, the value of `inline-size` relates to the height of the element; otherwise, it relates to the width of the element. A related property is `block-size`, which defines the other dimension of the element.

Try it
------

Syntax
------

```css
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content;
inline-size: fit-content(20em);
inline-size: auto;

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

### Values

The `inline-size` property takes the same values as the `width` and `height` properties.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | inline-size of containing block |
| Computed value | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

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

inline-size =
  <'width'>

```

Examples
--------

### Setting inline size in pixels

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `width` and `height`
* `writing-mode`


margin-block-end - CSS: Cascading Style Sheets

margin-block-end
================

The **`margin-block-end`** CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------

```css
/\* <length> values \*/
margin-block-end: 10px; /\* An absolute length \*/
margin-block-end: 1em; /\* relative to the text size \*/
margin-block-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-block-end: auto;

/\* Global values \*/
margin-block-end: inherit;
margin-block-end: initial;
margin-block-end: revert;
margin-block-end: revert-layer;
margin-block-end: unset;
```

It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

It relates to `margin-block-start`, `margin-inline-start`, and `margin-inline-end`, which define the other margins of the element.

### Values

The `margin-block-end` property takes the same values as the `margin-left` property.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

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

margin-block-end =
  <'margin-top'>

```

Examples
--------

### Setting block end margin

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`


hanging-punctuation - CSS: Cascading Style Sheets

hanging-punctuation
===================

The **`hanging-punctuation`** CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

Syntax
------

```css
/\* Keyword values \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* Two keywords \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* Three keywords \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

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

The `hanging-punctuation` property may be specified with one, two, or three space-separated values.

* **One-value** syntax uses any one of the keyword values in the list below.
* **Two-value** syntax uses one of the following:
    + `first` together with any one of `last`, `allow-end`, or `force-end`
    + `last` together with any one of `first`, `allow-end`, or `force-end`
* **Three-value** syntax uses one of the following:
    + `first`, `allow-end`, and `last`
    + `first`, `force-end`, and `last`
### Values

`none`

No character hangs.

`first`

An opening bracket or quote at the start of the first formatted line of an element hangs. This applies to:

* all characters in the Unicode categories Ps, Pf, Pi
* the quote marks `U+0027` APOSTROPHE (`'`) and `U+0022` QUOTATION MARK (`"`).

`last`

A closing bracket or quote at the end of the last formatted line of an element hangs. This applies to:

* all characters in the Unicode categories Pe, Pf, Pi
* the quote marks `U+0027` APOSTROPHE (`'`) and `U+0022` QUOTATION MARK (`"`).

`force-end`

A stop or comma at the end of a line hangs.

`allow-end`

A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Stops and commas that are allowed to hang include:

* `U+002C`, COMMA
* `U+002E`, FULL STOP
* `U+060C`, ARABIC COMMA
* `U+06D4`, ARABIC FULL STOP
* `U+3001`, IDEOGRAPHIC COMMA
* `U+3002`, IDEOGRAPHIC FULL STOP
* `U+FF0C`, FULLWIDTH COMMA
* `U+FF0E`, FULLWIDTH FULL STOP
* `U+FE50`, SMALL COMMA
* `U+FE51`, SMALL IDEOGRAPHIC COMMA
* `U+FE52`, SMALL FULL STOP
* `U+FF61`, HALFWIDTH IDEOGRAPHIC FULL STOP
* `U+FF64`, HALFWIDTH IDEOGRAPHIC COMMA

User agents may include additional characters.

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

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

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

hanging-punctuation =
  none                                            |
  [ first || [ force-end | allow-end ] || last ]

```

Examples
--------

### Setting opening and closing quotes to hang

#### HTML

```html
<p>
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging right">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>
```

#### CSS

```css
p {
  width: 15em;
  border: 1px solid #cccccc;
  font-size: 2rem;
  font-style: italic;
  margin: 1em;
}

p.hanging {
  hanging-punctuation: first last;
}

p.right {
  text-align: right;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # hanging-punctuation-property |

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

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

See also
--------

* `text-indent`
* CSS Tricks: Hanging punctuation


white-space - CSS: Cascading Style Sheets

white-space
===========

The **`white-space`** CSS property sets how white space inside an element is handled.

Try it
------

The property specifies two things:

* Whether and how white space is collapsed.
* Whether and how lines wrap.

**Note:** To make words break *within themselves*, use `overflow-wrap`, `word-break`, or `hyphens` instead.

Syntax
------

```css
/\* Single keyword values \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/\* white-space-collapse and text-wrap shorthand values \*/
white-space: collapse balance;
white-space: preserve nowrap;

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

### Values

`white-space` property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the `white-space-collapse` and `text-wrap` properties.

`normal`

Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

`nowrap`

Collapses white space as for `normal`, but suppresses line breaks (text wrapping) within the source.

`pre`

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at `<br>` elements.

`pre-wrap`

Sequences of white space are preserved. Lines are broken at newline characters, at `<br>`, and as necessary to fill line boxes.

`pre-line`

Sequences of white space are collapsed. Lines are broken at newline characters, at `<br>`, and as necessary to fill line boxes.

`break-spaces`

The behavior is identical to that of `pre-wrap`, except that:

* Any sequence of preserved white space always takes up space, including at the end of the line.
* A line-breaking opportunity exists after every preserved white space character, including between white space characters.
* Such preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes (`min-content` size and `max-content` size).

The following table summarizes the behavior of the various `white-space` keyword values:

|  | New lines | Spaces and tabs | Text wrapping | End-of-line spaces | End-of-line other space separators |
| --- | --- | --- | --- | --- | --- |
| `normal` | Collapse | Collapse | Wrap | Remove | Hang |
| `nowrap` | Collapse | Collapse | No wrap | Remove | Hang |
| `pre` | Preserve | Preserve | No wrap | Preserve | No wrap |
| `pre-wrap` | Preserve | Preserve | Wrap | Hang | Hang |
| `pre-line` | Preserve | Collapse | Wrap | Remove | Hang |
| `break-spaces` | Preserve | Preserve | Wrap | Wrap | Wrap |

**Note:** There is a distinction made between **spaces** and **other space separators**. These are defined as follows:

spaces

Spaces (U+0020), tabs (U+0009), and segment breaks (such as newlines).

other space separators

All other space separators defined in Unicode, other than those already defined as spaces.

Where white space is said to *hang*, this can affect the size of the box when measured for intrinsic sizing.

Collapsing of white space
-------------------------

The `white-space-collapse` property page explains the browser algorithm for collapsing white space.

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

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

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

white-space =
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

```

Examples
--------

### Basic example

```css
code {
  white-space: pre;
}
```

### Line breaks inside <pre> elements

```css
pre {
  white-space: pre-wrap;
}
```

### In action
```

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
    <option>preserve nowrap</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
```

```
.box {
  width: 300px;
  padding: 16px;
}

#css-code {
  background-color: rgb(220 220 220);
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}
```

```
const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.setAttribute("style", `white-space: ${e.target.value}`);
});
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

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

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

See also
--------

* Properties that define how words break *within themselves*: `overflow-wrap`, `word-break`, `hyphens`


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

border-inline-start-color
=========================

The **`border-inline-start-color`** CSS property defines the color of the logical inline 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-inline-start-color: red;
border-inline-start-color: #ee4141;

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

Related properties are `border-block-start-color`, `border-block-end-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-inline-start-color =
  <color>     |
  <image-1D>

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

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

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

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

```

Examples
--------

### 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-inline-start-color: red;
}
```

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`, and `border-left-color`
* `writing-mode`, `direction`, `text-orientation`


flex-grow - CSS: Cascading Style Sheets

flex-grow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`flex-grow`** CSS property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size.

When the flex-container's main size is larger than the combined main sizes of the flex items, the extra space is distributed among the flex items, with each item growth being their growth factor value as a proportion of the sum total of all the container's items' flex grow factors.

Try it
------

Syntax
------

```css
/\* <number> values \*/
flex-grow: 3;
flex-grow: 0.6;

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

The `flex-grow` property is specified as a single `<number>`.

### Values

`<number>`

See `<number>`. Negative values are invalid. Defaults to 0.

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

This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

The main size is either width or height of the item which is dependent on the `flex-direction` value.

The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.

`flex-grow` is used alongside the other flex properties `flex-shrink` and `flex-basis`, and normally defined using the `flex` shorthand to ensure all values are set.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | flex items, including in-flow pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a number |

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

flex-grow =
  <number [0,∞]>

```

Examples
--------

### Setting flex item grow factor

In this example, there is a total of 8 growth factors distributed among the 6 flex items, meaning each growth factor is 12.5% of the remaining space.

#### HTML

```html
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>
```

#### CSS

```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.small {
  flex-grow: 1;
  border: 3px solid rgb(0 0 0 / 20%);
}

.double {
  flex-grow: 2;
  border: 3px solid rgb(0 0 0 / 20%);
}
```

#### Result

When the six flex items are distributed along the container's main axis, if the sum of the main content of those flex items is less than the size of the container's main axis, the extra space is distributed among the size flex items, with A, B, C, and F, each getting 12.5% of the remaining space and D and E each getting 25% of the extra space.

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-grow-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: *Controlling Ratios of flex items along the main axis*
* `flex-grow` is weird. Or is it? article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works


grid-row-end - CSS: Cascading Style Sheets

grid-row-end
============

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-row-end`** CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
grid-row-end: auto;

/\* <custom-ident> values \*/
grid-row-end: somegridarea;

/\* <integer> + <custom-ident> values \*/
grid-row-end: 2;
grid-row-end: somegridarea 4;

/\* span + <integer> + <custom-ident> values \*/
grid-row-end: span 3;
grid-row-end: span somegridarea;
grid-row-end: 5 somegridarea span;

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

### Values

`auto`

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

`<custom-ident>`

If there is a named line with the name '<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-row-end: foo;` will choose the end edge of that named grid area (unless another line named `foo-end` was explicitly specified before it).

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

The `<custom-ident>` cannot take the `span` value.

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

Contributes the nth 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 row end edge of the grid item's grid area is n lines from the start 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 | `auto` |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

grid-row-end =
  <grid-line>

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

```

Examples
--------

### Setting row end for a grid item

#### HTML

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
```

#### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # line-placement |

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

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

See also
--------

* Related CSS properties: `grid-row-start`, `grid-row`, `grid-column-start`, `grid-column-end`, `grid-column`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*


CSS Houdini - CSS: Cascading Style Sheets

CSS Houdini
===========

**CSS Houdini** is a set of APIs that expose parts of the CSS engine. This makes it easier for developers to create extensions for CSS. These extensions might be to polyfill features that are not yet available in a browser, experiment with new ways of doing layout, or add creative borders or other effects.

While many Houdini examples showcase the creative possibilities of the APIs, there are many practical use cases. For example, you can use Houdini to create advanced custom properties with type checking and default values.

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

A regular CSS custom property consists of a property name and a value. Therefore I might create a custom property called `--background-color` and expect it to be given a color value. The value is then used in the CSS as if it were the color value.

```css
:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}
```

In the above example however, there is nothing to stop someone using some other value for this property, perhaps setting it to a length. Having done so, anywhere that the property is used would have no background color as `background-color: 12px` is not valid. When browsers come across CSS they don't recognize as valid they throw that line away.

Using `@property` however, we can declare the custom property with a `syntax` of `<color>`. This shows that we need this property to have a value which is a valid color.

```css
@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}
```

Houdini worklets
----------------

A feature of Houdini is the `Worklet`. A worklet is a module, written in JavaScript, that extends CSS using one of the Houdini APIs. You can see an example worklet on the `PaintWorkletGlobalScope.registerPaint()` page. Once a worklet has been registered you can use it in CSS just like any other value. This means that even if you are not a JavaScript developer, you can access Houdini APIs by using worklets other people have created.

The Houdini.how website has a number of worklets that you can try on your own site.

Reference
---------

### CSS at-rule and descriptors

The `@property` at-rule allows you to register an advanced custom property.

* `@property`
* `inherits`
* `initial-value`
* `syntax`
### Houdini API references

* CSS Properties and Values API
* CSS Typed Object Model API
* CSS Painting API
* `Worklet` reference
### Houdini guides

* Properties and Values API Guide
* Typed OM API Guide
* Using the CSS Painting API
External resources
------------------

* Interactive introduction to Houdini
* A Practical Overview of CSS Houdini
* Smarter custom properties with Houdini's new API


border-end-end-radius - CSS: Cascading Style Sheets

border-end-end-radius
=====================

The **`border-end-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

Try it
------

This property affects the corner between the block-end and the inline-end sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the `border-bottom-right-radius` property.

Syntax
------

```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-end-radius: 1em 2em;

/\* Global values \*/
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: revert;
border-end-end-radius: revert-layer;
border-end-end-radius: unset;
```

### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

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

border-end-end-radius =
  <length-percentage [0,∞]>{1,2}

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

```

Examples
--------

### Border radius with vertical text

#### HTML

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

#### CSS

```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}
```

#### Result

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical property: `border-bottom-right-radius`
* `writing-mode`, `direction`, `text-orientation`


column-rule-style - CSS: Cascading Style Sheets

column-rule-style
=================

The **`column-rule-style`** CSS property sets the style of the line drawn between columns in a multi-column layout.

Try it
------

Syntax
------

```css
/\* <'border-style'> values \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/\* Global values \*/
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: revert;
column-rule-style: revert-layer;
column-rule-style: unset;
```

The `column-rule-style` property is specified as a single `<'border-style'>` value.

### Values

`<'border-style'>`

Is a keyword defined by `border-style` describing the style of the rule. The styling must be interpreted as in the collapsing border model.

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

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

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

column-rule-style =
  <line-style>

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

Examples
--------

### Setting a dashed column rule

#### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```

#### CSS

```css
p {
  column-count: 3;
  column-rule-style: dashed;
}
```

#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crs |

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

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

See also
--------

* Multiple-column Layout
* `column-rule`
* `column-rule-width`
* `column-rule-color`


initial - CSS: Cascading Style Sheets

initial
=======

The **`initial`** CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property, including the CSS shorthand property `all`. With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately.

On inherited properties, the initial value may be unexpected. You should consider using the `inherit`, `unset`, `revert`, or `revert-layer` keywords instead.

Examples
--------

### Using initial to reset color for an element

#### HTML

```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```

#### CSS

```css
p {
  color: red;
}

em {
  color: initial;
}
```

#### Result

With the `initial` keyword in this example, `color` value on the `em` element is restored to the initial value of `color`, as defined in the specification.

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

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

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

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

See also
--------

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


:focus-within - CSS: Cascading Style Sheets

:focus-within
=============

The **`:focus-within`** CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the `:focus` pseudo-class or has a descendant that is matched by `:focus`. (This includes descendants in shadow trees.)

Try it
------

This selector is useful, to take a common example, for highlighting an entire `<form>` container when the user focuses on one of its `<input>` fields.

Syntax
------

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

Examples
--------

In this example, the form will receive special coloring styles when either text input receives focus.

### HTML

```html
<p>Try typing into this form.</p>

<form>
  <label for="given\_name">Given Name:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Family Name:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS

```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### Result

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

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

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

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

See also
--------

* `:focus`
* `:focus-visible`
* Grab your user's attention with the focus-within selector


::-moz-scrolled-page-sequence - CSS: Cascading Style Sheets

::-moz-scrolled-page-sequence
=============================

**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-scrolled-page-sequence`** CSS pseudo-element is a Mozilla extension that represents the background of a print preview.

Syntax
------

```css
::-moz-scrolled-page-sequence {
  /\* ... \*/
}
```

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

* `::-moz-page`
* `::-moz-page-sequence`


translate - CSS: Cascading Style Sheets

translate
=========

The **`translate`** CSS property allows you to specify translation transforms individually and independently of the `transform` property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
translate: none;

/\* Single values \*/
translate: 100px;
translate: 50%;

/\* Two values \*/
translate: 100px 200px;
translate: 50% 105px;

/\* Three values \*/
translate: 50% 105px 5rem;

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

### Values

Single `<length-percentage>` value

A `<length>` or `<percentage>` that specifies a translation along the X-axis. Equivalent to a `translate()` (2D translation) function with a single value specified.

Two `<length-percentage>` values

Two `<length>` or `<percentage>` that specify the X and Y axis translation values (respectively) of a 2D translation. Equivalent to a `translate()` (2D translation) function with two values specified.

Three values

Two `<length-percentage>` and single `<length>` values that specify the X, Y, and Z axis translation values (respectively) of a 3D translation. Equivalent to a `translate3d()` (3D translation) function.

`none`

Specifies that no translation should be applied.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the size of bounding box |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

translate =
  none                                                |
  <length-percentage> [ <length-percentage> <length>? ]?

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

```

Examples
--------

### Translating an element on hover

 This example shows how to use the `translate` property to move an element in three axes.
 The first box is moved along the X axis and the second box is moved along the X and Y axes.
 The third box is moved along the X, Y and Z axes and has the appearance of moving toward the viewer because of the addition of `perspective` to the parent element.

#### HTML

```html
<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>
```

#### CSS

```css
.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

See also
--------

* `scale`
* `rotate`
* `transform`

Note: skew is not an independent transform value


border-top-width - CSS: Cascading Style Sheets

border-top-width
================

The **`border-top-width`** CSS property sets the width of the top border of an element.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/\* <length> values \*/
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/\* Global keywords \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: revert-layer;
border-top-width: unset;
```

### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` or a keyword. If it's a keyword, it must be one of the following values:

* `thin`
* `medium`
* `thick`

**Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | the absolute length or `0` if `border-top-style` is `none` or `hidden` |
| Animation type | a length |

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

border-top-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

Examples
--------

### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}
```

### Result

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

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

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

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

See also
--------

* The other border-width-related CSS properties: `border-left-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* The other border-top-related CSS properties: `border`, `border-top`, `border-top-style`, and `border-top-color`.


text-underline-offset - CSS: Cascading Style Sheets

text-underline-offset
=====================

The **`text-underline-offset`** CSS property sets the offset distance of an underline text decoration line (applied using `text-decoration`) from its original position.

Try it
------

`text-underline-offset` is not part of the `text-decoration` shorthand. While an element can have multiple `text-decoration` lines, `text-underline-offset` only impacts underlining, and **not** other possible line decoration options such as `overline` or `line-through`.

Syntax
------

```css
/\* Single keyword \*/
text-underline-offset: auto;

/\* length \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* percentage \*/
text-underline-offset: 20%;

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

The `text-underline-offset` property is specified as a single value from the list below.

### Values

`auto`

The browser chooses the appropriate offset for underlines.

`<length>`

Specifies the offset of underlines as a `<length>`, overriding the font file suggestion and the browser default. It is recommended to use `em` units so the offset scales with the font size.

`<percentage>`

Specifies the offset of underlines as a `<percentage>` of **1 em** in the element's font. A percentage inherits as a relative value, and so therefore scales with changes in the font. For a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the font size of the element itself |
| Computed value | as specified |
| Animation type | by computed value type |

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

text-underline-offset =
  auto                 |
  <length-percentage>

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

```

Examples
--------

### Demonstration of text-underline-offset

```html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
```

```css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

See also
--------

* `text-decoration`
* `text-decoration-thickness`


Column combinator - CSS: Cascading Style Sheets

Column combinator
=================

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

The **column combinator** (`||`) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.

```css
/\* Table cells that belong to the "selected" column \*/
col.selected||td {
  background: gray;
}
```

Syntax
------

```css
/\* The white space around the || combinator is optional but recommended. \*/
column-selector || cell-selector {
  /\* style properties \*/
}
```

Examples
--------

### HTML

```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>

    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS

```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

See also
--------

* `<col>`
* `<colgroup>`
* `grid`
* `:nth-of-type`
* `:nth-last-of-type`


flex-flow - CSS: Cascading Style Sheets

flex-flow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `flex-direction`
* `flex-wrap`
Syntax
------

```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> and <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

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

### Values

See `flex-direction` and `flex-wrap` for details on the values.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| Applies to | flex containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `flex-direction`: as specified
* `flex-wrap`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

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

flex-flow =
  <'flex-direction'>  ||
  <'flex-wrap'>

```

Examples
--------

### Setting column-reverse and wrap

```css
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}
```

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-flow-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: *Ordering flex items*


Layout mode - CSS: Cascading Style Sheets

Layout mode
===========

A CSS **layout mode**, sometimes called *layout*, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:

* *Normal flow* — all elements are part of normal flow until you do something to take them out of it. Normal flow includes *block layout*, designed for laying out boxes such as paragraphs and *inline layout*, which lays out inline items such as text.
* *Table layout*, designed for laying out tables.
* *Float layout*, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.
* *Positioned layout*, designed for positioning elements without much interaction with other elements.
* *Multi-column layout*, designed for laying content out in columns as in a newspaper.
* *Flexible box layout*, designed for laying out complex pages that can be resized smoothly.
* *Grid layout*, designed for laying out elements relative to a fixed grid.

**Note:** Not all CSS properties apply to all *layout modes*. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements


text-combine-upright - CSS: Cascading Style Sheets

text-combine-upright
====================

The **`text-combine-upright`** CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

This is used to produce an effect that is known as tate-chū-yoko 縦中横 in Japanese, or as 橫向文字 in Chinese.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
text-combine-upright: none;
text-combine-upright: all;

/\* Digits values \*/
text-combine-upright: digits; /\* fits 2 consecutive digits horizontally inside vertical text \*/
text-combine-upright: digits 4; /\* fits up to 4 consecutive digits horizontally inside vertical text \*/

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

### Values

`none`

There is no special processing.

`all`

Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.

`digits <integer>?`

Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | non-replaced inline elements |
| Inherited | yes |
| Computed value | specified keyword, plus integer if 'digits' |
| Animation type | Not animatable |

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

text-combine-upright =
  none                         |
  all                          |
  [ digits <integer [2,4]>? ]

```

Examples
--------

### Using 'all' with horizontal text

The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.

#### HTML

```html
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
 class="num"
 >29</span
 >日
</p>
```

#### CSS

```css
html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}
```

#### Results

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-combine-upright |

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

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

See also
--------

* `writing-mode`, `text-orientation`


::-webkit-inner-spin-button - CSS: Cascading Style Sheets

::-webkit-inner-spin-button
===========================

**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-inner-spin-button`** CSS pseudo-element is used to style the inner part of the spinner button of number picker input elements.

Syntax
------

```css
::-webkit-inner-spin-button {
  /\* ... \*/
}
```

Examples
--------

These examples work only in browsers based on WebKit and Blink.

### Changing the cursor in the spin controls

In this example, the CSS `cursor` is changed to `pointer` whenever the cursor is positioned over the inner part of the input's spin controls.

#### HTML

```html
<input type="number" />
```

#### CSS

```css
input[type="number"]::-webkit-inner-spin-button {
  cursor: pointer;
}
```

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

* `::-webkit-textfield-decoration-container`
* Styling Form Controls – WebKit


@supports - CSS: Cascading Style Sheets

@supports
=========

 The **`@supports`** CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features.
 Using this at-rule is commonly called a *feature query*.
 The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.

Try it
------

In JavaScript, `@supports` can be accessed via the CSS object model interface `CSSSupportsRule`.

Syntax
------

 The `@supports` at-rule consists of a block of statements with a *supports condition.*
 The supports condition is a set of one or more name-value pairs (e.g., `<property>: <value>`).

```css
@supports (<supports-condition>) {
  /\* If the condition is true, use the CSS in this block. \*/
}
```

The conditions can be combined by conjunctions (`and`), disjunctions (`or`), and/or negations (`not`).

```css
@supports (<supports-condition>) and (<supports-condition>) {
  /\* If both conditions are true, use the CSS in this block. \*/
}
```

 The precedence of operators can be defined with parentheses.
 Supports conditions can use either a `<property>: <value>` declaration syntax or a `<function()>` syntax.
 The following sections describe the use of each type of supports condition.

### Declaration syntax

 The declaration syntax checks if a browser supports the specified `<property>: <value>` declaration.
 The declaration must be surrounded by parentheses.
 The following example returns true and applies the CSS style if the browser supports the expression `transform-origin: 5% 5%`:

```css
@supports (transform-origin: 5% 5%) {
}
```

### Function syntax

 The function syntax checks if a browser supports values or expressions within the function.
 The functions supported in the function syntax are described in the following sections.

#### `selector()`
Experimental

 This function evaluates if a browser supports the specified selector syntax.
 The following example returns true and applies the CSS style if the browser supports the child combinator:

```css
@supports selector(h2 > p) {
}
```

#### `font-tech()`

 This function checks if a browser supports the specified font technology for layout and rendering.
 The following example returns true and applies the CSS style if the browser supports the `COLRv1` font technology:

```css
@supports font-tech(color-COLRv1) {
}
```

The table below describes the font technologies (`<font-tech>`), including color font technologies (`<color-font-tech>`), font feature technologies (`<font-features-tech>`), and other available font technologies that can be queried using the `font-tech()` function:

| Technology | Supports |
| --- | --- |
| **`<color-font-tech>`** |  |
| `color-colrv0` | Multi-colored glyphs via COLR version 0 table |
| `color-colrv1` | Multi-colored glyphs via COLR version 1 table |
| `color-svg` | SVG multi-colored tables |
| `color-sbix` | Standard bitmap graphics tables |
| `color-cbdt` | Color bitmap data tables |
| **`<font-features-tech>`** |  |
| `features-opentype` | OpenType `GSUB` and `GPOS` tables |
| `features-aat` | TrueType `morx` and `kerx` tables |
| `features-graphite` | Graphite features, namely `Silf`, `Glat` , `Gloc` , `Feat`, and `Sill` tables |
| **Other `<font-tech>` values** |  |
| `incremental-patch` | Incremental font loading using the patch subset method |
| `incremental-range` | Incremental font loading using the range request method |
| `incremental-auto` | Incremental font loading using method negotiation |
| `variations` | Font variations in TrueType and OpenType fonts to control the font axis, weight, glyphs, etc. |
| `palettes` | Font palettes by means of `font-palette` to select one of many color palettes in the font |

#### `font-format()`

 This function checks if a browser supports the specified font format for layout and rendering.
 The following example returns true and applies the CSS style if the browser supports the `opentype` font format:

```css
@supports font-format(opentype) {
}
```

The following table describes the available formats (`<font-format>` values) that can be queried with this function:

| Format | Description | File extensions |
| --- | --- | --- |
| `collection` | OpenType Collection | `.otc`, `.ttc` |
| `embedded-opentype` | Embedded OpenType | `.eot` |
| `opentype` | OpenType | `.ttf`, `.otf` |
| `svg` | SVG Font (deprecated) | `.svg`, `.svgz` |
| `truetype` | TrueType | `.ttf` |
| `woff` | WOFF 1.0 (Web Open Font Format) | `.woff` |
| `woff2` | WOFF 2.0 (Web Open Font Format) | `.woff2` |

### The not operator

 The `not` operator precedes an expression resulting in the negation of the expression.
 The following returns true if the browser's `transform-origin` property considers `10em 10em 10em` **to be invalid:**

```css
@supports not (transform-origin: 10em 10em 10em) {
}
```

 As with any operator, the `not` operator can be applied to a declaration of any complexity.
 The following examples are both valid:

```css
@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}
```

**Note:** There is no need to enclose the `not` operator between two parentheses at the top level.
 To combine it with other operators, like `and` and `or`, the parentheses are required.

### The and operator

The `and` operator creates a new expression from the conjunction of two shorter expressions. It returns true only if **both** of the shorter expressions are also true. The following example returns true if and only if the two shorter expressions are simultaneously true:

```css
@supports (display: table-cell) and (display: list-item) {
}
```

Multiple conjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

```css
@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
 ((display: list-item) and (display: contents)) {
}
```

### The or operator

The `or` operator creates a new expression from the disjunction of two shorter expressions. It returns true if **one or both** of the shorter expressions is also true. The following example returns true if at least one of the two shorter expressions is true:

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}
```

Multiple disjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
```

**Note:** When using both `and` and `or` operators, the parentheses must be used to define the order in which they apply. Otherwise, the condition is invalid and the whole rule is ignored.

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

@supports =
  @supports <supports-condition> { <rule-list> }

<supports-condition> =
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]\*  |
  <supports-in-parens> [ or <supports-in-parens> ]\*

<supports-in-parens> =
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]

<supports-decl> =
  ( <declaration> )

```

Examples
--------

### Testing for the support of a CSS property

```css
@supports (animation-name: test) {
  /\* CSS applied when animations are supported without a prefix \*/
  @keyframes {
    /\* Other at-rules can be nested inside \*/
  }
}
```

### Testing for the support of a given CSS property or a prefixed version

```css
@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /\* CSS applied when text-stroke, prefixed or not, is supported \*/
}
```

### Testing for the non-support of a specific CSS property

```css
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /\* CSS to provide fallback alternative for text-align-last: justify \*/
}
```

### Testing for the support of a selector

CSS conditional rules provide the ability to test for the support of a selector such as `:has()`.

```css
/\* This rule won't be applied in browsers that don't support :has() \*/
ul:has(> li li) {
  /\* CSS is applied when the :has(…) pseudo-class is supported \*/
}

@supports not selector(:has(a, b)) {
  /\* Fallback for when :has() is unsupported \*/
  ul > li,
 ol > li {
    /\* The above expanded for browsers that don't support :has(…) \*/
  }
}

/\* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) \*/
@supports selector(:nth-child(1n of a, b)) {
  /\* This rule needs to be inside the @supports block, otherwise
 it will be partially applied in browsers which don't support
 the `of` argument of :nth-child(…) \*/
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /\* CSS applied when the :is(…) selector and
 the `of` argument of :nth-child(…) are both supported \*/
  }
}
```

### Testing for the support of a font technology

The following example applies the CSS style if the browser supports the `COLRv1` font technology:

```css
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

@supports font-tech(color-COLRv1) {
  font-family: "Bungee Spice";
}
```

 It's also possible to test for the support of a font technology by using the `tech` function inside the `@font-face` at-rule.
 If a browser doesn't support the font technology, a fallback font (`Bungee-fallback.otf`) can be used instead.

```css
@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}
```

### Testing for the support of a font format

The following example applies the CSS style if the browser supports the `woff2` font format:

```css
@supports font-format(woff2) {
  font-family: "Open Sans";
  src: url("open-sans.woff2") format("woff2");
}
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 4 # at-supports-ext |
| CSS Conditional Rules Module Level 3 # at-supports |

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

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

See also
--------

* Using feature queries
* The CSSOM class `CSSSupportsRule`, and the `CSS.supports()` method that allows the same check to be performed via JavaScript.


:host - CSS: Cascading Style Sheets

:host
=====

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
The **`:host`** CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

**Note:** This has no effect when used outside a shadow DOM.

Try it
------

```css
/\* Selects a shadow root host \*/
:host {
  font-weight: bold;
}
```

Syntax
------

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

Examples
--------

### Styling the shadow host

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a simple custom element — `<context-span>` — that you can wrap around text:

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:

```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```

The `:host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

See also
--------

* Web components
* `:host()`
* `:host-context()`
* `::slotted`
* CSS scoping module


grid-template-areas - CSS: Cascading Style Sheets

grid-template-areas
===================

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-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

Try it
------

Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties `grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`, and their shorthands `grid-row`, `grid-column`, and `grid-area`.

Syntax
------

```css
/\* Keyword value \*/
grid-template-areas: none;

/\* <string> values \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

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

### Values

`none`

The grid container doesn't define any named grid areas.

``<string>`+`

A row is created for every separate string listed, and a column is created for each cell in the string. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

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

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

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

grid-template-areas =
  none       |
  <string>+

```

Examples
--------

### Specifying named grid areas

#### HTML

```html
<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>
```

#### CSS

```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

See also
--------

* Related CSS properties: `grid-template-rows`, `grid-template-columns`, `grid-template`
* Grid Layout Guide: *Grid template areas*
* Video tutorial: *Grid Template Areas*


-webkit-line-clamp - CSS: Cascading Style Sheets

-webkit-line-clamp
==================

The **`-webkit-line-clamp`** CSS property allows limiting of the contents of a block to the specified number of lines.

It only works in combination with the `display` property set to `-webkit-box` or `-webkit-inline-box` and the `-webkit-box-orient` property set to `vertical`.

In most cases you will also want to set `overflow` to `hidden`, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.

When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

**Note:** This property was originally implemented in WebKit and has some issues. It got standardized in CSS Overflow Module Level 4 for legacy support. The CSS Overflow Module Level 4 specification also defines a `line-clamp` property, which is meant to replace this property and avoid its issues.

Syntax
------

```css
/\* Keyword value \*/
-webkit-line-clamp: none;

/\* <integer> values \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* Global values \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
```

### Values

`none`
Experimental

This value specifies that the content won't be clamped.

`<integer>`

This value specifies the number of lines after which the content will be clamped. It must be greater than 0.

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

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

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

-webkit-line-clamp =
  none             |
  <integer [1,∞]>

```

Examples
--------

### Truncating a paragraph

#### HTML

```html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>
```

#### CSS

```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

#### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

See also
--------

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`


<system-color> - CSS: Cascading Style Sheets

<system-color>
==============

The **`<system-color>`** CSS data type usually reflects the default color choices used for the different parts of a web page.

However, user agents can provide an accessibility feature called *forced colors mode*, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, `<system-color>` exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is high contrast mode on Windows.

In forced colors mode, authors should use colors from the `<system-color>` type for all properties that are *not* in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.

Authors can detect forced colors mode using the `forced-colors` media feature.

A `<system-color>` value can be used anywhere a `<color>` can be used.

Syntax
------

Note that these keywords are *case insensitive*, but are listed here with mixed case for readability.

`AccentColor`

Background of accented user interface controls

`AccentColorText`

Text of accented user interface controls

`ActiveText`

Text of active links

`ButtonBorder`

Base border color of controls

`ButtonFace`

Background color of controls

`ButtonText`

Text color of controls

`Canvas`

Background of application content or documents

`CanvasText`

Text color in application content or documents

`Field`

Background of input fields

`FieldText`

Text in input fields

`GrayText`

Text color for disabled items (e.g. a disabled control)

`Highlight`

Background of selected items

`HighlightText`

Text color of selected items

`LinkText`

Text of non-active, non-visited links

`Mark`

Background of text that has been specially marked (such as by the HTML `mark` element)

`MarkText`

Text that has been specially marked (such as by the HTML `mark` element)

`SelectedItem`

Background of selected items, for example, a selected checkbox

`SelectedItemText`

Text of selected items

`VisitedText`

Text of visited links

### Deprecated system color keywords

The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated for use on public web pages.

`ActiveBorder`
Deprecated

Active window border.

`ActiveCaption`
Deprecated

Active window caption. Should be used with `CaptionText` as foreground color.

`AppWorkspace`
Deprecated

Background color of multiple document interface.

`Background`
Deprecated

Desktop background.

`ButtonHighlight`
Deprecated

The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

`ButtonShadow`
Deprecated

The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

`CaptionText`
Deprecated

Text in caption, size box, and scrollbar arrow box. Should be used with the `ActiveCaption` background color.

`InactiveBorder`
Deprecated

Inactive window border.

`InactiveCaption`
Deprecated

Inactive window caption. Should be used with the `InactiveCaptionText` foreground color.

`InactiveCaptionText`
Deprecated

Color of text in an inactive caption. Should be used with the `InactiveCaption` background color.

`InfoBackground`
Deprecated

Background color for tooltip controls. Should be used with the `InfoText` foreground color.

`InfoText`
Deprecated

Text color for tooltip controls. Should be used with the `InfoBackground` background color.

`Menu`
Deprecated

Menu background. Should be used with the `MenuText` or `-moz-MenuBarText` foreground color.

`MenuText`
Deprecated

Text in menus. Should be used with the `Menu` background color.

`Scrollbar`
Deprecated

Background color of scroll bars.

`ThreeDDarkShadow`
Deprecated

The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

`ThreeDFace`
Deprecated

The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the `ButtonText` foreground color.

`ThreeDHighlight`
Deprecated

The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

`ThreeDLightShadow`
Deprecated

The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

`ThreeDShadow`
Deprecated

The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

`Window`
Deprecated

Window background. Should be used with the `WindowText` foreground color.

`WindowFrame`
Deprecated

Window frame.

`WindowText`
Deprecated

Text in windows. Should be used with the `Window` background color.

Examples
--------

### Using system colors

In this example we have a button that normally gets its contrast using the `box-shadow` property. In forced colors mode, `box-shadow` is forced to `none`, so the example uses the `forced-colors` media feature to ensure there is a border of the appropriate color (`ButtonBorder` in this case).

#### HTML

```html
<button class="button">Press me!</button>
```

#### CSS

```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* Use a border instead, since box-shadow
 is forced to 'none' in forced-colors mode \*/
    border: 2px ButtonBorder solid;
  }
}
```

#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # css-system-colors |

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

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

See also
--------

* `<color>`: the data type these keywords belong to


:-moz-last-node - CSS: Cascading Style Sheets

:-moz-last-node
===============

**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-last-node`** CSS pseudo-class is a Mozilla extension that represents any element that is the last child node of some other element. It differs from `:last-child` because it does not match a last-child element with (non-whitespace) text after it.

**Note:** Any whitespace at the end of an element is ignored for the determination of `:-moz-last-node`.

Syntax
------

```css
:-moz-last-node {
  /\* ... \*/
}
```

Examples
--------

### CSS

```css
span:-moz-last-node {
  background-color: lime;
}
```

### HTML

```html
<p>
  <span>This does not match.</span>
  <span>This matches!</span>
</p>

<p>
  <span>This doesn't match because it's followed by text.</span>
  Blahblah.
</p>
```

### Result

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

Not part of any standard.

See also
--------

* `:-moz-first-node`
* `:last-child`