recursal/MDN huggingface dataset:
::view-transition
=================

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

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

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

The **`::view-transition`** CSS pseudo-element represents the root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.

During a view transition, `::view-transition` is included in the associated pseudo-element tree as explained in The view transition process. It is the top-level node of this tree, and has one or more `::view-transition-group`s as children.

`::view-transition` is given the following default styling in the UA stylesheet:


```css
html::view-transition {
  position: fixed;
  inset: 0;
}
```


All `::view-transition-group` pseudo-elements are positioned relative to the view transition root.

Syntax
------


```css
::view-transition {
  /\* ... \*/
}
```

Examples
--------


```css
::view-transition {
  background-color: rgb(0 0 0 / 25%);
}
```

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

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

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

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

See also
--------

* View Transitions API
* Smooth and simple transitions with the View Transitions API
::grammar-error
===============

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

The **`::grammar-error`** CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.

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

Only a small subset of CSS properties can be used in a rule with `::grammar-error` in its selector:

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color`
* `text-shadow`
Syntax
------


```css
::grammar-error {
  /\* ... \*/
}
```

Examples
--------

### Simple document grammar check

In this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.

#### HTML


```html
<p>My friends is coming to the party tonight.</p>
```


#### CSS


```css
::grammar-error {
  text-decoration: underline red;
  color: red;
}
```


#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

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

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

See also
--------

* `::spelling-error`
<integer>
=========

The **`<integer>`** CSS data type is a special type of `<number>` that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the `column-count`, `counter-increment`, `grid-column`, `grid-row`, and `z-index` properties and the `range` descriptor.

Syntax
------

The `<integer>` data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single `+` or `-` sign. There is no unit associated with integers.

**Note:** There is no official range of valid `<integer>` values, and the specifications do not specify a range.

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

When animated, values of the `<integer>` data type are interpolated using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Valid integers
```

12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading -
```

### Invalid integers
```

12.0        This is a <number>, not an <integer>, though it represents an integer.
12.         Decimal points are not allowed.
+---12      Only one leading +/- is allowed.
ten         Letters are not allowed.
_5          Special characters are not allowed.
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
3e4         Scientific notation is not allowed.
```

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

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

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

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

See also
--------

* `<number>`
CSS miscellaneous
=================

These pages contain CSS properties that are supported by browsers but either aren't included in a CSS specification, don't fit into any other CSS categories, or are experimental.

Reference
---------

### Properties

* `all`
* `text-rendering`
Specifications
--------------

*These properties are mostly unrelated to each other. Consult their individual pages for specifications.*

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

*These properties are mostly unrelated to each other. Consult their individual pages for availability in browsers.*
column-rule-color
=================

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

Try it
------

Syntax
------


```css
/\* <color> values \*/
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);

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


The `column-rule-color` property is specified as a single `<color>` value.

### Values

`<color>`

The color of the rule that separates columns.

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

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

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

column-rule-color =   
  <color>    
  
```

Examples
--------

### Setting a blue column rule

#### HTML


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


#### CSS


```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}
```


#### Result

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

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

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

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

See also
--------

* The `<color>` data type
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, and `caret-color`
* Applying color to HTML elements using CSS
CSS scroll snap
===============

The **CSS scroll snap** module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning.

This module includes the scroll container scroll-padding properties to adjust the optimal viewing region of paging during scroll-into-view operations. It also includes scroll-margin and scroll-alignment, set on the scroll container's children, to adjust the children's visual area when that child is scrolled into view, as well as a property to force scrolling to stop on individual children.

Scroll snap in action
---------------------

To view scroll snapping in the box below, scroll up-and-down and left-and-right through the grid of 45 numbered boxes in the scrollable viewport.

With scroll snap, one of the numbered boxes that you scroll to will snap into place. The initial CSS makes the numbered box snap into the center of the viewport. Use the sliders to change the block and inline snap positions.

Using snap properties, you can allow or block the scrolling past an element, a numbered box in this case. Select the "Prevent scrolling past boxes" checkbox to force all scrolling actions to be limited to scrolling to an adjacent box.

To compare scroll snapping to regular scrolling, check the "disable snapping" checkbox and try scrolling again.

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

Reference
---------

### Properties on containers

* `scroll-snap-type`
* `scroll-padding`
    + `scroll-padding-top`
    + `scroll-padding-right`
    + `scroll-padding-bottom`
    + `scroll-padding-left`
    + `scroll-padding-inline`
    + `scroll-padding-inline-start`
    + `scroll-padding-inline-end`
    + `scroll-padding-block`
    + `scroll-padding-block-start`
    + `scroll-padding-block-end`
### Properties on children

* `scroll-snap-align`
* `scroll-margin`
    + `scroll-margin-top`
    + `scroll-margin-right`
    + `scroll-margin-bottom`
    + `scroll-margin-left`
    + `scroll-margin-inline`
    + `scroll-margin-inline-start`
    + `scroll-margin-inline-end`
    + `scroll-margin-block`
    + `scroll-margin-block-start`
    + `scroll-margin-block-end`
* `scroll-snap-stop`
Guides
------

Basic concepts of CSS scroll snap

An overview and examples of CSS scroll snap features.

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

* `:target` pseudo-class
* `overflow` CSS property
* Element `scroll()` method
* Element `scrollBy()` method
* Element `scrollIntoView()` method
* Element `scrollTo()` method
* Document `scroll` event
* `scrollbar` ARIA role
* Scroll container glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |

See also
--------

* CSS overflow module
* CSS scrollbars styling module
* Keyboard-only scrolling areas on adrianroselli.com (2022)
* Scroll snap examples on Codepen (2022)
* Well-controlled scrolling with CSS scroll snap on web.dev (2021)
* Practical CSS scroll snapping/ on CSS-Tricks (2020)
* CSS scroll snap on 12 Days of Web (2019)
border-bottom-color
===================

The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`.

