recursal/MDN huggingface dataset:
scale
=====

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

Try it
------

Syntax
------


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

/\* Single values \*/
/\* values of more than 1 or 100% make the element grow \*/
scale: 2;
/\* values of less than 1 or 100% make the element shrink \*/
scale: 50%;

/\* Two values \*/
scale: 2 0.5;

/\* Three values \*/
scale: 200% 50% 200%;

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

### Values

Single value

A `<number>` or `<percentage>` specifying a scale factor to make the affected element scale by the same factor along both the X and Y axes. Equivalent to a `scale()` (2D scaling) function with a single value specified.

Two values

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

Three values

Three `<number>` or `<percentage>` values that specify the X, Y, and Z axis scaling values (respectively) of a 3D scale. Equivalent to a `scale3d()` (3D scaling) function.

`none`

Specifies that no scaling should be applied.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

scale =   
  none                              |  
  [ <number> | <percentage> ]{1,3}    
  
```

Examples
--------

### Scaling an element on hover

 The following example shows how to scale an element on hover.
 Two boxes are shown, one with a single `scale` value which scales the element along both axes.
 The second box has two `scale` values which scales the element along the X and Y axes independently.

#### HTML


```html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
```


#### CSS


```css
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}
```


#### Result

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

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

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

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

See also
--------

* `translate`
* `rotate`
* `transform`

Note: skew is not an independent transform value
font-language-override
======================

The **`font-language-override`** CSS property controls the use of language-specific glyphs in a typeface.

By default, HTML's `lang` attribute tells browsers to display glyphs designed specifically for that language. For example, a lot of fonts have a special character for the digraph `fi` that merge the dot on the "i" with the "f." However, if the language is set to Turkish the typeface will likely know not to use the merged glyph; Turkish has two versions of the "i," one with a dot (`i`) and one without (`ı`), and using the ligature would incorrectly transform a dotted "i" into a dotless "i."

The `font-language-override` property lets you override the typeface behavior for a specific language. This is useful, for example, when the typeface you're using lacks proper support for the language. For instance, if a typeface doesn't have proper rules for the Azeri language, you can force the font to use Turkish glyphs, which follow similar rules.

Syntax
------


```css
/\* Keyword value \*/
font-language-override: normal;

/\* <string> values \*/
font-language-override: "ENG"; /\* Use English glyphs \*/
font-language-override: "TRK"; /\* Use Turkish glyphs \*/

/\* Global values \*/
font-language-override: inherit;
font-language-override: initial;
font-language-override: revert;
font-language-override: revert-layer;
font-language-override: unset;
```


The `font-language-override` property is specified as the keyword `normal` or a `<string>`.

### Values

`normal`

Tells the browser to use font glyphs that are appropriate for the language specified by the `lang` attribute. This is the default value.

`<string>`

Tells the browser to use font glyphs that are appropriate for the language specified by the string. The string must match a language tag found in the OpenType language system. For example, "ENG" is English, and "KOR" is Korean.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| 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-language-override =   
  normal    |  
  <string>    
  
```

Examples
--------

### Using Danish glyphs

#### HTML


```html
<p class="para1">Default language setting.</p>
<p class="para2">
  This is a string with the <code>font-language-override</code> set to Danish.
</p>
```


#### CSS


```css
p.para1 {
  font-language-override: normal;
}

p.para2 {
  font-language-override: "DAN";
}
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-language-override-prop |

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

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

See also
--------

* `font-variant`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `font-kerning`.
Universal selectors
===================

The CSS **universal selector** (`*`) matches elements of any type.


```css
/\* Selects all elements \*/
\* {
  color: green;
}
```


The universal selector is a special type selector and can therefore 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|*` - matches all elements in namespace *ns*
* `*|*` - matches all elements
* `|*` - matches all elements without any declared namespace
Syntax
------


```css
\* { style properties }
```


The asterisk is optional with simple selectors. For instance, `*.warning` and `.warning` are equivalent.

Examples
--------

### CSS


```css
\* [lang^="en"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/\* automatically clear the next sibling after a floating element \*/
.floating + \* {
  clear: left;
}
```

### HTML


```html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>
```

### Result

### Namespaces

In this example the selector will only match elements in the example namespace.


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

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

See also
--------

* CSS selectors module
* Learn CSS: Selectors
@font-palette-values
====================

The **`@font-palette-values`** CSS at-rule allows you to customize the default values of font-palette created by the font-maker.

Syntax
------


```css
@font-palette-values --identifier {
  font-family: Bixa;
}
.my-class {
  font-palette: --identifier;
}
```


The <dashed-ident> is a user defined identifier, that while it looks like a CSS custom property behaves in a different way and is not wrapped in a CSS var() function.

### Descriptors

font-family

Specifies the name of the font family that this palette can be applied to.

base-palette

Specifies the name or index of the base-palette, created by the font-maker, to use.

override-colors

Specifies the colors in the base palette to override.

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

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

@font-palette-values =   
  @font-palette-values <dashed-ident> { <declaration-list> }    
  
