grid-template - CSS: Cascading Style Sheets

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

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`** CSS property is a shorthand property for defining grid columns, grid rows, and grid areas.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
Syntax
------

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

/\* grid-template-rows / grid-template-columns values \*/
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/\* grid-template-areas grid-template-rows / grid-template-column values \*/
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom]
  / auto 1fr auto;

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

### Values

`none`

Is a keyword that sets all three longhand properties to `none`, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the `grid-auto-rows` and `grid-auto-columns` properties.

`<'grid-template-rows'> / <'grid-template-columns'>`

Sets `grid-template-rows` and `grid-template-columns` to the specified values, and sets `grid-template-areas` to `none`.

`[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`

Sets `grid-template-areas` to the strings listed, `grid-template-rows` to the track sizes following each string (filling in `auto` for any missing sizes), and splicing in the named lines defined before/after each size, and `grid-template-columns` to the track listing specified after the slash (or `none`, if not specified).

**Note:** The `repeat()` function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the "ASCII art".

**Note:** The `grid` shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use `grid` (as opposed to `grid-template`) to prevent these values from cascading in separately.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-template-columns`: `none`
* `grid-template-rows`: `none`
* `grid-template-areas`: `none`
 |
| Applies to | grid containers |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `grid-template-columns`: refer to corresponding dimension of the content area
* `grid-template-rows`: refer to corresponding dimension of the content area
 |
| Computed value | as each of the properties of the shorthand:* `grid-template-columns`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-rows`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-areas`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas`: discrete
 |

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

grid-template =
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

<line-names> =
  '[' <custom-ident>\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<explicit-track-list> =
  [ <line-names>? <track-size> ]+ <line-names>?

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

```

Examples
--------

### Defining a grid template

#### CSS

```css
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-area: foot;
}
```

#### HTML

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

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |

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-areas`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Grid Layout Guide: *Grid template areas - Grid definition shorthands*
* Video tutorial: *Grid Template shorthand*


CSS animations - CSS: Cascading Style Sheets

CSS animations
==============

The **CSS animations** module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.

### Animations in action

To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.

This sample animation uses `animation-iteration-count` to make the flakes fall repeatedly, `animation-direction` to make the cloud move back and forth, `animation-fill-mode` to raise the snow level in response to the cloud movement, and `animation-play-state` to pause the animation.

To see the code for this animation, view the source on GitHub.

Reference
---------

### Properties

* `animation` shorthand
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
* `animation-timeline`
### At-rules

* `@keyframes`
### Events

All animations, even those with 0 seconds duration, throw animation events.

* `animationstart`
* `animationend`
* `animationcancel`
* `animationiteration`
### Interfaces

* Web Animations API
* `AnimationEvent`
* `CSSKeyframeRule`
* `CSSKeyframesRule`
Guides
------

Using CSS animations

Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other.

CSS animation tips and tricks

Tips and tricks to help you get the most out of CSS animations.

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

* `will-change` CSS property
* `<easing-function>` data type
* `prefers-reduced-motion` media query
* Bezier curve glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

See also
--------

* CSS scroll-driven animations
* Properties in the transitions CSS module to trigger animations based on user actions
* The `<canvas>` HTML element along with canvas API and WebGL API to draw graphics and animations
* The `SVGAnimationElement` interface for all the animation-related element interfaces, including `SVGAnimateElement`, `SVGSetElement`, `SVGAnimateColorElement`, `SVGAnimateMotionElement`, and `SVGAnimateTransformElement`


float - CSS: Cascading Style Sheets

float
=====

The **`float`** CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

Try it
------

A *floating element* is one where the computed value of `float` is not `none`.

As `float` implies the use of the block layout, it modifies the computed value of the `display` values, in some cases:

| Specified value | Computed value |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `inline-flex` | `flex` |
| `inline-grid` | `grid` |
| *other* | *unchanged* |

**Note:** If you're referring to this property from JavaScript as a member of the `HTMLElement.style` object, modern browsers support `float`, but in older browsers you have to spell it as `cssFloat`. This was an exception to the rule, that the name of the DOM member is the camel-case name of the hyphenated CSS name (because "float" is a reserved word in JavaScript, as seen in the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor").

Syntax
------

```css
/\* Keyword values \*/
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

The `float` property is specified as a single keyword, chosen from the list of values below.

### Values

`left`

The element must float on the left side of its containing block.

`right`

The element must float on the right side of its containing block.

`none`

The element must not float.

`inline-start`

The element must float on the start side of its containing block. That is the left side with `ltr` scripts, and the right side with `rtl` scripts.

`inline-end`

The element must float on the end side of its containing block. That is the right side with `ltr` scripts, and the left side with `rtl` scripts.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements, but has no effect if the value of `display` is `none`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

float =
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote

<snap-block()> =
  snap-block( <length> , [ start | end | near ]? )

<snap-inline()> =
  snap-inline( <length> , [ left | right | near ]? )

```

Examples
--------

### How floated elements are positioned

As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, *or another floated element*.

In this example, there are three colored squares. Two are floated left, and one is floated right. Note that the second "left" square is placed to the right of the first. Additional squares would continue to stack to the right, until they filled the containing box, after which they would wrap to the next line.

A floated element is at least as tall as its tallest nested floated children. We gave the parent `width: 100%` and floated it to ensure it is tall enough to encompass its floated children, and to make sure it takes up the width of the parent so we don't have to clear its adjacent sibling.

#### HTML

```html
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>
```

#### CSS

```css
section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}
```

#### Result

### Clearing floats

Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See `clear` for examples.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

See also
--------

* Block formatting context
* Use `clear` to force an item to move below a floated element.


Namespace separator - CSS: Cascading Style Sheets

Namespace separator
===================

The **namespace separator** (`|`) separates the selector from the namespace, identifying the namespace, or lack thereof, for a type selector.

```css
/\* Links in the namespace named myNameSpace \*/
myNameSpace|a {
  font-weight: bold;
}
/\* paragraphs in any namespace (including no namespace) \*/
\*|p {
  color: darkblue;
}
/\* heading level 2 not in a namespace \*/
|h2 {
  margin-bottom: 0;
}
```

Type selectors and the universal selector allow an optional namespace component. When a namespace has been previously declared via `@namespace`, these selectors can be namespaced by prepending the selector with the name of the namespace separated by the namespace separator (`|`). This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

* `ns|h1` - matches `<h1>` elements in namespace `ns`
* `*|h1` - matches all `<h1>` elements
* `|h1` - matches all `<h1>` elements outside of any declared or implied namespace
Syntax
------

```css
namespace|element { style properties }
```

Examples
--------

By default, all elements in an HTML or SVG element have a namespace as the `http://www.w3.org/1999/xhtml` and `http://www.w3.org/2000/svg` namespace are implied. The `document.createElementNS` method, with an empty string for the namespace parameter, can be used to create elements with no namespace.

### Named namespace example

In this example, all elements are in a namespace.

#### HTML

No namespaces are explicitly declared in the HTML or within the SVG.

```html
<p>This paragraph <a href="#">has a link</a>.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG</text>
  </a>
</svg>
```

#### CSS

The CSS declares two namespaces, then assigns styles to links globally (`a`), to links in no namespace (`|a`), to links in any namespace or no namespace (`*|a`), and then to two different named namespaces (`svgNamespace|a` and `htmlNameSpace|a`).

