recursal/MDN huggingface dataset:
:read-only
==========

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 **`:read-only`** CSS pseudo-class represents an element (such as `input` or `textarea`) that is not editable by the user.

Try it
------

Syntax
------


```css
:read-only {
  /\* ... \*/
}
```

Examples
--------

### Confirming form information in read-only/read-write controls

One use of `readonly` form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. We do just this in the example below.

The `:read-only` pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs. The `:read-write` pseudo-class on the other hand is used to provide some nicer styling to the editable `<textarea>`.


```css
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```


You can find the full source code at readonly-confirmation.html; this renders like so:

### Styling read-only non-form controls

This selector doesn't just select `<input>`/`<textarea>` elements — it will select *any* element that cannot be edited by the user.


```html
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>
```



```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

See also
--------

* `:read-write`
* HTML `contenteditable` attribute
border-inline-style
===================

The **`border-inline-style`** CSS property defines the style of the logical inline borders 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` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

The border style in the other dimension can be set with `border-block-style`, which sets `border-block-start-style`, and `border-block-end-style`.

Syntax
------


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

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

### 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-inline-style =   
  <'border-top-style'>{1,2}    
  
```

Examples
--------

### Setting border-inline-style

#### 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-inline-style: dashed;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-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`, or `border-left-style`.
* `writing-mode`, `direction`, `text-orientation`
::-moz-list-number
==================

