Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions files/en-us/mozilla/firefox/releases/150/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Firefox 150 is the current [Beta version of Firefox](https://www.firefox.com/en-

- A specific message is now displayed in the [_Response tab_ of the Network pane](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_details/index.html#response-tab) to indicate why there is no response data when a request has been redirected.
([Firefox bug 2016679](https://bugzil.la/2016679)).
- A new "Element-specific pseudo-classes" section has been added to the [pseudo-class toggle pane](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#viewing-common-pseudo-classes), including a toggle for the {{cssxref(":open")}} pseudo-class, which is only available for elements that have an open state like `<dialog>` elements. The existing toggle for the {{cssxref(":visited")}} pseudo-class was also moved there, as it only applies to `<a>` and `<area>` elements. ([Firefox bug 2014442](https://bugzil.la/2014442)).

### HTML

Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/css/reference/values/data_types/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ These types include keywords and identifiers as well as strings, and URLs.
- : Rolls back the cascade to the value of the earlier origin.
- {{CSSXref("revert-layer")}}
- : Rolls back the cascade to the value of the earlier [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer).
- {{CSSXref("revert-rule")}}
- : Rolls back the cascade to the value of an earlier matching style rule.
- {{CSSXref("unset")}}
- : Acts as `inherit` or `initial` depending on whether the property is inherited or not.
- {{cssxref("&lt;custom-ident&gt;")}}
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/reference/values/inherit/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,5 +160,5 @@ The `<h2>` elements are all `green`. However, if they are nested in a {{htmlelem

## See also

- {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}} keywords
- {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, {{cssxref("revert-rule")}}, and {{cssxref("unset")}} keywords
- [Inheritance](/en-US/docs/Web/CSS/Guides/Cascade/Inheritance)
4 changes: 2 additions & 2 deletions files/en-us/web/css/reference/values/initial/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ sidebar: cssref

The **`initial`** [CSS](/en-US/docs/Web/CSS) keyword applies the [initial (or default) value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#initial_value) of a property to an element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}. With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately.

On [inherited properties](/en-US/docs/Web/CSS/Guides/Cascade/Inheritance#inherited_properties), the initial value may be unexpected. You should consider using the {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, or {{cssxref("revert-layer")}} keywords instead.
On [inherited properties](/en-US/docs/Web/CSS/Guides/Cascade/Inheritance#inherited_properties), the initial value may be unexpected. You should consider using the {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, or {{cssxref("revert-rule")}} keywords instead.

## Examples

Expand Down Expand Up @@ -62,6 +62,6 @@ With the `initial` keyword in this example, the `color` and `font-size` values o

## See also

- {{cssxref("inherit")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}} keywords
- {{cssxref("inherit")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, {{cssxref("revert-rule")}}, and {{cssxref("unset")}} keywords
- {{cssxref("all")}}
- [Inheritance](/en-US/docs/Web/CSS/Guides/Cascade/Inheritance)
1 change: 1 addition & 0 deletions files/en-us/web/css/reference/values/revert-layer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ The style for all `<li>` elements rolls back to the defaults in the user-agent o
- {{cssxref("initial")}}
- {{cssxref("inherit")}}
- {{cssxref("revert")}}
- {{cssxref("revert-rule")}}
- {{cssxref("unset")}}
- {{cssxref("all")}}
- [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module
175 changes: 175 additions & 0 deletions files/en-us/web/css/reference/values/revert-rule/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
---
title: revert-rule
slug: Web/CSS/Reference/Values/revert-rule
page-type: css-keyword
browser-compat: css.types.global_keywords.revert-rule
sidebar: cssref
---

The **`revert-rule`** [CSS-wide keyword](/en-US/docs/Web/CSS/Reference/Values/Data_types#css-wide_keywords) rolls back the cascaded value of a property to the value it would have had if the current [style rule](/en-US/docs/Web/CSS/Syntax#css_rulesets) had not been present. The cascade then determines the value from the remaining declarations — this could be another rule in the same [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer), a rule in a different layer, a different [style origin](/en-US/docs/Glossary/Style_origin), or a [default value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#defaulting) (`inherited` or `initial`).

When used inside a [CSS animation](/en-US/docs/Web/CSS/CSS_animations) (the animation origin), the `revert-rule` keyword behaves like {{cssxref("revert-layer")}}.

This keyword can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}.

## Revert-rule vs. revert-layer vs. revert

The `revert-rule`, {{cssxref("revert-layer")}}, and {{cssxref("revert")}} keywords each roll back the cascade, but at different levels of granularity:

- {{cssxref("revert")}} removes all declarations from the current [style origin](/en-US/docs/Glossary/Style_origin), rolling back to the previous origin (for example, from author styles to user-agent styles).
- {{cssxref("revert-layer")}} removes all declarations from the current [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer), rolling back to the previous layer within the same origin.
- `revert-rule` removes only the declarations from the current style rule. Other rules in the same cascade layer still apply.

This makes `revert-rule` useful for conditionally ignoring specific declarations within a rule while still respecting declarations from other rules in the same layer.

## Examples

### Rolling back to the previous rule

In this example, two rules target the same element. The second rule uses `revert-rule` on the `color` property, which causes the cascade to determine the value as if the `p.special` rule were not present, falling back to the value established by the first rule.

#### HTML

```html
<p class="special">This paragraph has special styling.</p>
```

#### CSS

```css hidden
body {
font-family: system-ui;
}

@supports not (color: revert-rule) {
body::before {
content: "Your browser doesn't support the revert-rule keyword yet.";
background-color: wheat;
display: block;
text-align: center;
padding: 1em;
}
}
```

```css
p {
color: blue;
font-weight: bold;
}

p.special {
color: revert-rule;
border: 1px solid currentcolor;
}
```

#### Result

{{EmbedLiveSample('Rolling back to the previous rule', '100%', 120)}}

The paragraph text is blue from the `p` rule because `color: revert-rule` causes the `color` declaration in `p.special` to be ignored. The `font-weight` and `border` declarations are unaffected.

### Reverting from a style attribute

When `revert-rule` is used in a [style attribute](/en-US/docs/Web/HTML/Reference/Global_attributes/style), it causes the cascade to act as if the style attribute were not present. This works because the style attribute is treated as its own style rule.

#### HTML

```html
<p style="color: revert-rule">This text uses the stylesheet color.</p>
```

#### CSS

```css hidden
body {
font-family: system-ui;
}

@supports not (color: revert-rule) {
body::before {
content: "Your browser doesn't support the revert-rule keyword yet.";
background-color: wheat;
display: block;
text-align: center;
padding: 1em;
}
}
```

```css
p {
color: green;
}
```

#### Result

{{EmbedLiveSample('Reverting from a style attribute', '100%', 120)}}

The paragraph text is green because `revert-rule` causes the cascade to ignore the style attribute's declaration, and the `p` rule takes effect.

### Chaining multiple `revert-rule` values

If multiple rules use `revert-rule` for the same property, the cascade ignores each of them in turn, continuing back through earlier rules until it finds a concrete value.

#### HTML

```html
<p class="a b">This text is styled by a chain of revert-rule values.</p>
```

#### CSS

```css hidden
body {
font-family: system-ui;
}

@supports not (color: revert-rule) {
body::before {
content: "Your browser doesn't support the revert-rule keyword yet.";
background-color: wheat;
display: block;
text-align: center;
padding: 1em;
}
}
```

```css
p {
color: red;
}
p.a {
color: revert-rule;
}
p.b {
color: revert-rule;
}
```

#### Result

{{EmbedLiveSample('Chaining multiple revert-rule values', '100%', 120)}}

Both the `p.b` and `p.a` rules are ignored by `revert-rule`. The cascade falls through to the `p` rule, so the text is red.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("initial")}}
- {{cssxref("inherit")}}
- {{cssxref("revert")}}
- {{cssxref("revert-layer")}}
- {{cssxref("unset")}}
- {{cssxref("all")}}
- [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module
1 change: 1 addition & 0 deletions files/en-us/web/css/reference/values/revert/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,5 +158,6 @@ Also, if neither the user agent nor the user override the `<h3>` or `<section>`
- Use the {{cssxref("initial")}} keyword to set a property to its initial value.
- Use the {{cssxref("inherit")}} keyword to make an element's property the same as its parent.
- Use the {{cssxref("revert-layer")}} keyword to reset a property to the value established in a previous cascade layer.
- Use the {{cssxref("revert-rule")}} keyword to reset a property to the value of an earlier matching style rule.
- Use the {{cssxref("unset")}} keyword to set a property to its inherited value if it inherits or to its initial value if not.
- The {{cssxref("all")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
1 change: 1 addition & 0 deletions files/en-us/web/css/reference/values/unset/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,5 @@ p {
- Use the {{cssxref("inherit")}} keyword to make an element's property the same as its parent.
- Use the {{cssxref("revert")}} keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
- Use the {{cssxref("revert-layer")}} keyword to reset a property to the value established in a previous cascade layer.
- Use the {{cssxref("revert-rule")}} keyword to reset a property to the value of an earlier matching style rule.
- The {{cssxref("all")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/accept/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: accept"
title: "`accept` HTML attribute"
short-title: accept
slug: Web/HTML/Reference/Attributes/accept
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: autocomplete"
title: "`autocomplete` HTML attribute"
short-title: autocomplete
slug: Web/HTML/Reference/Attributes/autocomplete
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/capture/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: capture"
title: "`capture` HTML attribute"
short-title: capture
slug: Web/HTML/Reference/Attributes/capture
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/content/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: content"
title: "`content` HTML attribute"
short-title: content
slug: Web/HTML/Reference/Attributes/content
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: crossorigin"
title: "`crossorigin` HTML attribute"
short-title: crossorigin
slug: Web/HTML/Reference/Attributes/crossorigin
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/dirname/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: dirname"
title: "`dirname` HTML attribute"
short-title: dirname
slug: Web/HTML/Reference/Attributes/dirname
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: disabled"
title: "`disabled` HTML attribute"
short-title: disabled
slug: Web/HTML/Reference/Attributes/disabled
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: elementtiming"
title: "`elementtiming` HTML attribute"
short-title: elementtiming
slug: Web/HTML/Reference/Attributes/elementtiming
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: fetchpriority"
title: "`fetchpriority` HTML attribute"
short-title: fetchpriority
slug: Web/HTML/Reference/Attributes/fetchpriority
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/for/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: for"
title: "`for` HTML attribute"
short-title: for
slug: Web/HTML/Reference/Attributes/for
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/form/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: form"
title: "`form` HTML attribute"
short-title: form
slug: Web/HTML/Reference/Attributes/form
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: integrity"
title: "`integrity` HTML attribute"
short-title: integrity
slug: Web/HTML/Reference/Attributes/integrity
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/max/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: max"
title: "`max` HTML attribute"
short-title: max
slug: Web/HTML/Reference/Attributes/max
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: maxlength"
title: "`maxlength` HTML attribute"
short-title: maxlength
slug: Web/HTML/Reference/Attributes/maxlength
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/min/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: min"
title: "`min` HTML attribute"
short-title: min
slug: Web/HTML/Reference/Attributes/min
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: minlength"
title: "`minlength` HTML attribute"
short-title: minlength
slug: Web/HTML/Reference/Attributes/minlength
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: multiple"
title: "`multiple` HTML attribute"
short-title: multiple
slug: Web/HTML/Reference/Attributes/multiple
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/pattern/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: pattern"
title: "`pattern` HTML attribute"
short-title: pattern
slug: Web/HTML/Reference/Attributes/pattern
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: placeholder"
title: "`placeholder` HTML attribute"
short-title: placeholder
slug: Web/HTML/Reference/Attributes/placeholder
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: readonly"
title: "`readonly` HTML attribute"
short-title: readonly
slug: Web/HTML/Reference/Attributes/readonly
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/rel/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: rel"
title: "`rel` HTML attribute"
short-title: rel
slug: Web/HTML/Reference/Attributes/rel
page-type: html-attribute
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: required"
title: "`required` HTML attribute"
short-title: required
slug: Web/HTML/Reference/Attributes/required
page-type: html-attribute
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/size/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "HTML attribute: size"
title: "`size` HTML attribute"
short-title: size
slug: Web/HTML/Reference/Attributes/size
page-type: html-attribute
Expand Down
Loading