recursal/MDN huggingface dataset:
Privacy and the :visited selector
=================================

Before about 2010, the CSS `:visited` selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through `window.getComputedStyle` and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.

To mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.

Little white lies
-----------------

To preserve users' privacy, Firefox and other browsers will lie to web applications under certain circumstances:

* The `window.getComputedStyle` method, and similar functions such as `element.querySelector`, will always return values indicating that a user has never visited any of the links on a page.
* If you use a sibling selector such as `:visited + span`, the adjacent element (`span` in this example) will be styled as if the link were unvisited.
* In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Limits to visited link styles
-----------------------------

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

* `color`
* `background-color`
* `border-color` (and its sub-properties)
* `column-rule-color`
* `outline-color`
* `text-decoration-color`
* `text-emphasis-color`
* The color parts of the `fill` and `stroke` attributes

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using the `alpha` parameter to `rgb()` or `hsl()`, or the `transparent` keyword.

Here is an example of how to use styles with the aforementioned restrictions:


```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* The default value of background-color is `transparent`. You need to
 specify a different value, otherwise changes on :visited won't apply. \*/
}

:visited {
  outline-color: orange; /\* Visited links have an orange outline \*/
  background-color: green; /\* Visited links have a green background \*/
  color: yellow; /\* Visited links have yellow colored text \*/
}
```

Impact on web developers
------------------------

Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:

* Using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.
* Colors that are otherwise transparent will fail to appear if styled in a `:visited` selector.
See also
--------

* privacy-related changes coming to CSS :visited on Mozilla Hacks
* Plugging the CSS History Leak on the Mozilla Security Blog
* Preventing attacks on a user's history through CSS :visited selectors
::-webkit-meter-inner-element
=============================