**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-list-number`** CSS pseudo-element is a Mozilla extension that represents the marker (typically a number) of a list item (`<li>`) in an ordered list (`<ol>`).

Syntax
------


```css
li::-moz-list-number {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
```

### CSS


```css
li::-moz-list-number {
  font-style: italic;
  font-weight: bold;
}
```

### Result

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

Not part of any standard.

See also
--------

* `::-moz-list-bullet`
* `::marker`
<ident>
=======

The **`<ident>`** CSS data type denotes an arbitrary string used as an identifier.

Syntax
------

The syntax of `<custom-ident>` is similar to CSS identifiers (such as property names), except that it is case-sensitive. It consists of one or more characters, where characters can be any of the following:

* any alphabetical character (`A` to `Z`, or `a` to `z`),
* any decimal digit (`0` to `9`),
* a hyphen (`-`),
* an underscore (`_`),
* an escaped character (preceded by a backslash, `\`),
* a Unicode character (in the format of a backslash, `\`, followed by one to six hexadecimal digits, representing its Unicode code point)

Note that `id1`, `Id1`, `iD1` and `ID1` are all different identifiers as they are case-sensitive. On the other hand, as there are several ways to escape a character, `toto\?` and `toto\3F` are the same identifiers.

Examples
--------

### Valid identifiers
```

nono79        A mix of alphanumeric characters and numbers
ground-level  A mix of alphanumeric characters and a dash
-test         A dash followed by alphanumeric characters
--toto        A custom-property like identifier
_internal     An underscore followed by alphanumeric characters
\22 toto      A Unicode character followed by a sequence of alphanumeric characters
bili\.bob     A correctly escaped period
```

### Invalid identifiers
```

34rem     It must not start with a decimal digit.
-12rad    It must not start with a dash followed by a decimal digit.
bili.bob  Only alphanumeric characters, _, and - needn't be escaped.
'bilibob' This would be a `<string>`.
"bilibob" This would be a `<string>`.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # css-identifier |

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

*As this type is not a real type but a convenience type used to simplify the definition of other CSS syntax, there is no browser compatibility information as such.*

See also
--------

* <custom-ident>
* <dashed-ident>
CSS flexible box layout
=======================

The **CSS flexible box layout** module defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

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

In the following example a container has been set to `display: flex`, which means that the three child items become flex items. The value of `justify-content` has been set to `space-between` in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of `align-items` being `stretch`. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.

Reference
---------

### Properties

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### Properties for alignment

The properties `align-content`, `align-self`, `align-items` and `justify-content` initially appeared in the Flexbox specification, but are now defined in Box Alignment. The Flexbox spec now refers to the Box Alignment specification for up to date definitions. Also additional alignment properties are now defined in Box Alignment.

* `justify-content`
* `align-content`
* `align-items`
* `align-self`
* `place-content`
* `place-items`
* `row-gap`
* `column-gap`
* `gap`
Guides
------

Basic concepts of flexbox

An overview of the features of Flexbox

Relationship of flexbox to other layout methods

How Flexbox relates to other layout methods, and other CSS specifications

Aligning items in a flex container

How the Box Alignment properties work with Flexbox.

Ordering flex items

Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.

Controlling ratios of flex items along the main axis

Explaining the flex-grow, flex-shrink and flex-basis properties.

Mastering wrapping of flex items

How to create flex containers with multiple lines and control the display of the items in those lines.

Typical use cases of flexbox

Common design patterns that are typical Flexbox use cases.

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |

See also
--------

* CSS display module
* Using the multi-keyword syntax with CSS display
* Glossary terms:
    + Flexbox
    + Flex Container
    + Flex Item
    + Main Axis
    + Cross Axis
    + Flex
:playing
========

 The **`:playing`** CSS pseudo-class selector represents the playback state of an element that is playable, such as `<audio>` or `<video>`, when that element is "playing".
 An element is considered to be playing if it is currently playing the media resource, or if it has temporarily stopped for reasons other than user intent (such as `:buffering` or `:stalled`).

Syntax
------


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

Examples
--------

### CSS


```css
:playing {
  border: 5px solid green;
}
```

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

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

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors
border-image-source
===================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`border-image-source`** CSS property sets the source image used to create an element's border image.

Try it
------

The `border-image-slice` property is used to divide the source image into regions, which are then dynamically applied to the final border image.

Syntax
------


```css
/\* Keyword value \*/
border-image-source: none;

/\* <image> values \*/
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

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

### Values

`none`

No border image is used. The appearance defined by `border-style` is displayed instead.

`<image>`

Image reference to use for the border.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | `none` or the image with its URI made absolute |
| Animation type | discrete |

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

border-image-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Basic example


```css
.box {
  border-image-source: url("image.png");
}
```

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

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

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

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

See also
--------

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` function
* Border images in CSS: A key focus area for Interop 2023 on MDN blog (2023)
ID selectors
============

The CSS **ID selector** matches an element based on the value of the element's `id` attribute. In order for the element to be selected, its `id` attribute must match exactly the value given in the selector.


```css
/\* The element with id="demo" \*/
#demo {
  border: red 2px solid;
}
```

Syntax
------


```css
#id\_value { style properties }
```


Note that syntactically (but not specificity-wise), this is equivalent to the following `attribute selector`:


```css
[id=id\_value] { style properties }
```

Examples
--------

### CSS


```css
#identified {
  background-color: skyblue;
}
```

### HTML


```html
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # id-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
ruby-position
=============

The **`ruby-position`** CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (`over`), under it (`under`), or between the characters on their right side (`inter-character`).

Try it
------

Syntax
------


```css
/\* Keyword values \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
ruby-position: alternate;

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

### Values

`over`

![Over example](/en-US/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.20.png)Is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts.


`under`

![Under example](/en-US/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.07.png)Is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts.


`inter-character` 
Experimental

Is a keyword indicating that the ruby has to be placed between the different characters.

`alternate` 
Experimental

Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotation.

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

|  |  |
| --- | --- |
| Initial value | `alternate` |
| Applies to | ruby annotations containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

ruby-position =   
  [ alternate || [ over | under ] ]  |  
  inter-character                      
  
```

Examples
--------

### Ruby positioned over the text

#### HTML


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-position: over;
}
```


#### Result

### Ruby positioned under the text

#### HTML


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-position: under;
}
```


#### Result

### Ruby alternate

#### HTML


```html
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>
```


#### CSS


```css
ruby {
  ruby-position: alternate; /\* this is also the initial value \*/
}
```


#### Result

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

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

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

See also
--------

* HTML Ruby elements: `<ruby>`, `<rt>`, `<rp>`, and `<rtc>`.
* CSS Ruby properties: `ruby-align`, `ruby-merge`.
border-block-start-width
========================

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

Try it
------

Syntax
------


```css
/\* <'border-width'> values \*/
border-block-start-width: 5px;
border-block-start-width: thick;

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


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

### Values

`<'border-width'>`

The width of the border. See `border-width`.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

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

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

Examples
--------

### Border width 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: 1px solid blue;
  border-block-start-width: 5px;
}
```


#### Results

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

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

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-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
text-decoration-skip-ink
========================

The **`text-decoration-skip-ink`** CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

Try it
------

`text-decoration-skip-ink` is not part of the `text-decoration` shorthand.

Syntax
------


```css
/\* Single keyword \*/
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/\* Global keywords \*/
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;
```

### Values

`none`

Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.

`auto`

The default — the browser *may* interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.

`all`

The browser *must* interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the `auto` behavior might not create interruptions.

![An example of "text-decoration-skip-ink".](/en-US/docs/Web/CSS/text-decoration-skip-ink/decoration-skip-ink.png)

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

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

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

text-decoration-skip-ink =   
  auto  |  
  none  |  
  all     
  
```

Examples
--------

### HTML


```html
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>
```

### CSS


```css
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /\* this is the default anyway \*/
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}
```

### Result

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |

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

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

See also
--------

* `text-decoration`
* `text-decoration-skip`