From 66e63c833f0d782b6ffda706b07601cb840c46a6 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Thu, 20 Jul 2023 14:43:36 -0700 Subject: [PATCH] Add 'constituent properties' section to all shorthand properties --- .../web/css/-webkit-border-before/index.md | 8 ++++++++ files/en-us/web/css/all/index.md | 4 ++++ files/en-us/web/css/column-rule/index.md | 8 ++++++-- files/en-us/web/css/container/index.md | 7 +++++++ files/en-us/web/css/inset/index.md | 9 +++++++++ .../en-us/web/css/overscroll-behavior/index.md | 17 +++++++++++++---- 6 files changed, 47 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/-webkit-border-before/index.md b/files/en-us/web/css/-webkit-border-before/index.md index 6c09f09eb0273bf..b7eb23ccbdd56ef 100644 --- a/files/en-us/web/css/-webkit-border-before/index.md +++ b/files/en-us/web/css/-webkit-border-before/index.md @@ -31,6 +31,14 @@ It relates to {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-sta This property is on the standard track as {{cssxref("border-block-start")}}. +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{cssxref("-webkit-border-before-color")}} +- {{cssxref("-webkit-border-before-style")}} +- {{cssxref("-webkit-border-before-width")}} + ## Syntax ### Values diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md index 10fe4252a835017..3432422f0d086d9 100644 --- a/files/en-us/web/css/all/index.md +++ b/files/en-us/web/css/all/index.md @@ -11,6 +11,10 @@ The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US {{EmbedInteractiveExample("pages/css/all.html")}} +## Constituent properties + +This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). + ## Syntax ```css diff --git a/files/en-us/web/css/column-rule/index.md b/files/en-us/web/css/column-rule/index.md index f70e3d583bcbd46..f3063f7e2ab1786 100644 --- a/files/en-us/web/css/column-rule/index.md +++ b/files/en-us/web/css/column-rule/index.md @@ -11,9 +11,13 @@ The **`column-rule`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS {{EmbedInteractiveExample("pages/css/column-rule.html")}} -It is a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) that sets the individual `column-rule-*` properties in a single, convenient declaration: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, and {{Cssxref("column-rule-color")}}. +## Constituent properties -> **Note:** As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). +This property is a shorthand for the following CSS properties: + +- {{Cssxref("column-rule-color")}} +- {{Cssxref("column-rule-style")}} +- {{Cssxref("column-rule-width")}} ## Syntax diff --git a/files/en-us/web/css/container/index.md b/files/en-us/web/css/container/index.md index 90cab448b2b71b4..3e9852ddd54a757 100644 --- a/files/en-us/web/css/container/index.md +++ b/files/en-us/web/css/container/index.md @@ -9,6 +9,13 @@ browser-compat: css.properties.container The **container** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property establishes the element as a query container and specifies the name or name for the [containment context](/en-US/docs/Web/CSS/CSS_container_queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_container_queries). +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{Cssxref("container-name")}} +- {{Cssxref("container-type")}} + ## Syntax ```css diff --git a/files/en-us/web/css/inset/index.md b/files/en-us/web/css/inset/index.md index f8d5d5b1993c0ab..39ce7169501c70c 100644 --- a/files/en-us/web/css/inset/index.md +++ b/files/en-us/web/css/inset/index.md @@ -13,6 +13,15 @@ The **`inset`** [CSS](/en-US/docs/Web/CSS) property is a shorthand that correspo While part of the _CSS Logical Properties_ specification, it does not define _logical_ offsets. It defines _physical_ offsets, regardless of the element's writing mode, directionality, and text orientation. +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{Cssxref("top")}} +- {{Cssxref("right")}} +- {{Cssxref("bottom")}} +- {{Cssxref("left")}} + ## Syntax ```css diff --git a/files/en-us/web/css/overscroll-behavior/index.md b/files/en-us/web/css/overscroll-behavior/index.md index 02b2e8a8fadeeef..2c0a7377c4dc86b 100644 --- a/files/en-us/web/css/overscroll-behavior/index.md +++ b/files/en-us/web/css/overscroll-behavior/index.md @@ -7,15 +7,16 @@ browser-compat: css.properties.overscroll-behavior {{CSSRef}} -The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}. +The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. {{EmbedInteractiveExample("pages/css/overscroll-behavior.html")}} -By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called **scroll chaining**. +## Constituent properties -In some cases these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior. +This property is a shorthand for the following CSS properties: -Note that this property only applies to {{Glossary("Scroll_container", "scroll containers")}}. In particular, since an [`