diff --git a/files/en-us/web/css/guides/anchor_positioning/index.md b/files/en-us/web/css/guides/anchor_positioning/index.md index 2669cb071d965e0..2e38a81ff408dd4 100644 --- a/files/en-us/web/css/guides/anchor_positioning/index.md +++ b/files/en-us/web/css/guides/anchor_positioning/index.md @@ -42,7 +42,7 @@ The CSS anchor positioning module also introduces the `anchor-scope` property. C - [`anchor-center`](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#centering_on_the_anchor_using_anchor-center) - [``](/en-US/docs/Web/CSS/Reference/Values/anchor#anchor-side) - [``](/en-US/docs/Web/CSS/Reference/Values/anchor-size#anchor-size) -- [``](/en-US/docs/Web/CSS/Reference/Values/position-area_value) +- {{cssxref("<position-area>")}} - [``](/en-US/docs/Web/CSS/Reference/Properties/position-try-order#try-size) - [``](/en-US/docs/Web/CSS/Reference/Properties/position-try-fallbacks#try-tactic) @@ -86,7 +86,7 @@ The CSS anchor positioning module also introduces the `anchor-scope` property. C - {{cssxref("margin-inline")}} - {{cssxref("margin-inline-end")}} - {{cssxref("margin-inline-start")}} - - [Inset properties](/en-US/docs/Glossary/Inset_properties) glossary term + - {{glossary("Inset properties")}} glossary term - [CSS positioned layout](/en-US/docs/Web/CSS/Guides/Positioned_layout) module: - {{cssxref("top")}} - {{cssxref("left")}} diff --git a/files/en-us/web/css/guides/anchor_positioning/try_options_hiding/index.md b/files/en-us/web/css/guides/anchor_positioning/try_options_hiding/index.md index 93781add305004f..f0280e09064a152 100644 --- a/files/en-us/web/css/guides/anchor_positioning/try_options_hiding/index.md +++ b/files/en-us/web/css/guides/anchor_positioning/try_options_hiding/index.md @@ -264,7 +264,7 @@ The `--try-fallback-name` is a developer-defined name for the position try fallb The `descriptor-list` defines the property values for that individual custom try fallback option, including how the positioned element should be placed and sized, and any margins. The limited list of property descriptors allowed includes: - {{cssxref("position-area")}} -- [Inset properties](/en-US/docs/Glossary/Inset_properties) +- {{glossary("Inset properties")}} - Margin properties (e.g., {{cssxref("margin-left")}}, {{cssxref("margin-block-start")}}) - [self-alignment](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#centering_on_the_anchor_using_anchor-center) properties - Sizing properties ({{cssxref("width")}}, {{cssxref("block-size")}}, etc.) diff --git a/files/en-us/web/css/guides/anchor_positioning/using/index.md b/files/en-us/web/css/guides/anchor_positioning/using/index.md index 4bd7081d1dada91..1ff2908244bd42e 100644 --- a/files/en-us/web/css/guides/anchor_positioning/using/index.md +++ b/files/en-us/web/css/guides/anchor_positioning/using/index.md @@ -142,7 +142,7 @@ anchor( , ) ``` - `` - - : The [`anchor-name`](/en-US/docs/Web/CSS/Reference/Properties/anchor-name) property value of the anchor element you want to position the element's side relative to. This is a `` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its [`position-anchor`](/en-US/docs/Web/CSS/Reference/Properties/position-anchor) property, or associated with the element via the non-standard [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) HTML attribute. + - : The {{cssxref("anchor-name")}} property value of the anchor element you want to position the element's side relative to. This is a `` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its {{cssxref("position-anchor")}} property, or associated with the element via the non-standard [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) HTML attribute. > [!NOTE] > Specifying an `` positions the element relative to that anchor, but does not provide element association. While you can position an element's sides relative to multiple anchors by specifying [different `` values](/en-US/docs/Web/CSS/Reference/Values/anchor#positioning_an_element_relative_to_multiple_anchors) inside different `anchor()` functions on the same element, the positioned element is only associated with a single anchor. @@ -306,7 +306,7 @@ If you only specify one value, the effect is different depending on which value - A value of `center` acts as if both values are set to `center` (so, `center center`). > [!NOTE] -> See the [``](/en-US/docs/Web/CSS/Reference/Values/position-area_value) value reference page for a detailed description of all the available values. Mixing a logical value with a physical value will invalidate the declaration. +> See the {{cssxref("<position-area>")}} value reference page for a detailed description of all the available values. Mixing a logical value with a physical value will invalidate the declaration. Let's demonstrate some of these values; this example uses the same HTML and base CSS styes as the previous example, except that we've included a {{htmlelement("select")}} element to enable changing the positioned element's `position-area` value. @@ -553,7 +553,7 @@ anchor-size( , ) ``` - `` - - : The `` name set as the value of the [`anchor-name`](/en-US/docs/Web/CSS/Reference/Properties/anchor-name) property of the anchor element you want to size the element relative to. If omitted, the element's **default anchor**, which is the anchor referenced in the [`position-anchor`](/en-US/docs/Web/CSS/Reference/Properties/position-anchor) property, is used. + - : The `` name set as the value of the {{cssxref("anchor-name")}} property of the anchor element you want to size the element relative to. If omitted, the element's **default anchor**, which is the anchor referenced in the {{cssxref("position-anchor")}} property, is used. - [``](/en-US/docs/Web/CSS/Reference/Values/anchor-size#anchor-size) - : Specifies the dimension of the anchor element that the positioned element will be sized relative to. This can be expressed using physical (`width` or `height`) or logical (`inline`, `block`, `self-inline`, or `self-block`) values. - {{cssxref("length-percentage")}} diff --git a/files/en-us/web/css/guides/animations/index.md b/files/en-us/web/css/guides/animations/index.md index 2fe8e32371d509b..dd1bcc79dd956ad 100644 --- a/files/en-us/web/css/guides/animations/index.md +++ b/files/en-us/web/css/guides/animations/index.md @@ -280,7 +280,7 @@ All animations, even those with 0 seconds duration, throw animation events. ## Related concepts - {{cssxref("will-change")}} CSS property -- [``](/en-US/docs/Web/CSS/Reference/Values/easing-function) data type +- {{cssxref("<easing-function>")}} data type - [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) media query - {{glossary("Bezier curve")}} glossary term diff --git a/files/en-us/web/css/guides/animations/using/index.md b/files/en-us/web/css/guides/animations/using/index.md index 768d6333a2a8015..6f365d7a4414dce 100644 --- a/files/en-us/web/css/guides/animations/using/index.md +++ b/files/en-us/web/css/guides/animations/using/index.md @@ -31,7 +31,7 @@ The sub-properties of the {{cssxref("animation")}} property are: - {{cssxref("animation-fill-mode")}} - : Specifies how an animation applies styles to its target before and after it runs. > [!NOTE] - > In the case of animation [forwards](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode#forwards) fill mode, animated properties behave as if included in a set [`will-change`](/en-US/docs/Web/CSS/Reference/Properties/will-change) property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished. + > In the case of animation [forwards](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode#forwards) fill mode, animated properties behave as if included in a set {{cssxref("will-change")}} property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished. - {{cssxref("animation-iteration-count")}} - : Specifies the number of times an animation should repeat. - {{cssxref("animation-name")}} @@ -399,7 +399,7 @@ And here's the live output. ### Animating display and content-visibility -This example demonstrates how [`display`](/en-US/docs/Web/CSS/Reference/Properties/display) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) can be animated. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out smoothly with [`opacity`](/en-US/docs/Web/CSS/Reference/Properties/opacity) rather than disappearing immediately. +This example demonstrates how {{cssxref("display")}} and {{cssxref("content-visibility")}} can be animated. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out smoothly with {{cssxref("opacity")}} rather than disappearing immediately. Supporting browsers animate `display` and `content-visibility` with a variation on the [discrete animation type](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). This generally means that properties will flip between two values 50% of the way through animating between the two. diff --git a/files/en-us/web/css/guides/basic_user_interface/index.md b/files/en-us/web/css/guides/basic_user_interface/index.md index f37e6f9729ad2eb..abc07e0f8e38afd 100644 --- a/files/en-us/web/css/guides/basic_user_interface/index.md +++ b/files/en-us/web/css/guides/basic_user_interface/index.md @@ -109,8 +109,8 @@ The CSS basic user interface module also defines the {{CSSxRef("caret")}}, `nav- ## Related concepts -- CSS [`cursor`](/en-US/docs/Web/CSS/Reference/Properties/cursor) property -- SVG [`cursor`](/en-US/docs/Web/SVG/Reference/Attribute/cursor) attribute +- CSS {{cssxref("cursor")}} property +- SVG {{svgattr("cursor")}} attribute - CSS {{CSSxRef(":focus")}}, {{CSSxRef(":focus-within")}}, and {{CSSxRef(":focus-visible")}} pseudoclasses - {{DOMXref("CaretPosition")}} Interface diff --git a/files/en-us/web/css/guides/borders_and_box_decorations/index.md b/files/en-us/web/css/guides/borders_and_box_decorations/index.md index 12bc8259ecc5cac..6d2ab01ecb78898 100644 --- a/files/en-us/web/css/guides/borders_and_box_decorations/index.md +++ b/files/en-us/web/css/guides/borders_and_box_decorations/index.md @@ -221,7 +221,7 @@ The CSS borders and box decorations module level 4 also introduces the `border-s - {{cssxref("text-shadow")}} property - {{cssxref("url_value", "<url>")}} CSS type - [``](/en-US/docs/Web/CSS/Reference/Properties/color) data type -- [``](/en-US/docs/Web/CSS/Reference/Values/image) data type +- {{cssxref("<image>")}} data type - [``](/en-US/docs/Web/CSS/Reference/Properties/position) data type - [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) keyword diff --git a/files/en-us/web/css/guides/box_alignment/in_block_abspos_tables/index.md b/files/en-us/web/css/guides/box_alignment/in_block_abspos_tables/index.md index 9a94189d079f6ad..15062785d021aab 100644 --- a/files/en-us/web/css/guides/box_alignment/in_block_abspos_tables/index.md +++ b/files/en-us/web/css/guides/box_alignment/in_block_abspos_tables/index.md @@ -12,7 +12,7 @@ The [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) module details The {{cssxref("justify-content")}} property does not apply to block containers or table cells. -The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as `space-between`, `space-around` or `space-evenly` is requested then the fallback alignment will be used, as the content is treated as a single [alignment subject](/en-US/docs/Glossary/Alignment_Subject). +The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as `space-between`, `space-around` or `space-evenly` is requested then the fallback alignment will be used, as the content is treated as a single {{glossary("alignment subject")}}. ## justify-self diff --git a/files/en-us/web/css/guides/box_model/index.md b/files/en-us/web/css/guides/box_model/index.md index 205bb2cae4a29ed..bc608ecb5fb3ef8 100644 --- a/files/en-us/web/css/guides/box_model/index.md +++ b/files/en-us/web/css/guides/box_model/index.md @@ -35,7 +35,7 @@ The CSS box model module defines physical (or "page relative") properties such a ### Data types -- [``](/en-US/docs/Web/CSS/Reference/Values/box-edge) +- {{cssxref("<box-edge>")}} - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#visual-box) - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#layout-box) - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#paint-box) diff --git a/files/en-us/web/css/guides/cascade/index.md b/files/en-us/web/css/guides/cascade/index.md index 4e2c29014db018a..1addf7e04a4f839 100644 --- a/files/en-us/web/css/guides/cascade/index.md +++ b/files/en-us/web/css/guides/cascade/index.md @@ -76,7 +76,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value - : The most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved. - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - - : Introduction to [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) and [CSS specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity). + - : Introduction to {{cssxref("@layer", "cascade layers")}}, a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) and [CSS specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity). ## Related concepts diff --git a/files/en-us/web/css/guides/cascade/inheritance/index.md b/files/en-us/web/css/guides/cascade/inheritance/index.md index e059a4c3b7e1c60..19aca7a6be0c630 100644 --- a/files/en-us/web/css/guides/cascade/inheritance/index.md +++ b/files/en-us/web/css/guides/cascade/inheritance/index.md @@ -19,7 +19,7 @@ Refer to [any CSS property](/en-US/docs/Web/CSS/Reference#index) definition to s When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#initial_value) given in the property's summary. -A typical example of an inherited property is the [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property. Consider the following style rules and the markup: +A typical example of an inherited property is the {{cssxref("color")}} property. Consider the following style rules and the markup: ```css p { @@ -33,7 +33,7 @@ p { {{EmbedLiveSample("Inherited properties","",40)}} -The words "emphasized text" will appear green, since the `em` element has inherited the value of the [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color). +The words "emphasized text" will appear green, since the `em` element has inherited the value of the {{cssxref("color")}} property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color). ## Non-inherited properties @@ -53,13 +53,13 @@ p { {{EmbedLiveSample("Non-inherited properties","",40)}} -The words "emphasized text" will not have another border (since the initial value of [`border-style`](/en-US/docs/Web/CSS/Reference/Properties/border-style) is `none`). +The words "emphasized text" will not have another border (since the initial value of {{cssxref("border-style")}} is `none`). ## Notes -The [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit) keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties. +The {{cssxref("inherit")}} keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties. -You can control inheritance for all properties at once using the [`all`](/en-US/docs/Web/CSS/Reference/Properties/all) shorthand property, which applies its value to all properties. For example: +You can control inheritance for all properties at once using the {{cssxref("all")}} shorthand property, which applies its value to all properties. For example: ```css p { @@ -69,11 +69,11 @@ p { } ``` -This reverts the style of the paragraphs' [`font`](/en-US/docs/Web/CSS/Reference/Properties/font) property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a [`font-weight`](/en-US/docs/Web/CSS/Reference/Properties/font-weight) of `"bold"`. +This reverts the style of the paragraphs' {{cssxref("font")}} property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a {{cssxref("font-weight")}} of `"bold"`. ### Overriding inheritance, an example -Using our previous example with [`border`](/en-US/docs/Web/CSS/Reference/Properties/border), if we explicitly set the inheritance with `inherit`, we get the following: +Using our previous example with {{cssxref("border")}}, if we explicitly set the inheritance with `inherit`, we get the following: ```css p { @@ -99,7 +99,7 @@ We can see here another border around the word "emphasized text". ## See also -- CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer), and [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset) +- CSS values for controlling inheritance: {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}} - [CSS error handling](/en-US/docs/Web/CSS/Guides/Syntax/Error_handling) - [Introducing the CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) diff --git a/files/en-us/web/css/guides/cascade/introduction/index.md b/files/en-us/web/css/guides/cascade/introduction/index.md index 523d998ad8a786a..1ba2bf800712dc8 100644 --- a/files/en-us/web/css/guides/cascade/introduction/index.md +++ b/files/en-us/web/css/guides/cascade/introduction/index.md @@ -39,7 +39,7 @@ In most browsers, the user (or reader) of the website can choose to override sty ### Cascade layers -The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer) within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import) or [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer), styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer. +The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of {{cssxref("@layer", "cascade layers")}} within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import) or {{cssxref("@layer")}}, styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer. Let's take a look at cascading origin type before diving into cascade layers within each origin type. @@ -353,7 +353,7 @@ Finally, {{cssxref("@charset")}} obeys specific algorithms and isn't affected by Presentational attributes are attributes in the source document that can affect styling. For example, when included, the deprecated `align` attribute sets the alignment on several HTML elements and the `fill` attribute defines the color used to paint SVG shapes and text and defines the final state for SVG animations. While they are author styles, presentational attributes do not participate in the cascade. -If the HTML presentation attribute is supported by the user agent, valid presentational attributes included in HTML and SVG, such as the [`align`](/en-US/docs/Web/HTML/Reference/Elements/img#align) or [`fill`](/en-US/docs/Web/SVG/Reference/Attribute/fill) attributes, are translated to the corresponding CSS rules (all SVG presentation attributes are supported as CSS properties) and inserted in the author stylesheet prior to any other styles with a specificity equal to `0`. +If the HTML presentation attribute is supported by the user agent, valid presentational attributes included in HTML and SVG, such as the [`align`](/en-US/docs/Web/HTML/Reference/Elements/img#align) or {{svgattr("fill")}} attributes, are translated to the corresponding CSS rules (all SVG presentation attributes are supported as CSS properties) and inserted in the author stylesheet prior to any other styles with a specificity equal to `0`. Presentational attributes cannot be declared `!important`. diff --git a/files/en-us/web/css/guides/cascade/property_value_processing/index.md b/files/en-us/web/css/guides/cascade/property_value_processing/index.md index 5f58a3de644b506..408da4b066ac2e6 100644 --- a/files/en-us/web/css/guides/cascade/property_value_processing/index.md +++ b/files/en-us/web/css/guides/cascade/property_value_processing/index.md @@ -77,7 +77,7 @@ This involves: As a result of defaulting, every property is guaranteed to have a [specified value](#specified_value). -Note that explicit defaulting keywords ([`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer)) are also resolved to their corresponding values to determine the [specified value](#specified_value). +Note that explicit defaulting keywords ({{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}) are also resolved to their corresponding values to determine the [specified value](#specified_value). ## Processing stages @@ -282,6 +282,6 @@ CSS 2.0 defined _computed value_ as the last step in a property's calculation. C ## See also -- CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer), and [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset) +- CSS values for controlling inheritance: {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}} - [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module - [CSS syntax](/en-US/docs/Web/CSS/Guides/Syntax) module diff --git a/files/en-us/web/css/guides/cascade/specificity/index.md b/files/en-us/web/css/guides/cascade/specificity/index.md index 28b6197372deb4b..2fe9b45980bf24a 100644 --- a/files/en-us/web/css/guides/cascade/specificity/index.md +++ b/files/en-us/web/css/guides/cascade/specificity/index.md @@ -219,7 +219,7 @@ If declarations from the same origin and cascade layer conflict and one property Using `!important` to override specificity is considered a **bad practice** and should be avoided for this purpose. Understanding and effectively using specificity and the cascade can remove any need for the `!important` flag. -Instead of using `!important` to override foreign CSS (from external libraries, like Bootstrap or normalize.css), import the third-party scripts directly into [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer). If you must use `!important` in your CSS, comment your usage so future code maintainers know why the declaration was marked important and know not to override it. But definitely, don't use `!important` when writing plugins or frameworks that other developers will need to incorporate without being able to control. +Instead of using `!important` to override foreign CSS (from external libraries, like Bootstrap or normalize.css), import the third-party scripts directly into {{cssxref("@layer", "cascade layers")}}. If you must use `!important` in your CSS, comment your usage so future code maintainers know why the declaration was marked important and know not to override it. But definitely, don't use `!important` when writing plugins or frameworks that other developers will need to incorporate without being able to control. ### The `:where()` exception diff --git a/files/en-us/web/css/guides/cascading_variables/index.md b/files/en-us/web/css/guides/cascading_variables/index.md index c031428f4fe84e2..8e27bd29ad236aa 100644 --- a/files/en-us/web/css/guides/cascading_variables/index.md +++ b/files/en-us/web/css/guides/cascading_variables/index.md @@ -118,7 +118,7 @@ As the slider's value changes from 0 up to 360, the value of the `--hue` [custom ## Related concepts - [CSS Properties and Values API](/en-US/docs/Web/CSS/Guides/Properties_and_values_API) module - - [`@property`](/en-US/docs/Web/CSS/Reference/At-rules/@property) at-rule + - {{cssxref("@property")}} at-rule - [`CSS.registerProperty()`](/en-US/docs/Web/API/CSS/registerProperty_static) method ## Specifications diff --git a/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md b/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md index f70be2dce60dd92..fa7cba0ae4e166d 100644 --- a/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md +++ b/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md @@ -27,7 +27,7 @@ The following sections describe how to use these two methods. A custom property prefixed with two dashes begins with `--`, followed by the property name (e.g., `--my-property`), and a property value that can be any [valid CSS value](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units). Like any other property, this is written inside a ruleset. -The following example shows how to create a custom property `--main-bg-color` and uses a [``](/en-US/docs/Web/CSS/Reference/Values/named-color) value of `brown`: +The following example shows how to create a custom property `--main-bg-color` and uses a {{cssxref("<named-color>")}} value of `brown`: ```css section { @@ -52,7 +52,7 @@ This doesn't always have to be the case: you maybe have a good reason for limiti ### Using the `@property` at-rule The {{cssxref("@property")}} at-rule allows you to be more expressive with the definition of a custom property with the ability to associate a type with the property, set default values, and control inheritance. -The following example creates a custom property called `--logo-color` which expects a [``](/en-US/docs/Web/CSS/Reference/Values/color_value): +The following example creates a custom property called `--logo-color` which expects a {{cssxref("<color>")}}: ```css @property --logo-color { @@ -293,7 +293,7 @@ The property is only set for the matching selector and its descendants. The `@property` at-rule lets you explicitly state whether the property inherits or not. The following example creates a custom property using the `@property` at-rule. -Inheritance is disabled, there's a [``](/en-US/docs/Web/CSS/Reference/Values/color_value) data type defined, and an initial value of `teal`. +Inheritance is disabled, there's a {{cssxref("<color>")}} data type defined, and an initial value of `teal`. The parent element sets `--box-color` to a value of `green` and uses `--box-color` as a value for its background color. The child element also uses `background-color: var(--box-color)`, and we would expect it to have the color `green` if inheritance was enabled (or if it was defined using the double dash syntax). diff --git a/files/en-us/web/css/guides/colors/applying_color/index.md b/files/en-us/web/css/guides/colors/applying_color/index.md index 2239c1d2b700b8f..89d391ad4baafd4 100644 --- a/files/en-us/web/css/guides/colors/applying_color/index.md +++ b/files/en-us/web/css/guides/colors/applying_color/index.md @@ -190,8 +190,7 @@ CSS isn't the only web technology that supports color. Other examples include: ## See also -- [``](/en-US/docs/Web/CSS/Reference/Values/color_value) data type +- {{cssxref("<color>")}} data type - [CSS color values](/en-US/docs/Web/CSS/Guides/Colors/Color_values) guide -- [Using color wisely](/en-US/docs/Web/CSS/Guides/Colors/Using_color_wisely) -- [CSS color module](/en-US/docs/Web/CSS/Guides/Colors) -- [Drawing graphics](/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics) +- [Using color wisely](/en-US/docs/Web/CSS/Guides/Colors/Using_color_wisely) guide +- [CSS color](/en-US/docs/Web/CSS/Guides/Colors) module diff --git a/files/en-us/web/css/guides/colors/color_values/index.md b/files/en-us/web/css/guides/colors/color_values/index.md index 4c6c203cd697e02..f02419e9ec7121d 100644 --- a/files/en-us/web/css/guides/colors/color_values/index.md +++ b/files/en-us/web/css/guides/colors/color_values/index.md @@ -18,7 +18,7 @@ This guide introduces the different {{cssxref("<color>")}} value types. Fo The web defines a set of standard color names that lets you use keywords instead of numeric representations to describe colors. This is a simpler albeit more limited approach — there may not be a keyword representing the exact color you want to use. -Color keywords include standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors, including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`. Named colors use the [RGB](/en-US/docs/Glossary/RGB) model and are associated with the sRGB (`srgb`) color space. +Color keywords include standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors, including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`. Named colors use the {{glossary("RGB")}} model and are associated with the sRGB (`srgb`) color space. There are over 160 named colors. There are named colors of special interest: [`transparent`](/en-US/docs/Web/CSS/Reference/Values/named-color#transparent) sets a transparent color value, while [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) sets the current value of the CSS {{cssxref("color")}} property. There are also named {{cssxref("system-color")}} colors, such as `accentcolortext` and `buttonface`, that reflect the default color choices made by the user, the browser, or the operating system. @@ -26,7 +26,7 @@ All color keywords are case-insensitive. See the {{cssxref("named-color")}} data ## RGB values -There are two primary ways of defining an {{glossary("RGB")}} color by its red, green, and blue components in CSS — hexadecimal and `rgb()` values. Like named colors, these methods use the [RGB](/en-US/docs/Glossary/RGB) model and are associated with the sRGB (`srgb`) color space. However, they allow a much wider range of colors to be specified. +There are two primary ways of defining an {{glossary("RGB")}} color by its red, green, and blue components in CSS — hexadecimal and `rgb()` values. Like named colors, these methods use the {{glossary("RGB")}} model and are associated with the sRGB (`srgb`) color space. However, they allow a much wider range of colors to be specified. ### Hexadecimal string notation @@ -141,13 +141,13 @@ See the {{cssxref("color_value/rgb", "rgb()")}} color function for more informat ## Color functions with a hue component -The color functions that have a [``](/en-US/docs/Web/CSS/Reference/Values/hue) component — an [``](/en-US/docs/Web/CSS/Reference/Values/angle) from that color model's {{glossary("color wheel")}} — include the `srgb` color functions `hsl()` and `hwb()`, CIElab's `lch()` function, and OKLab's `oklch()` color function. These color functions are more intuitive as the hue allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc. +The color functions that have a {{cssxref("<hue>")}} component — an {{cssxref("<angle>")}} from that color model's {{glossary("color wheel")}} — include the `srgb` color functions `hsl()` and `hwb()`, CIElab's `lch()` function, and OKLab's `oklch()` color function. These color functions are more intuitive as the hue allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc. ### HSL functional notation The `hsl()` CSS color function was the first hue-based color function to be supported in browsers. `hsl()` is more intuitive than `rgb()` — it is easier to determine the effect of varying hue (`h`), saturation (`s`), and lightness (`l`) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported. -The `hsl()` and `hwb()` sRGB color functions are both cylindrical. Hue defines the color as an [``](/en-US/docs/Web/CSS/Reference/Values/angle) on a circular {{glossary("color wheel")}}. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue. +The `hsl()` and `hwb()` sRGB color functions are both cylindrical. Hue defines the color as an {{cssxref("<angle>")}} on a circular {{glossary("color wheel")}}. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue. As the value of lightness increases, the color transitions from the darkest to the lightest possible color (from black to white). ![HSL color cylinder](640px-hsl_color_solid_cylinder.png) @@ -500,7 +500,7 @@ for (let b = -4; b <= 4; b++) { If you want explicit control over color spaces when defining colors, you can use the [`color()`](/en-US/docs/Web/CSS/Reference/Values/color_value/color) function. -This is useful to describe a color for high-definition devices with wider color [gamuts](/en-US/docs/Glossary/Gamut). +This is useful to describe a color for high-definition devices with wider color {{glossary("gamuts")}}. For example, if you wanted to show the `display-p3 0 0 1` color, which is outside of the sRGB gamut, you could use a `@media` [`color-gamut`](/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) at-rule to detect if the client's hardware supports colors in this range before trying to use it: ```css diff --git a/files/en-us/web/css/guides/colors/index.md b/files/en-us/web/css/guides/colors/index.md index e353d569e8035ac..e3fad40ba01ae04 100644 --- a/files/en-us/web/css/guides/colors/index.md +++ b/files/en-us/web/css/guides/colors/index.md @@ -110,16 +110,16 @@ The CSS color module also introduces the `CSSColorProfileRule` interface. Curren - {{cssxref("-webkit-tap-highlight-color")}} - {{cssxref("dynamic-range-limit-mix()")}} function - SVG color properties that are part of other specifications: - - [`fill`](/en-US/docs/Web/SVG/Reference/Attribute/fill) - - [`flood-color`](/en-US/docs/Web/SVG/Reference/Attribute/flood-color) - - [`lighting-color`](/en-US/docs/Web/SVG/Reference/Attribute/lighting-color) - - [`stop-color`](/en-US/docs/Web/SVG/Reference/Attribute/stop-color) - - [`stroke`](/en-US/docs/Web/SVG/Reference/Attribute/stroke) -- SVG [`color`](/en-US/docs/Web/SVG/Reference/Attribute/color) attribute + - {{svgattr("fill")}} + - {{svgattr("flood-color")}} + - {{svgattr("lighting-color")}} + - {{svgattr("stop-color")}} + - {{svgattr("stroke")}} +- SVG {{svgattr("color")}} attribute - {{glossary("Color wheel")}} glossary term - {{glossary("Interpolation")}} glossary term -- The [`@font-palette-values`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values) at-rule [`override-colors`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values/override-colors) descriptor -- The [`@color-profile`](/en-US/docs/Web/CSS/Reference/At-rules/@color-profile) at-rule +- The {{cssxref("@font-palette-values")}} at-rule [`override-colors`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values/override-colors) descriptor +- The {{cssxref("@color-profile")}} at-rule - The [`color-gamut`](/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) @media feature - The [`forced-colors`](/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors) @media feature @@ -130,9 +130,9 @@ The CSS color module also introduces the `CSSColorProfileRule` interface. Curren ## See also - [CSS color adjustment](/en-US/docs/Web/CSS/Guides/Color_adjustment) module and the {{cssxref("print-color-adjust")}} property. -- [CSS images](/en-US/docs/Web/CSS/Guides/Images) module, which is where CSS [``](/en-US/docs/Web/CSS/Reference/Values/gradient) images are defined. -- The [`VideoColorSpace`](/en-US/docs/Web/API/VideoColorSpace) interface -- The SVG [``](/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) element +- [CSS images](/en-US/docs/Web/CSS/Guides/Images) module, which is where CSS {{cssxref("<gradient>")}} images are defined. +- The {{domxref("VideoColorSpace")}} interface +- The SVG {{svgelement("feColorMatrix")}} element - [Canvas API: applying styles and colors](/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#colors) - [Color format converter](/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) - [Color mixer](/en-US/docs/Web/CSS/Guides/Colors/Color_mixer) diff --git a/files/en-us/web/css/guides/colors/using_relative_colors/index.md b/files/en-us/web/css/guides/colors/using_relative_colors/index.md index a0cb0e81782e50f..ec2da21190b6daf 100644 --- a/files/en-us/web/css/guides/colors/using_relative_colors/index.md +++ b/files/en-us/web/css/guides/colors/using_relative_colors/index.md @@ -714,7 +714,7 @@ The relative colors are as follows: - `--bg-color`: A much lighter variant of `--base-color`, intended to be used as a background. This is created by taking an origin color of `--base-color` and adding 40 to its lightness value. - `--complementary-color`: A complementary color 180 degrees around the color wheel from `--base-color`. This is created by taking an origin color of `--base-color` and adding 180 to its hue value. -Now have a look at the rest of the CSS and take note of all the places where these colors are used. This includes [backgrounds](/en-US/docs/Web/CSS/Reference/Properties/background), [borders](/en-US/docs/Web/CSS/Reference/Properties/border), [`text-shadow`](/en-US/docs/Web/CSS/Reference/Properties/text-shadow), and even the [`accent-color`](/en-US/docs/Web/CSS/Reference/Properties/accent-color) of the slider. +Now have a look at the rest of the CSS and take note of all the places where these colors are used. This includes [backgrounds](/en-US/docs/Web/CSS/Reference/Properties/background), [borders](/en-US/docs/Web/CSS/Reference/Properties/border), {{cssxref("text-shadow")}}, and even the {{cssxref("accent-color")}} of the slider. > [!NOTE] > For brevity, only the parts of the CSS relevant to relative color usage are shown. diff --git a/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md index ba6dc37f1ff5a7a..e8cfd4c718e188e 100644 --- a/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md @@ -7,11 +7,11 @@ sidebar: cssref **Feature queries** are conditional group rules that test whether the user agent supports or doesn't support one or more CSS features, such as CSS properties and property values. Feature queries give web developers a way to test to see if a browser has support for a certain feature, and then provide CSS that will only run based on the result of that test. In this guide, you will learn how to implement progressive enhancement using feature queries. -Feature queries are created using the CSS at-rule [`@supports`](/en-US/docs/Web/CSS/Reference/At-rules/@supports) (or the `supports()` function within [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) at-rules). +Feature queries are created using the CSS at-rule {{cssxref("@supports")}} (or the `supports()` function within {{cssxref("@import")}} at-rules). ## Syntax -CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/Guides/Conditional_rules) module, which also defines the media query [`@media`](/en-US/docs/Web/CSS/Reference/At-rules/@media) at-rule. Feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/Guides/Media_queries/Using). The difference is that with a media query, you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features. +CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/Guides/Conditional_rules) module, which also defines the media query {{cssxref("@media")}} at-rule. Feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/Guides/Media_queries/Using). The difference is that with a media query, you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features. A feature query consists of the `@supports` at-rule followed by the support condition or a `supports()` function and declaration parameter within an `@import` at-rule declaration: diff --git a/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md b/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md index 37b12a75bc27479..2e5cfd877a4b6fe 100644 --- a/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md +++ b/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md @@ -52,7 +52,7 @@ Elements are declared as _size query containers_ by setting their {{cssxref("con Declaring size query containers adds [containment](/en-US/docs/Web/CSS/Guides/Containment/Using) to them. This is a performance necessity — querying the size of every element in the DOM, all the time, would be bad for performance and user experience. Additionally, if a descendant style changed the size of the container element, an infinite loop could occur. -In a container size query, the `` includes one or more ``s. Each size query includes a size feature name, a comparison operator, and a value. The size features that can be queried are limited to `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`, and `orientation`. The boolean syntax and logic combining one or more ``s is the same as for [`@media`](/en-US/docs/Web/CSS/Reference/At-rules/@media) size feature queries. +In a container size query, the `` includes one or more ``s. Each size query includes a size feature name, a comparison operator, and a value. The size features that can be queried are limited to `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`, and `orientation`. The boolean syntax and logic combining one or more ``s is the same as for {{cssxref("@media")}} size feature queries. ```css form { diff --git a/files/en-us/web/css/guides/display/block_formatting_context/index.md b/files/en-us/web/css/guides/display/block_formatting_context/index.md index 5dc9643365da661..228726b572f6f48 100644 --- a/files/en-us/web/css/guides/display/block_formatting_context/index.md +++ b/files/en-us/web/css/guides/display/block_formatting_context/index.md @@ -18,8 +18,8 @@ A block formatting context is created by at least one of the following: - Table captions (elements with {{cssxref("display", "display: table-caption")}}, which is the default for HTML table captions). - Anonymous table cells implicitly created by the elements with {{cssxref("display", "display: table")}}, `table-row`, `table-row-group`, `table-header-group`, `table-footer-group` (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or `inline-table`. - Elements with {{cssxref("display", "display: flow-root")}}. -- Flex items (direct children of the element with {{cssxref("display", "display: flex")}} or `inline-flex`) if they are neither [flex](/en-US/docs/Glossary/Flex_Container) nor [grid](/en-US/docs/Glossary/Grid_Container) nor [table](/en-US/docs/Web/CSS/Guides/Table) containers themselves. -- Grid items (direct children of the element with {{cssxref("display", "display: grid")}} or `inline-grid`) if they are neither [flex](/en-US/docs/Glossary/Flex_Container) nor [grid](/en-US/docs/Glossary/Grid_Container) nor [table](/en-US/docs/Web/CSS/Guides/Table) containers themselves. +- Flex items (direct children of the element with {{cssxref("display", "display: flex")}} or `inline-flex`) if they are neither {{glossary("flex")}} nor [grid](/en-US/docs/Glossary/Grid_Container) nor [table](/en-US/docs/Web/CSS/Guides/Table) containers themselves. +- Grid items (direct children of the element with {{cssxref("display", "display: grid")}} or `inline-grid`) if they are neither {{glossary("flex")}} nor [grid](/en-US/docs/Glossary/Grid_Container) nor [table](/en-US/docs/Web/CSS/Guides/Table) containers themselves. - Block elements where {{ cssxref("overflow") }} has a value other than `visible` and `clip`. - Elements with {{cssxref("contain", "contain: layout")}}, `content`, or `paint`. - Multicol containers (elements where {{ cssxref("column-count") }} or {{ cssxref("column-width") }} isn't `auto`, including elements with `column-count: 1`). diff --git a/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md b/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md index 3c076b7f88008a0..2c3857d24b86614 100644 --- a/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md +++ b/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md @@ -47,7 +47,7 @@ body { {{EmbedLiveSample("overflow", "", "370px")}} -The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the [`overflow`](/en-US/docs/Web/CSS/Reference/Properties/overflow) property which has an initial value of `visible`. This is why we can see the overflow content. +The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the {{cssxref("overflow")}} property which has an initial value of `visible`. This is why we can see the overflow content. ## Controlling overflow @@ -166,7 +166,7 @@ As we have already learned, using any of these values, other than the default of `overflow: clip` acts like `overflow: hidden`, but it does not allow programmatic scrolling; the box becomes non-scrollable. It also does not create a block formatting context. -The overflow property is in reality a shorthand for the [`overflow-x`](/en-US/docs/Web/CSS/Reference/Properties/overflow-x) and [`overflow-y`](/en-US/docs/Web/CSS/Reference/Properties/overflow-y) properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for `overflow-x` and therefore the horizontal direction, and the second for `overflow-y` and the vertical direction. In the below example, I have only specified `overflow-y: scroll` so we do not get the unwanted horizontal scrollbar. +The overflow property is in reality a shorthand for the {{cssxref("overflow-x")}} and {{cssxref("overflow-y")}} properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for `overflow-x` and therefore the horizontal direction, and the second for `overflow-y` and the vertical direction. In the below example, I have only specified `overflow-y: scroll` so we do not get the unwanted horizontal scrollbar. ```html hidden live-sample___overflow-y
@@ -213,7 +213,7 @@ In the CSS overflow module, there are some properties that can help improve the ### Inline-Axis Overflow -The [`text-overflow`](/en-US/docs/Web/CSS/Reference/Properties/text-overflow) property deals with text overflowing in the inline direction. It takes one of two values `clip`, in which case content is clipped when it overflows, this is the initial value and therefore the default behavior. We also have `ellipsis` which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use. +The {{cssxref("text-overflow")}} property deals with text overflowing in the inline direction. It takes one of two values `clip`, in which case content is clipped when it overflows, this is the initial value and therefore the default behavior. We also have `ellipsis` which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use. ```html hidden live-sample___text-overflow
diff --git a/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md b/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md index a0b532f65ccc488..12770b902589896 100644 --- a/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md +++ b/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md @@ -6,7 +6,7 @@ page-type: guide sidebar: cssref --- -The [CSS display module](/en-US/docs/Web/CSS/Guides/Display) defines a multi-keyword syntax for the CSS [`display`](/en-US/docs/Web/CSS/Reference/Properties/display) property. This guide explains the multi-keyword syntax. +The [CSS display module](/en-US/docs/Web/CSS/Guides/Display) defines a multi-keyword syntax for the CSS {{cssxref("display")}} property. This guide explains the multi-keyword syntax. > [!NOTE] > Multi-keyword syntax is also referred to as "two-value syntax" or "multi-value syntax." @@ -226,7 +226,7 @@ p {

The #sibling paragraph (sibling of #parent).

``` -{{EmbedLiveSample("display_block_flow-root_and_display_inline_flow-root", '90%', 380)}} +{{EmbedLiveSample("display_block_flow-root_and_display_inline_flow-root", '90%', 580)}} The `flow-root` value makes sense if you think about block and inline layout, which is sometimes called [normal flow](/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction#normal_layout_flow). Our HTML page creates a new formatting context (floats and margins cannot extend out from the boundaries) and our content lays out in normal flow, using block and inline layout, unless we change the value of `display` to use some other formatting context. Creating a grid or flex container also creates a new formatting context (a grid or flex formatting context, respectively.) These also contain everything inside them. However, if you want to contain floats and margins but continue using block and inline layout, you can create a new flow root, and start over with block and inline layout. From that point downwards everything is contained inside the new flow root. diff --git a/files/en-us/web/css/guides/filter_effects/index.md b/files/en-us/web/css/guides/filter_effects/index.md index 9990871b04a2b29..2b8f1a653f00ba6 100644 --- a/files/en-us/web/css/guides/filter_effects/index.md +++ b/files/en-us/web/css/guides/filter_effects/index.md @@ -273,7 +273,7 @@ function sepia() { - {{glossary("interpolation")}} glossary term -- [`color-interpolation-filters`](/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) SVG property +- {{svgattr("color-interpolation-filters")}} SVG property ## Specifications diff --git a/files/en-us/web/css/guides/filter_effects/using/index.md b/files/en-us/web/css/guides/filter_effects/using/index.md index e810996480c9263..e7b974c105ec18e 100644 --- a/files/en-us/web/css/guides/filter_effects/using/index.md +++ b/files/en-us/web/css/guides/filter_effects/using/index.md @@ -27,7 +27,7 @@ The `filter` and `backdrop-filter` properties accept a space-separated list of f The CSS filter effects module provides 10 [``](/en-US/docs/Web/CSS/Reference/Properties/filter#functions) functions, as well as the ability to define an almost endless array of effects using SVG filters applied via a `url()` reference. -The following table lists the 10 filter functions, along with their value types, the minimum valid value if applicable, the largest value that creates an effect, and the initial value used for [interpolation](/en-US/docs/Glossary/Interpolation). +The following table lists the 10 filter functions, along with their value types, the minimum valid value if applicable, the largest value that creates an effect, and the initial value used for {{glossary("interpolation")}}. | Filter function | Parameter type | Min value | Max effect | Default value (no effect) | | ----------------------------------------------------------- | ------------------------------------------------------------------ | --------- | ---------- | ------------------------- | @@ -254,7 +254,7 @@ Just like the {{cssxref("filter-function/blur", "blur()")}} filter function appl In both the cases, the blur radius value, specified as a {{cssxref("<length>")}} in CSS and as a pixel equivalent {{cssxref("<number>")}} in SVG, defines the value of the standard deviation to the Gaussian function. In other words, it defines the number of pixels on the screen that blend into each other; a larger value creates more blur. -The [``](/en-US/docs/Web/SVG/Reference/Element/filter)'s {{SVGAttr("stdDeviation")}} attribute accepts up to two values enabling creating more complex blur values. To create an equivalent blur, we include one value for `stdDeviation`: +The {{svgelement("filter")}}'s {{SVGAttr("stdDeviation")}} attribute accepts up to two values enabling creating more complex blur values. To create an equivalent blur, we include one value for `stdDeviation`: ```html hidden @@ -300,7 +300,7 @@ The [``](/en-US/docs/Web/SVG/Reference/Element/filter)'s {{SVGAttr("stdD ``` -The SVG `url()` filter value can be included as the value of the SVG [``](/en-US/docs/Web/SVG/Reference/Element/image) element's [`filter`](/en-US/docs/Web/SVG/Reference/Attribute/filter) attribute or as part of the value of the CSS `filter` and `backdrop-filter` properties. +The SVG `url()` filter value can be included as the value of the SVG {{svgelement("image")}} element's {{svgattr("filter")}} attribute or as part of the value of the CSS `filter` and `backdrop-filter` properties. ```css hidden th, diff --git a/files/en-us/web/css/guides/flexible_box_layout/basic_concepts/index.md b/files/en-us/web/css/guides/flexible_box_layout/basic_concepts/index.md index b99b73871a85bc4..47e5e7b49a7e720 100644 --- a/files/en-us/web/css/guides/flexible_box_layout/basic_concepts/index.md +++ b/files/en-us/web/css/guides/flexible_box_layout/basic_concepts/index.md @@ -429,13 +429,13 @@ The article [Aligning items in a flex container](/en-US/docs/Web/CSS/Guides/Flex ### justify-items -The [`justify-items`](/en-US/docs/Web/CSS/Reference/Properties/justify-items) property is ignored in flexbox layouts. +The {{cssxref("justify-items")}} property is ignored in flexbox layouts. ### place-items and place-content -The [`place-items`](/en-US/docs/Web/CSS/Reference/Properties/place-items) property is a shorthand property for `align-items` and `justify-items`. If set on a flex container, it will set the alignment but not the justification, as `justify-items` is ignored in flexbox. +The {{cssxref("place-items")}} property is a shorthand property for `align-items` and `justify-items`. If set on a flex container, it will set the alignment but not the justification, as `justify-items` is ignored in flexbox. -There is another shorthand property, [`place-content`](/en-US/docs/Web/CSS/Reference/Properties/place-content), that defines the {{cssxref("align-content")}} and `justify-content` properties. The `align-content` property only effects flex containers that wrap, and is discussed in [Aligning items in a flex container](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items). +There is another shorthand property, {{cssxref("place-content")}}, that defines the {{cssxref("align-content")}} and `justify-content` properties. The `align-content` property only effects flex containers that wrap, and is discussed in [Aligning items in a flex container](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items). ## Next steps diff --git a/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md b/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md index 375851c466e812a..a01daa03433159e 100644 --- a/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md +++ b/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md @@ -112,7 +112,7 @@ nav li { Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right. Here we are using the auto margins technique described in [Using auto margins for main axis alignment](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items#using_auto_margins_for_main_axis_alignment). -The items are aligned on the main axis with `normal`, which behaves as `start`, as this is the initial behavior of flexbox. The [`gap`](/en-US/docs/Web/CSS/Reference/Properties/gap) property creates gaps between items. And we are aligning the last item to the right by giving it a `margin-left` value of `auto`. You can move the class from one item to another to change where the split happens. +The items are aligned on the main axis with `normal`, which behaves as `start`, as this is the initial behavior of flexbox. The {{cssxref("gap")}} property creates gaps between items. And we are aligning the last item to the right by giving it a `margin-left` value of `auto`. You can move the class from one item to another to change where the split happens. ```html live-sample___split-navigation