Try it
------

Syntax
------


```css
/\* <color> values \*/
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255 0 0);
border-bottom-color: hsl(100deg 50% 25% / 75%);
border-bottom-color: currentcolor;
border-bottom-color: transparent;

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


The `border-bottom-color` property is specified as a single value.

### Values

`<color>`

The color of the bottom border.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |

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

border-bottom-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### A simple div with a border

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### Result

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

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

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-bottom`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-top-color`, and `border-left-color`.
* The other border-related CSS properties applying to the same border: `border-bottom-style` and `border-bottom-width`.
* The default `currentcolor` color value.
:root
=====

The **`:root`** CSS pseudo-class matches the root element of a tree representing the document. In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.


```css
/\* Selects the root element of the document:
 <html> in the case of HTML \*/
:root {
  background: yellow;
}
```

Syntax
------


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

Examples
--------

### Declaring global CSS variables

`:root` can be useful for declaring global CSS variables:


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

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

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

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

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

See also
--------

* `<html>`
* `Document.rootElement`
* `Node.getRootNode()`
* `Element.shadowRoot`
* `ShadowRoot`
-moz-orient
===========

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

The **`-moz-orient`** CSS property specifies the orientation of the element to which it's applied.

Syntax
------

The `-moz-orient` property is specified as one of the keyword values chosen from the list below.

### Values

`inline`

The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.

`block`

The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.

`horizontal`

The element is rendered horizontally.

`vertical`

The element is rendered vertically.

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

|  |  |
| --- | --- |
| Initial value | `inline` |
| Applies to | any element; it has an effect on `progress` and `meter`, but not on <input type="range"> or other elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

-moz-orient =
  inline | block | horizontal | vertical
```

Examples
--------

### HTML


```html
<p>The following progress meter is horizontal (the default):</p>
<progress max="100" value="75"></progress>

<p>The following progress meter is vertical:</p>
<progress class="vert" max="100" value="75"></progress>
```

### CSS


```css
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
```

### Result

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

Not part of any standard. Though submitted to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, `-moz-orient`).

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

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

See also
--------

* `box-orient`
::highlight()
=============

The **`::highlight()`** CSS pseudo-element applies styles to a custom highlight.

A custom highlight is a collection of `Range` objects and is registered on a webpage using the `HighlightRegistry`.

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

Only certain CSS properties can be used with `::highlight()`:

* `color`
* `background-color`
* `text-decoration` and its associated properties
* `text-shadow`
* `-webkit-text-stroke-color`, `-webkit-text-fill-color` and `-webkit-text-stroke-width`

In particular, `background-image` is ignored.

Syntax
------


```css
::highlight(custom-highlight-name)
```

Examples
--------

### Highlighting characters

#### HTML


```html
<p id="rainbow-text">CSS Custom Highlight API rainbow</p>
```


#### CSS


