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

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-group`** CSS pseudo-element represents a single view transition group.

During a view transition, `::view-transition-group` is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of `::view-transition`, and has a `::view-transition-image-pair` as a child.

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


```css
html::view-transition-group(\*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}
```


By default, selected elements initially mirror the size and position of the `::view-transition-old` pseudo-element representing the "old" view state, or the `::view-transition-new` pseudo-element representing the "new" view state if there isn't an "old" view state.

If there's both an "old" and "new" view state, styles in the view transition style sheet animate this pseudo-element's `width` and `height` from the size of the "old" view state's border box to that of the "new" view state's border box.

**Note:** View transition style sheet styles are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.

In addition, the element's transform is animated from the "old" view state's screen space transform to the new view state's screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.

Syntax
------


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


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

`*`

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

`root`

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

`<custom-ident>`

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

Examples
--------


```css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}
```

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

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

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
Type selectors
==============

The CSS **type selector** matches elements by node name. In other words, it selects all elements of the given type within a document.


```css
/\* All <a> elements. \*/
a {
  color: red;
}
```


Type selectors can be namespaced when using `@namespace`. 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 without any declared namespace
Syntax
------


```css
element { style properties }
```

Examples
--------

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
```

### Result

### Namespaces

In this example the selector will only match `<h1>` elements in the example namespace.


```css
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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

See also
--------

* CSS Selectors
* Learn CSS: Selectors
column-span
===========

The **`column-span`** CSS property makes it possible for an element to span across all columns when its value is set to `all`.

Try it
------

An element that spans more than one column is called a **spanning element**.

Syntax
------


```css
/\* Keyword values \*/
column-span: none;
column-span: all;

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


The `column-span` property is specified as one of the keyword values listed below.

### Values

`none`

The element does not span multiple columns.

`all`

The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | in-flow block-level elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

column-span =   
  none  |  
  all     
  
```

Examples
--------

### Making a heading span columns

In this example, the heading is made to span across all the columns of the article.

#### HTML


```html
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>
```


#### CSS


```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```


#### Result

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

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

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

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

See also
--------

* Spanning and balancing columns
* Inline-level elements
* `HTMLSpanElement`
border-block-end-style
======================

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

Try it
------

Syntax
------


```css
/\* <'border-style'> values \*/
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;

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


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

### Values

`<'border-style'>`

The line style of the border. See `border-style`.

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

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

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

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

Examples
--------

### Dashed border with vertical text

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}
```


#### Results

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

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

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

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

See also
--------

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


 The **CSS multi-column layout** module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.
Multi-column layout in action
-----------------------------

In this example, the 1967 speech from Canada's centennial, *A Lament for Confederation*, by Chief Dan George, is displayed across multiple columns, similar to the way articles are displayed in printed newspapers. If you have JavaScript enabled, controls enable changing the preferred column number and width, the width of the gap between columns, whether the title and a sample blockquote should be contained in a single column or made to span all columns, and whether breaking within the paragraphs should be avoided.

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

**Note:** Multiple-column layout is closely related to paged media. Each column box is a fragment, much like each printed page is a fragment of a document. Using the properties defined in the CSS fragmentation module, you can control how content breaks between columns and pages.

Reference
---------

### Properties

* `break-after`
* `break-before`
* `break-inside`
* `column-fill`
* `column-gap`
* `column-span`
* `column-rule` shorthand
    + `column-rule-color`
    + `column-rule-style`
    + `column-rule-width`
* `columns` shorthand
    + `column-count`
    + `column-width`

**Note:** Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.

Guides
------

Basic concepts of multi-column layout

An overview of the Multiple-column Layout specification

Styling columns

How to use column rules and manage the spacing between columns.

Spanning and balancing

How to make elements span across all columns and control the way columns are filled.

Handling overflow in multi-column layout

What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

Handling content breaks in multi-column layout

Introduction to the Fragmentation specification and how to control where column content breaks.

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

* `orphans` CSS property
* `widows` CSS property
* `overflow` CSS property
* `gap` CSS property
* `height`, `max-height`, and `block-size` CSS properties
* `width`, `max-width`, and `inline-size` CSS properties
* `<line-style>` enumerated data type
* Block formatting context guide
Specifications
--------------

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

See also
--------

* Learn: multiple-column layout
* CSS fragmentation module
* CSS flexible box layout module
* CSS grid layout module
* CSS paged media module
z-index
=======

The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.

Try it
------

For a positioned box (that is, one with any `position` other than `static`), the `z-index` property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.
Syntax
------


```css
/\* Keyword value \*/
z-index: auto;