```css
@namespace svgNamespace url("http://www.w3.org/2000/svg");
@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml");
/\* All `<a>`s in the default namespace, in this case, all `<a>`s \*/
a {
  font-size: 1.4rem;
}
/\* no namespace \*/
|a {
  text-decoration: wavy overline lime;
  font-weight: bold;
}
/\* all namespaces (including no namespace) \*/
\*|a {
  color: red;
  fill: red;
  font-style: italic;
}
/\* only the svgNamespace namespace, which is <svg> content \*/
svgNamespace|a {
  color: green;
  fill: green;
}
/\* The htmlNameSpace namespace, which is the HTML document \*/
htmlNameSpace|a {
  text-decoration-line: line-through;
}
```

#### Result

The selector `|a`, a link not in a namespace, doesn't match any links. In HTML, the `http://www.w3.org/1999/xhtml` is implied, meaning all HTML is in a namespace, even if none is explicitly declared. In SVG, even if not explicitly set, the `http://www.w3.org/2000/svg` namespace is also implied. This means all the content is within at least one namespace.

### Default namespace and no namespace

In this example, we use JavaScript to create an element without a namespace and append it to the document. We set the SVG namespace to be the default namespace by defining the unnamed namespace with `@namespace`.

**Note:** If a default, or unnamed, namespace is defined, universal and type selectors apply only to elements in that namespace.

#### HTML

No namespaces are explicitly declared in the HTML or within the SVG.

```html
<p><a href="#">A link</a> in the implied HTML namespace.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG namespace</text>
  </a>
</svg>
```

#### JavaScript

With JavaScript, with `document.createElementNS`, we create an anchor link without a namespace, then append the link.

```js
// create 'no namespace' anchor
const a = document.createElementNS("", "a");
a.href = "#";
a.appendChild(document.createTextNode("Link created without a namespace"));

document.body.appendChild(a);
```

#### CSS

We declare a namespace with `@namespace`. By omitting the name for the namespace, the `@namespace` declaration creates a default namespace.

```css
/\* By omitting a name, this sets SVG as the default namespace \*/
@namespace url("http://www.w3.org/2000/svg");

/\* `<a>` in the default (set to SVG) namespace \*/
a {
  font-size: 1.4rem;
}

/\* `<svg>` and `<p>` in the default (set to SVG) namespace \*/
svg,
p {
  border: 5px solid gold;
}

/\* links outside of any namespace \*/
|a {
  text-decoration: wavy underline purple;
  font-weight: bold;
}

/\* links with any namespace or no namespace \*/
\*|a {
  font-style: italic;
  color: magenta;
  fill: magenta;
}
```

#### Result

The selector with no namespace separator, the `a`, matched only the SVG `<a>` elements, as SVG was set as the default namespace.

The selector with no namespace, the `|a`, matched the JavaScript defined and appended `<a>`, as that node is the only node that doesn't have a default namespace.

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

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

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

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

See also
--------

* `@namespace`
* `Document.createElementNS()` method
* `Element.namespaceURI` property
* CSS type selector
* CSS universal selector
* CSS selector module


CSS selectors - CSS: Cascading Style Sheets

CSS selectors
=============

The **CSS selectors** module defines the patterns to select elements to which a set of CSS rules are then applied along with their `specificity`. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a `NodeList`.

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Reference
---------

### Combinators and separators

* `+` (Next-sibling combinator)
* `>` (Child combinator)
* `||` (Column combinator)
Experimental
* `~` (Subsequent sibling combinator)
* " " (Descendant combinator)
* `|` (Namespace separator)
### Selectors

* `:active`
* `:any-link`
* `:autofill`
* `:blank`
* `:buffering`
* `:checked`
* `:current`
* `:current()`
* `:default`
* `:defined`
* `:dir()`
* `:disabled`
* `:empty`
* `:enabled`
* `:first-child`
* `:first-of-type`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `:fullscreen`
* `:future`
* `:has()`
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is()`
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:link`
* `:local-link`
* `:matches()` (obsolete legacy selector alias for `:is()`)
* `:modal`
* `:muted`
* `:not()`
* `:nth-child()`
* `:nth-of-type()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:past`
* `:paused`
* `:picture-in-picture`
* `:placeholder-shown`
* `:playing`
* `:read-only`
* `:read-write`
* `:required`
* `:root`
* `:scope`
* `:seeking`
* `:stalled`
* `:target`
* `:target-within`
* `:user-invalid`
* `:user-valid`
* `:valid`
* `:visited`
* `:volume-locked`
* `:where()`
* `:-webkit-` pseudo-classes
* Attribute selectors
* Class selector
* ID selectors
* Type selectors
* Universal selectors
Terms
-----

* Pseudo-class glossary term
* Functional pseudo-classes
* Combinators
* Simple selector
* Compound selector
* Complex selector
* Relative selector
* Selector list
* Specificity
Guides
------

CSS selectors and combinators

Overview of the different types of simple selectors and various combinators defined in the CSS selectors and the CSS pseudo modules.

CSS selector structure

Explanation of the structure of CSS selectors and the terminologies introduced in the CSS selectors module, ranging from "simple selector" to "forgiving relative selector list".

Pseudo classes

Lists the pseudo-classes, selectors that allow the selection of elements based on state information that is not contained in the document tree, defined in the various CSS modules and HTML.

Learn: CSS selectors

Part of CSS building blocks, includes tutorials on Type, class, and ID selectors, Attribute selectors, Pseudo-classes and pseudo-elements, Combinators, Cascade, specificity, and inheritance, and Cascade layers.

Using the `:target` pseudo-class in selectors

Learn how to use the `:target` pseudo-class to style the target element a URL's fragment identifier.

Learn: UI pseudo-classes

Learn the different UI pseudo-classes available for styling forms in different states.

Locating DOM elements using selectors

The selectors API enables using selectors in JavaScript to retrieve element nodes from the DOM.

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

* `:popover-open` pseudo-class
* CSS nesting module
    + : `&` nesting selector
* CSS scoping module
    + `:host` pseudo-class
    + `:host()` pseudo-class
    + `:host-context()` pseudo-class
    + `::slotted` pseudo-element
* CSS pseudo-element module (representing entities not included in HTML)
    + `::after`
    + `::before`
    + `::file-selector-button`
    + `::first-letter`
    + `::first-line`
    + `::grammar-error`
    + `::marker`
    + `::placeholder`
    + `::selection`
    + `::spelling-error`
    + `::target-text`
* CSS shadow parts module
    + `::part` pseudo-element
* CSS positioned layout module
    + `::backdrop`
* Other pseudo-elements
    + `::cue`
    + `::cue-region`
* `@namespace` at-rule
* `!important`
* Specificity
* Cascade
* `Document.querySelector` method
* `Document.querySelectorAll` method
* `NodeList.forEach()` method
Specifications
--------------

| Specification |
| --- |
| Selectors Level 4  |

See also
--------

* CSS pseudo-element module
* CSS cascade and inheritance module
* CSS nesting module
* Using shadow DOM


box-flex - CSS: Cascading Style Sheets

box-flex
========

**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 for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for '`box-flex`' (which were based on this property) or the behavior of '`-webkit-box-flex`' (which is based on those drafts). See flexbox for information about the current standard.

The **`-moz-box-flex`** and **`-webkit-box-flex`** CSS properties specify how a `-moz-box` or `-webkit-box` grows to fill the box that contains it, in the direction of the containing box's layout.

Syntax
------