```css
#rainbow-text {
  font-family: monospace;
  font-size: 1.5rem;
}

::highlight(rainbow-color-1) {
  color: #ad26ad;
  text-decoration: underline;
}
::highlight(rainbow-color-2) {
  color: #5d0a99;
  text-decoration: underline;
}
::highlight(rainbow-color-3) {
  color: #0000ff;
  text-decoration: underline;
}
::highlight(rainbow-color-4) {
  color: #07c607;
  text-decoration: underline;
}
::highlight(rainbow-color-5) {
  color: #b3b308;
  text-decoration: underline;
}
::highlight(rainbow-color-6) {
  color: #ffa500;
  text-decoration: underline;
}
::highlight(rainbow-color-7) {
  color: #ff0000;
  text-decoration: underline;
}
```


#### JavaScript


```js
const textNode = document.getElementById("rainbow-text").firstChild;

if (!CSS.highlights) {
  textNode.textContent =
    "The CSS Custom Highlight API is not supported in this browser!";
}

// Create and register highlights for each color in the rainbow.
const highlights = [];
for (let i = 0; i < 7; i++) {
  // Create a new highlight for this color.
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);

  // Register this highlight under a custom name.
  CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}

// Iterate over the text, character by character.
for (let i = 0; i < textNode.textContent.length; i++) {
  // Create a new range just for this character.
  const range = new Range();
  range.setStart(textNode, i);
  range.setEnd(textNode, i + 1);

  // Add the range to the next available highlight,
  // looping back to the first one once we've reached the 7th.
  highlights[i % 7].add(range);
}
```


#### Result

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

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # custom-highlight-pseudo |

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

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

The **CSS namespaces** module defines the syntax for using namespaces in CSS.

CSS isn't just for styling HTML. A stylesheet may be used to style SVG, MathML, XML, or HTML, each of which has a different namespace or a document containing multiple namespaces.

The `@namespace` at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the `<a>` element isn't limited to HTML. You may want to style the `<a>`s within your SVGs differently from the links in your HTML. You also will likely want to ensure that `querySelectorAll("a")` selects the right kind of element. Namespacing can help.

The `@namespace` rule is used for declaring a default namespace and for binding namespaces to namespace prefixes. The namespaces module also defines the syntax for using these prefixes to represent namespace-qualified names. That's it. What a name means or if the name is even valid depends on the context and host language.

Reference
---------

### At-rules

* `@namespace`
Guides
------

Namespaces crash course

Deep dive into what a namespace is and how they are used in XML and XML-based markup languages.

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

* CSS namespace separator (`|`) combinator
* CSS type selectors
* CSS universal selector
* `CSSNamespaceRule` interface
    + `CSSNamespaceRule.namespaceURI` property
    + `CSSNamespaceRule.prefix` property
* `Document.createAttributeNS()` method
* `Document.createElementNS()` method
* `Document.getElementsByTagNameNS()` method
* `Element.getAttributeNodeNS()` method
* `Element.getAttributeNS()` method
* `Element.getElementsByTagNameNS()` method
* `Element.hasAttributeNS()` method
* `Element.namespaceURI` property
* `Element.removeAttributeNS()` method
* `Element.setAttributeNS()` method
* `Element.setAttributeNodeNS()` method
* `NamedNodeMap.getNamedItemNS()` method
* `NamedNodeMap.removeNamedItemNS()` method
* `NamedNodeMap.setNamedItemNS()` method
* Namespace glossary term
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
--------

* `<a>` SVG element
* CSS `url()` function
* CSS at-rules
* CSS at-rule functions
* CSS selectors
user-select
===========

The **`user-select`** CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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


**Note:** `user-select` is not an inherited property, though the initial `auto` value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers *do* implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium has chosen to fix the issues to make the final behavior meet the specifications.

### Values

`none`

The text of the element and its sub-elements is not selectable. Note that the `Selection` object can contain these elements.

`auto`

The used value of `auto` is determined as follows:

* On the `::before` and `::after` pseudo elements, the used value is `none`
* If the element is an editable element, the used value is `contain`
* Otherwise, if the used value of `user-select` on the parent of this element is `all`, the used value is `all`
* Otherwise, if the used value of `user-select` on the parent of this element is `none`, the used value is `none`
* Otherwise, the used value is `text`

`text`

The text can be selected by the user.

`all`

The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

`contain`

Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

**Note:** CSS UI 4 renamed the `element` value to `contain`.

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

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

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

user-select =   
  auto     |  
  text     |  
  none     |  
  contain  |  
  all        
  
```

Examples
--------

### HTML


```html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
```

### CSS


```css
.unselectable {
  -webkit-user-select: none; /\* Safari \*/
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}
```

### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

See also
--------

* Polyfill for `user-select: contain`
* `::selection` pseudo-element
* The JavaScript `Selection` object