```

Examples
--------

### Overriding colors in an existing palette

This example shows how you can change some or all of the colors in a color font.

#### HTML


```html
<p>default colors</p>
<p class="alternate">alternate colors</p>
```


#### CSS


```css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
p {
  font-family: "Bungee Spice";
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}
```


#### Result

When overriding colors of the normal or base-palette at index 0 you do not need to declare which base-palette to use. This should only be done when overriding a different base-palette. If you are overriding all the colors then there is also no need to specify the base-palette to use.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # at-ruledef-font-palette-values |

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

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

See also
--------

* `font-palette` property
* `font-family` descriptor
* `base-palette` descriptor
* `override-colors` descriptor
* `CSSFontPaletteValuesRule`
scroll-padding-inline
=====================

The `scroll-padding-inline` shorthand property sets the scroll padding of an element in the inline dimension.

Try it
------

The scroll-padding properties define offsets for the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

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

This property is a shorthand for the following CSS properties:

* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
Syntax
------


```css
/\* Keyword values \*/
scroll-padding-inline: auto;

/\* <length> values \*/
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;

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

### Values

`<length-percentage>`

An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `scroll-padding-inline-start`: `auto`
* `scroll-padding-inline-end`: `auto`
 |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as each of the properties of the shorthand:* `scroll-padding-inline-start`: as specified
* `scroll-padding-inline-end`: as specified
 |
| Animation type | by computed value type |

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

scroll-padding-inline =   
  [ auto | <length-percentage [0,∞]> ]{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-inline |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
ruby-align
==========

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

The **`ruby-align`** CSS property defines the distribution of the different ruby elements over the base.

Syntax
------


```css
/\* Keyword values \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

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

### Values

`start`

Is a keyword indicating that the ruby will be aligned with the start of the base text.

`center`

Is a keyword indicating that the ruby will be aligned at the middle of the base text.

`space-between`

Is a keyword indicating that the extra space will be distributed between the elements of the ruby.

`space-around`

Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

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

|  |  |
| --- | --- |
| Initial value | `space-around` |
| Applies to | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

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

ruby-align =   
  start          |  
  center         |  
  space-between  |  
  space-around     
  
```

Examples
--------

### Ruby aligned at the start of the base text

#### HTML


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: start;
}
```


#### Result

### Ruby aligned at the center of the base text

#### HTML


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: center;
}
```


#### Result

### Extra space distributed between ruby elements

#### HTML


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: space-between;
}
```


#### Result

### Extra space distributed between and around ruby elements

#### HTML


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: space-around;
}
```


#### Result

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |

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-position`, `ruby-merge`.
scroll-margin-top
=================

The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Try it
------

Syntax
------


```css
/\* <length> values \*/
scroll-margin-top: 10px;
scroll-margin-top: 1em;

/\* Global values \*/
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: revert;
scroll-margin-top: revert-layer;
scroll-margin-top: unset;
```

### Values

`<length>`

An outset from the top edge of the scroll container.

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

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

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

scroll-margin-top =   
  <length>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
scroll-padding-inline-end
=========================

The `scroll-padding-inline-end` property defines offsets for the end edge in the inline dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-padding-inline-end: auto;

/\* <length> values \*/
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;

/\* Global values \*/
scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: revert-layer;
scroll-padding-inline-end: unset;
```

### Values

`<length-percentage>`

An inwards offset from the inline end edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-inline-end =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
-moz-float-edge
===============

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

The non-standard **`-moz-float-edge`** CSS property specifies whether the height and width properties of the element include the margin, border, or padding thickness.

Syntax
------


```css
/\* Keyword values \*/
-moz-float-edge: border-box;
-moz-float-edge: content-box;
-moz-float-edge: margin-box;
-moz-float-edge: padding-box;

/\* Global values \*/
-moz-float-edge: inherit;
-moz-float-edge: initial;
-moz-float-edge: unset;
```

### Values

`border-box`

The height and width properties include the content, padding and border but not the margin.

`content-box`

The height and width properties include the content, but not the padding, border or margin.

`margin-box`

The height and width properties include the content, padding, border and margin.

`padding-box`

The height and width properties include the content and padding but not the border or margin.

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

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

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

-moz-float-edge =
  border-box | content-box | margin-box | padding-box
```

Examples
--------

### HTML


```html
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
```

### CSS


```css
.box {
  display: block;
  height: 5px;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: border-box;
}
```

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

* Firefox bug 432891
unset
=====

The **`unset`** CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the `inherit` keyword in the first case, when the property is an inherited property, and like the `initial` keyword in the second case, when the property is a non-inherited property.

**`unset`** can be applied to any CSS property, including the CSS shorthand property `all`.

Examples
--------

### Color

`color` is an inherited property.

#### HTML


```html
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
```


#### CSS


```css
.foo {
  color: blue;
}

.bar {
  color: green;
}

p {
  color: red;
}

.bar p {
  color: unset;
}
```


#### Result

### Border

`border` is a non-inherited property.

#### HTML


```html
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has a black border (initial default, not inherited).</p>
</div>
```


#### CSS


```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```


#### Result

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

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

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

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

See also
--------

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