```css
/\* <number> values \*/
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;

/\* Global values \*/
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: revert;
-moz-box-flex: revert-layer;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: revert;
-webkit-box-flex: revert-layer;
-webkit-box-flex: unset;
```

The `box-flex` property is specified as a `<number>`. If the value is 0, the box does not grow. If it is greater than 0, the box grows to fill a proportion of the available space.

Notes
-----

The containing box allocates the available extra space in proportion to the flex value of each of the content elements.

Content elements that have zero flex do not grow.

If only one content element has nonzero flex, then it grows to fill the available space.

Content elements that have the same flex grow by the same absolute amounts.

If the flex value is set using the element's `flex` attribute, then the style is ignored.

To make XUL elements in a containing box the same size, set the containing box's `equalsize` attribute to the value `always`. This attribute does not have a corresponding CSS property.

A trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. `height: 0`), and the same `box-flex` value greater than zero (e.g. `-moz-box-flex: 1`).

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | elements that are direct children of an element with a CSS `display` value of `-moz-box` or `-moz-inline-box` or `-webkit-box` or `-webkit-inline-box` |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-flex =
  <number>
```

Examples
--------

### Setting box-flex

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>-moz-box-flex example</title>
    <style>
 div.example {
 display: -moz-box;
 display: -webkit-box;
 border: 1px solid black;
 width: 100%;
 }
 div.example > p:nth-child(1) {
 -moz-box-flex: 1; /\* Mozilla \*/
 -webkit-box-flex: 1; /\* WebKit \*/
 border: 1px solid black;
 }
 div.example > p:nth-child(2) {
 -moz-box-flex: 0; /\* Mozilla \*/
 -webkit-box-flex: 0; /\* WebKit \*/
 border: 1px solid black;
 }
 </style>
  </head>
  <body>
    <div class="example">
      <p>I will expand to fill extra space</p>
      <p>I will not expand</p>
    </div>
  </body>
</html>
```

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-orient`
* `box-pack`
* `box-direction`
* `flex`


box-ordinal-group - CSS: Cascading Style Sheets

box-ordinal-group
=================

**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. It has been replaced in the specification. See flexbox for information about the current standard.

The **`box-ordinal-group`** CSS property assigns the flexbox's child elements to an ordinal group.

Ordinal groups may be used in conjunction with the `box-direction` property to control the order in which the direct children of a box appear. When the computed `box-direction` is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container. Elements with the same ordinal group are flowed in the order they appear in the source document tree. In the reverse direction, the ordinal groups are examined in the same order, except the elements appear reversed.

Syntax
------

```css
/\* <integer> values \*/
box-ordinal-group: 1;
box-ordinal-group: 5;

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

The `box-ordinal-group` property is specified as any positive `<integer>`.

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

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | children of box elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-ordinal-group =
  <integer>
```

Examples
--------

### Basic usage example

In an older version of the spec, `box-ordinal-group` was included to allow you to change the display order of flex children inside a flex container:

```css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
}
```

The modern flexbox equivalent is `order`.

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

* `flex`
* `flex-basis`
* `flex-grow`
* `flex-shrink`


ray() - CSS: Cascading Style Sheets

ray()
=====

The **`ray()`** CSS function defines the `offset-path` line segment that an animated element can follow. The line segment is referred to as "ray". The ray begins from an `offset-position` and extends in the direction of the specified angle. The length of a ray can be constrained by specifying a size and using the `contain` keyword.

Syntax
------

```css
/\* offset-path: ray(parameters) \*/

/\* all parameters specified \*/
offset-path: ray(50deg closest-corner contain at 100px 20px);

/\* two parameters specified, order does not matter \*/
offset-path: ray(contain 200deg);

/\* only one parameter specified \*/
offset-path: ray(45deg);
```

### Parameters

The parameters can be specified in any order.

`<angle>`

Specifies the direction in which the line segment extends from the offset starting position. The angle `0deg` lies on the y-axis pointing up, and positive angles increase in the clockwise direction.

`<size>`

Specifies the length of the line segment, which is the distance between `offset-distance` `0%` and `100%`, relative to the containing box. It is an optional parameter (`closest-side` is used if no `<size>` is specified) and accepts one of the following keyword values:

`closest-side`: Distance between the ray's starting point and the closest side of the containing block of the element. If the ray's starting point lies on an edge of the containing block, the length of the line segment is zero. If the ray's starting point is outside the containing block, the edge of the containing block is considered to extend to infinity.

`closest-corner`: Distance between the ray's starting point and the closest corner in the element's containing block. If the ray's starting point lies on a corner of the containing block, the length of the line segment is zero.

`farthest-side`: Distance between the ray's starting point and the farthest side of the containing block of the element. If the ray's starting point is outside the containing block, the edge of the containing block is considered to extend to infinity.

`farthest-corner`: Distance between the ray's starting point and the farthest corner in the element's containing block.

`sides`: Distance between the ray's starting point and the point where the line segment intersects the containing block's boundary. If the starting point is on or outside the containing block's boundary, the length of the line segment is zero.

**Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support.

`contain`

Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced by half the width or half the height of the element's border box, whichever is greater, but never going less than zero. It is an optional parameter.

`at <position>`

Specifies the point where the ray begins and where the element is placed in its containing block. This is an optional parameter. If omitted, the value used is the `offset-position` value of the element. If omitted and the element doesn't have an `offset-position` value, the value used for ray's starting position is `offset-position: auto`, which places the element at the `top left` corner of the element's box.

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

The `ray()` function allows the positioning of an element along a path using polar coordinates, rather than using the standard rectangular coordinates used by the `translate()` function or using animation to move an element along a defined path. The `ray()` function helps to create 2D spatial transitions.

The element is initially positioned by moving the element's `offset-anchor` point to the element's offset starting position. The default offset starting position of a ray is the default `offset-position` value: `auto`. If `offset-position` is explicitly specified as `auto` or omitted and allowed to default, the offset starting position is the `top left` corner (or `0 0`) of the element's box. With `offset-position: normal`, the starting position of the ray is `50%, 50%` of the element's containing block.

The `<coord-box>` value of the `offset-path` property provides the reference box for the ray path.

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

<ray()> =
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )

<ray-size> =
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

```

Examples
--------

### Defining the angle and starting position for a ray

This example shows how to work with an element's anchor point, how the element gets oriented at the specified ray angle, and how to change a ray's starting point.

#### CSS
```

.container {
  position: relative;
  width: 600px;
  height: 100px;
  border: 1px dashed black;
  margin: 0 2em 4em 5em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}
```

```css
.box {
  background-color: palegreen;
  border-top: 4px solid black;
  position: absolute;
  opacity: 20%;
}

.box1 {
  offset-path: ray(0deg closest-side);
}

.box2 {
  offset-anchor: 0 0;
  offset-path: ray(0deg closest-side);
}

.box3 {
  offset-anchor: 0 0;
  offset-path: ray(150deg closest-side);
}

.box4 {
  offset-rotate: 0deg;
  offset-anchor: 0 0;
  offset-position: 20% 30%;
  offset-path: ray(closest-side 150deg);
}

.box5 {
  offset-rotate: 0deg;
  offset-path: ray(100deg closest-side at bottom right);
}
```