/\* <integer> values \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* Negative values to lower the priority \*/

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


The `z-index` property is specified as either the keyword `auto` or an `<integer>`.

### Values

`auto`

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is `0`.

`<integer>`

This `<integer>` is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |
| Creates stacking context | yes |

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

z-index =   
  auto       |  
  <integer>  |  
  inherit      
  
```

Examples
--------

### Visually layering elements

#### HTML


```html
<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>
```


#### CSS


```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* put .gold-box above .green-box and .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* put .green-box above .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```


#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

See also
--------

* CSS `position` property
* Understanding CSS z-indexes
mask-origin
===========

The **`mask-origin`** CSS property sets the origin of a mask.

For elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the `mask-image` CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes `box-decoration-break` operates upon to determine the mask positioning area.

Syntax
------


```css
/\* Keyword values \*/
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/\* Multiple values \*/
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/\* Non-standard keyword values \*/
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

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


One or more of the keyword values listed below, separated by commas.

### Values

`content-box`

The position is relative to the content box.

`padding-box`

The position is relative to the padding box. For single boxes `0 0` is the upper left corner of the padding edge, `100% 100%` is the lower right corner.

`border-box`

The position is relative to the border box.

`fill-box`

The position is relative to the object bounding box.

`stroke-box`

The position is relative to the stroke bounding box.

`view-box`

Uses the nearest SVG viewport as reference box. If a `viewBox` attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

`content` 
Non-standard

Same as `content-box`.

`padding` 
Non-standard

Same as `padding-box`.

`border` 
Non-standard

Same as `border-box`.

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

|  |  |
| --- | --- |
| Initial value | `border-box` |
| 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 |
| Animation type | discrete |

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

mask-origin =   
  <coord-box>#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Examples
--------

### Setting mask origin to border-box

Try some of the other possible values by updating the CSS in the box below.

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

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

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

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

See also
--------

* Clipping and Masking in CSS
-webkit-text-stroke-width
=========================

The **`-webkit-text-stroke-width`** CSS property specifies the width of the stroke for text.

Syntax
------


```css
/\* Keyword values \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* <length> values \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

/\* Global values \*/
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: revert;
-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;
```

### Values

`<line-width>`

The width of the stroke.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | absolute `<length>` |
| Animation type | discrete |

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

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

Examples
--------

### Varying stroke widths

#### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```


#### HTML


```html
<p id="thin">Thin stroke</p>
<p id="medium">Medium stroke</p>
<p id="thick">Thick stroke</p>
```


#### Results

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-width |

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

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

See also
--------

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`
::-moz-range-track
==================

**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-range-track`** CSS pseudo-element is a Mozilla extension that represents the *track* (i.e., groove) in which the indicator slides in an `<input>` of `type="range"`.

**Note:** Using `::-moz-range-track` with anything but an `<input type="range">` doesn't match anything and has no effect.

Syntax
------


```css
::-moz-range-track {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-track {
  background-color: green;
}
```

### Result

A range slider using this style might look something like this:

![A range with the track green](/en-US/docs/Web/CSS/::-moz-range-track/screen_shot_2015-12-04_at_10.14.34.png)

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

* The pseudo-elements used by Gecko to style other parts of a range input:
    + `::-moz-range-thumb` represents the indicator that slides in the groove.
    + `::-moz-range-progress` represents the lower portion of the track.
* Similar pseudo-elements used by other browsers:
    + `::-webkit-slider-runnable-track`, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
-webkit-text-security
=====================

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

**`-webkit-text-security`** is a non-standard CSS property that obfuscates characters in a `<form>` field (such as `<input>` or `<textarea>`) by replacing them with a shape. It only affects fields that are *not* of `type=password`.

Syntax
------


```css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;

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

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

Value not found in DB!Formal syntax
-------------

Error: could not find syntax for this itemExamples
--------

### Obscuring a text input

Try typing in the field below. If your browser supports this property, the characters should be visually replaced with squares.

#### HTML


```html
<label for="name">Name:</label> <input type="text" name="name" id="name" />
```


#### CSS


```css
input {
  -webkit-text-security: square;
}
```


#### Result

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

Not part of any standard.

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

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

See also
--------

* WebKit CSS extensions