diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 9c7c1a3c1d1224a..b8c293a6c2ed716 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -469,7 +469,7 @@ /en-US/docs/CSS/CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/CSS_values_serialization /en-US/docs/Web/CSS /en-US/docs/CSS/CSS_values_syntax /en-US/docs/Web/CSS -/en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/Cascade +/en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade /en-US/docs/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator /en-US/docs/CSS/Class_selectors /en-US/docs/Web/CSS/Class_selectors /en-US/docs/CSS/Comments /en-US/docs/Web/CSS/Comments @@ -11929,6 +11929,7 @@ /en-US/docs/Web/CSS/CSS_transform_functions /en-US/docs/Web/CSS/transform /en-US/docs/Web/CSS/CSS_values_serialization /en-US/docs/Web/CSS /en-US/docs/Web/CSS/CSS_values_syntax /en-US/docs/Web/CSS +/en-US/docs/Web/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade /en-US/docs/Web/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator /en-US/docs/Web/CSS/Common_CSS_Questions /en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ /en-US/docs/Web/CSS/Compositing_and_Blending /en-US/docs/Web/CSS/CSS_compositing_and_blending diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index ca2d0dd11028c95..1d3248b4e3dfaf7 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -76239,6 +76239,37 @@ "Fredchat" ] }, + "Web/CSS/CSS_cascade/Cascade": { + "modified": "2020-07-27T13:35:05.470Z", + "contributors": [ + "wbamberg", + "jswisher", + "mfuji09", + "fazl", + "marcelobcortes", + "birtles", + "agarun", + "ExE-Boss", + "dashlee92", + "oliverbaptiste", + "01abhishekjain", + "michaeljgut", + "Sheppy", + "Biiinggg", + "mfluehr", + "chrisdavidmills", + "merelinguist", + "verv0eren", + "HarryPehkonen", + "malozaibi", + "Sebastianz", + "mrevan", + "rralian", + "nasifmdtanjim", + "velvel53", + "teoli" + ] + }, "Web/CSS/CSS_cascade/Specificity": { "modified": "2020-11-14T16:01:00.890Z", "contributors": [ @@ -77854,37 +77885,6 @@ "teoli" ] }, - "Web/CSS/Cascade": { - "modified": "2020-07-27T13:35:05.470Z", - "contributors": [ - "wbamberg", - "jswisher", - "mfuji09", - "fazl", - "marcelobcortes", - "birtles", - "agarun", - "ExE-Boss", - "dashlee92", - "oliverbaptiste", - "01abhishekjain", - "michaeljgut", - "Sheppy", - "Biiinggg", - "mfluehr", - "chrisdavidmills", - "merelinguist", - "verv0eren", - "HarryPehkonen", - "malozaibi", - "Sebastianz", - "mrevan", - "rralian", - "nasifmdtanjim", - "velvel53", - "teoli" - ] - }, "Web/CSS/Child_combinator": { "modified": "2020-10-15T21:04:19.088Z", "contributors": [ diff --git a/files/en-us/glossary/semantics/index.md b/files/en-us/glossary/semantics/index.md index 5453746e577485c..421f5a3c8bd8342 100644 --- a/files/en-us/glossary/semantics/index.md +++ b/files/en-us/glossary/semantics/index.md @@ -24,7 +24,7 @@ In HTML, for example, the {{htmlelement("Heading_Elements", "h1")}} element is a

This is a top level heading

``` -By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted). +By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted). On the other hand, you could make any element _look_ like a top level heading. Consider the following: diff --git a/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md b/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md index 60d5edaff967ef4..5f0b61e23fec946 100644 --- a/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter {{LearnSidebar}} -This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). +This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). If you are new to CSS, working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course. However, knowing the basics of what cascade layers are should you encounter them in your projects is helpful. The more you work with CSS, understanding cascade layers and knowing how to leverage their power will save you from a lot of pain managing a code base with CSS from different parties, plugins, and development teams. @@ -53,7 +53,7 @@ For each step, only the declarations "still in the running" move on to "compete" ### Origin and cascade -There are three [cascade origin types](/en-US/docs/Web/CSS/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence: +There are three [cascade origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence: 1. user-agent normal styles 2. user normal styles diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md index 33c836e86e622c8..f8c8e5125e90ecd 100644 --- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md @@ -41,7 +41,7 @@ While working through this lesson may seem less relevant immediately and a littl CSS stands for **Cascading Style Sheets**, and that first word _cascading_ is incredibly important to understand — the way that the cascade behaves is key to understanding CSS. -At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/CSS_cascade/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work. +At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/CSS_cascade/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work. Also significant here is the concept of [**inheritance**](/en-US/docs/Web/CSS/Inheritance), which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect. @@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w ### Cascade -Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here. +Stylesheets [**cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here. In the below example, we have two rules that could apply to the `

` element. The `

` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins. @@ -200,7 +200,7 @@ CSS provides five special universal property values for controlling inheritance. - : Resets the property to its natural value, which means that if the property is naturally inherited it acts like `inherit`, otherwise it acts like `initial`. > [!NOTE] -> See [Origin types](/en-US/docs/Web/CSS/Cascade#origin_types) for more information on each of these and how they work. +> See [Origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types) for more information on each of these and how they work. We can look at a list of links and explore how universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to better understand HTML and CSS. diff --git a/files/en-us/learn_web_development/core/styling_basics/index.md b/files/en-us/learn_web_development/core/styling_basics/index.md index a6582a62a70b16b..4cc896039317f3b 100644 --- a/files/en-us/learn_web_development/core/styling_basics/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/index.md @@ -65,7 +65,7 @@ These tutorials are not part of the learning pathway, but they are interesting n - [Advanced styling effects](/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects) - : This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on. - [Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - - : This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). + - : This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). - [Handling different text directions](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions) - : In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article. - [Organizing CSS](/en-US/docs/Learn_web_development/Core/Styling_basics/Organizing) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md index 2d2737b2ef2754e..5cb5a29e26c55c1 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md @@ -45,7 +45,7 @@ await browser.scripting.insertCSS( - : `string`. The style origin for the injection, either `USER`, to add the CSS as a user stylesheet, or `AUTHOR`, to add it as an author stylesheet. Defaults to `AUTHOR`. - - `USER` enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order). + - `USER` enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order). - `AUTHOR` stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes. - `target` diff --git a/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md b/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md index f49f78ddf2a3be1..34d8c763ff2bb96 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md @@ -48,7 +48,7 @@ let inserting = browser.tabs.insertCSS( - : `string`. This can take one of two values: "user", to add the CSS as a user stylesheet or "author" to add it as an author stylesheet. If this option is omitted, the CSS is added as an author stylesheet. - - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order). + - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order). - "author" stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes. - `file` {{optional_inline}} diff --git a/files/en-us/web/api/animation/commitstyles/index.md b/files/en-us/web/api/animation/commitstyles/index.md index 7a41e4e97440ba8..024347115f95712 100644 --- a/files/en-us/web/api/animation/commitstyles/index.md +++ b/files/en-us/web/api/animation/commitstyles/index.md @@ -10,7 +10,7 @@ browser-compat: api.Animation.commitStyles The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations). -`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally. +`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally. Using `commitStyles()` writes the styling state into the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, where they can be modified and replaced as normal. diff --git a/files/en-us/web/api/document/adoptedstylesheets/index.md b/files/en-us/web/api/document/adoptedstylesheets/index.md index 274d97d1e7c205d..c28aa873d3e2a22 100644 --- a/files/en-us/web/api/document/adoptedstylesheets/index.md +++ b/files/en-us/web/api/document/adoptedstylesheets/index.md @@ -16,7 +16,7 @@ The **`adoptedStyleSheets`** property of the {{domxref("Document")}} interface i The same constructed stylesheets can also be shared with one or more {{domxref("ShadowRoot")}} instances using the [`ShadowRoot.adoptedStyleSheets`](/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets) property. Changing an adopted stylesheet will affect all the objects that adopt it. -Stylesheets in the property are evaluated along with the document's other stylesheets using the [CSS cascade algorithm](/en-US/docs/Web/CSS/Cascade). +Stylesheets in the property are evaluated along with the document's other stylesheets using the [CSS cascade algorithm](/en-US/docs/Web/CSS/CSS_cascade/Cascade). Where the resolution of rules considers stylesheet order, `adoptedStyleSheets` are assumed to be ordered after those in [`Document.styleSheets`](/en-US/docs/Web/API/Document/styleSheets). Only stylesheets created using the [`CSSStyleSheet()` constructor](/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet) within the context of the current {{domxref("Document")}} may be adopted. diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md index d3defdc723fbda0..80bdc2c3025e139 100644 --- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md +++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md @@ -239,7 +239,7 @@ The background elements also have `playbackRate`s that are impacted when you cli When animating elements, a common use case is to persist the final state of the animation, after the animation has finished. One method sometimes used for this is to set the animation's [fill mode](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill) to `forwards`. However, it is not recommended to use fill modes to persist the effect of an animation indefinitely, for two reasons: - The browser has to maintain the state of the animation while it is still active, so the animation continues to consume resources even though it is no longer animating. Note that this is somewhat alleviated by the browser [automatically removing filling animations](#automatically_removing_filling_animations). -- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed. +- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed. A better approach is to use the {{domxref("Animation.commitStyles()")}} method. This writes the computed values of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, after which the element can be restyled normally. diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md index 897496fc0020a7b..20f5defe9ca15a5 100644 --- a/files/en-us/web/css/@font-face/font-weight/index.md +++ b/files/en-us/web/css/@font-face/font-weight/index.md @@ -161,7 +161,7 @@ The other three declarations use the light, bold, and extra-bold versions of the - the bold font is associated with the range 500-700 - the extra-bold font is associated with the range 700-1000 -The CSS [cascade](/en-US/docs/Web/CSS/Cascade) ensures that the three latter declarations override parts of the range that was set in the `FiraSans-Regular` declaration. +The CSS [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) ensures that the three latter declarations override parts of the range that was set in the `FiraSans-Regular` declaration. ```css @font-face { diff --git a/files/en-us/web/css/@layer/index.md b/files/en-us/web/css/@layer/index.md index 424ceab4ca6504a..434f72815964272 100644 --- a/files/en-us/web/css/@layer/index.md +++ b/files/en-us/web/css/@layer/index.md @@ -213,7 +213,7 @@ In the following example, two layers are created with no rules applied, then CSS - {{domxref("CSSLayerStatementRule")}} - [`!important`](/en-US/docs/Web/CSS/important) - [`revert-layer`](/en-US/docs/Web/CSS/revert-layer) -- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [The future of CSS: Cascade layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) on bram.us (2021) diff --git a/files/en-us/web/css/actual_value/index.md b/files/en-us/web/css/actual_value/index.md index 0c844a3fe1377cc..f78f3d3ffd23117 100644 --- a/files/en-us/web/css/actual_value/index.md +++ b/files/en-us/web/css/actual_value/index.md @@ -13,7 +13,7 @@ The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value: -1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value). +1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value). 2. Next, the [computed value](/en-US/docs/Web/CSS/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`). 3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/used_value). 4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value. diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md index 3432422f0d086d9..cdaa0e214785300 100644 --- a/files/en-us/web/css/all/index.md +++ b/files/en-us/web/css/all/index.md @@ -38,9 +38,9 @@ The `all` property is specified as one of the CSS global keyword values. Note th - : Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not. - {{cssxref("revert")}} - : Specifies behavior that depends on the stylesheet origin to which the declaration belongs: - - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins. - - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level or user-level rules were specified for the element. - - If the rule belongs to the [user-agent origin](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets), the `revert` value acts like `unset`. + - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins. + - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level or user-level rules were specified for the element. + - If the rule belongs to the [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets), the `revert` value acts like `unset`. - {{cssxref("revert-layer")}} - : Specifies that all the element's properties should roll back the cascade to a previous [cascade layer](/en-US/docs/Web/CSS/@layer), if one exists. If no other cascade layer exists, the element's properties will roll back to the matching rule, if one exists, in the current layer or to a previous [style origin](/en-US/docs/Glossary/Style_origin). diff --git a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md index 5e147a2a60e7e4c..a77c79bcb032200 100644 --- a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md @@ -41,7 +41,7 @@ Finally, note that for non-replaced inline elements, the amount of space taken u ## See also - [Layout and the containing block](/en-US/docs/Web/CSS/Containing_block) -- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - CSS key concepts: - [CSS syntax](/en-US/docs/Web/CSS/Syntax) diff --git a/files/en-us/web/css/cascade/index.md b/files/en-us/web/css/css_cascade/cascade/index.md similarity index 99% rename from files/en-us/web/css/cascade/index.md rename to files/en-us/web/css/css_cascade/cascade/index.md index 4a09f200735afde..23512a8daf1d480 100644 --- a/files/en-us/web/css/cascade/index.md +++ b/files/en-us/web/css/css_cascade/cascade/index.md @@ -1,6 +1,6 @@ --- title: Introducing the CSS Cascade -slug: Web/CSS/Cascade +slug: Web/CSS/CSS_cascade/Cascade page-type: guide spec-urls: https://drafts.csswg.org/css-cascade/ --- diff --git a/files/en-us/web/css/css_cascade/index.md b/files/en-us/web/css/css_cascade/index.md index c60b3684ff27d94..cc85a6624e08d31 100644 --- a/files/en-us/web/css/css_cascade/index.md +++ b/files/en-us/web/css/css_cascade/index.md @@ -49,7 +49,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ### Key concepts and definitions - [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Cascade origin and importance](/en-US/docs/Web/CSS/Cascade) +- [Cascade origin and importance](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Values](/en-US/docs/Web/CSS/Value_definition_syntax) - [actual value](/en-US/docs/Web/CSS/actual_value) - [computed value](/en-US/docs/Web/CSS/computed_value) @@ -57,10 +57,10 @@ The opposite also occurs. Sometimes there are no declarations defining the value - [resolved value](/en-US/docs/Web/CSS/resolved_value) - [specified value](/en-US/docs/Web/CSS/specified_value) - [used value](/en-US/docs/Web/CSS/used_value) -- [Origin types](/en-US/docs/Web/CSS/Cascade#origin_types) - - [user-agent origin](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) - - [author origin](/en-US/docs/Web/CSS/Cascade#author_stylesheets) - - [user origin](/en-US/docs/Web/CSS/Cascade#user_stylesheets) +- [Origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types) + - [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) + - [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets) + - [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets) - [Declaring layers](/en-US/docs/Web/CSS/@import#importing_css_rules_into_a_cascade_layer) - [named layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_statement_at-rule_for_named_layers) - [anonymous layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_block_at-rule_for_named_and_anonymous_layers) @@ -68,7 +68,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ## Guides -- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - : Guide to the cascade algorithm that defines how user agents combine property values originating from different sources. @@ -78,7 +78,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - - : Introduction to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). + - : Introduction to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). - [CSS inheritance](/en-US/docs/Web/CSS/Inheritance) - : A guide to CSS inheritance. @@ -86,7 +86,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ## Related concepts - [Element-attached styles](/en-US/docs/Web/HTML/Global_attributes/style) -- [Inline styles and the cascade](/en-US/docs/Web/CSS/Cascade#inline_styles) +- [Inline styles and the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade#inline_styles) - [Conditional rules for @imports](/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_media_queries) ## Specifications diff --git a/files/en-us/web/css/css_cascade/specificity/index.md b/files/en-us/web/css/css_cascade/specificity/index.md index 606d9363e528145..7ec7cd0dff83db2 100644 --- a/files/en-us/web/css/css_cascade/specificity/index.md +++ b/files/en-us/web/css/css_cascade/specificity/index.md @@ -10,7 +10,7 @@ spec-urls: https://drafts.csswg.org/selectors/#specificity-rules **Specificity** is the algorithm used by browsers to determine the [CSS declaration](/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#css_syntax_basics) that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a [CSS selector](/en-US/docs/Web/CSS/Reference#selectors) to determine which rule from competing CSS declarations gets applied to an element. > [!NOTE] -> Browsers consider specificity **after** determining [cascade origin and importance](/en-US/docs/Web/CSS/Cascade). In other words, for competing property declarations, specificity is relevant and compared only between selectors from the one [cascade origin and layer](/en-US/docs/Web/CSS/@layer) that has precedence for the property. [Scoping proximity](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) and order of appearance become relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal. +> Browsers consider specificity **after** determining [cascade origin and importance](/en-US/docs/Web/CSS/CSS_cascade/Cascade). In other words, for competing property declarations, specificity is relevant and compared only between selectors from the one [cascade origin and layer](/en-US/docs/Web/CSS/@layer) that has precedence for the property. [Scoping proximity](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) and order of appearance become relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal. ## How is specificity calculated? @@ -208,7 +208,7 @@ Make sure to include a comment with every inclusion of the important flag so cod ### The `!important` exception -CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, [`!important`](/en-US/docs/Web/CSS/important) has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the [cascade](/en-US/docs/Web/CSS/Cascade) order of stylesheets. +CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, [`!important`](/en-US/docs/Web/CSS/important) has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) order of stylesheets. If declarations from the same origin and cascade layer conflict and one property value has the `!important` flag set, the important declaration is applied no matter the specificity. When conflicting declarations from the same origin and cascade layer with the `!important` flag are applied to the same element, the declaration with a greater specificity is applied. @@ -475,7 +475,7 @@ When multiple declarations have equal specificity, the last declaration found in A few things to remember about specificity: -1. Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity only matters for declarations of the same importance and same origin and [cascade layer](/en-US/docs/Web/CSS/@layer). If matching selectors are in different origins, the [cascade](/en-US/docs/Web/CSS/Cascade) determines which declaration takes precedence. +1. Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity only matters for declarations of the same importance and same origin and [cascade layer](/en-US/docs/Web/CSS/@layer). If matching selectors are in different origins, the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) determines which declaration takes precedence. 2. When two selectors in the same cascade layer and origin have the same specificity, scoping proximity is then calculated; the ruleset with the lowest scoping proximity wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example. diff --git a/files/en-us/web/css/css_selectors/index.md b/files/en-us/web/css/css_selectors/index.md index b96a396d10033a4..172ec40fa010a4f 100644 --- a/files/en-us/web/css/css_selectors/index.md +++ b/files/en-us/web/css/css_selectors/index.md @@ -182,7 +182,7 @@ Selectors, whether used in CSS or JavaScript, enable targeting HTML elements bas - {{cssxref("important", "!important")}} - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Cascade](/en-US/docs/Web/CSS/Cascade) +- [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - {{domxref("Document.querySelector")}} method - {{domxref("Document.querySelectorAll")}} method diff --git a/files/en-us/web/css/forced-color-adjust/index.md b/files/en-us/web/css/forced-color-adjust/index.md index b1efeca3c9c38e1..5d1b9f9c76362df 100644 --- a/files/en-us/web/css/forced-color-adjust/index.md +++ b/files/en-us/web/css/forced-color-adjust/index.md @@ -33,7 +33,7 @@ The `forced-color-adjust` property's value must be one of the following keywords - `none` - : The element's colors are not automatically adjusted by the {{Glossary("user agent")}} in forced colors mode. - `preserve-parent-color` - - : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the [used color](/en-US/docs/Web/CSS/used_value) of its parent's `color` property. In all other cases, it behaves the same as `none`. + - : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/CSS_cascade/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the [used color](/en-US/docs/Web/CSS/used_value) of its parent's `color` property. In all other cases, it behaves the same as `none`. ## Usage notes diff --git a/files/en-us/web/css/important/index.md b/files/en-us/web/css/important/index.md index 4b9fd223e8ea301..2ef5981013955dd 100644 --- a/files/en-us/web/css/important/index.md +++ b/files/en-us/web/css/important/index.md @@ -6,7 +6,7 @@ page-type: css-keyword {{CSSRef}} -A `!` delimiter followed by the `important` keyword marks the declaration as important. The `!important` flag alters the rules selecting declarations inside the [cascade](/en-US/docs/Web/CSS/Cascade). A declaration that is not _important_ is called _normal_. +A `!` delimiter followed by the `important` keyword marks the declaration as important. The `!important` flag alters the rules selecting declarations inside the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade). A declaration that is not _important_ is called _normal_. To mark a declaration important, add the _important flag_ (`!important`) after the value in the declaration. While white space is allowed between the delimiter and the keyword, the flag is generally written as `!important` without any white space. @@ -22,7 +22,7 @@ The `!important` comes after the value of the property value pair declaration, p ## Impact on the cascade -When it comes to important declarations, the [cascade origin and layer orders](/en-US/docs/Web/CSS/Cascade) are reversed. Without the important flag, declarations in the author's style sheets override declarations in a user's style sheet, which override declarations in the user-agent's default style sheet. +When it comes to important declarations, the [cascade origin and layer orders](/en-US/docs/Web/CSS/CSS_cascade/Cascade) are reversed. Without the important flag, declarations in the author's style sheets override declarations in a user's style sheet, which override declarations in the user-agent's default style sheet. When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author's style sheets. Finally, all important declarations take precedence over all animations. @@ -57,7 +57,7 @@ Inline styles are styles defined using the [`style`](/en-US/docs/Web/HTML/Global ### !important and specificity -While `!important` is not part of determining specificity, it is related. Important declarations override all other declarations from the same [origin and cascade layer](/en-US/docs/Web/CSS/Cascade). +While `!important` is not part of determining specificity, it is related. Important declarations override all other declarations from the same [origin and cascade layer](/en-US/docs/Web/CSS/CSS_cascade/Cascade). ```css #myElement#myElement#myElement .myClass.myClass p:hover { @@ -154,4 +154,4 @@ This feature is supported in all browsers. ## See also - [CSS Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index d47f95ecb2dd246..feaa6719e8e4092 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -28,7 +28,7 @@ After CSS 2.1, the scope of the specification increased significantly and the pr The [CSS reference](/en-US/docs/Web/CSS/Reference) is an exhaustive reference for seasoned Web developers, describing every property and concept of CSS, including: - The [syntax and forms of the language](/en-US/docs/Web/CSS/Syntax) -- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), [inheritance](/en-US/docs/Web/CSS/Inheritance), and [the cascade](/en-US/docs/Web/CSS/Cascade) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), [inheritance](/en-US/docs/Web/CSS/Inheritance), and [the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors), including [pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements), [nesting](/en-US/docs/Web/CSS/CSS_nesting), [scoping](/en-US/docs/Web/CSS/CSS_scoping) and [shadow parts](/en-US/docs/Web/CSS/CSS_shadow_parts) - [CSS at-rules](/en-US/docs/Web/CSS/At-rule), including [media](/en-US/docs/Web/CSS/CSS_media_queries) and [container](/en-US/docs/Web/CSS/CSS_containment) queries - [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) and [functional notations](/en-US/docs/Web/CSS/CSS_Functions) diff --git a/files/en-us/web/css/inheritance/index.md b/files/en-us/web/css/inheritance/index.md index dd27faecffc2b6a..b5c40bde91c9823 100644 --- a/files/en-us/web/css/inheritance/index.md +++ b/files/en-us/web/css/inheritance/index.md @@ -97,7 +97,7 @@ We can see here another border around the word "emphasized text". - CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/inherit), [`initial`](/en-US/docs/Web/CSS/initial), [`revert`](/en-US/docs/Web/CSS/revert), [`revert-layer`](/en-US/docs/Web/CSS/revert-layer), and [`unset`](/en-US/docs/Web/CSS/unset) - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) -- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module diff --git a/files/en-us/web/css/reference/index.md b/files/en-us/web/css/reference/index.md index 5e68b51784631eb..9df44d4848ff7eb 100644 --- a/files/en-us/web/css/reference/index.md +++ b/files/en-us/web/css/reference/index.md @@ -111,7 +111,7 @@ Combinators are selectors that establish a relationship between two or more simp - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) -- [Cascade](/en-US/docs/Web/CSS/Cascade) +- [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Comments](/en-US/docs/Web/CSS/Comments) - [Descriptor](/en-US/docs/Glossary/CSS_Descriptor) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) diff --git a/files/en-us/web/css/shorthand_properties/index.md b/files/en-us/web/css/shorthand_properties/index.md index 8782f8aa8058960..83e0d7a094a087f 100644 --- a/files/en-us/web/css/shorthand_properties/index.md +++ b/files/en-us/web/css/shorthand_properties/index.md @@ -168,7 +168,7 @@ Just like margins and paddings, the inset values are ordered clockwise - top, ri CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model. -See [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) or [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) for more information about how inheritance works in CSS. +See [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) or [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) for more information about how inheritance works in CSS. ## Shorthand properties @@ -249,7 +249,7 @@ See [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/H - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) -- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module diff --git a/files/en-us/web/css/using_css_custom_properties/index.md b/files/en-us/web/css/using_css_custom_properties/index.md index 830c704c8734847..6a7fb37b183cb1d 100644 --- a/files/en-us/web/css/using_css_custom_properties/index.md +++ b/files/en-us/web/css/using_css_custom_properties/index.md @@ -10,7 +10,7 @@ page-type: guide Complex websites have very large amounts of CSS, and this often results in a lot of repeated CSS values. For example, it's common to see the same color used in hundreds of different places in stylesheets. Changing a color that's been duplicated in many places requires a search and replace across all rules and CSS files. Custom properties allow a value to be defined in one place, then referenced in multiple other places so that it's easier to work with. Another benefit is readability and semantics. For example, `--main-text-color` is easier to understand than the hexadecimal color `#00ff00`, especially if the color is used in different contexts. -Custom properties defined [using two dashes (`--`)](/en-US/docs/Web/CSS/--*) are subject to the [cascade](/en-US/docs/Web/CSS/Cascade) and inherit their value from their parent. +Custom properties defined [using two dashes (`--`)](/en-US/docs/Web/CSS/--*) are subject to the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and inherit their value from their parent. The {{cssxref("@property")}} at-rule allows more control over the custom property and lets you specify whether it inherits its value from a parent, what the initial value is, and the type constraints that should apply. > [!NOTE] diff --git a/files/en-us/web/html/element/table/index.md b/files/en-us/web/html/element/table/index.md index 0e25c11a35ec11a..fc1cd71a324d3d7 100644 --- a/files/en-us/web/html/element/table/index.md +++ b/files/en-us/web/html/element/table/index.md @@ -161,7 +161,7 @@ The table rows are defined with {{HTMLElement("tr")}} elements, and the columns #### Result -There is no custom [CSS](/en-US/docs/Web/CSS) or [user stylesheet](/en-US/docs/Web/CSS/Cascade#author_stylesheets) applied to this table. The styling results purely from the [user-agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets). +There is no custom [CSS](/en-US/docs/Web/CSS) or [user stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets) applied to this table. The styling results purely from the [user-agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets). {{EmbedLiveSample('Basic_table', 650, 80)}} diff --git a/files/en-us/web/mathml/global_attributes/dir/index.md b/files/en-us/web/mathml/global_attributes/dir/index.md index 4577967be3b1551..16e1a1d1173d381 100644 --- a/files/en-us/web/mathml/global_attributes/dir/index.md +++ b/files/en-us/web/mathml/global_attributes/dir/index.md @@ -68,7 +68,7 @@ body { > > - This attribute can be overridden by the CSS property {{ cssxref("direction") }}, if a CSS page is active and the element supports these properties. > - As the directionality of mathematics is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the formulas will display correctly even on a browser that doesn't support CSS or has the CSS deactivated. -> - The `dir` attribute is used to set the directionality of math formulas, which is often from right to left in Arabic-speaking world. However, languages written from right to left often embed mathematical content written from left to right. Consequently, the `auto` keyword from the HTML `dir` attribute is not recognized and by default the [user agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) resets the direction property on the [`math`](/en-US/docs/Web/MathML/Element/math) element. +> - The `dir` attribute is used to set the directionality of math formulas, which is often from right to left in Arabic-speaking world. However, languages written from right to left often embed mathematical content written from left to right. Consequently, the `auto` keyword from the HTML `dir` attribute is not recognized and by default the [user agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) resets the direction property on the [`math`](/en-US/docs/Web/MathML/Element/math) element. ## Specifications diff --git a/files/en-us/web/mathml/global_attributes/scriptlevel/index.md b/files/en-us/web/mathml/global_attributes/scriptlevel/index.md index 07c5380a10ebf28..c456d8fd396d474 100644 --- a/files/en-us/web/mathml/global_attributes/scriptlevel/index.md +++ b/files/en-us/web/mathml/global_attributes/scriptlevel/index.md @@ -7,7 +7,7 @@ browser-compat: mathml.global_attributes.scriptlevel {{MathMLRef}} -The **`scriptlevel`** [global attribute](/en-US/docs/Web/MathML/Global_attributes) sets the [math-depth](/en-US/docs/Web/CSS/math-depth) of a MathML element. It allows overriding rules from the [user agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) that define automatic calculation of [font-size](/en-US/docs/Web/CSS/font-size) within MathML formulas. +The **`scriptlevel`** [global attribute](/en-US/docs/Web/MathML/Global_attributes) sets the [math-depth](/en-US/docs/Web/CSS/math-depth) of a MathML element. It allows overriding rules from the [user agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) that define automatic calculation of [font-size](/en-US/docs/Web/CSS/font-size) within MathML formulas. ## Example diff --git a/files/en-us/web/performance/how_browsers_work/index.md b/files/en-us/web/performance/how_browsers_work/index.md index 0c96e700c487565..3194b949bc86c33 100644 --- a/files/en-us/web/performance/how_browsers_work/index.md +++ b/files/en-us/web/performance/how_browsers_work/index.md @@ -164,7 +164,7 @@ The third step in the critical rendering path is combining the DOM and CSSOM int Elements that aren't going to be displayed, like the [``](/en-US/docs/Web/HTML/Element/head) element and its children and any nodes with `display: none`, such as the `script { display: none; }` you will find in user agent stylesheets, are not included in the render tree as they will not appear in the rendered output. Nodes with `visibility: hidden` applied are included in the render tree, as they do take up space. As we have not given any directives to override the user agent default, the `script` node in our code example above will not be included in the render tree. -Each visible node has its CSSOM rules applied to it. The render tree holds all the visible nodes with content and computed styles — matching up all the relevant styles to every visible node in the DOM tree, and determining, based on the [CSS cascade](/en-US/docs/Web/CSS/Cascade), what the computed styles are for each node. +Each visible node has its CSSOM rules applied to it. The render tree holds all the visible nodes with content and computed styles — matching up all the relevant styles to every visible node in the DOM tree, and determining, based on the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade), what the computed styles are for each node. ### Layout