```
<div class="container">
  <div class="box">0</div>
  <div class="box box0">0</div>
  <pre>/* original */</pre>
</div>

<div class="container">
  <div class="box">0</div>
  <div class="box box1">1</div>
  <pre>
    offset-path: ray(0deg closest-side);
    /* Offset starting position is top-left corner */
  </pre>
</div>

<div class="container">
  <div class="box">0</div>
  <div class="box box2">2</div>
  <pre>
    offset-anchor: 0 0;
    offset-path: ray(0deg closest-side);
    /* Anchor and starting position are at the top-left corner */
  </pre>
</div>

<div class="container">
  <div class="box">0</div>
  <div class="box box3">3</div>
  <pre>
    offset-anchor: 0 0;
    offset-path: ray(150deg closest-side);
  </pre>
</div>

<div class="container">
  <div class="box">0</div>
  <div class="box box4">4</div>
  <pre>
    offset-anchor: 0 0;
    offset-position: 20% 30%;
    offset-rotate: 0deg;
    offset-path: ray(closest-side 150deg);
  </pre>
</div>

<div class="container">
  <div class="box">0</div>
  <div class="box box5">5</div>
  <pre>
    offset-rotate: 0deg;
    offset-path: ray(100deg closest-side at bottom right);
  </pre>
</div>
```

Similar to `transform-origin`, the default anchor point is at the center of an element. This anchor point can be modified using the `offset-anchor` property.

In this example, various `offset-anchor` and `offset-path: ray()` values are applied to a box. Results are displayed side-by-side for comparison. The element's containing block is depicted with a dashed border. One border of the box is highlighted to demonstrate different ray starting points and box orientations. After a box is positioned at the ray's starting point, it is oriented in the direction of the specified ray angle. If `offset-position` is not specified, the default offset starting position of a ray is the top-left corner of the element's containing block.

#### Result

* `box1` gets initially positioned such that its anchor point (at the center) is at the offset starting position (top-left corner of the box). `box1` is also rotated to orient it towards the `0deg` angle of the ray. This will now be the starting point of the path. You can observe the change in position and rotation of the box by comparing it to the faded `box0` in the background.
* The anchor point of `box2` is changed to the top-left corner (`0px 0px`) using the `offset-anchor` property, and as a result, the element's anchor point and the offset starting position coincide. The ray angle is applied to the element at this starting point. The box is rotated to match the `0deg` angle along y-axis and pointing up.
* With other settings the same as in `box2`, a greater positive angle of `150deg` is applied in `box3`. Starting from the top-left corner, the box is rotated in a clockwise direction to reach the specified angle of `150deg`.
* `box3` and `box4` have the same `offset-anchor` and `offset-path` values. In `box4`, however, an `offset-rotate` of `0deg` is applied to the element. As a result, the element will remain rotated at this specific angle all along the ray's path, and the element will not rotate in the direction of the path. Notice in `box4` that the ray path is at `150deg`, but the box orientation will not change along the path because of `offset-rotate`. Also note that the `offset-path` property of `box4` does not specify a starting `<position>`, so the ray's starting position is derived from the element's `offset-position`, which in this case is `top 20% left 30%`.
* In `box5`, the `offset-path` property specifies the `at <position>` value, which places the box at the `bottom` and `right` edge of the element's containing block.
### Animating an element along the ray

In this example, the first shape is shown as a reference for its position and orientation. A ray motion path is applied on the other shapes.

#### CSS

```css
body {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 40px;
  margin-left: 40px;
}

.container {
   transform-style: preserve-3d;
   width: 150px;
   height: 100px;
   border: 2px dotted green;
}

.shape {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 5px;
  text-align: center;
  line-height: 40px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;
}

.shape2 {
  offset-path: ray(120deg sides contain);
}

.shape3 {
  offset-rotate: 0deg;
  offset-path: ray(120deg sides contain);
}

.shape4 {
  offset-path: ray(120deg closest-corner);
}

.shape5 {
  offset-path: ray(120deg farthest-corner);
}

@keyframes move {
  0%, 20% {
    offset-distance: 0%;
  }
  80%, 100% {
    offset-distance: 100%;
  }
```

```
<div>
  <div class="container">
    <div class=" shape shape1">—</div>
  </div>
</div>

<pre>/* no offset-path applied */</pre>

<div>
  <div class="container">
    <div class="shape shape2">—</div>
  </div>
</div>

<pre>offset-path: ray(120deg sides contain);</pre>

<div>
  <div class="container">
    <div class="shape shape3">—</div>
  </div>
</div>

<pre>offset-path: ray(120deg sides contain);
offset-rotate: 0deg;</pre>

<div>
  <div class="container">
    <div class="shape shape4">—</div>
  </div>
</div>

<pre>offset-path: ray(120deg closest-corner)</pre>

<div>
  <div class="container">
    <div class="shape shape5">—</div>
  </div>
</div>

<pre>offset-path: ray(120deg farthest-corner)</pre>
</div>
```

#### Result

In the first two samples where `offset-path` is applied, notice the orientation of the shape without `offset-rotate` and with `offset-rotate`. The last two `offset-path` samples show the impact of corner `<size>` values: `closest-corner` and `farthest-corner`. The `closest-corner` value creates a very short offset-path because the shape is already at the corner. The `farthest-corner` value creates the longest offset-path, going from the top-left corner of the containing block to the bottom-right corner.

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

| Specification |
| --- |
| Motion Path Module Level 1 # ray-function |

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

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

See also
--------

* `offset-distance`
* `offset-path`
* `offset-rotate`


mask-size - CSS: Cascading Style Sheets

mask-size
=========

The **`mask-size`** CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.

**Note:** If the value of this property is not set in a `mask` shorthand property that is applied to the element after the `mask-size` CSS property, the value of this property is then reset to its initial value by the shorthand property.

Syntax
------

```css
/\* Keywords syntax \*/
mask-size: cover;
mask-size: contain;

/\* One-value syntax \*/
/\* the width of the image (height set to 'auto') \*/
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

/\* Two-value syntax \*/
/\* first value: width of the image, second value: height \*/
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

/\* Multiple values \*/
/\* Do not confuse this with mask-size: auto auto \*/
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

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

One or more `<bg-size>` values, separated by commas.

A `<bg-size>` can be specified in one of three ways:

* using the keyword `contain`
* using the keyword `cover`
* using width and height values

To specify a size using width and height, you can supply one or two values:

* If only one value is given it sets the width, with the height set to `auto`.
* If two values are given, the first sets width and the second sets height.

Each value can be a `<length>`, a `<percentage>`, or `auto`.

### Values

`<length>`

A ``<length>`` value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed.

`<percentage>`

A `<percentage>` value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of `mask-origin`. The mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. Negative percentages are not allowed.

`auto`

A keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion.

`contain`

A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image is *letterboxed* within the container. The image is automatically centered unless over-ridden by another property such as `mask-position`.

`cover`

A keyword that is the inverse of `contain`. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, *the image is clipped* either on left/right or at top/bottom.

The interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). A bitmap image always has intrinsic dimensions and an intrinsic proportion. A vector image may have both intrinsic dimensions and thus it has an intrinsic proportion too. It also may have one or no intrinsic dimensions and in either case it might or might not have an intrinsic proportion. Gradients are treated as images with no intrinsic dimensions or intrinsic proportion.

The rendered size of the mask image is then computed as follows:

If both components of `mask-size` are specified and are not `auto`:

The mask image renders at the specified size.

If the `mask-size` is `contain` or `cover`:

The image is rendered by preserving its intrinsic proportion at the largest size contained within or covering the mask positioning area. If the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area.

If the `mask-size` is `auto` or `auto auto`:

If the image has both intrinsic dimensions, it is rendered at that size. If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the mask positioning area. If it has no dimensions but has a proportion, it's rendered as if `contain` had been specified instead. If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion. If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area.

If `mask-size` has one `auto` component and one non-`auto` component:

If the image has an intrinsic proportion, then render it using the specified dimension and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the mask positioning area.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a repeatable list |

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

mask-size =
  <bg-size>#

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

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

```