**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-meter-inner-element`** is a proprietary WebKit CSS pseudo-element for selecting and applying styles to the outer containing element of a `<meter>` element. Additional markup to render the meter element as read-only.

Syntax
------


```css
::-webkit-meter-inner-element {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

This will only work in WebKit and Blink-based browsers, such as Safari, Chrome, and Chromium-based versions of Edge.

### HTML


```html
Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: <meter id="styled" min="0" max="10" value="6">Score 6/10</meter>
```

### CSS


```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  border: 1px dashed #aaa;
}
```

### JavaScript


```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

### Result

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

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

See also
--------

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
<flex>
======

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 **`<flex>`** CSS data type denotes a flexible length within a grid container. It is used in `grid-template-columns`, `grid-template-rows` and other related properties.

Syntax
------

The `<flex>` data type is specified as a `<number>` followed by the unit `fr`. The `fr` unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.

Examples
--------

### Examples of correct values for the fr data type
```

1fr    /* Using an integer value */
2.5fr  /* Using a float value */
```

### Example of use in a tracklisting for CSS Grid layout


```css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
```

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # fr-unit |

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

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

See also
--------

* CSS Grid Layout
background-origin
=================

The **`background-origin`** CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

Try it
------

Note that `background-origin` is ignored when `background-attachment` is `fixed`.

Syntax
------


```css
/\* Keyword values \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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


The `background-origin` property is specified as one of the keyword values listed below.

### Values

`border-box`

The background is positioned relative to the border box.

`padding-box`

The background is positioned relative to the padding box.

`content-box`

The background is positioned relative to the content box.

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

|  |  |
| --- | --- |
| Initial value | `padding-box` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | a repeatable list |

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

background-origin =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Examples
--------

### Setting background origins


```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```



```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```



```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

### Using two gradients

In this example the box has a thick dotted border. The first gradient uses the `padding-box` as the `background-origin` and therefore the background sits inside the border. The second uses the `content-box` and so only displays behind the content.


```css
.box {
  margin: 10px 0;
  color: #fff;
  background: linear-gradient(
      90deg,
      rgb(131 58 180 / 100%) 0%,
      rgb(253 29 29 / 60%) 60%,
      rgb(252 176 69 / 100%) 100%
    ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}
```



```html
<div class="box">Hello!</div>
```

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

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

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

See also
--------

* `background-clip`
::-moz-page
===========

**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-page`** CSS pseudo-element is a Mozilla extension that represents an individual page when printed or in a print preview.

Syntax
------


```css
::-moz-page {
  /\* ... \*/
}
```

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

* `::-moz-page-sequence`
* `::-moz-scrolled-page-sequence`
::backdrop
==========

The **`::backdrop`** CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.

Try it
------

Syntax
------


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

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

Backdrops appear in the following instances:

* Elements which have been placed in fullscreen mode using the Fullscreen API `Element.requestFullscreen()` method.
* `<dialog>` elements that have been shown in the top layer via a `HTMLDialogElement.showModal()` call.
* Popover elements that have been shown in the top layer via a `HTMLElement.showPopover()` call.

When multiple elements have been placed into the top layer, each one has its own `::backdrop` pseudo-element.


```css
/\* Backdrop is only displayed when dialog is opened with dialog.showModal() \*/
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}
```


Elements are placed in a last-in/first out (LIFO) stack in the top layer. The `::backdrop` pseudo-element makes it possible to obscure, style, or completely hide everything located below a top layer element.

`::backdrop` neither inherits from nor is inherited by any other elements. No restrictions are made on what properties apply to this pseudo-element.

Examples
--------

### Styling the backdrop for fullscreen video

In this example, the backdrop style used when a video is shifted to fullscreen mode is configured to be a grey-blue color rather than the black it defaults to in most browsers.


```css
video::backdrop {
  background-color: #448;
}
```


The resulting screen looks like this:

![An almost full-screen video player with purple above and below the player as the video player doesn't completely fill the screen.](/en-US/docs/Web/CSS/::backdrop/bbb-backdrop.png)

See this example in action, after changing the color of the background cause the video to go fullscreen to see the change to the backdrop color.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

See also
--------

* `:fullscreen` pseudo-class
* `<dialog>` HTML element
* Fullscreen API
* `popover` HTML global attribute
* Popover API
acos()
======

The **`acos()`** CSS function is a trigonometric function that returns the inverse cosine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `0deg` and `180deg`.

Syntax
------


```css
/\* Single <number> values \*/
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/\* Other values \*/
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));
```

### Parameter

The `acos(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-1` and `1`.

### Return value

The inverse cosine of an `number` will always return an `<angle>` between `0deg` and `180deg`.

* If `number` is less than `-1` or greater than `1`, the result is `NaN`.
* If `number` is exactly `1`, the result is `0`.
### Formal syntax
```

<acos()> =   
  acos( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Examples
--------

### Rotate elements

The `acos()` function can be used to `rotate` elements as it return an `<angle>`.

#### HTML


```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}
```


#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

See also
--------

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `atan()`
* `atan2()`
:enabled
========

The **`:enabled`** CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.

Try it
------

Syntax
------
```

:enabled
```

Examples
--------

The following example makes the color of text and button `<input>`s green when enabled, and gray when disabled. This helps the user understand which elements can be interacted with.

### HTML


```html
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS


```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

See also
--------

* `:disabled`
::target-text
=============

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

The **`::target-text`** CSS pseudo-element represents the text that has been scrolled to if the browser supports text fragments. It allows authors to choose how to highlight that section of text.


```css
::target-text {
  background-color: pink;
}
```

Syntax
------


```css
::target-text {
  /\* ... \*/
}
```

Examples
--------

### Highlighting text fragments


```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```


To see this CSS in action follow the link to scroll-to-text demo.

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

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

See also
--------

* Text fragments
:-moz-loading
=============

**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-loading`** CSS pseudo-class is a Mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet. Note that images that are *in the process* of loading *are not* matched by this pseudo-class.

**Note:** This selector is mainly intended to be used by theme developers.

Syntax
------


```css
:-moz-loading {
  /\* ... \*/
}
```

Examples
--------

### Setting a background for images that are loading


```css
:-moz-loading {
  background-color: #aaa;
  background-image: url(loading-animation.gif) center no-repeat;
}
```

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

Not part of any standard.

See also
--------

* `:-moz-broken`, `:-moz-suppressed`, `:-moz-user-disabled`
:out-of-range
=============

The **`:out-of-range`** CSS pseudo-class represents an `<input>` element whose current value is outside the range limits specified by the `min` and `max` attributes.

Try it
------

This pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.

**Note:** This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

Syntax
------


```css
:out-of-range {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<form action="" id="form1">
  <p>Values between 1 and 10 are valid.</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

See also
--------

* `:in-range`
* Form data validation
:seeking
========

 The **`:seeking`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when the playable element is seeking a playback position in the media resource.
 A resource is considered to be seeking if the user has requested playback of a specific position in the media resource, but the media element has not yet reached that position.

 Seeking is different from `:buffering` in that the media element is not currently loading data, but is instead skipping to a new position in the media resource.
 For more information, see the Media buffering, seeking, and time ranges guide.

Syntax
------


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

Examples
--------

### CSS


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

video:seeking {
  outline: 5px solid blue;
}
```

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

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

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:playing`
* `:stalled`
* `:volume-locked`
* CSS selectors
::-webkit-progress-value
========================

**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 **`::-webkit-progress-value`** CSS pseudo-element represents the filled-in portion of the bar of a `<progress>` element. It is a child of the `::-webkit-progress-bar` pseudo-element.

**Note:** In order to let `::-webkit-progress-value` take effect, `appearance` needs to be set to `none` on the `<progress>` element.

Syntax
------


```css
::-webkit-progress-value {
  /\* ... \*/
}
```

Examples
--------

This example will only work in browsers based on Blink or WebKit.

### HTML


```html
<progress value="10" max="50"></progress>
```

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}
```

### Result

### Result screenshot

A progress bar using the style above would look like this:

![A long orange and grey box. The left 20% is orange. The right 80% is grey.](/en-US/docs/Web/CSS/::-webkit-progress-value/progress-value.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 WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-bar`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`