Examples
--------

### Setting mask size as a percentage

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-size |

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

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

See also
--------

* Clipping and Masking in CSS


<overflow> - CSS: Cascading Style Sheets

<overflow>
==========

Baseline 2022
-------------

Newly availableSince September 2022, 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 **`<overflow>`** enumerated value type represents the keyword values for the `overflow-block`, `overflow-inline`, `overflow-x`, and `overflow-y` longhand properties and the `overflow` shorthand property. These properties apply to block containers, flex containers, and grid containers.

Syntax
------
```

<overflow> = visible | hidden | clip | scroll | auto
```

Values
------

The `<overflow>` enumerated value type is specified using one of the values listed below.

`visible`

Overflow content is not clipped and may be visible outside the element's padding box. The element box is not a scroll container. This is the default value for all the properties that have the `<overflow>` enumerated value type.

`hidden`

Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scrollbars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content *can* be scrolled programmatically (for example, by setting the value of the `scrollLeft` property or the `scrollTo()` method). The content can also be scrolled via keyboard interaction; arrows enable scrolling through the content and tabbing to a focusable element within the hidden content enables scrolling the focused element into view. The element box on which this value is set is a scroll container.

`clip`

Overflow content is clipped at the element's *overflow clip edge* that is defined using the `overflow-clip-margin` property. As a result, content overflows the element's padding box by the `<length>` value of `overflow-clip-margin` or by `0px` if not set. Overflow content outside the clipped region is not visible, user agents do not add a scrollbar, and programmatic scrolling is also not supported. No new formatting context is created.

`scroll`

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scrollbars. User agents display scrollbars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword value, therefore, can prevent scrollbars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box on which this value is set is a scroll container.

`auto`

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scrollbars *only if* the content is overflowing and hide scrollbars by default. If content fits inside the element's padding box, it looks the same as with `visible` but still establishes a new formatting context. The element box on which this value is set is a scroll container.

**Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

Examples
--------

This example demos all the `<overflow>` enumerated values for the `overflow` property.

### HTML

The HTML in this example contains some lyrics within the `<pre>` element. The HTML also contains a link text to enable testing the effects of keyboard focus on overflow and scroll behaviors. The same HTML code is repeated multiple times to show the effect of each `<overflow>` enumerated value.

```html
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
```

```
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
```

### CSS

For the purpose of demonstration, the size of the `<pre>` element box has been defined to ensure that the content overflows its container in both the inline and block directions. A different `<overflow>` value is set for each of the repeating `<pre>` elements. For the `clip` value demonstration, a `overflow-clip-margin` has been added.
```

pre {
  border: 2px dashed red;
  margin-bottom: 3em;
}

::before {
  font-weight: bold;
  color: white;
  background: crimson;
  display: inline-block;
  width: 100%;
  padding: 3px 5px;
  box-sizing: border-box;
}
```

```css
pre {
  block-size: 100px;
  inline-size: 295px;
}

pre:nth-of-type(1) {
  overflow: hidden;
}
pre:nth-of-type(1)::before {
  content: "hidden: ";
}

pre:nth-of-type(2) {
  overflow: clip;
  overflow-clip-margin: 1em;
}
pre:nth-of-type(2)::before {
  content: "clip: ";
}

pre:nth-of-type(3) {
  overflow: scroll;
}
pre:nth-of-type(3)::before {
  content: "scroll: ";
}

pre:nth-of-type(4) {
  overflow: auto;
}
pre:nth-of-type(4)::before {
  content: "auto: ";
}

pre:nth-of-type(5) {
  overflow: clip;
  overflow: overlay;
  overflow-clip-margin: 3em;
}
pre:nth-of-type(5)::before {
  content: "overlay (or clip if not supported): ";
}

pre:nth-of-type(6) {
  overflow: visible;
}
pre:nth-of-type(6)::before {
  content: "visible: ";
}
```

### Result

To see the effect of keyboard focus on overflow and scroll behaviors, try tabbing through all the links in the example. Notice that the `clip` box does not create a scroll container, and the link does not come into view when the link is focused. The `visible` value, which has the link always in view, is also not a scroll container.

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

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

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

See also
--------

* Properties that use this data type: `overflow-x`, `overflow-y`, `overflow-inline`, `overflow-block` and `overflow`
* CSS overflow module


CSS Tutorials - CSS: Cascading Style Sheets

CSS Tutorials
=============

 Learning CSS may be a daunting task.
 In order to help you, we have written numerous **tutorials about CSS**.
 Some are aimed at complete beginners, while others present complex features to be used by more experienced users.

 This page lists them all, with a short description.
 They are grouped by complexity so that you can choose the most appropriate for your level.

Beginner-level CSS tutorials
----------------------------

CSS basics

 This guide is aimed at complete beginners: You haven't written one single line of CSS? — this is for you.
 It explains the fundamental concepts of the language and guides you in writing basic stylesheets.

Using multiple backgrounds

Backgrounds are fundamental for nice styling: CSS allows you to set several of them on each box. This tutorial explains how they interact and how to achieve nice effects.

Resizing background images

 CSS allows you to resize images used as an element's background.
 This tutorial describes how to achieve this in a simple way.

Using media queries

 The size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays.
 Media queries are the fundamental building blocks in building websites that render everywhere in their best quality.

Understanding CSS z-index

 Controlling superposition of boxes is a basic feature that is very quickly needed by Web developers.
 Though not that difficult, it requires a basic knowledge of CSS.

Intermediate-level CSS tutorials
--------------------------------

 After the release of CSS 2 (Level 1), new features have been added to CSS.
 Some of them are *fancy* and are pretty self-contained.
 They are easy to use for anybody with a fair knowledge of basic concepts.

CSS Counter Styles

Counting items and pages is an easy task in CSS. Learn to use `counter-reset`, `counter-increment`, `counters()`, and `counter()`.

CSS Animations

CSS Animations allow you to define configurations of style, as keyframes, and to transition between them defining an animation.

CSS Transitions

CSS Transitions allow you to define an animation between several styles and to control the way this transition happens.

CSS Transforms

Transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2D or 3D spaces.

CSS Gradients

 Gradients are images that transition smoothly from one color to another.
 There are several types of gradients allowed in CSS: linear or radial, repeating or not.
 This tutorial describes how to use them.

Advanced-level CSS tutorials
----------------------------

 CSS also got new features allowing you to create complex layouts.
 Though the simplest way to achieve such layout, they are more complex to use for people without too much experience.

CSS multi-column layouts

 CSS3 introduces a new layout allowing you to easily define multiple columns in an element.
 Though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes.

CSS flexible boxes layouts

 This new layout allow you to give boxes flexibility, allowing them to be resized smoothly.
 It is a powerful way to describe complex interfaces.


cursor - CSS: Cascading Style Sheets

cursor
======

The **`cursor`** CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

 The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on.
 You can specify either the *type* of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback).

Try it
------

Syntax
------

```css
/\* Keyword value \*/
cursor: auto;
cursor: pointer;
/\* … \*/
cursor: zoom-out;

/\* URL with mandatory keyword fallback \*/
cursor: url(hand.cur), pointer;

/\* URL and coordinates, with mandatory keyword fallback \*/
cursor:
  url(cursor\_1.png) 4 12,
  auto;
cursor:
  url(cursor\_2.png) 2 2,
  pointer;

/\* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback \*/
cursor:
  url(cursor\_1.svg) 4 5,
  url(cursor\_2.svg),
  /\* …, \*/ url(cursor\_n.cur) 5 5,
  progress;

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

 The `cursor` property is specified as zero or more `<url>` values, separated by commas, followed by a single mandatory keyword value.
 Each `<url>` should point to an image file.
 The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).

Each `<url>` may be optionally followed by a pair of space-separated numbers, which set the `<x>` and `<y>` coordinates of the cursor's hotspot relative to the top-left corner of the image.

### Values

`<url>` Optional

 A `url()` or a comma separated list `url(), url(), …`, pointing to an image file.
 More than one `url()` may be provided as fallbacks, in case some cursor image types are not supported.
 A non-URL fallback (one or more of the keyword values) *must* be at the end of the fallback list.

`<x>`, `<y>` Optional

Optional x- and y-coordinates indicating the cursor hotspot; the precise position within the cursor that is being pointed to.

 The numbers are in units of image pixels.
 They are relative to the top left corner of the image, which corresponds to "`0 0`", and are clamped within the boundaries of the cursor image.
 If these values are not specified, they may be read from the file itself, and will otherwise default to the top-left corner of the image.

`keyword`

A keyword value *must* be specified, indicating either the type of cursor to use, or the fallback cursor to use if all specified icons fail to load.

The available keywords are listed in the table below. Other than `none`, which means no cursor, there is an image showing how the cursors used to be rendered. You can hover your mouse over the table rows to see the effect of the different cursor keyword values on your browser today.

| Category | Keyword | Example | Description |
| --- | --- | --- | --- |
| General | `auto` |  | The UA will determine the cursor to display based on the current context. E.g., equivalent to `text` when hovering text. |
| `default` | wide arrow pointing up and to the left | The platform-dependent default cursor. Typically an arrow. |
| `none` |  | No cursor is rendered. |
| Links & status | `context-menu` | wide arrow pointing up and to the left slightly obscuring a menu icon | A context menu is available. |
| `help` | wide arrow pointing up and to the left next to a question mark | Help information is available. |
| `pointer` | right hand with an index finger pointing up | The cursor is a pointer that indicates a link. Typically an image of a pointing hand. |
| `progress` | wide arrow and hour glass |
 The program is busy in the background, but the user can still interact
 with the interface (in contrast to `wait`).
  |
| `wait` | hour glass |
 The program is busy, and the user can't interact with the interface (in contrast to `progress`).
 Sometimes an image of an hourglass or a watch.
  |
| Selection | `cell` | wide plus symbol | The table cell or set of cells can be selected. |
| `crosshair` | plus symbol composed of two thin lines. | Cross cursor, often used to indicate selection in a bitmap. |
| `text` | vertical i-beam | The text can be selected. Typically the shape of an I-beam. |
| `vertical-text` | horizontal i-beam | The vertical text can be selected. Typically the shape of a sideways I-beam. |
| Drag & drop | `alias` | wide arrow pointing up and to the left partially obscuring a smaller folder icon with a curved arrow pointing up and to the right | An alias or shortcut is to be created. |
| `copy` | wide arrow pointing up and to the left partially obscuring a smaller folder icon with a plus sign | Something is to be copied. |
| `move` | plus sign made of two thin lines. The four points are small arrows facing out | Something is to be moved. |
| `no-drop` | pointer icon and a not allowed icon |
 An item may not be dropped at the current location.[Firefox bug 275173](https://bugzil.la/275173):
 On Windows and macOS, `no-drop` is the same as `not-allowed`.
  |
| `not-allowed` | Not allowed icon, which is a circle with a line through it | The requested action will not be carried out. |
| `grab` | fully opened hand icon | Something can be grabbed (dragged to be moved). |
| `grabbing` | closed hand icon, of the back of the hand | Something is being grabbed (dragged to be moved). |
| Resizing & scrolling | `all-scroll` | icon of a medium size dot with four triangles around it. |
 Something can be scrolled in any direction (panned).[Firefox bug 275174](https://bugzil.la/275174):
 On Windows, `all-scroll` is the same as `move`.
  |
| `col-resize` | col-resize.gif |
 The item/column can be resized horizontally.
 Often rendered as arrows pointing left and right with a vertical bar separating them.
  |
| `row-resize` | two narrow parallel horizontal lines with a small arrow pointing up and another pointing down |
 The item/row can be resized vertically.
 Often rendered as arrows pointing up and down with a horizontal bar separating them.
  |
| `n-resize` | thin long arrow pointing towards the top |
 Some edge is to be moved. For example, the `se-resize` cursor is used when the movement starts from the *south-east* corner of the box.In some environments, an equivalent bidirectional resize cursor is shown.
 For example, `n-resize` and `s-resize` are the same as `ns-resize`.
  |
| `e-resize` | thin long arrow pointing towards the right |
| `s-resize` | thin long arrow pointing down |
| `w-resize` | thin long arrow pointing towards the left |
| `ne-resize` | thin long arrow pointing top-right |
| `nw-resize` | thin long arrow pointing top-left |
| `se-resize` | thin long arrow pointing bottom-right |
| `sw-resize` | thin long arrow pointing bottom-left |
| `ew-resize` | thin long arrow pointing left and right | Bidirectional resize cursor. |
| `ns-resize` | thin long arrow pointing up and down |
| `nesw-resize` | thin long arrow pointing both to the top-right and bottom-left |
| `nwse-resize` | thin long arrow pointing both to the top-left and bottom-right |
| Zooming | `zoom-in` | magnifying glass with a plus sign | Something can be zoomed (magnified) in or out. |
| `zoom-out` | magnifying glass with a minus sign |

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified, but with `url()` values made absolute |
| Animation type | discrete |

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

cursor =
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

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

<x> =
  x

<y> =
  y

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

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

```

Usage notes
-----------

### Icon size limits

 While the specification does not limit the `cursor` image size, user agents commonly restrict them to avoid potential misuse.
 For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels. Cursor changes using images that are larger than the user-agent maximum supported size will generally just be ignored.

### Supported image file formats

 User agents are required by the specification to support PNG files, SVG v1.1 files in secure static mode that contain a natural size, and any other non-animated image file formats that they support for images in other properties.
 Desktop browsers also broadly support the `.cur` file format.

 The specification further indicates that user agents *should* also support SVG v1.1 files in secure animated mode that contain a natural size, along with any other animated images file formats they support for images in other properties.
 User agents *may* support both static and animated SVG images that do not contain a natural size.

### iPadOS

iPadOS supports pointer devices like trackpads and mouses. By default, the iPad cursor is displayed as a circle, and the only supported value that will change an appearance of the pointer is `text`.

### Other notes

Cursor changes that intersect toolbar areas are commonly blocked to avoid spoofing.

Examples
--------

### Setting cursor types

```css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/\* A fallback keyword value is required when using a URL \*/
.baz {
  cursor: url("hyper.cur"), auto;
}
```

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

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

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

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

See also
--------

* `pointer-events`
* `url()` function


font-synthesis-small-caps - CSS: Cascading Style Sheets

font-synthesis-small-caps
=========================

The **`font-synthesis-small-caps`** CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------

```css
/\* Keyword values \*/
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;

/\* Global values \*/
font-synthesis-small-caps: inherit;
font-synthesis-small-caps: initial;
font-synthesis-small-caps: revert;
font-synthesis-small-caps: revert-layer;
font-synthesis-small-caps: unset;
```

### Values

`auto`

Indicates that the missing small-caps typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of the missing small-caps typeface by the browser is not allowed.

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

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

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

font-synthesis-small-caps =
  auto  |
  none

```

Examples
--------

### Disabling synthesis of small-caps typeface

This example shows turning off synthesis of the small-caps typeface by the browser in the `Montserrat` font.

#### HTML

```html
<p class="english">
  These are the default <span class="small-caps">small-caps</span>,
  <strong>bold</strong>, and <em>oblique</em> typefaces.
</p>

<p class="english no-syn">
  The <span class="small-caps">small-caps</span> typeface is turned off here but
  not the <strong>bold</strong> and <em>oblique</em> typefaces.
</p>
```

#### CSS

```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.small-caps {
  font-variant: small-caps;
}
.no-syn {
  font-synthesis-small-caps: none;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-small-caps |

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

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

See also
--------

* font-synthesis shorthand, font-synthesis-style, font-synthesis-weight
* `font-style`, `font-variant`, `font-variant-caps`, `font-weight`
* CanvasRenderingContext2D: fontVariantCaps property


isolation - CSS: Cascading Style Sheets

isolation
=========

The **`isolation`** CSS property determines whether an element must create a new stacking context.

Try it
------

This property is especially helpful when used in conjunction with `mix-blend-mode` and `z-index`.

Syntax
------

```css
/\* Keyword values \*/
isolation: auto;
isolation: isolate;

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

The `isolation` property is specified as one of the keyword values listed below.

### Values

`auto`

A new stacking context is created only if one of the properties applied to the element requires it.

`isolate`

A new stacking context must be created.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

isolation =
  <isolation-mode>

<isolation-mode> =
  auto     |
  isolate

```

Examples
--------

### Forcing a new stacking context for an element

#### HTML

```html
<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>
```

#### CSS

```css
.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0, 255, 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0, 255, 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
```

#### Result

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

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

See also
--------

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


:only-of-type - CSS: Cascading Style Sheets

:only-of-type
=============

The **`:only-of-type`** CSS pseudo-class represents an element that has no siblings of the same type.

Try it
------

Syntax
------

```css
:only-of-type {
  /\* ... \*/
}
```

Examples
--------

### Styling elements with no siblings of the same type

#### HTML

```html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
```

#### CSS

```css
main :only-of-type {
  color: red;
}
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # only-of-type-pseudo |

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

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

See also
--------

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`


CSS compositing and blending - CSS: Cascading Style Sheets

CSS compositing and blending
============================

The **CSS compositing and blending** module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new stacking context.

The properties in this CSS module can be used to define the blending mode that should be used, if any, to blend an element's background images and colors into a single background image. This module provides 16 blending modes. You can also define how an element's borders, background, and content, including text, emojis, and images, should be blended with the background of its container.

### Compositing and blending in action

In this example, each box has a border, two striped background images, and a solid color background. The common background for all the boxes contains a pattern of circles. The three boxes in the second row are set to blend with the background of the container.

Notice how the background, border, and the content are all impacted as a result of the blending. To see the code for this sample, view the source on GitHub.

Reference
---------

### Properties

* `background-blend-mode`
* `isolation`
* `mix-blend-mode`
Related concepts
----------------

* `<blend-mode>` data type
* `backdrop-filter` CSS property
* `filter` CSS property
* `mask-composite` CSS property
* `background-color` CSS property
* `background-image` CSS property
* stacking context glossary term
* `<feBlend>` SVG filter primitive
* `<feComposite>` SVG filter primitive
Specifications
--------------

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |

See also
--------

* Properties in the CSS filter effects module enable applying filters effects, such as blurring and changing color intensity, to images, backgrounds, and borders.
* Compositing And Blending In CSS (2015)
* Editing Images in CSS: Blend Modes (2022)
* web.dev: blend modes (2021)


fit-content() - CSS: Cascading Style Sheets

fit-content()
=============

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 **`fit-content()`** CSS function clamps a given size to an available size according to the formula `min(maximum size, max(minimum size, argument))`.

Try it
------

The function can be used as a track size in CSS Grid properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

See the `grid-template-columns` page for more information on the `max-content` and `auto` keywords.

The `fit-content()` function can also be used as laid out box size for `width`, `height`, `min-width`, `min-height`, `max-width` and `max-height`, where the maximum and minimum sizes refer to the content size.

Syntax
------

The `fit-content()` function accepts a `<length>` or a `<percentage>` as an argument.

```css
/\* <length> values \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> value \*/
fit-content(40%)
```

### Values

`<length>`

An absolute length.

`<percentage>`

A percentage relative to the available space in the given axis.

In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

Examples
--------

### Sizing grid columns with fit-content

#### HTML

```html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # sizing-values |

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

### css.properties.grid-template-columns.fit-content

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

### css.properties.width.fit-content\_function

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

See also
--------

* Related sizing keywords: `min-content`, `max-content`
* Related CSS Grid properties: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Grid Layout Guide: *Grid template areas - Grid definition shorthands*


<alpha-value> - CSS: Cascading Style Sheets

<alpha-value>
=============

The **`<alpha-value>`** CSS data type represents a value that can be either a `<number>` or a `<percentage>`, specifying the **alpha channel** or **transparency** of a color.

Syntax
------

The value of an `<alpha-value>` is given as either a `<number>` or a `<percentage>`.

If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are clamped to lie within the range 0 to 1.

If the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque.

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

<alpha-value> =
  <number>      |
  <percentage>

```

Interpolation
-------------

When animated, values of the `<alpha-value>` CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Setting text color opacity

 The `rgb()` function accepts a fourth optional value to specify an alpha value.
 The following example shows how to apply a color with 60% opacity using the alpha value:

```css
/\* <rgb()> \*/
color: rgb(34 12 64 / 60%);
```

### Setting shape image threshold

Here an alpha value is used to determine which parts of an image are considered part of a shape:

```css
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-color-alpha-value |

See also
--------

* Fundamental text and font styling
* CSS data types
* CSS Color
* `<color>`


:lang() - CSS: Cascading Style Sheets

:lang()
=======

The **`:lang()`** CSS pseudo-class matches elements based on the language they are determined to be in.

Try it
------

**Note:** In HTML, the language is determined by a combination of the `lang` attribute, the `<meta>` element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.

Syntax
------

### Formal syntax

```css
:lang(<language-code> [,<language-code> ]*)
  /\* ... \*/
}
```

### Parameters

`<language-code>`

 A comma separated list of one or more `<string>`s that target an element with a language value according to BCP 47 language codes.
 Matching by language range is case-insensitive.

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

 When selecting languages, there is implicit wildcard matching, so `:lang(de-DE)` will match `de-DE`, `de-DE-1996`, `de-Latn-DE`, `de-Latf-DE`, and `de-Latn-DE-1996`.
 Explicitly using wildcards must include a full match of a language subtag, so `:lang("*-F*")` is invalid but `:lang("*-Fr")` is valid.

Examples
--------

### Matching children of a given language

In this example, the `:lang()` pseudo-class is used to match the parents of quote elements (`<q>`) using child combinators. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that Unicode values are used to specify some of the special quote characters.

#### HTML

```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>
```

#### CSS

```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

#### Result

### Matching multiple languages

 The following example shows how to match multiple languages by providing a comma-separated list of language codes.
 It's also possible to use a wildcard to match languages in a given language range.
```

p {
  margin: 0;
}
```

#### CSS

```css
/\* Matches nl and de \*/
:lang("nl", "de") {
  color: green;
}

/\* Omitting quotes & case-insensitive matching \*/
:lang(EN, FR) {
  color: blue;
}

/\* Wildcard matching a language range \*/
:lang("\*-Latn") {
  color: red;
}
```

#### HTML

```html
<p lang="nl">Dit is een Nederlandse paragraaf.</p>
<p lang="de">Dies ist ein deutscher Satz.</p>
<p lang="en">This is an English sentence.</p>
<p lang="en-GB">Matching the language range of English.</p>
<p lang="fr">Ceci est un paragraphe français.</p>
<p lang="fr-Latn-FR">Ceci est un paragraphe français en latin.</p>
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # lang-pseudo |

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

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

See also
--------

* The `:dir` pseudo-class that matches by directionality of text
* HTML `lang` attribute
* HTML `translate` attribute
* RFC 5646: Tags for Identifying Languages (also known as BCP 47)


CSS scrollbars styling - CSS: Cascading Style Sheets

CSS scrollbars styling
======================

The **CSS scrollbars styling** module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar *track*, which is the background of the scrollbar, and the color of the scrollbar *thumb*, which is the draggable handle of the scrollbar.

Scrollbar styling in action
---------------------------

This example defines a thin scrollbar with a red thumb and an orange track. To view the thumb, you will need to scroll the text. After the scrollbar is visible, hover over it to see the track.
```

.poem {
  width: 300px;
  height: 100px;
  border: 1px solid;
}
```

```css
.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}
```

```
<blockquote class="poem">
  <h3>A Small Needful Fact</h3>
  <pre>
Is that Eric Garner worked
for some time for the Parks and Rec.
Horticultural Department, which means,
perhaps, that with his very large hands,
perhaps, in all likelihood,
he put gently into the earth
some plants which, most likely,
some of them, in all likelihood,
continue to grow, continue
to do what such plants do, like house
and feed small and necessary creatures,
like being pleasant to touch and smell,
like converting sunlight
into food, like making it easier
for us to breathe.
</pre
 >
  <p>
    - <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a>
  </p>
</blockquote>
```

**Note:** When customizing scrollbars, ensure that the thumb and track have enough contrast with the surrounding background. Also ensure that the scrollbar hit area is large enough for people who use touch input.

Reference
---------

### CSS properties

* `scrollbar-width`
* `scrollbar-color`
Related concepts
----------------

* `overflow-block` CSS property
* `overflow-inline` CSS property
* `overflow-x` CSS property
* `overflow-y` CSS property
* `overflow` CSS shorthand property
* `overflow-clip-margin` CSS property
* `scrollbar-gutter` CSS property
* `scroll-behavior` CSS property
* `scroll-margin` CSS shorthand property
* `scroll-padding` CSS shorthand property
* `scroll-snap-align` CSS property
* `scroll-snap-stop` CSS property
* `scroll-snap-type` CSS property
* `::-webkit-scrollbar` pseudo-element
* scroll container glossary term
* `scrollbar` ARIA role
Specifications
--------------

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

See also
--------

* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* CSS overflow module
* CSS scroll snap module


max-height - CSS: Cascading Style Sheets

max-height
==========

The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`.

Try it
------

`max-height` overrides `height`, but `min-height` overrides `max-height`.

Syntax
------

```css
/\* <length> value \*/
max-height: 3.5em;

/\* <percentage> value \*/
max-height: 75%;

/\* Keyword values \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fit-content(20em);

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

### Values

`<length>`

Defines the `max-height` as an absolute value.

`<percentage>`

Defines the `max-height` as a percentage of the containing block's height.

`none`

No limit on the size of the box.

`max-content`

The intrinsic preferred `max-height`.

`min-content`

The intrinsic minimum `max-height`.

`fit-content`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)`
Experimental

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

Accessibility concerns
----------------------

Ensure that elements set with a `max-height` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `none`. |
| Computed value | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

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

max-height =
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

Examples
--------

### Setting max-height using percentage and keyword values

```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| 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 box model, `box-sizing`
* `height`, `min-height`
* The mapped logical properties: `max-inline-size`, `max-block-size`


:stalled - CSS: Cascading Style Sheets

:stalled
========

 The **`:stalled`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when playback is stalled.
 A resource is considered to be stalled if the user has requested playback of a specific position in the media resource, but it has failed to receive any data for some amount of time.
 This is different from `:buffering` in that the media element is unexpectedly not loading data when stalled (e.g. due to a network error) for around 3 seconds (the exact time is user agent dependent).

**Note:** Like with the `:buffering` pseudo-class, the element is still considered to be "playing" when it is "stalled".
 If `:stalled` matches an element, `:playing` will also match that element.

Syntax
------

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

Examples
--------

### CSS

```css
:stalled {
  outline: 5px solid red;
}

audio:stalled {
  background-color: red;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # selectordef-stalled |

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:playing`
* `:seeking`
* `:volume-locked`
* CSS selectors
* `stalled` event


CSS basic user interface - CSS: Cascading Style Sheets

CSS basic user interface
========================

The **CSS basic user interface** module lets you define the rendering and functionality of features related to the user interface including outline properties, visual feedback to pointing device and keyboard, and altering the default appearance of UI widgets.

Basic user interface properties can be used to improve user experience and accessibility by providing visual cues to elements that are being interacted with, including styling mouse cursors and keyboard directional focus navigation, and styling caret cursors when an editable element has focus. The module provides for providing outlines to focused (or not) elements without impacting an element's box model dimensions and styling. This UI module also enables the styling of user interface controls.

### Basic user interface in action

To view how basic user interface properties can alter the appearance of UI features, interact with the elements in this sample. Note that some features in this sample improve usability while others harm user experience.

The CSS `outline` and `outline-offset` properties were used to provide feedback to users which element currently has focus. An `accent-color` provides a theme color to all the form controls. The caret that appears when the text is edit has the same color thanks to the `caret-color` property. These can all be considered UI improvements.

Some features harm usability. The `cursor` property was used to change cursors from the browser default which is confusing. The `resize` property prevents the second `<textarea>` from being resizable while the `pointer-events` property prevents the third `<textarea>` from receiving click events. It is still focusable using the keyboard.

To see the code for this basic user interface sample, view the source on GitHub.

Reference
---------

### Properties

* `accent-color`
* `appearance`
* `caret`, shorthand for:
    + `caret-color`
    + `caret-shape`
* `cursor`
* `nav-down`
Experimental
* `nav-left`
Experimental
* `nav-right`
Experimental
* `nav-up`
Experimental
* `outline`, shorthand for:
    + `outline-color`
    + `outline-style`
    + `outline-width`
* `outline-offset`
* `pointer-events`
* `resize`
* `user-select`
Guides
------

Learn forms: advanced form styling

Explains how `appearance` can be used to style form controls.

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

* CSS `cursor` property
* SVG `cursor` attribute
* CSS `:focus`, `:focus-within`, and `:focus-visible` pseudoclasses
* `CaretPosition` Interface
Specifications
--------------

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

See also
--------

* Tips for Designing Useful and Usable Focus Indicators (2016)