diff --git a/.github/workflows/auto-cleanup-bot.yml b/.github/workflows/auto-cleanup-bot.yml
index c3e23c58576680b..2e0e7e713997f6f 100644
--- a/.github/workflows/auto-cleanup-bot.yml
+++ b/.github/workflows/auto-cleanup-bot.yml
@@ -5,6 +5,10 @@ on:
- cron: "0 0 * * *"
workflow_dispatch:
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+# We use AUTOMERGE_TOKEN to create the PR.
+permissions: {}
+
jobs:
fix:
if: github.repository == 'mdn/content'
@@ -35,7 +39,7 @@ jobs:
- name: Create PR with only fixable issues
if: success()
- uses: peter-evans/create-pull-request@v7
+ uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
with:
commit-message: "chore: auto-fix Markdownlint, Prettier, and front-matter issues"
branch: markdownlint-auto-cleanup
@@ -50,7 +54,7 @@ jobs:
- name: Create PR with notice on unfixed issues
if: failure()
- uses: peter-evans/create-pull-request@v7
+ uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
with:
commit-message: "chore: auto-fix Markdownlint, Prettier, and front-matter issues"
branch: markdownlint-auto-cleanup
diff --git a/.github/workflows/auto-merge.yml b/.github/workflows/auto-merge.yml
index c0930e006765243..a5ac4bbf4467abe 100644
--- a/.github/workflows/auto-merge.yml
+++ b/.github/workflows/auto-merge.yml
@@ -3,12 +3,15 @@ name: auto-merge
on:
pull_request_target:
+# No GITHUB_TOKEN permissions, as we use AUTOMERGE_TOKEN instead.
+permissions: {}
+
jobs:
auto-merge:
runs-on: ubuntu-latest
if: github.event.pull_request.user.login == 'dependabot[bot]'
steps:
- - uses: ahmadnassri/action-dependabot-auto-merge@v2.6
+ - uses: ahmadnassri/action-dependabot-auto-merge@45fc124d949b19b6b8bf6645b6c9d55f4f9ac61a # v2.6.6
with:
github-token: ${{ secrets.AUTOMERGE_TOKEN }}
command: "squash and merge"
diff --git a/.github/workflows/idle-issues.yml b/.github/workflows/idle-issues.yml
index 419eb356d69557d..40c7ceecc327fc2 100644
--- a/.github/workflows/idle-issues.yml
+++ b/.github/workflows/idle-issues.yml
@@ -3,6 +3,12 @@ on:
schedule:
- cron: "49 11,23 * * *"
+permissions:
+ # Label issues.
+ issues: write
+ # Label pull requests.
+ pull-requests: write
+
jobs:
idle:
uses: mdn/workflows/.github/workflows/idle.yml@main
diff --git a/.github/workflows/interfacedata-updater.yml b/.github/workflows/interfacedata-updater.yml
index a188d4dcd7bf989..85bb578af54d8dc 100644
--- a/.github/workflows/interfacedata-updater.yml
+++ b/.github/workflows/interfacedata-updater.yml
@@ -6,6 +6,9 @@ on:
- cron: "0 0 * * 6"
workflow_dispatch:
+# No GITHUB_TOKEN permissions, as we use AUTOMERGE_TOKEN instead.
+permissions: {}
+
jobs:
update:
if: github.repository == 'mdn/content'
@@ -35,7 +38,7 @@ jobs:
run: node scripts/update-interface-data.js ../webref/
- name: Create pull request
- uses: peter-evans/create-pull-request@v7
+ uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
with:
path: mdn-content
token: ${{ secrets.AUTOMERGE_TOKEN }}
diff --git a/.github/workflows/issue-regex-labeler.yml b/.github/workflows/issue-regex-labeler.yml
index a300a12f776ab69..0790a0d614ee24b 100644
--- a/.github/workflows/issue-regex-labeler.yml
+++ b/.github/workflows/issue-regex-labeler.yml
@@ -3,6 +3,10 @@ on:
issues:
types: [opened]
+permissions:
+ # Label issues.
+ issues: write
+
jobs:
issue-labeler:
runs-on: ubuntu-latest
diff --git a/.github/workflows/lock-closed.yml b/.github/workflows/lock-closed.yml
index 936b01461041521..9fb1f727e80486c 100644
--- a/.github/workflows/lock-closed.yml
+++ b/.github/workflows/lock-closed.yml
@@ -3,6 +3,14 @@ on:
schedule:
- cron: "0 9 1 * *"
+permissions:
+ # Lock discussions.
+ discussions: write
+ # Lock issues.
+ issues: write
+ # Lock pull requests.
+ pull-requests: write
+
jobs:
lock:
uses: mdn/workflows/.github/workflows/lock-closed.yml@main
diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml
index 1133c590e81b44b..abc9030366839ca 100644
--- a/.github/workflows/markdown-lint.yml
+++ b/.github/workflows/markdown-lint.yml
@@ -13,6 +13,9 @@ on:
- .github/workflows/markdown-lint.yml
- .github/workflows/markdownlint-problem-matcher.json
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+permissions: {}
+
jobs:
docs:
runs-on: ubuntu-latest
diff --git a/.github/workflows/new-issues.yml b/.github/workflows/new-issues.yml
index 373f82caa792897..16194862afb4f71 100644
--- a/.github/workflows/new-issues.yml
+++ b/.github/workflows/new-issues.yml
@@ -6,12 +6,16 @@ on:
- reopened
- opened
+permissions:
+ # Label issues.
+ issues: write
+
jobs:
label-new-issues:
runs-on: ubuntu-latest
steps:
- name: initial labelling
- uses: andymckay/labeler@master
+ uses: andymckay/labeler@3a4296e9dcdf9576b0456050db78cfd34853f260 # master
with:
add-labels: "needs triage"
ignore-if-assigned: true
diff --git a/.github/workflows/ping-other-repos.yml b/.github/workflows/ping-other-repos.yml
index a49d93c7fd083cb..b493e7e78bf3d2c 100644
--- a/.github/workflows/ping-other-repos.yml
+++ b/.github/workflows/ping-other-repos.yml
@@ -11,6 +11,10 @@ name: Ping other repos
on:
push:
branches: [main]
+
+# No GITHUB_TOKEN permissions, as we use REPO_PINGER_MDN_SPEC_LINKS.
+permissions: {}
+
jobs:
ping:
# Don't run in forks, or when Dependabot merges a PR.
@@ -22,7 +26,7 @@ jobs:
- name: Ping w3c/mdn-spec-links
# This is one of many possible repos we can ping. When adding other
# repos, you can follow this w3c/mdn-spec-links one as an example.
- uses: peter-evans/repository-dispatch@v3
+ uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3.0.0
with:
token: ${{ secrets.REPO_PINGER_MDN_SPEC_LINKS }}
repository: w3c/mdn-spec-links
diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml
index 12a3a039a97efdd..ecc094ba6733b39 100644
--- a/.github/workflows/pr-check-lint_content.yml
+++ b/.github/workflows/pr-check-lint_content.yml
@@ -10,6 +10,7 @@ on:
- "files/**/*.md"
permissions:
+ # Compare commits and add reviewdog comments.
pull-requests: write
concurrency:
@@ -130,7 +131,7 @@ jobs:
- name: Setup reviewdog
if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true'
- uses: reviewdog/action-setup@v1
+ uses: reviewdog/action-setup@3f401fe1d58fe77e10d665ab713057375e39b887 # v1.3.0
with:
reviewdog_version: latest
diff --git a/.github/workflows/pr-check_cspell_lists.yml b/.github/workflows/pr-check_cspell_lists.yml
index eb3139a842d4953..ec9f40d2d913f3c 100644
--- a/.github/workflows/pr-check_cspell_lists.yml
+++ b/.github/workflows/pr-check_cspell_lists.yml
@@ -7,6 +7,9 @@ on:
paths:
- .vscode/dictionaries/*
+# No GITHUB_TOKEN permissions, as we don't use it.
+permissions: {}
+
jobs:
docs:
runs-on: ubuntu-latest
diff --git a/.github/workflows/pr-check_javascript.yml b/.github/workflows/pr-check_javascript.yml
index 336dd8e3bda6090..cfb477c123a4540 100644
--- a/.github/workflows/pr-check_javascript.yml
+++ b/.github/workflows/pr-check_javascript.yml
@@ -10,6 +10,9 @@ on:
- "**/*.mjs"
- .github/workflows/pr-check_javascript.yml
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+permissions: {}
+
jobs:
lint-js:
runs-on: ubuntu-latest
diff --git a/.github/workflows/pr-check_json.yml b/.github/workflows/pr-check_json.yml
index 638be2b97b5ad8c..a2bb981f97bec2e 100644
--- a/.github/workflows/pr-check_json.yml
+++ b/.github/workflows/pr-check_json.yml
@@ -10,6 +10,9 @@ on:
- "**/*.jsonc"
- .github/workflows/pr-check_json.yml
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+permissions: {}
+
jobs:
lint-json:
runs-on: ubuntu-latest
diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml
index 249647923a93c4a..f83f47074285050 100644
--- a/.github/workflows/pr-check_redirects.yml
+++ b/.github/workflows/pr-check_redirects.yml
@@ -5,6 +5,9 @@ on:
branches:
- main
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+permissions: {}
+
jobs:
check-redirects:
runs-on: ubuntu-latest
@@ -21,7 +24,7 @@ jobs:
# This is a "required" workflow so path filtering can not be used:
# https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/collaborating-on-repositories-with-code-quality-features/troubleshooting-required-status-checks#handling-skipped-but-required-checks
# We have to rely on a custom filtering mechanism to run the checks only if required files are modified.
- - uses: dorny/paths-filter@v3
+ - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
name: See if any file needs checking
id: filter
with:
diff --git a/.github/workflows/pr-check_scripts.yml b/.github/workflows/pr-check_scripts.yml
index a5b55c8d6f8d8b2..a475212217ff236 100644
--- a/.github/workflows/pr-check_scripts.yml
+++ b/.github/workflows/pr-check_scripts.yml
@@ -10,6 +10,9 @@ on:
- yarn.lock
- .github/workflows/pr-check_scripts.yml
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+permissions: {}
+
jobs:
up-to-date-check:
runs-on: ubuntu-latest
diff --git a/.github/workflows/pr-check_url-issues.yml b/.github/workflows/pr-check_url-issues.yml
index 96398ea0f37e6b5..bff1bf2350fa13a 100644
--- a/.github/workflows/pr-check_url-issues.yml
+++ b/.github/workflows/pr-check_url-issues.yml
@@ -7,6 +7,9 @@ on:
paths:
- "files/**/*.md"
+# No GITHUB_TOKEN permissions, as we don't use it.
+permissions: {}
+
jobs:
check_url_issues:
#if: github.repository == 'mdn/content'
diff --git a/.github/workflows/pr-check_yml.yml b/.github/workflows/pr-check_yml.yml
index 4cf949dd7daddf0..4b7789a519a4617 100644
--- a/.github/workflows/pr-check_yml.yml
+++ b/.github/workflows/pr-check_yml.yml
@@ -10,6 +10,9 @@ on:
- "**/*.yml"
- .github/workflows/pr-check_yml.yml
+# No GITHUB_TOKEN permissions, as we only use it to increase API limit.
+permissions: {}
+
jobs:
lint-yml:
runs-on: ubuntu-latest
diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml
index 342e1d366095189..670de1643c2bf38 100644
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -4,8 +4,11 @@ on:
- pull_request_target
permissions:
+ # Patch issues, see: https://github.com/CodelyTV/pr-size-labeler/pull/89
issues: write
+ # Label pull requests.
pull-requests: write
+ # Fetch files (used by actions/labeler to get config).
contents: read
jobs:
@@ -29,7 +32,7 @@ jobs:
name: Label by size
runs-on: ubuntu-latest
steps:
- - uses: codelytv/pr-size-labeler@v1
+ - uses: codelytv/pr-size-labeler@1c3422395d899286d5ee2c809fd5aed264d5eb9b # v1.10.2
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
github_api_url: "https://api.github.com"
diff --git a/.github/workflows/pr-rebase-needed.yml b/.github/workflows/pr-rebase-needed.yml
index 9cd362fdac42979..f44a7383c97f203 100644
--- a/.github/workflows/pr-rebase-needed.yml
+++ b/.github/workflows/pr-rebase-needed.yml
@@ -5,6 +5,10 @@ on:
pull_request_target:
types: [synchronize]
+permissions:
+ # Label pull requests.
+ pull-requests: write
+
jobs:
label-rebase-needed:
uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main
diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml
index 13b3122ee88106d..1b97a220f28bef3 100644
--- a/.github/workflows/pr-review-companion.yml
+++ b/.github/workflows/pr-review-companion.yml
@@ -11,6 +11,12 @@ on:
types:
- completed
+permissions:
+ # Download artifact.
+ actions: read
+ # Post comment in pull request.
+ pull-requests: write
+
jobs:
review:
runs-on: ubuntu-latest
@@ -55,7 +61,7 @@ jobs:
- name: Install Python poetry
if: env.HAS_ARTIFACT
- uses: snok/install-poetry@v1.4
+ uses: snok/install-poetry@76e04a911780d5b312d89783f7b1cd627778900a # v1.4.1
with:
virtualenvs-create: true
virtualenvs-in-project: true
diff --git a/.github/workflows/pr-test-legacy.yml b/.github/workflows/pr-test-legacy.yml
index e390e19231b95bc..c3b5718c93b5309 100644
--- a/.github/workflows/pr-test-legacy.yml
+++ b/.github/workflows/pr-test-legacy.yml
@@ -11,13 +11,14 @@ on:
branches:
- main
+permissions:
+ # Compare two commits.
+ contents: read
+
jobs:
tests:
if: github.repository == 'mdn/content'
runs-on: ubuntu-latest
- # Set the permissions to `read-all`, preventing the workflow from
- # any accidental write access to the repository.
- permissions: read-all
env:
BASE_SHA: ${{ github.event.pull_request.base.sha }}
HEAD_SHA: ${{ github.event.pull_request.head.sha }}
diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml
index b6b679099dff360..c4082cc0a483e00 100644
--- a/.github/workflows/pr-test.yml
+++ b/.github/workflows/pr-test.yml
@@ -11,13 +11,14 @@ on:
branches:
- main
+permissions:
+ # Compare two commits.
+ contents: read
+
jobs:
tests:
if: github.repository == 'mdn/content'
runs-on: ubuntu-latest
- # Set the permissions to `read-all`, preventing the workflow from
- # any accidental write access to the repository.
- permissions: read-all
env:
BASE_SHA: ${{ github.event.pull_request.base.sha }}
HEAD_SHA: ${{ github.event.pull_request.head.sha }}
diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml
index 6869ba085cfeee5..bdf920c38098f91 100644
--- a/.github/workflows/spelling-check-bot.yml
+++ b/.github/workflows/spelling-check-bot.yml
@@ -5,6 +5,10 @@ on:
- cron: "0 0 * * mon"
workflow_dispatch:
+permissions:
+ # Create issue.
+ issues: write
+
jobs:
sync:
if: github.repository == 'mdn/content'
diff --git a/.github/workflows/system-file-changes.yml b/.github/workflows/system-file-changes.yml
index 89fd2c59dcb5423..b3b3dbbde3fde46 100644
--- a/.github/workflows/system-file-changes.yml
+++ b/.github/workflows/system-file-changes.yml
@@ -10,6 +10,9 @@ on:
- package.json
- yarn.lock
+# No GITHUB_TOKEN permissions, as we don't use it.
+permissions: {}
+
jobs:
block:
# This makes sure it only runs on our origin repo
diff --git a/.vscode/dictionaries/ignore-list.txt b/.vscode/dictionaries/ignore-list.txt
index 47a0e4a9f06959e..dad24d771291622 100644
--- a/.vscode/dictionaries/ignore-list.txt
+++ b/.vscode/dictionaries/ignore-list.txt
@@ -231,6 +231,7 @@ notavideo
notebox
nytimes
Odtsetseg
+Oggi
opensas
opensesame
OPQRTUVXYZ
@@ -321,3 +322,4 @@ YSDEgCDwkICAIOaWhyDwn6aE
Yuckymeat
YWxhZGRpbjpvcGVuc2VzYW1l
Zorp
+ZRWB
diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt
index e2d891223d7dae1..47b6cd09b207799 100644
--- a/.vscode/dictionaries/terms-abbreviations.txt
+++ b/.vscode/dictionaries/terms-abbreviations.txt
@@ -633,6 +633,7 @@ snapport
snapshotted
snapshotting
SNES
+spammy
spatialization
spatializations
spatialize
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 506a5236d633524..8bb678858c86fe3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,7 +4,7 @@ Thanks for taking the time to contribute to [MDN Web Docs](https://developer.moz
This document covers project setup steps along with a set of guidelines for contributing to MDN Web Docs content.
Everyone participating in this project is expected to follow our [Code of Conduct](https://github.com/mdn/content/blob/main/CODE_OF_CONDUCT.md), which means adhering to [Mozilla's Community Participation Guidelines](https://www.mozilla.org/en-US/about/governance/policies/participation/).
-If you want to jump right in, see [Getting started with MDN Web Docs][] for an overview of how to join, and the [Contribute page][] on MDN for a filtered list of tasks.
+If you want to jump right in, see [Getting started with MDN Web Docs][] for an overview of how to join, and the [Community resources][] on MDN.
## Getting started
@@ -419,7 +419,7 @@ There are some important rules of etiquette to remember that will help during th
When contributing to the content you agree to license your contributions
according to [our license](LICENSE.md).
-[contribute page]: https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing
+[community resources]: https://developer.mozilla.org/en-US/docs/MDN/Community
[getting started with mdn web docs]: https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Getting_started
[getting ready to contribute]: https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Getting_started#getting_ready_to_contribute
[how to write in markdown]: https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
index ee51a809e46ed93..f9e85f8e511e64d 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
@@ -523,7 +523,7 @@
/en-US/docs/CSS/Scaling_background_images /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images
/en-US/docs/CSS/Scaling_of_SVG_backgrounds /en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
/en-US/docs/CSS/Shorthand_properties /en-US/docs/Web/CSS/Shorthand_properties
-/en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/Specificity
+/en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity
/en-US/docs/CSS/Syntax /en-US/docs/Web/CSS/Syntax
/en-US/docs/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow
/en-US/docs/CSS/Tutorial/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
@@ -561,12 +561,12 @@
/en-US/docs/CSS/Using_CSS_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
/en-US/docs/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms
/en-US/docs/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
-/en-US/docs/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties
+/en-US/docs/CSS/Using_CSS_variables /en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
/en-US/docs/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
/en-US/docs/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
/en-US/docs/CSS/Value_definition_syntax /en-US/docs/Web/CSS/Value_definition_syntax
/en-US/docs/CSS/Visual_formatting_model /en-US/docs/Web/CSS/Visual_formatting_model
-/en-US/docs/CSS/actual_value /en-US/docs/Web/CSS/actual_value
+/en-US/docs/CSS/actual_value /en-US/docs/Web/CSS/CSS_cascade/actual_value
/en-US/docs/CSS/align-content /en-US/docs/Web/CSS/align-content
/en-US/docs/CSS/align-items /en-US/docs/Web/CSS/align-items
/en-US/docs/CSS/align-self /en-US/docs/Web/CSS/align-self
@@ -663,7 +663,7 @@
/en-US/docs/CSS/column-span /en-US/docs/Web/CSS/column-span
/en-US/docs/CSS/column-width /en-US/docs/Web/CSS/column-width
/en-US/docs/CSS/columns /en-US/docs/Web/CSS/columns
-/en-US/docs/CSS/computed_value /en-US/docs/Web/CSS/computed_value
+/en-US/docs/CSS/computed_value /en-US/docs/Web/CSS/CSS_cascade/computed_value
/en-US/docs/CSS/content /en-US/docs/Web/CSS/content
/en-US/docs/CSS/counter /en-US/docs/Web/CSS/counter
/en-US/docs/CSS/counter-increment /en-US/docs/Web/CSS/counter-increment
@@ -713,10 +713,10 @@
/en-US/docs/CSS/image-orientation /en-US/docs/Web/CSS/image-orientation
/en-US/docs/CSS/image-rendering /en-US/docs/Web/CSS/image-rendering
/en-US/docs/CSS/inherit /en-US/docs/Web/CSS/inherit
-/en-US/docs/CSS/inheritance /en-US/docs/Web/CSS/Inheritance
-/en-US/docs/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance
+/en-US/docs/CSS/inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance
+/en-US/docs/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/CSS_cascade/Inheritance
/en-US/docs/CSS/initial /en-US/docs/Web/CSS/initial
-/en-US/docs/CSS/initial_value /en-US/docs/Web/CSS/initial_value
+/en-US/docs/CSS/initial_value /en-US/docs/Web/CSS/CSS_cascade/initial_value
/en-US/docs/CSS/integer /en-US/docs/Web/CSS/integer
/en-US/docs/CSS/justify-content /en-US/docs/Web/CSS/justify-content
/en-US/docs/CSS/left /en-US/docs/Web/CSS/left
@@ -786,7 +786,7 @@
/en-US/docs/CSS/scroll /en-US/docs/Web/CSS/overflow
/en-US/docs/CSS/shape /en-US/docs/Web/CSS/shape
/en-US/docs/CSS/shape-rendering /en-US/docs/Web/SVG/Attribute/shape-rendering
-/en-US/docs/CSS/specified_value /en-US/docs/Web/CSS/specified_value
+/en-US/docs/CSS/specified_value /en-US/docs/Web/CSS/CSS_cascade/specified_value
/en-US/docs/CSS/static /en-US/docs/Web/CSS/position
/en-US/docs/CSS/stop-color /en-US/docs/Web/SVG/Attribute/stop-color
/en-US/docs/CSS/stop-opacity /en-US/docs/Web/SVG/Attribute/stop-opacity
@@ -833,7 +833,7 @@
/en-US/docs/CSS/transition-timing-function /en-US/docs/Web/CSS/transition-timing-function
/en-US/docs/CSS/unicode-bidi /en-US/docs/Web/CSS/unicode-bidi
/en-US/docs/CSS/uri /en-US/docs/Web/CSS/url_value
-/en-US/docs/CSS/used_value /en-US/docs/Web/CSS/used_value
+/en-US/docs/CSS/used_value /en-US/docs/Web/CSS/CSS_cascade/used_value
/en-US/docs/CSS/user-ident /en-US/docs/Web/CSS/custom-ident
/en-US/docs/CSS/user-select /en-US/docs/Web/CSS/user-select
/en-US/docs/CSS/vertical-align /en-US/docs/Web/CSS/vertical-align
@@ -997,7 +997,7 @@
/en-US/docs/CSS:clip /en-US/docs/Web/CSS/clip
/en-US/docs/CSS:color /en-US/docs/Web/CSS/color
/en-US/docs/CSS:color_value /en-US/docs/Web/CSS/color_value
-/en-US/docs/CSS:computed_value /en-US/docs/Web/CSS/computed_value
+/en-US/docs/CSS:computed_value /en-US/docs/Web/CSS/CSS_cascade/computed_value
/en-US/docs/CSS:content /en-US/docs/Web/CSS/content
/en-US/docs/CSS:counter /en-US/docs/Web/CSS/counter
/en-US/docs/CSS:counter-increment /en-US/docs/Web/CSS/counter-increment
@@ -1019,10 +1019,10 @@
/en-US/docs/CSS:height /en-US/docs/Web/CSS/height
/en-US/docs/CSS:hidden /en-US/docs/Web/CSS/visibility
/en-US/docs/CSS:inherit /en-US/docs/Web/CSS/inherit
-/en-US/docs/CSS:inheritance /en-US/docs/Web/CSS/Inheritance
-/en-US/docs/CSS:inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance
+/en-US/docs/CSS:inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance
+/en-US/docs/CSS:inherited_and_non-inherited_properties /en-US/docs/Web/CSS/CSS_cascade/Inheritance
/en-US/docs/CSS:initial /en-US/docs/Web/CSS/initial
-/en-US/docs/CSS:initial_value /en-US/docs/Web/CSS/initial_value
+/en-US/docs/CSS:initial_value /en-US/docs/Web/CSS/CSS_cascade/initial_value
/en-US/docs/CSS:integer /en-US/docs/Web/CSS/integer
/en-US/docs/CSS:left /en-US/docs/Web/CSS/left
/en-US/docs/CSS:length /en-US/docs/Web/CSS/length
@@ -5792,6 +5792,7 @@
/en-US/docs/MDN/At_ten/Contributing_to_MDN /en-US/docs/MDN/Community/Getting_started
/en-US/docs/MDN/At_ten/History_of_MDN https://developer.mozilla.org/en-US/about#our_journey
/en-US/docs/MDN/Changelog /en-US/docs/MDN/Writing_guidelines/Changelog
+/en-US/docs/MDN/Community/Contributing /en-US/docs/MDN/Community
/en-US/docs/MDN/Community/Contributing/Getting_started /en-US/docs/MDN/Community/Getting_started
/en-US/docs/MDN/Community/Contributing/Security_vulnerability_response /en-US/docs/MDN/Community/Security_vulnerability_response
/en-US/docs/MDN/Community/Contributing/Translated_content /en-US/docs/MDN/Community/Translated_content
@@ -9893,10 +9894,14 @@
/en-US/docs/Web/API/RTCOfferAnswerOptions/voiceActivityDetection /en-US/docs/Web/API/RTCPeerConnection/createAnswer
/en-US/docs/Web/API/RTCOfferOptions /en-US/docs/Web/API/RTCPeerConnection/createOffer
/en-US/docs/Web/API/RTCOfferOptions/iceRestart /en-US/docs/Web/API/RTCPeerConnection/createOffer
+/en-US/docs/Web/API/RTCOutboundRtpStreamStats/averageRtcpInterval /en-US/docs/Web/API/RTCOutboundRtpStreamStats
/en-US/docs/Web/API/RTCOutboundRtpStreamStats/firCount /en-US/docs/Web/API/RTCOutboundRtpStreamStats
/en-US/docs/Web/API/RTCOutboundRtpStreamStats/lastPacketSentTimestamp /en-US/docs/Web/API/RTCOutboundRtpStreamStats
-/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsReceived /en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent
+/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsReceived /en-US/docs/Web/API/RTCOutboundRtpStreamStats
+/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent /en-US/docs/Web/API/RTCOutboundRtpStreamStats
/en-US/docs/Web/API/RTCOutboundRtpStreamStats/pliCount /en-US/docs/Web/API/RTCOutboundRtpStreamStats
+/en-US/docs/Web/API/RTCOutboundRtpStreamStats/sliCount /en-US/docs/Web/API/RTCOutboundRtpStreamStats
+/en-US/docs/Web/API/RTCOutboundRtpStreamStats/trackId /en-US/docs/Web/API/RTCOutboundRtpStreamStats
/en-US/docs/Web/API/RTCPeerConnection.addStream /en-US/docs/Web/API/RTCPeerConnection/addStream
/en-US/docs/Web/API/RTCPeerConnection.close /en-US/docs/Web/API/RTCPeerConnection/close
/en-US/docs/Web/API/RTCPeerConnection.getIdentityAssertion /en-US/docs/Web/API/RTCPeerConnection/getIdentityAssertion
@@ -10556,6 +10561,7 @@
/en-US/docs/Web/API/Window/animationend_event /en-US/docs/Web/API/Element/animationend_event
/en-US/docs/Web/API/Window/animationiteration_event /en-US/docs/Web/API/Element/animationiteration_event
/en-US/docs/Web/API/Window/animationstart_event /en-US/docs/Web/API/Element/animationstart_event
+/en-US/docs/Web/API/Window/console /en-US/docs/Web/API/console
/en-US/docs/Web/API/Window/content /en-US/docs/Web/API/Window
/en-US/docs/Web/API/Window/convertPointFromNodeToPage /en-US/docs/Web/API/Window/webkitConvertPointFromNodeToPage
/en-US/docs/Web/API/Window/convertPointFromPageToNode /en-US/docs/Web/API/Window/webkitConvertPointFromPageToNode
@@ -10800,6 +10806,9 @@
/en-US/docs/Web/API/XRWebGLLayerInit/stencil /en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
/en-US/docs/Web/API/XRWebGLSubImage/textureHeight /en-US/docs/Web/API/XRWebGLSubImage/colorTextureHeight
/en-US/docs/Web/API/XRWebGLSubImage/textureWidth /en-US/docs/Web/API/XRWebGLSubImage/colorTextureWidth
+/en-US/docs/Web/API/XSLTProcessor/Basic_Example /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/Web/API/XSLTProcessor/Generating_HTML /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/Web/API/XSLTProcessor/Introduction /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
/en-US/docs/Web/API/XSLTProcessor/Resources /en-US/docs/Web/API/XSLTProcessor
/en-US/docs/Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ /en-US/docs/Web/API/XSLTProcessor
/en-US/docs/Web/API/atob /en-US/docs/Web/API/Window/atob
@@ -11807,7 +11816,7 @@
/en-US/docs/Web/CSS/Adjacent_sibling_combinator /en-US/docs/Web/CSS/Next-sibling_combinator
/en-US/docs/Web/CSS/Adjacent_sibling_selectors /en-US/docs/Web/CSS/Next-sibling_combinator
/en-US/docs/Web/CSS/Alias /en-US/docs/Web/CSS/cursor
-/en-US/docs/Web/CSS/All_About_The_Containing_Block /en-US/docs/Web/CSS/Containing_block
+/en-US/docs/Web/CSS/All_About_The_Containing_Block /en-US/docs/Web/CSS/CSS_display/Containing_block
/en-US/docs/Web/CSS/Aural /en-US/docs/Web/CSS/@media/aural
/en-US/docs/Web/CSS/Block_formatting_context /en-US/docs/Web/CSS/CSS_display/Block_formatting_context
/en-US/docs/Web/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
@@ -11841,8 +11850,8 @@
/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins /en-US/docs/Glossary/Flexbox
/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox
-/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts
-/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts /en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts
+/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts
+/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts
/en-US/docs/Web/CSS/CSS_Functionals /en-US/docs/Web/CSS/CSS_Functions
/en-US/docs/Web/CSS/CSS_Grid /en-US/docs/Web/CSS/CSS_grid_layout
/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout /en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout
@@ -11850,7 +11859,7 @@
/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes /en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes
/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility
/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes /en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes
-/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement
+/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement /en-US/docs/Web/CSS/CSS_grid_layout
/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_logical_values_and_writing_modes /en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes
/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
@@ -11904,17 +11913,31 @@
/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes /en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes
/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values /en-US/docs/Web/CSS/CSS_shapes/From_box_values
/en-US/docs/Web/CSS/CSS_Text/Wrapping_text /en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text
+/en-US/docs/Web/CSS/CSS_Types /en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types
/en-US/docs/Web/CSS/CSS_Types/display-inside /en-US/docs/Web/CSS/display-inside
/en-US/docs/Web/CSS/CSS_Types/display-outside /en-US/docs/Web/CSS/display-outside
/en-US/docs/Web/CSS/CSS_User_Interface /en-US/docs/Web/CSS/CSS_basic_user_interface
+/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Types /en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types
/en-US/docs/Web/CSS/CSS_Variables /en-US/docs/Web/CSS/CSS_cascading_variables
/en-US/docs/Web/CSS/CSS_Viewport /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/CSS_animations/Tips /en-US/docs/Web/API/Web_Animations_API/Tips
/en-US/docs/Web/CSS/CSS_charsets /en-US/docs/Web/CSS/CSS_syntax
/en-US/docs/Web/CSS/CSS_container_queries /en-US/docs/Web/CSS/CSS_containment/Container_queries
/en-US/docs/Web/CSS/CSS_descriptor_definition /en-US/docs/Web/CSS
+/en-US/docs/Web/CSS/CSS_display/flow_layout/Block_and_inline_layout_in_normal_flow /en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
+/en-US/docs/Web/CSS/CSS_display/flow_layout/Flow_layout_and_overflow /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow
+/en-US/docs/Web/CSS/CSS_display/flow_layout/Flow_layout_and_writing_modes /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes
+/en-US/docs/Web/CSS/CSS_display/flow_layout/In_flow_and_out_of_flow /en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow
+/en-US/docs/Web/CSS/CSS_display/flow_layout/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts
/en-US/docs/Web/CSS/CSS_flex-wrap /en-US/docs/Web/CSS/flex-wrap
/en-US/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox /en-US/docs/Glossary/Flexbox
+/en-US/docs/Web/CSS/CSS_flow_layout /en-US/docs/Web/CSS/CSS_display/flow_layout
+/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow /en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
+/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow
+/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes
+/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow /en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow
+/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts
+/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement /en-US/docs/Web/CSS/CSS_grid_layout
/en-US/docs/Web/CSS/CSS_grid_layout/Layout_using_line-based_placement /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
/en-US/docs/Web/CSS/CSS_grid_layout/Layout_using_named_grid_lines /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines
/en-US/docs/Web/CSS/CSS_miscellaneous /en-US/docs/Web/CSS
@@ -11924,9 +11947,11 @@
/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
+/en-US/docs/Web/CSS/Containing_block /en-US/docs/Web/CSS/CSS_display/Containing_block
/en-US/docs/Web/CSS/Currentcolor /en-US/docs/Web/CSS/color_value#currentcolor_keyword
/en-US/docs/Web/CSS/Descendant_selectors /en-US/docs/Web/CSS/Descendant_combinator
/en-US/docs/Web/CSS/Draft_Implementations_of_CSS_Features /en-US/docs/Web/CSS/Mozilla_Extensions
@@ -11938,6 +11963,7 @@
/en-US/docs/Web/CSS/General_sibling_combinator /en-US/docs/Web/CSS/Subsequent-sibling_combinator
/en-US/docs/Web/CSS/General_sibling_selectors /en-US/docs/Web/CSS/Subsequent-sibling_combinator
/en-US/docs/Web/CSS/Grouping_selectors /en-US/docs/Web/CSS/Selector_list
+/en-US/docs/Web/CSS/Inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance
/en-US/docs/Web/CSS/Interactive /en-US/docs/Web/CSS/@media
/en-US/docs/Web/CSS/Layout_cookbook/Recipe:_Media_Objects /en-US/docs/Web/CSS/Layout_cookbook/Media_objects
/en-US/docs/Web/CSS/List_of_Proprietary_CSS_Features /en-US/docs/Web/CSS/Reference
@@ -11953,6 +11979,7 @@
/en-US/docs/Web/CSS/Reference/object-position /en-US/docs/Web/CSS/object-position
/en-US/docs/Web/CSS/Selector_lists /en-US/docs/Web/CSS/Selector_list
/en-US/docs/Web/CSS/Selectors /en-US/docs/Web/CSS/CSS_Selectors
+/en-US/docs/Web/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity
/en-US/docs/Web/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow
/en-US/docs/Web/CSS/Tools /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/Tools/Border-image_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
@@ -11968,12 +11995,14 @@
/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index
/en-US/docs/Web/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
/en-US/docs/Web/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
+/en-US/docs/Web/CSS/Using_CSS_custom_properties /en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
/en-US/docs/Web/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
-/en-US/docs/Web/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties
+/en-US/docs/Web/CSS/Using_CSS_variables /en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
/en-US/docs/Web/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
/en-US/docs/Web/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
/en-US/docs/Web/CSS/_image /en-US/docs/Web/CSS/image/image
/en-US/docs/Web/CSS/abs() /en-US/docs/Web/CSS/abs
+/en-US/docs/Web/CSS/actual_value /en-US/docs/Web/CSS/CSS_cascade/actual_value
/en-US/docs/Web/CSS/additive-symbols /en-US/docs/Web/CSS/@counter-style/additive-symbols
/en-US/docs/Web/CSS/align-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
/en-US/docs/Web/CSS/attr() /en-US/docs/Web/CSS/attr
@@ -12007,6 +12036,7 @@
/en-US/docs/Web/CSS/color_value/rgba() /en-US/docs/Web/CSS/color_value/rgb
/en-US/docs/Web/CSS/color_value/system-color /en-US/docs/Web/CSS/system-color
/en-US/docs/Web/CSS/color_value/system_color_keywords /en-US/docs/Web/CSS/system-color
+/en-US/docs/Web/CSS/computed_value /en-US/docs/Web/CSS/CSS_cascade/computed_value
/en-US/docs/Web/CSS/conic-gradient /en-US/docs/Web/CSS/gradient/conic-gradient
/en-US/docs/Web/CSS/conic-gradient() /en-US/docs/Web/CSS/gradient/conic-gradient
/en-US/docs/Web/CSS/counter() /en-US/docs/Web/CSS/counter
@@ -12014,8 +12044,9 @@
/en-US/docs/Web/CSS/counters() /en-US/docs/Web/CSS/counters
/en-US/docs/Web/CSS/cross-fade() /en-US/docs/Web/CSS/cross-fade
/en-US/docs/Web/CSS/default /en-US/docs/Web/CSS/:default
-/en-US/docs/Web/CSS/display/multi-value_syntax_of_display /en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display
-/en-US/docs/Web/CSS/display/two-value_syntax_of_display /en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display
+/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display /en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display
+/en-US/docs/Web/CSS/display/multi-value_syntax_of_display /en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display
+/en-US/docs/Web/CSS/display/two-value_syntax_of_display /en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display
/en-US/docs/Web/CSS/document /en-US/docs/Web/CSS/@document
/en-US/docs/Web/CSS/document/@-moz-document /en-US/docs/Web/CSS/@document
/en-US/docs/Web/CSS/element() /en-US/docs/Web/CSS/element
@@ -12057,7 +12088,8 @@
/en-US/docs/Web/CSS/image/image-set() /en-US/docs/Web/CSS/image/image-set
/en-US/docs/Web/CSS/image/paint() /en-US/docs/Web/CSS/image/paint
/en-US/docs/Web/CSS/imagefunction /en-US/docs/Web/CSS/image/image
-/en-US/docs/Web/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance
+/en-US/docs/Web/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/CSS_cascade/Inheritance
+/en-US/docs/Web/CSS/initial_value /en-US/docs/Web/CSS/CSS_cascade/initial_value
/en-US/docs/Web/CSS/inset-area /en-US/docs/Web/CSS/position-area
/en-US/docs/Web/CSS/inset-area_value /en-US/docs/Web/CSS/position-area_value
/en-US/docs/Web/CSS/justify-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
@@ -12114,6 +12146,7 @@
/en-US/docs/Web/CSS/sign_function /en-US/docs/Web/CSS/sign
/en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function
/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as
+/en-US/docs/Web/CSS/specified_value /en-US/docs/Web/CSS/CSS_cascade/specified_value
/en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position
/en-US/docs/Web/CSS/suffix /en-US/docs/Web/CSS/@counter-style/suffix
/en-US/docs/Web/CSS/symbols() /en-US/docs/Web/CSS/symbols
@@ -12147,6 +12180,7 @@
/en-US/docs/Web/CSS/uri /en-US/docs/Web/CSS/url_value
/en-US/docs/Web/CSS/url /en-US/docs/Web/CSS/url_value
/en-US/docs/Web/CSS/url() /en-US/docs/Web/CSS/url_function
+/en-US/docs/Web/CSS/used_value /en-US/docs/Web/CSS/CSS_cascade/used_value
/en-US/docs/Web/CSS/user-ident /en-US/docs/Web/CSS/custom-ident
/en-US/docs/Web/CSS/var() /en-US/docs/Web/CSS/var
/en-US/docs/Web/CSS/visible /en-US/docs/Web/CSS/visibility
@@ -12428,6 +12462,7 @@
/en-US/docs/Web/Events/webkitmouseforceup /en-US/docs/Web/API/Element/webkitmouseforceup_event
/en-US/docs/Web/Events/webkitmouseforcewillbegin /en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event
/en-US/docs/Web/Events/wheel /en-US/docs/Web/API/Element/wheel_event
+/en-US/docs/Web/Guide /en-US/docs/MDN/Guides
/en-US/docs/Web/Guide/AJAX /en-US/docs/Learn_web_development/Core/Scripting/Network_requests
/en-US/docs/Web/Guide/AJAX/Community /en-US/docs/Learn_web_development/Core/Scripting/Network_requests
/en-US/docs/Web/Guide/AJAX/Getting_Started /en-US/docs/Learn_web_development/Core/Scripting/Network_requests
@@ -12607,7 +12642,7 @@
/en-US/docs/Web/Guide/HTML/Using_data_attributes /en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes
/en-US/docs/Web/Guide/HTML/XHTML /en-US/docs/Glossary/XHTML
/en-US/docs/Web/Guide/Houdini /en-US/docs/Web/API/Houdini_APIs
-/en-US/docs/Web/Guide/Index /en-US/docs/Web/Guide
+/en-US/docs/Web/Guide/Index /en-US/docs/MDN/Guides
/en-US/docs/Web/Guide/Introduction_to_Web_development /en-US/docs/Learn_web_development
/en-US/docs/Web/Guide/Mobile /en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
/en-US/docs/Web/Guide/Mobile/A_hybrid_approach /en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
@@ -12621,7 +12656,7 @@
/en-US/docs/Web/Guide/Printing /en-US/docs/Web/CSS/CSS_media_queries/Printing
/en-US/docs/Web/Guide/Responsive_design /en-US/docs/Web/Progressive_web_apps
/en-US/docs/Web/Guide/Responsive_design/Responsive_design_references /en-US/docs/Web/Progressive_web_apps
-/en-US/docs/Web/Guide/SVG-in-OpenType /en-US/docs/Web/Guide
+/en-US/docs/Web/Guide/SVG-in-OpenType /en-US/docs/MDN/Guides
/en-US/docs/Web/Guide/Terminology /en-US/docs/Glossary
/en-US/docs/Web/Guide/Touch_events /en-US/docs/Web/API/Touch_events
/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API /en-US/docs/Web/API/Page_Visibility_API
@@ -13547,6 +13582,7 @@
/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types /en-US/docs/Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types
/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
/en-US/docs/Web/Text_fragments /en-US/docs/Web/URI/Fragment/Text_fragments
+/en-US/docs/Web/Tutorials /en-US/docs/MDN/Tutorials
/en-US/docs/Web/WebDriver/Commands/New_Window /en-US/docs/Web/WebDriver/Commands/NewWindow
/en-US/docs/Web/WebGL /en-US/docs/Web/API/WebGL_API
/en-US/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
@@ -13996,7 +14032,7 @@
/en-US/docs/Web_Audio_API /en-US/docs/Web/API/Web_Audio_API
/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext /en-US/docs/Web/API/Web_Audio_API
/en-US/docs/Web_Audio_API/Using_Web_Audio_API /en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
-/en-US/docs/Web_Development /en-US/docs/Web/Guide
+/en-US/docs/Web_Development /en-US/docs/MDN/Guides
/en-US/docs/Web_Development/HTTP_cookies /en-US/docs/Web/HTTP/Cookies
/en-US/docs/Web_Development/Introduction_to_Web_development /en-US/docs/Learn_web_development
/en-US/docs/Web_Development/Mobile /en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
@@ -14233,14 +14269,14 @@
/en-US/docs/XSLT:with-param /en-US/docs/Web/XML/XSLT/Reference/Element/with-param
/en-US/docs/XSLTProcessor /en-US/docs/Web/API/XSLTProcessor
/en-US/docs/XSLT_in_Gecko /en-US/docs/Web/API/XSLTProcessor
-/en-US/docs/XSLT_in_Gecko/Basic_Example /en-US/docs/Web/API/XSLTProcessor/Basic_Example
-/en-US/docs/XSLT_in_Gecko/Basic_Example-redirect-1 /en-US/docs/Web/API/XSLTProcessor/Basic_Example
-/en-US/docs/XSLT_in_Gecko/Generating_HTML /en-US/docs/Web/API/XSLTProcessor/Generating_HTML
-/en-US/docs/XSLT_in_Gecko/Introduction /en-US/docs/Web/API/XSLTProcessor/Introduction
+/en-US/docs/XSLT_in_Gecko/Basic_Example /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/XSLT_in_Gecko/Basic_Example-redirect-1 /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/XSLT_in_Gecko/Generating_HTML /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/XSLT_in_Gecko/Introduction /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
/en-US/docs/XSLT_in_Gecko/Resources /en-US/docs/Web/API/XSLTProcessor
-/en-US/docs/XSLT_in_Gecko:Basic_Example /en-US/docs/Web/API/XSLTProcessor/Basic_Example
-/en-US/docs/XSLT_in_Gecko:Generating_HTML /en-US/docs/Web/API/XSLTProcessor/Generating_HTML
-/en-US/docs/XSLT_in_Gecko:Introduction /en-US/docs/Web/API/XSLTProcessor/Introduction
+/en-US/docs/XSLT_in_Gecko:Basic_Example /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/XSLT_in_Gecko:Generating_HTML /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
+/en-US/docs/XSLT_in_Gecko:Introduction /en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT
/en-US/docs/XSLT_in_Gecko:Resources /en-US/docs/Web/API/XSLTProcessor
/en-US/docs/XSL_Transformations_in_Mozilla_FAQ /en-US/docs/Web/API/XSLTProcessor
/en-US/docs/XSL_Transformations_in_Mozilla_FAQ_(external) /en-US/docs/Web/API/XSLTProcessor
diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
index ebcb67df18cb545..17f7bb6f8edb95b 100644
--- a/files/en-us/_wikihistory.json
+++ b/files/en-us/_wikihistory.json
@@ -11237,6 +11237,130 @@
"ziyunfei"
]
},
+ "MDN/Guides": {
+ "modified": "2020-12-10T17:35:22.294Z",
+ "contributors": [
+ "chrisdavidmills",
+ "drjasmin667",
+ "jsx",
+ "Mojtaba-79",
+ "mfuji09",
+ "kammasreenew",
+ "roshan0708",
+ "toomt1414",
+ "Sheppy",
+ "jswisher",
+ "oyenirat",
+ "AdrianSkar",
+ "SphinxKnight",
+ "digimon1740",
+ "buoyantair",
+ "MrPj2u",
+ "wish1994",
+ "teoli",
+ "pgbowers",
+ "rukja",
+ "umacrawl",
+ "Tantek",
+ "qazwsx",
+ "Tigt",
+ "robfoster",
+ "wyrewolwerowany",
+ "AdamC",
+ "SpencerG",
+ "apoorva",
+ "keyitem",
+ "mahesh.syscraft",
+ "uleming",
+ "Onsteroids",
+ "yash_bedi",
+ "www_test",
+ "nicci.izzy",
+ "ethertank"
+ ]
+ },
+ "MDN/Tutorials": {
+ "modified": "2020-10-06T14:08:41.328Z",
+ "contributors": [
+ "chrisdavidmills",
+ "vasantha.h2kinfosys",
+ "jsx",
+ "belghoultechno",
+ "shehrozblogger",
+ "adambraimbridge",
+ "calin",
+ "partlybakedideas",
+ "AmateureCoder",
+ "devinea2",
+ "oyenirat",
+ "christopherwilson1",
+ "mfuji09",
+ "treyhuffine",
+ "jenlouie",
+ "webrating",
+ "Quantzilla",
+ "isabeljason",
+ "jsonmdn",
+ "Anonymous",
+ "stevea1",
+ "marvenwilsons",
+ "jstndwn",
+ "TornadoIDS",
+ "pgosk",
+ "jortoller",
+ "kdex",
+ "torazaburo",
+ "MoTTs",
+ "saidkocdemir",
+ "MusiqueGraeme",
+ "teoli",
+ "tusharcm",
+ "hosttor",
+ "wbamberg",
+ "TheKinkeroony",
+ "fscholz",
+ "Marijn",
+ "austinharper",
+ "Prabhakar_u",
+ "growssbill",
+ "Wisdom-Fifi",
+ "CrazyAlvaro",
+ "slippyten",
+ "LoTD",
+ "Minat",
+ "Penny",
+ "jensen",
+ "morello",
+ "jscape",
+ "shneeple",
+ "AdamC",
+ "SpencerG",
+ "mit7one",
+ "didinka20",
+ "jswisher",
+ "Nikaloz",
+ "rejithantony7@gmail.com",
+ "waylon531",
+ "anushbmx",
+ "carloshlira",
+ "jonsger",
+ "Oliver_Propst",
+ "arkapravamajumder",
+ "codepo8",
+ "Aleksej",
+ "ChaseWagoner",
+ "caglardursun",
+ "kunal_dhir",
+ "Domecraft",
+ "kscarfone",
+ "instanceofme",
+ "case",
+ "w3b_m4ster",
+ "taatzone",
+ "Sheppy",
+ "alispivak"
+ ]
+ },
"MDN/Writing_guidelines/Howto/Document_a_CSS_property": {
"modified": "2020-02-18T19:54:27.563Z",
"contributors": [
@@ -29738,6 +29862,10 @@
"asadotzler"
]
},
+ "Web/API/Document_Object_Model/Transforming_with_XSLT": {
+ "modified": "2019-03-23T23:49:50.843Z",
+ "contributors": ["SphinxKnight", "teoli", "Mgjbot", "Sebuls", "JdeValk"]
+ },
"Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces": {
"modified": "2020-08-22T02:28:27.619Z",
"contributors": [
@@ -53774,10 +53902,6 @@
"modified": "2020-10-15T22:17:14.806Z",
"contributors": ["Sheppy"]
},
- "Web/API/RTCOutboundRtpStreamStats/averageRtcpInterval": {
- "modified": "2020-10-15T22:17:15.805Z",
- "contributors": ["Sheppy"]
- },
"Web/API/RTCOutboundRtpStreamStats/framesEncoded": {
"modified": "2020-10-15T22:17:15.823Z",
"contributors": ["Sheppy"]
@@ -53786,10 +53910,6 @@
"modified": "2020-10-15T22:17:14.809Z",
"contributors": ["Sheppy"]
},
- "Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent": {
- "modified": "2020-10-15T22:17:15.897Z",
- "contributors": ["Sheppy"]
- },
"Web/API/RTCOutboundRtpStreamStats/qpSum": {
"modified": "2020-10-15T22:17:16.058Z",
"contributors": ["Sheppy"]
@@ -53802,14 +53922,6 @@
"modified": "2020-10-15T22:17:16.621Z",
"contributors": ["Sheppy"]
},
- "Web/API/RTCOutboundRtpStreamStats/sliCount": {
- "modified": "2020-10-15T22:17:16.518Z",
- "contributors": ["Sheppy"]
- },
- "Web/API/RTCOutboundRtpStreamStats/trackId": {
- "modified": "2020-10-15T22:17:16.946Z",
- "contributors": ["Sheppy"]
- },
"Web/API/RTCPeerConnection": {
"modified": "2020-12-14T09:30:15.422Z",
"contributors": [
@@ -66160,10 +66272,6 @@
"JesseW"
]
},
- "Web/API/Window/console": {
- "modified": "2020-01-26T11:16:36.044Z",
- "contributors": ["alattalatta", "Zearin_Galaurum", "tjcrowder", "Sheppy"]
- },
"Web/API/Window/copy_event": {
"modified": "2020-10-15T22:16:13.286Z",
"contributors": ["mfuji09", "wbamberg"]
@@ -70676,25 +70784,6 @@
"modified": "2020-10-15T21:43:51.327Z",
"contributors": ["ExE-Boss", "fscholz", "erikadoyle", "rolfedh", "cvrebert"]
},
- "Web/API/XSLTProcessor/Basic_Example": {
- "modified": "2019-03-23T23:49:54.758Z",
- "contributors": ["teoli", "ethertank", "Mgjbot", "Sebuls", "JdeValk"]
- },
- "Web/API/XSLTProcessor/Generating_HTML": {
- "modified": "2019-03-23T23:49:48.545Z",
- "contributors": [
- "SphinxKnight",
- "teoli",
- "Mgjbot",
- "Sebuls",
- "Interfaced",
- "JdeValk"
- ]
- },
- "Web/API/XSLTProcessor/Introduction": {
- "modified": "2019-03-23T23:49:50.843Z",
- "contributors": ["SphinxKnight", "teoli", "Mgjbot", "Sebuls", "JdeValk"]
- },
"Web/API/console": {
"modified": "2020-10-15T21:05:51.622Z",
"contributors": [
@@ -75873,23 +75962,6 @@
"CitizenK"
]
},
- "Web/CSS/CSS_Types": {
- "modified": "2020-12-11T13:13:56.675Z",
- "contributors": [
- "rachelandrew",
- "chrisdavidmills",
- "ramiy",
- "mfuji09",
- "wbamberg",
- "jswisher",
- "estelle",
- "Sheppy",
- "mfluehr",
- "david_ross",
- "CarloMartini",
- "mantou"
- ]
- },
"Web/CSS/CSS_Values_and_Units": {
"modified": "2020-10-29T16:36:56.704Z",
"contributors": [
@@ -75907,6 +75979,23 @@
"chrisdavidmills"
]
},
+ "Web/CSS/CSS_Values_and_Units/CSS_data_types": {
+ "modified": "2020-12-11T13:13:56.675Z",
+ "contributors": [
+ "rachelandrew",
+ "chrisdavidmills",
+ "ramiy",
+ "mfuji09",
+ "wbamberg",
+ "jswisher",
+ "estelle",
+ "Sheppy",
+ "mfluehr",
+ "david_ross",
+ "CarloMartini",
+ "mantou"
+ ]
+ },
"Web/CSS/CSS_animated_properties": {
"modified": "2020-12-14T07:30:52.556Z",
"contributors": [
@@ -76130,10 +76219,286 @@
"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/Inheritance": {
+ "modified": "2020-09-16T06:00:09.005Z",
+ "contributors": [
+ "mfuji09",
+ "OtterOne",
+ "Malvoz",
+ "Sheppy",
+ "mfluehr",
+ "GiS91",
+ "kscarfone",
+ "teoli",
+ "shitface",
+ "FredB",
+ "sloppy_4455",
+ "miken32",
+ "Marsf",
+ "Zearin",
+ "Mgjbot",
+ "Killerowski",
+ "Bedi",
+ "Fredchat",
+ "DBaron"
+ ]
+ },
+ "Web/CSS/CSS_cascade/Specificity": {
+ "modified": "2020-11-14T16:01:00.890Z",
+ "contributors": [
+ "mfuji09",
+ "An-Error94",
+ "ExE-Boss",
+ "elias6",
+ "Sajag",
+ "Aerodium",
+ "CodeLight",
+ "estelle",
+ "tommygebru",
+ "tama200",
+ "mfluehr",
+ "sekkuar",
+ "rileym7",
+ "Anawriter1",
+ "dustinryerson",
+ "yannicka",
+ "Artoria2e5",
+ "RobinHu",
+ "david_ross",
+ "chrisprobably",
+ "jnachtigall",
+ "fcard",
+ "jsx",
+ "rolfedh",
+ "PushpitaPikuDey",
+ "Tigt",
+ "kmhrussell17",
+ "kustolovic",
+ "SeriouslyAwesome",
+ "mina86",
+ "diraniyoussef",
+ "rralian",
+ "mflodin",
+ "ahmedsai001",
+ "dawsonda",
+ "mkollra01",
+ "applescr",
+ "Sebastianz",
+ "SphinxKnight",
+ "kscarfone",
+ "pablofiumara",
+ "FredB",
+ "teoli",
+ "ethertank",
+ "Sheppy",
+ "MattBrubeck",
+ "fryn",
+ "jwalker"
+ ]
+ },
+ "Web/CSS/CSS_cascade/actual_value": {
+ "modified": "2020-07-14T09:14:02.638Z",
+ "contributors": [
+ "mfuji09",
+ "wbamberg",
+ "mfluehr",
+ "sergio-vb",
+ "Sebastianz",
+ "teoli",
+ "kscarfone",
+ "ethertank",
+ "Sheppy",
+ "FredB",
+ "ziyunfei",
+ "McGurk"
+ ]
+ },
+ "Web/CSS/CSS_cascade/computed_value": {
+ "modified": "2020-08-10T14:01:43.680Z",
+ "contributors": [
+ "mfuji09",
+ "wbamberg",
+ "hinell",
+ "mfluehr",
+ "Cath_kb",
+ "Sebastianz",
+ "Sheppy",
+ "Urgot",
+ "Dholbert",
+ "kscarfone",
+ "ethertank",
+ "trevorh",
+ "mmjyu",
+ "FredB",
+ "teoli",
+ "Jürgen Jeka",
+ "Mgjbot",
+ "Marsf",
+ "Fredchat",
+ "DBaron"
+ ]
+ },
+ "Web/CSS/CSS_cascade/initial_value": {
+ "modified": "2020-07-07T12:36:02.958Z",
+ "contributors": [
+ "wbamberg",
+ "gerfolder",
+ "mfluehr",
+ "CannedYerins",
+ "kscarfone",
+ "Sheppy",
+ "FredB",
+ "teoli",
+ "ethertank",
+ "kyleb",
+ "Marsf",
+ "Mgjbot",
+ "Kohei",
+ "Pastelgrim",
+ "Killerowski",
+ "Bedi",
+ "Fredchat",
+ "DBaron"
+ ]
+ },
+ "Web/CSS/CSS_cascade/specified_value": {
+ "modified": "2020-08-10T14:28:31.353Z",
+ "contributors": [
+ "mfuji09",
+ "wbamberg",
+ "hinell",
+ "mfluehr",
+ "asteroidb612",
+ "Sheppy",
+ "BychekRU",
+ "Sebastianz",
+ "McGurk"
+ ]
+ },
+ "Web/CSS/CSS_cascade/used_value": {
+ "modified": "2020-07-07T12:48:07.054Z",
+ "contributors": [
+ "wbamberg",
+ "mfuji09",
+ "myf",
+ "hinell",
+ "FumiyaShibusawa",
+ "Tuman",
+ "shogunsea",
+ "mfluehr",
+ "Loadmaster",
+ "Mori",
+ "david_ross",
+ "DecadeCode",
+ "azoorob3",
+ "fcard",
+ "Syle91",
+ "kscarfone",
+ "phil_nist",
+ "Kritz",
+ "Dholbert",
+ "teoli",
+ "ethertank",
+ "Sheppy",
+ "FredB",
+ "yonathan"
+ ]
+ },
"Web/CSS/CSS_cascading_variables": {
"modified": "2020-07-07T12:03:44.891Z",
"contributors": ["wbamberg", "mfluehr"]
},
+ "Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties": {
+ "modified": "2020-10-15T21:21:03.349Z",
+ "contributors": [
+ "mfuji09",
+ "Geo1088",
+ "chrisdavidmills",
+ "Awk34",
+ "danielleleb",
+ "elharony",
+ "estelle",
+ "Sajag",
+ "cartinez",
+ "mfluehr",
+ "Rohitkrops",
+ "Sheppy",
+ "dan10gc",
+ "aleshkanet",
+ "chafic",
+ "cbb",
+ "equinusocio",
+ "joyously",
+ "pixelass",
+ "jhpratt",
+ "FlorTello",
+ "erikadoyle",
+ "gilbertginsberg",
+ "cPhost",
+ "Rishiahya",
+ "PhantomWatson",
+ "beingmrkenny",
+ "m_gol",
+ "jpmedley",
+ "stevemao",
+ "Sebastianz",
+ "igor9silva",
+ "JeroenNoten",
+ "keithjgrant",
+ "xDarkShadowKnightx",
+ "robertclaytonreed",
+ "teoli",
+ "Volker-E",
+ "Manuel_Strehl",
+ "TabAtkins",
+ "pldz",
+ "George8211",
+ "nhoizey",
+ "wesj",
+ "jonathanKingston",
+ "MTonly",
+ "jmccraw",
+ "watilde",
+ "Ekanan",
+ "kohei.yoshino",
+ "jfla",
+ "AlexPl",
+ "velvel53",
+ "HumanBlade",
+ "ethertank"
+ ]
+ },
"Web/CSS/CSS_colors": {
"modified": "2020-12-02T11:04:05.642Z",
"contributors": ["peterbe", "wbamberg", "fscholz", "Sheppy", "mfluehr"]
@@ -76263,6 +76628,21 @@
"teoli"
]
},
+ "Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow": {
+ "modified": "2020-06-24T00:31:42.747Z",
+ "contributors": [
+ "mfuji09",
+ "haond10adp",
+ "mikemorr",
+ "segmentationfaulter",
+ "alattalatta",
+ "FranklinYu",
+ "ExE-Boss",
+ "beautifulcoder",
+ "estelle",
+ "rachelandrew"
+ ]
+ },
"Web/CSS/CSS_display/Block_formatting_context": {
"modified": "2020-11-02T20:53:20.927Z",
"contributors": [
@@ -76300,147 +76680,36 @@
"DBaron"
]
},
- "Web/CSS/CSS_filter_effects": {
- "modified": "2020-12-02T11:05:43.361Z",
- "contributors": ["peterbe", "wbamberg", "fscholz", "mfluehr"]
- },
- "Web/CSS/CSS_flexible_box_layout": {
- "modified": "2020-07-07T12:06:27.676Z",
- "contributors": [
- "wbamberg",
- "vnctdj",
- "LukV",
- "hinell",
- "fscholz",
- "rachelandrew",
- "mfuji09",
- "andrzejkrecicki",
- "chrisdavidmills",
- "bear-bibeault",
- "mfluehr",
- "WynnChen",
- "Arturio1970",
- "teoli"
- ]
- },
- "Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container": {
- "modified": "2020-08-25T12:32:42.313Z",
- "contributors": [
- "mehtapratik",
- "TasosPoursaitides",
- "irenesmith",
- "mfuji09",
- "rachelandrew",
- "dynamis",
- "reppets",
- "skyfall",
- "chrisdavidmills"
- ]
- },
- "Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox": {
- "modified": "2020-12-11T09:00:07.056Z",
- "contributors": [
- "jeenuv",
- "mfuji09",
- "silvertiger",
- "n-insaidoo",
- "arai",
- "danpaltor",
- "SphinxKnight",
- "Baltimora",
- "mattbrundageMDN",
- "mw76",
- "Dencraft",
- "rachelandrew",
- "benjaminmillhouse",
- "chrisdavidmills",
- "yavorski",
- "JayBee007"
- ]
- },
- "Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items": {
- "modified": "2020-06-24T00:31:25.845Z",
- "contributors": [
- "maksymczech",
- "mattbrundageMDN",
- "rachelandrew",
- "chrisdavidmills"
- ]
- },
- "Web/CSS/CSS_flexible_box_layout/Ordering_flex_items": {
- "modified": "2020-10-16T12:47:28.328Z",
+ "Web/CSS/CSS_display/Containing_block": {
+ "modified": "2020-10-17T13:39:05.533Z",
"contributors": [
"mfuji09",
"chrisdavidmills",
- "jimbo1qaz",
- "SaquibAsghar",
- "youcanping",
- "rachelandrew"
- ]
- },
- "Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods": {
- "modified": "2020-07-29T17:42:40.584Z",
- "contributors": [
- "gerfolder",
- "upbeatcode",
- "Wryhder",
- "chrisdavidmills",
- "riking",
- "reppets",
- "mattbrundageMDN",
- "demir-delic",
- "nicross",
- "JonathanPool",
- "rachelandrew"
- ]
- },
- "Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox": {
- "modified": "2020-06-24T00:31:36.163Z",
- "contributors": [
- "sutara79",
- "mattbrundageMDN",
- "rachelandrew",
- "chrisdavidmills"
- ]
- },
- "Web/CSS/CSS_flow_layout": {
- "modified": "2020-06-24T00:31:39.254Z",
- "contributors": [
- "mfuji09",
- "chuanqisun",
- "ExE-Boss",
- "estelle",
- "rachelandrew"
- ]
- },
- "Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow": {
- "modified": "2020-06-24T00:31:42.747Z",
- "contributors": [
- "mfuji09",
- "haond10adp",
- "mikemorr",
- "segmentationfaulter",
"alattalatta",
- "FranklinYu",
- "ExE-Boss",
- "beautifulcoder",
- "estelle",
- "rachelandrew"
+ "nsangwan",
+ "gregprice",
+ "mustafasalah",
+ "Konrud",
+ "CaTmmao",
+ "Sheppy",
+ "tshinnic",
+ "mfluehr",
+ "Gwyn"
]
},
- "Web/CSS/CSS_flow_layout/Flow_layout_and_overflow": {
+ "Web/CSS/CSS_display/Flow_layout_and_overflow": {
"modified": "2020-06-24T00:31:43.651Z",
"contributors": ["mfuji09", "estelle", "rachelandrew"]
},
- "Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes": {
+ "Web/CSS/CSS_display/Flow_layout_and_writing_modes": {
"modified": "2020-06-24T00:31:47.285Z",
"contributors": ["mfuji09", "estelle", "rachelandrew"]
},
- "Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow": {
+ "Web/CSS/CSS_display/In_flow_and_out_of_flow": {
"modified": "2020-06-24T00:31:53.097Z",
"contributors": ["ExE-Boss", "mfuji09", "rachelandrew"]
},
- "Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts": {
+ "Web/CSS/CSS_display/Introduction_to_formatting_contexts": {
"modified": "2020-08-09T11:05:30.382Z",
"contributors": [
"mfuji09",
@@ -76455,6 +76724,131 @@
"rachelandrew"
]
},
+ "Web/CSS/CSS_display/flow_layout": {
+ "modified": "2020-06-24T00:31:39.254Z",
+ "contributors": [
+ "mfuji09",
+ "chuanqisun",
+ "ExE-Boss",
+ "estelle",
+ "rachelandrew"
+ ]
+ },
+ "Web/CSS/CSS_display/multi-keyword_syntax_of_display": {
+ "modified": "2020-10-15T22:26:04.121Z",
+ "contributors": [
+ "ExE-Boss",
+ "gerfolder",
+ "blueblots",
+ "zbjornson",
+ "pallxk",
+ "chrisdavidmills",
+ "rachelandrew"
+ ]
+ },
+ "Web/CSS/CSS_filter_effects": {
+ "modified": "2020-12-02T11:05:43.361Z",
+ "contributors": ["peterbe", "wbamberg", "fscholz", "mfluehr"]
+ },
+ "Web/CSS/CSS_flexible_box_layout": {
+ "modified": "2020-07-07T12:06:27.676Z",
+ "contributors": [
+ "wbamberg",
+ "vnctdj",
+ "LukV",
+ "hinell",
+ "fscholz",
+ "rachelandrew",
+ "mfuji09",
+ "andrzejkrecicki",
+ "chrisdavidmills",
+ "bear-bibeault",
+ "mfluehr",
+ "WynnChen",
+ "Arturio1970",
+ "teoli"
+ ]
+ },
+ "Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container": {
+ "modified": "2020-08-25T12:32:42.313Z",
+ "contributors": [
+ "mehtapratik",
+ "TasosPoursaitides",
+ "irenesmith",
+ "mfuji09",
+ "rachelandrew",
+ "dynamis",
+ "reppets",
+ "skyfall",
+ "chrisdavidmills"
+ ]
+ },
+ "Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox": {
+ "modified": "2020-12-11T09:00:07.056Z",
+ "contributors": [
+ "jeenuv",
+ "mfuji09",
+ "silvertiger",
+ "n-insaidoo",
+ "arai",
+ "danpaltor",
+ "SphinxKnight",
+ "Baltimora",
+ "mattbrundageMDN",
+ "mw76",
+ "Dencraft",
+ "rachelandrew",
+ "benjaminmillhouse",
+ "chrisdavidmills",
+ "yavorski",
+ "JayBee007"
+ ]
+ },
+ "Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items": {
+ "modified": "2020-06-24T00:31:25.845Z",
+ "contributors": [
+ "maksymczech",
+ "mattbrundageMDN",
+ "rachelandrew",
+ "chrisdavidmills"
+ ]
+ },
+ "Web/CSS/CSS_flexible_box_layout/Ordering_flex_items": {
+ "modified": "2020-10-16T12:47:28.328Z",
+ "contributors": [
+ "mfuji09",
+ "chrisdavidmills",
+ "jimbo1qaz",
+ "SaquibAsghar",
+ "youcanping",
+ "rachelandrew"
+ ]
+ },
+ "Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods": {
+ "modified": "2020-07-29T17:42:40.584Z",
+ "contributors": [
+ "gerfolder",
+ "upbeatcode",
+ "Wryhder",
+ "chrisdavidmills",
+ "riking",
+ "reppets",
+ "mattbrundageMDN",
+ "demir-delic",
+ "nicross",
+ "JonathanPool",
+ "rachelandrew"
+ ]
+ },
+ "Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox": {
+ "modified": "2020-06-24T00:31:36.163Z",
+ "contributors": [
+ "sutara79",
+ "mattbrundageMDN",
+ "rachelandrew",
+ "chrisdavidmills"
+ ]
+ },
"Web/CSS/CSS_fonts": {
"modified": "2020-07-07T12:15:10.154Z",
"contributors": [
@@ -76645,26 +77039,6 @@
"scuveedog"
]
},
- "Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement": {
- "modified": "2020-11-12T04:31:28.635Z",
- "contributors": [
- "rachelandrew",
- "iskin",
- "AnthonyIsaacs",
- "nayyirjutha",
- "alberts+",
- "nevan",
- "ripeshade",
- "mfluehr",
- "david_ross",
- "Konrud",
- "RitchieVincent",
- "Zcorpan",
- "aermolaev",
- "teoli",
- "scuveedog"
- ]
- },
"Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement": {
"modified": "2020-11-11T09:51:54.730Z",
"contributors": [
@@ -77712,37 +78086,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": [
@@ -77821,23 +78164,6 @@
"McGurk"
]
},
- "Web/CSS/Containing_block": {
- "modified": "2020-10-17T13:39:05.533Z",
- "contributors": [
- "mfuji09",
- "chrisdavidmills",
- "alattalatta",
- "nsangwan",
- "gregprice",
- "mustafasalah",
- "Konrud",
- "CaTmmao",
- "Sheppy",
- "tshinnic",
- "mfluehr",
- "Gwyn"
- ]
- },
"Web/CSS/Descendant_combinator": {
"modified": "2020-10-15T21:04:18.445Z",
"contributors": [
@@ -77889,30 +78215,6 @@
"miken32"
]
},
- "Web/CSS/Inheritance": {
- "modified": "2020-09-16T06:00:09.005Z",
- "contributors": [
- "mfuji09",
- "OtterOne",
- "Malvoz",
- "Sheppy",
- "mfluehr",
- "GiS91",
- "kscarfone",
- "teoli",
- "shitface",
- "FredB",
- "sloppy_4455",
- "miken32",
- "Marsf",
- "Zearin",
- "Mgjbot",
- "Killerowski",
- "Bedi",
- "Fredchat",
- "DBaron"
- ]
- },
"Web/CSS/Inline_formatting_context": {
"modified": "2020-04-27T22:33:13.546Z",
"contributors": ["pans9", "chrisdavidmills", "rachelandrew"]
@@ -78337,59 +78639,6 @@
"alecananian"
]
},
- "Web/CSS/Specificity": {
- "modified": "2020-11-14T16:01:00.890Z",
- "contributors": [
- "mfuji09",
- "An-Error94",
- "ExE-Boss",
- "elias6",
- "Sajag",
- "Aerodium",
- "CodeLight",
- "estelle",
- "tommygebru",
- "tama200",
- "mfluehr",
- "sekkuar",
- "rileym7",
- "Anawriter1",
- "dustinryerson",
- "yannicka",
- "Artoria2e5",
- "RobinHu",
- "david_ross",
- "chrisprobably",
- "jnachtigall",
- "fcard",
- "jsx",
- "rolfedh",
- "PushpitaPikuDey",
- "Tigt",
- "kmhrussell17",
- "kustolovic",
- "SeriouslyAwesome",
- "mina86",
- "diraniyoussef",
- "rralian",
- "mflodin",
- "ahmedsai001",
- "dawsonda",
- "mkollra01",
- "applescr",
- "Sebastianz",
- "SphinxKnight",
- "kscarfone",
- "pablofiumara",
- "FredB",
- "teoli",
- "ethertank",
- "Sheppy",
- "MattBrubeck",
- "fryn",
- "jwalker"
- ]
- },
"Web/CSS/Subsequent-sibling_combinator": {
"modified": "2020-10-15T21:04:16.746Z",
"contributors": [
@@ -78502,66 +78751,6 @@
"BijuGC"
]
},
- "Web/CSS/Using_CSS_custom_properties": {
- "modified": "2020-10-15T21:21:03.349Z",
- "contributors": [
- "mfuji09",
- "Geo1088",
- "chrisdavidmills",
- "Awk34",
- "danielleleb",
- "elharony",
- "estelle",
- "Sajag",
- "cartinez",
- "mfluehr",
- "Rohitkrops",
- "Sheppy",
- "dan10gc",
- "aleshkanet",
- "chafic",
- "cbb",
- "equinusocio",
- "joyously",
- "pixelass",
- "jhpratt",
- "FlorTello",
- "erikadoyle",
- "gilbertginsberg",
- "cPhost",
- "Rishiahya",
- "PhantomWatson",
- "beingmrkenny",
- "m_gol",
- "jpmedley",
- "stevemao",
- "Sebastianz",
- "igor9silva",
- "JeroenNoten",
- "keithjgrant",
- "xDarkShadowKnightx",
- "robertclaytonreed",
- "teoli",
- "Volker-E",
- "Manuel_Strehl",
- "TabAtkins",
- "pldz",
- "George8211",
- "nhoizey",
- "wesj",
- "jonathanKingston",
- "MTonly",
- "jmccraw",
- "watilde",
- "Ekanan",
- "kohei.yoshino",
- "jfla",
- "AlexPl",
- "velvel53",
- "HumanBlade",
- "ethertank"
- ]
- },
"Web/CSS/Value_definition_syntax": {
"modified": "2020-10-06T14:06:23.915Z",
"contributors": [
@@ -78675,23 +78864,6 @@
"ziyunfei"
]
},
- "Web/CSS/actual_value": {
- "modified": "2020-07-14T09:14:02.638Z",
- "contributors": [
- "mfuji09",
- "wbamberg",
- "mfluehr",
- "sergio-vb",
- "Sebastianz",
- "teoli",
- "kscarfone",
- "ethertank",
- "Sheppy",
- "FredB",
- "ziyunfei",
- "McGurk"
- ]
- },
"Web/CSS/align-content": {
"modified": "2020-12-02T11:02:36.210Z",
"contributors": [
@@ -82488,31 +82660,6 @@
"brianloveswords"
]
},
- "Web/CSS/computed_value": {
- "modified": "2020-08-10T14:01:43.680Z",
- "contributors": [
- "mfuji09",
- "wbamberg",
- "hinell",
- "mfluehr",
- "Cath_kb",
- "Sebastianz",
- "Sheppy",
- "Urgot",
- "Dholbert",
- "kscarfone",
- "ethertank",
- "trevorh",
- "mmjyu",
- "FredB",
- "teoli",
- "Jürgen Jeka",
- "Mgjbot",
- "Marsf",
- "Fredchat",
- "DBaron"
- ]
- },
"Web/CSS/contain": {
"modified": "2020-12-09T11:47:29.070Z",
"contributors": [
@@ -82997,18 +83144,6 @@
"chrisdavidmills"
]
},
- "Web/CSS/display/multi-keyword_syntax_of_display": {
- "modified": "2020-10-15T22:26:04.121Z",
- "contributors": [
- "ExE-Boss",
- "gerfolder",
- "blueblots",
- "zbjornson",
- "pallxk",
- "chrisdavidmills",
- "rachelandrew"
- ]
- },
"Web/CSS/easing-function": {
"modified": "2020-12-07T09:11:33.352Z",
"contributors": [
@@ -85179,29 +85314,6 @@
"Ruggero"
]
},
- "Web/CSS/initial_value": {
- "modified": "2020-07-07T12:36:02.958Z",
- "contributors": [
- "wbamberg",
- "gerfolder",
- "mfluehr",
- "CannedYerins",
- "kscarfone",
- "Sheppy",
- "FredB",
- "teoli",
- "ethertank",
- "kyleb",
- "Marsf",
- "Mgjbot",
- "Kohei",
- "Pastelgrim",
- "Killerowski",
- "Bedi",
- "Fredchat",
- "DBaron"
- ]
- },
"Web/CSS/inline-size": {
"modified": "2020-10-16T08:11:57.577Z",
"contributors": [
@@ -88527,20 +88639,6 @@
"rebeccahauck"
]
},
- "Web/CSS/specified_value": {
- "modified": "2020-08-10T14:28:31.353Z",
- "contributors": [
- "mfuji09",
- "wbamberg",
- "hinell",
- "mfluehr",
- "asteroidb612",
- "Sheppy",
- "BychekRU",
- "Sebastianz",
- "McGurk"
- ]
- },
"Web/CSS/string": {
"modified": "2020-10-15T21:10:29.888Z",
"contributors": [
@@ -90142,35 +90240,6 @@
"estelle"
]
},
- "Web/CSS/used_value": {
- "modified": "2020-07-07T12:48:07.054Z",
- "contributors": [
- "wbamberg",
- "mfuji09",
- "myf",
- "hinell",
- "FumiyaShibusawa",
- "Tuman",
- "shogunsea",
- "mfluehr",
- "Loadmaster",
- "Mori",
- "david_ross",
- "DecadeCode",
- "azoorob3",
- "fcard",
- "Syle91",
- "kscarfone",
- "phil_nist",
- "Kritz",
- "Dholbert",
- "teoli",
- "ethertank",
- "Sheppy",
- "FredB",
- "yonathan"
- ]
- },
"Web/CSS/user-modify": {
"modified": "2020-10-15T21:08:22.012Z",
"contributors": [
@@ -90821,48 +90890,6 @@
"Bzbarsky"
]
},
- "Web/Guide": {
- "modified": "2020-12-10T17:35:22.294Z",
- "contributors": [
- "chrisdavidmills",
- "drjasmin667",
- "jsx",
- "Mojtaba-79",
- "mfuji09",
- "kammasreenew",
- "roshan0708",
- "toomt1414",
- "Sheppy",
- "jswisher",
- "oyenirat",
- "AdrianSkar",
- "SphinxKnight",
- "digimon1740",
- "buoyantair",
- "MrPj2u",
- "wish1994",
- "teoli",
- "pgbowers",
- "rukja",
- "umacrawl",
- "Tantek",
- "qazwsx",
- "Tigt",
- "robfoster",
- "wyrewolwerowany",
- "AdamC",
- "SpencerG",
- "apoorva",
- "keyitem",
- "mahesh.syscraft",
- "uleming",
- "Onsteroids",
- "yash_bedi",
- "www_test",
- "nicci.izzy",
- "ethertank"
- ]
- },
"Web/Guide/Parsing_and_serializing_XML": {
"modified": "2020-09-09T05:19:22.895Z",
"contributors": [
@@ -125897,88 +125924,6 @@
"mgoodwin"
]
},
- "Web/Tutorials": {
- "modified": "2020-10-06T14:08:41.328Z",
- "contributors": [
- "chrisdavidmills",
- "vasantha.h2kinfosys",
- "jsx",
- "belghoultechno",
- "shehrozblogger",
- "adambraimbridge",
- "calin",
- "partlybakedideas",
- "AmateureCoder",
- "devinea2",
- "oyenirat",
- "christopherwilson1",
- "mfuji09",
- "treyhuffine",
- "jenlouie",
- "webrating",
- "Quantzilla",
- "isabeljason",
- "jsonmdn",
- "Anonymous",
- "stevea1",
- "marvenwilsons",
- "jstndwn",
- "TornadoIDS",
- "pgosk",
- "jortoller",
- "kdex",
- "torazaburo",
- "MoTTs",
- "saidkocdemir",
- "MusiqueGraeme",
- "teoli",
- "tusharcm",
- "hosttor",
- "wbamberg",
- "TheKinkeroony",
- "fscholz",
- "Marijn",
- "austinharper",
- "Prabhakar_u",
- "growssbill",
- "Wisdom-Fifi",
- "CrazyAlvaro",
- "slippyten",
- "LoTD",
- "Minat",
- "Penny",
- "jensen",
- "morello",
- "jscape",
- "shneeple",
- "AdamC",
- "SpencerG",
- "mit7one",
- "didinka20",
- "jswisher",
- "Nikaloz",
- "rejithantony7@gmail.com",
- "waylon531",
- "anushbmx",
- "carloshlira",
- "jonsger",
- "Oliver_Propst",
- "arkapravamajumder",
- "codepo8",
- "Aleksej",
- "ChaseWagoner",
- "caglardursun",
- "kunal_dhir",
- "Domecraft",
- "kscarfone",
- "instanceofme",
- "case",
- "w3b_m4ster",
- "taatzone",
- "Sheppy",
- "alispivak"
- ]
- },
"Web/URI": {
"modified": "2020-11-16T01:23:20.622Z",
"contributors": [
diff --git a/files/en-us/glossary/debounce/index.md b/files/en-us/glossary/debounce/index.md
index 75cb949fb4fd5b3..11516a261a5382a 100644
--- a/files/en-us/glossary/debounce/index.md
+++ b/files/en-us/glossary/debounce/index.md
@@ -6,7 +6,7 @@ page-type: glossary-definition
{{GlossarySidebar}}
-**Debouncing**, in the context of programming, means to "batch" all operations requested during a specific interval into a single invocation.
+**Debouncing**, in the context of programming, means to discard operations that occur too close together during a specific interval, and consolidate them into a single invocation.
Debouncing is very similar to {{glossary("throttle", "throttling")}}. The key difference is that throttling enforces limits on continuous operations, while debouncing waits for invocations to stop for a specific time to consolidate many noisy invocations into one single invocation.
diff --git a/files/en-us/glossary/grid_axis/index.md b/files/en-us/glossary/grid_axis/index.md
index 9a4de9819c49be8..2ba433a4522f40c 100644
--- a/files/en-us/glossary/grid_axis/index.md
+++ b/files/en-us/glossary/grid_axis/index.md
@@ -8,7 +8,7 @@ page-type: glossary-definition
CSS grid layout is a two-dimensional layout method enabling the laying out of content in _rows_ and _columns_. Therefore in any grid we have two axes. The _block or column axis_, and the _inline or row axis_.
-It is along these axes that items can be aligned and justified using the properties defined in the [Box Alignment specification](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout).
+It is along these axes that items can be aligned and justified using the properties defined in the [Box Alignment specification](/en-US/docs/Web/CSS/CSS_box_alignment).
In CSS the _block or column axis_ is the axis used when laying out blocks of text. If you have two paragraphs and are working in a right to left, top to bottom language they lay out one below the other, on the block axis.
@@ -23,5 +23,5 @@ The physical direction of these axes can change according to the [writing mode](
## See also
- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
-- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
- [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
diff --git a/files/en-us/glossary/gutters/index.md b/files/en-us/glossary/gutters/index.md
index 22cdc32d0e56d58..c52057c1f4b3a4e 100644
--- a/files/en-us/glossary/gutters/index.md
+++ b/files/en-us/glossary/gutters/index.md
@@ -56,7 +56,7 @@ In the example below we have a three-column and two-row track grid, with `20px`
In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap.
-The `row-gap` and `column-gap` properties are not the only things that can cause tracks to space out. Margins, padding, or the use of the space distribution properties in [Box Alignment](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) can all contribute to the visible gap – therefore the `row-gap` and `column-gap` properties should not be seen as equal to the "gutter size" unless you know that your design has not introduced any additional space with one of these methods.
+The `row-gap` and `column-gap` properties are not the only things that can cause tracks to space out. Margins, padding, or the use of the space distribution properties in [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) can all contribute to the visible gap – therefore the `row-gap` and `column-gap` properties should not be seen as equal to the "gutter size" unless you know that your design has not introduced any additional space with one of these methods.
## See also
diff --git a/files/en-us/glossary/hyperlink/index.md b/files/en-us/glossary/hyperlink/index.md
index f19ba2fae3b816b..0dfbcc2f4d1dcab 100644
--- a/files/en-us/glossary/hyperlink/index.md
+++ b/files/en-us/glossary/hyperlink/index.md
@@ -12,7 +12,5 @@ Hyperlinks connect webpages or data items to one another. In HTML, {{HTMLElement
- [Hyperlink](https://en.wikipedia.org/wiki/Hyperlink) on Wikipedia
- [Creating links](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links)
-- [Links in HTML Documents - W3C](https://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html)
-- [HTML a - hyperlink - W3C](https://w3c.github.io/html-reference/a.html)
- [`` on MDN](/en-US/docs/Web/HTML/Element/a)
- [` ` on MDN](/en-US/docs/Web/HTML/Element/link)
diff --git a/files/en-us/glossary/ink_overflow/index.md b/files/en-us/glossary/ink_overflow/index.md
index 19f19e23c3a12b2..e8683f08cfa97a0 100644
--- a/files/en-us/glossary/ink_overflow/index.md
+++ b/files/en-us/glossary/ink_overflow/index.md
@@ -10,7 +10,7 @@ The **ink overflow** of a box refers to the part of the box and its contents tha
Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), [text decoration](/en-US/docs/Web/CSS/CSS_text_decoration), [outlines](/en-US/docs/Web/CSS/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box.
-As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)).
+As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)).
## See also
diff --git a/files/en-us/glossary/inset_properties/index.md b/files/en-us/glossary/inset_properties/index.md
index 225258978cb5e16..ee8834342711c8f 100644
--- a/files/en-us/glossary/inset_properties/index.md
+++ b/files/en-us/glossary/inset_properties/index.md
@@ -12,11 +12,11 @@ The inset properties include the {{cssxref("top")}}, {{cssxref("left")}}, {{cssx
**Physical properties** reference specific physical sides of an element. Logical properties use directional keywords relative to the block and inline axes. **Block axis** refers to the axis that defines the stacking order of elements in a block layout. The **inline axis** is perpendicular to the block axis, representing the direction along which inline content like text flows within a block. The mapping depends on the element's {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
-The interpretation of inset properties depends on the value of the {{cssxref("position")}} property. When `position: absolute` is set, they represent insets from the [containing block](/en-US/docs/Web/CSS/Containing_block) or [anchor element](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using). With `position: relative`, they represent insets from the box's default margin edge position. With `sticky`, they represent insets from the {{glossary("scroll container")}} edge. The `fixed` value is similar to `absolute`, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.
+The interpretation of inset properties depends on the value of the {{cssxref("position")}} property. When `position: absolute` is set, they represent insets from the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) or [anchor element](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using). With `position: relative`, they represent insets from the box's default margin edge position. With `sticky`, they represent insets from the {{glossary("scroll container")}} edge. The `fixed` value is similar to `absolute`, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.
## See also
-- [Layout and the containing block](/en-US/docs/Web/CSS/Containing_block)
+- [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
- [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module
- [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module
- [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module
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/glossary/value/index.md b/files/en-us/glossary/value/index.md
index 8847f8f0d961db4..3d915f6dacfc4fa 100644
--- a/files/en-us/glossary/value/index.md
+++ b/files/en-us/glossary/value/index.md
@@ -8,7 +8,7 @@ page-type: glossary-definition
In the context of data or an object **{{Glossary("Wrapper", "wrapper")}}** around that data, the value is the **{{Glossary("Primitive","primitive value")}}** that the object wrapper contains. In the context of a **{{Glossary("Variable","variable")}}** or **{{Glossary("Property","property")}}**, the value can be either a primitive or an **{{Glossary("Object reference","object reference")}}**.
-In the context of CSS property values, there are specified, computed, and actual values. The final value for every CSS property applied to every element and pseudo-element is the result of a four-step calculation: the value is determined through specification (the "[specified value](/en-US/docs/Web/CSS/specified_value)", then resolved into a value that is used for inheritance (the "[computed value](/en-US/docs/Web/CSS/computed_value)"), then converted into an absolute value if necessary (the "[used value](/en-US/docs/Web/CSS/used_value)"), and finally transformed according to the limitations of the local environment (the "[actual value](/en-US/docs/Web/CSS/actual_value)").
+In the context of CSS property values, there are specified, computed, and actual values. The final value for every CSS property applied to every element and pseudo-element is the result of a four-step calculation: the value is determined through specification (the "[specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value)", then resolved into a value that is used for inheritance (the "[computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value)"), then converted into an absolute value if necessary (the "[used value](/en-US/docs/Web/CSS/CSS_cascade/used_value)"), and finally transformed according to the limitations of the local environment (the "[actual value](/en-US/docs/Web/CSS/CSS_cascade/actual_value)").
For CSS data types, see [CSS values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units).
diff --git a/files/en-us/learn_web_development/core/accessibility/index.md b/files/en-us/learn_web_development/core/accessibility/index.md
index c0db4203a9ac584..55f0f97efc5f0e5 100644
--- a/files/en-us/learn_web_development/core/accessibility/index.md
+++ b/files/en-us/learn_web_development/core/accessibility/index.md
@@ -38,8 +38,6 @@ You should be familiar with [HTML](/en-US/docs/Learn_web_development/Core/Struct
## See also
-- [Learn Accessible Web Design](https://v2.scrimba.com/learn-accessible-web-design-c031?via=mdn) _MDN Curriculum partner_
- - : [Scrimba's](https://scrimba.com?via=mdn) _Learn Accessible Web Design_ course teaches you how to write accessible HTML by solving interactive coding challenges and fixing a real-world website.
- [Start Building Accessible Web Applications Today](https://egghead.io/courses/start-building-accessible-web-applications-today)
- : An excellent series of video tutorials by Marcy Sutton.
- [Deque University resources](https://dequeuniversity.com/resources/)
@@ -48,5 +46,7 @@ You should be familiar with [HTML](/en-US/docs/Learn_web_development/Core/Struct
- : Includes guides, checklists, tools, and more.
- [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/)
- : Includes a list of web accessibility evaluation tools.
+- [Learn Accessible Web Design](https://v2.scrimba.com/learn-accessible-web-design-c031?via=mdn) _MDN learning partner_
+ - : [Scrimba's](https://scrimba.com?via=mdn) _Learn Accessible Web Design_ course teaches you how to write accessible HTML by solving interactive coding challenges and fixing a real-world website.
{{NextMenu("Learn_web_development/Core/Accessibility/What_is_accessibility", "Learn_web_development/Core")}}
diff --git a/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md b/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md
index 5a6cb07847467d1..614e9befcf4907b 100644
--- a/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md
+++ b/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md
@@ -20,7 +20,7 @@ Following on from the previous article, sometimes making complex UI controls tha
Learning outcomes:
- the purpose of WAI-ARIA — to provide semantics to otherwise non-semantic HTML, so that AT users can make sense of the interfaces being presented to them.
+ The purpose of WAI-ARIA — to provide semantics to otherwise non-semantic HTML, so that AT users can make sense of the interfaces being presented to them.
The basic syntax — roles, properties, and states.
Landmarks and signposting.
Enhancing keyboard accessibility.
@@ -64,7 +64,7 @@ The problem here is that visually they work, but screen readers can't make any s
[WAI-ARIA](https://www.w3.org/TR/wai-aria/) (Web Accessibility Initiative - Accessible Rich Internet Applications) is a specification written by the W3C, defining a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking. There are three main features defined in the spec:
- [Roles](/en-US/docs/Web/Accessibility/ARIA/Roles)
- - : These define what an element is or does. Many of these are so-called landmark roles, which largely duplicate the semantic value of structural elements, such as `role="navigation"` ({{htmlelement("nav")}}) or `role="complementary"` ({{htmlelement("aside")}}). Some other roles describe different page structures, such as `role="banner"`, `role="search"`, `role="tablist"`, and `role="tabpanel"`, which are commonly found in UIs.
+ - : These define what an element is or does. Many of these are so-called landmark roles, which largely duplicate the semantic value of structural elements, such as `role="navigation"` ({{htmlelement("nav")}}), `role="banner"` (document {{htmlelement("header")}}), `role="complementary"` ({{htmlelement("aside")}}) or , `role="search"` ({{htmlelement("search")}}). Some other roles describe different page structures that do not have elements with that match those roles, such as `role="tablist"`, and `role="tabpanel"`, which are commonly found in UIs.
- Properties
- : These define properties of elements, which can be used to give them extra meaning or semantics. As an example, `aria-required="true"` specifies that a form input needs to be filled in order to be valid, whereas `aria-labelledby="label"` allows you to put an ID on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using ``. As an example, you could use `aria-labelledby` to specify that a key description contained in a {{htmlelement("div")}} is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the `alt` attribute. You can see an example of this at [Text alternatives](/en-US/docs/Learn_web_development/Core/Accessibility/HTML#text_alternatives).
- States
@@ -109,7 +109,9 @@ We talked about some of the problems that prompted WAI-ARIA to be created earlie
- Accessibility of non-semantic controls
- : When a series of nested ``s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screen reader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like `button`, `listbox`, or `tablist`, and properties like `aria-required` or `aria-posinset` to provide further clues as to functionality.
-One thing to remember though — **you should only use WAI-ARIA when you need to!** Ideally, you should _always_ use [native HTML features](/en-US/docs/Learn_web_development/Core/Accessibility/HTML) to provide the semantics required by screen readers to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.
+#### You should only use WAI-ARIA when you need to!
+
+Using the correct HTML elements implicitly gives you the roles that are needed and you should _always_ use [native HTML features](/en-US/docs/Learn_web_development/Core/Accessibility/HTML) to provide the semantics required by screen readers to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.
But again, only use it when necessary!
@@ -124,29 +126,233 @@ See our section on [testing screen readers](/en-US/docs/Learn_web_development/Co
### Signposts/Landmarks
-WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screen readers so that their users can find common page elements. Let's look at an example — our [website-no-roles](https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-no-roles) example ([see it live](https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)) has the following structure:
+WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screen readers so that their users can find common page elements. This example has the following structure:
-```html
+```html live-sample___aria-website-no-roles
+
- …
-
+
+
+ Article heading
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
+ lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra
+ nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam
+ eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
+ enim, ut porta lorem lacinia consectetur.
+
+
+ subsection
+
+
+ Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
+ dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut
+ turpis felis, pulvinar a semper sed, adipiscing id dolor.
+
+
+
+
+
-
+
+
+
+```
+
+```css hidden live-sample___aria-website-no-roles
+/* || General setup */
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-size: 10px;
+ background-color: #a9a9a9;
+}
+
+body {
+ width: max(70vw, 90%);
+ margin: 0 auto;
+ padding: 0 10px;
+ display: flex;
+ flex-direction: column;
+}
+
+/* || typography */
+
+h1,
+h2,
+h3 {
+ font-family: "Sonsie One", cursive;
+ color: #2a2a2a;
+}
+
+p,
+input,
+li {
+ font-family: "Open Sans Condensed", sans-serif;
+ color: #2a2a2a;
+}
+
+h1 {
+ font-size: 4rem;
+ text-align: center;
+ color: white;
+ text-shadow: 2px 2px 10px black;
+}
+
+h2 {
+ font-size: 3rem;
+ text-align: center;
+}
+
+h3 {
+ font-size: 2.2rem;
+}
+
+p,
+li {
+ font-size: 1.6rem;
+ line-height: 1.5;
+}
+
+/* || header layout */
+
+header {
+ margin-bottom: 10px;
+}
+
+nav,
+article,
+aside,
+footer {
+ background-color: white;
+ padding: 1%;
+}
+
+nav {
+ background-color: ff80ff;
+ display: flex;
+ gap: 2vw;
+ @media (width <= 650px) {
+ flex-direction: column;
+ }
+}
+
+nav ul {
+ padding: 0;
+ list-style-type: none;
+ flex: 2;
+ display: flex;
+ gap: 2vw;
+}
+
+nav li {
+ display: inline;
+ text-align: center;
+}
+
+nav a {
+ display: inline-block;
+ font-size: 2rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ color: black;
+}
+
+nav form {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
+
+input {
+ font-size: 1.6rem;
+ height: 32px;
+}
+
+input[type="search"] {
+ flex: 3;
+}
+
+input[type="submit"] {
+ flex: 1;
+ margin-left: 1rem;
+ background: #333;
+ border: 0;
+ color: white;
+}
+
+/* || main layout */
+
+main {
+ display: flex;
+ gap: 2vw;
+ @media (width <= 650px) {
+ flex-direction: column;
+ }
+}
+
+article {
+ flex: 4;
+}
+
+aside {
+ flex: 1;
+ background-color: #ff80ff;
+}
+
+aside li {
+ padding-bottom: 10px;
+}
+
+footer {
+ margin-top: 10px;
+}
```
+{{EmbedLiveSample("aria-website-no-roles", "100", "850")}}
+
If you try testing the example with a screen reader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:
- On the `
` element — "banner, 2 items" (it contains a heading and the ``).
@@ -162,24 +368,264 @@ If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and th
However, we could do better here. The search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark beyond the actual input being called out as a search input (` `).
-Let's improve it by the use of some ARIA features. First, we'll add some [`role`](/en-US/docs/Web/Accessibility/ARIA/Roles) attributes to our HTML structure. You can try taking a copy of our original files (see [`index.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/website-no-roles/index.html) and [`style.css`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/website-no-roles/style.css)), or navigating to our [website-aria-roles](https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-aria-roles) example ([see it live](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)), which has a structure like this:
+We could improve it by the use of the ARIA `role="search"`, but using the {{htmlelement("search")}} element implicitly gives that role to the form.
+
+```html live-sample___aria-website-roles
+
+ Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Article heading
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
+ lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra
+ nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam
+ eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
+ enim, ut porta lorem lacinia consectetur.
+
+
+ subsection
+
+
+ Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
+ dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut
+ turpis felis, pulvinar a semper sed, adipiscing id dolor.
+
+
+
+ Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus,
+ enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis
+ libero in urna ultrices accumsan. Donec sed odio eros.
+
+
+
+
+
+
+
+
+
+
+```
+
+```css hidden live-sample___aria-website-roles
+/* || General setup */
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-size: 10px;
+ background-color: #a9a9a9;
+}
+
+body {
+ width: max(70vw, 90%);
+ margin: 0 auto;
+ padding: 0 10px;
+ display: flex;
+ flex-direction: column;
+}
+
+/* || typography */
+
+h1,
+h2,
+h3 {
+ font-family: "Sonsie One", cursive;
+ color: #2a2a2a;
+}
+
+p,
+input,
+li {
+ font-family: "Open Sans Condensed", sans-serif;
+ color: #2a2a2a;
+}
+
+h1 {
+ font-size: 4rem;
+ text-align: center;
+ color: white;
+ text-shadow: 2px 2px 10px black;
+}
+
+h2 {
+ font-size: 3rem;
+ text-align: center;
+}
+
+h3 {
+ font-size: 2.2rem;
+}
+
+p,
+li {
+ font-size: 1.6rem;
+ line-height: 1.5;
+}
+
+/* || header layout */
+
+header {
+ margin-bottom: 10px;
+}
+
+nav,
+article,
+aside,
+footer {
+ background-color: white;
+ padding: 1%;
+}
+
+nav {
+ background-color: ff80ff;
+ display: flex;
+ gap: 2vw;
+ @media (width <= 650px) {
+ flex-direction: column;
+ }
+}
+
+nav ul {
+ padding: 0;
+ list-style-type: none;
+ flex: 2;
+ display: flex;
+ gap: 2vw;
+}
+
+nav li {
+ display: inline;
+ text-align: center;
+}
+
+nav a {
+ display: inline-block;
+ font-size: 2rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ color: black;
+}
+
+nav form {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
+
+input {
+ font-size: 1.6rem;
+ height: 32px;
+}
+
+input[type="search"] {
+ flex: 3;
+}
+
+input[type="submit"] {
+ flex: 1;
+ margin-left: 1rem;
+ background: #333;
+ border: 0;
+ color: white;
+}
+
+/* || main layout */
+
+main {
+ display: flex;
+ gap: 2vw;
+ @media (width <= 650px) {
+ flex-direction: column;
+ }
+}
+
+article {
+ flex: 4;
+}
+
+aside {
+ flex: 1;
+ background-color: #ff80ff;
+}
+
+aside li {
+ padding-bottom: 10px;
+}
+
+footer {
+ margin-top: 10px;
+}
+```
+
+{{EmbedLiveSample("aria-website-roles", "100", "850")}}
+
+Most importantly, we have used semantic HTML that gives meaning and roles to the structure of the page without adding unnecessary [`role`](/en-US/docs/Web/Accessibility/ARIA/Roles) attributes to our HTML structure, which has a structure like this:
```html
- …
-
+ …
+
@@ -200,19 +646,17 @@ Now if we use VoiceOver to look at this example, we get some improvements:
- The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.
- The label text contained in the `aria-label` attribute is read out when the form input is highlighted.
-Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just ``s, you should definitely include the ARIA roles to provide these much needed semantics!
+If you need to support older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just `
`s, you should definitely include the ARIA roles to provide these much needed semantics!
-The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the [Accessibility of non-semantic controls](#accessibility_of_non-semantic_controls) section. For now though, let's look at how ARIA can help with dynamic content updates.
+You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the [Accessibility of non-semantic controls](#accessibility_of_non-semantic_controls) section. For now though, let's look at how ARIA can help with dynamic content updates.
### Dynamic content updates
Content loaded into the DOM can be easily accessed using a screen reader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.
-The problem is that modern web apps are often not just static text — they often update parts of the page by fetching new content from the server and updating the DOM. These are sometimes referred to as **live regions**.
+The problem is that modern web apps are often not just static text — they often update parts of the page by fetching new content from the server (in this example we are using a static array of quotes) and updating the DOM. These are sometimes referred to as **live regions**.
-Let's look at a quick example — see [`aria-no-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) (also [see it running live](https://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)). In this example, we have a simple random quote box:
-
-```html
+```html live-sample___aria-no-live
Random quote
@@ -221,12 +665,62 @@ Let's look at a quick example — see [`aria-no-live.html`](https://github.com/m
```
-Our JavaScript uses the {{domxref("Window.fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a {{domxref("Window.setInterval", "setInterval()")}} loop that loads a new random quote into the quote box every 10 seconds:
+```css live-sample___aria-no-live
+html {
+ font-family: sans-serif;
+}
-```js
-const intervalID = setInterval(showQuote, 10000);
+h1 {
+ letter-spacing: 2px;
+}
+
+p {
+ line-height: 1.6;
+}
+
+section {
+ padding: 10px;
+ width: calc(100% - 20px);
+ background: #666;
+ text-shadow: 1px 1px 1px black;
+ color: white;
+ min-height: 160px;
+}
+```
+
+```js live-sample___aria-no-live
+let quotes = [
+ {
+ quote:
+ "Every child is an artist. The problem is how to remain an artist once he grows up.",
+ author: "Pablo Picasso",
+ },
+ {
+ quote:
+ "You can never cross the ocean until you have the courage to lose sight of the shore.",
+ author: "Christopher Columbus",
+ },
+ {
+ quote:
+ "I love deadlines. I love the whooshing noise they make as they go by.",
+ author: "Douglas Adams",
+ },
+];
+```
+
+```js live-sample___aria-no-live
+const quotePara = document.querySelector("section p");
+
+window.setInterval(showQuote, 10000);
+
+function showQuote() {
+ let random = Math.floor(Math.random() * quotes.length);
+ quotePara.textContent = `${quotes[random].quote} -- ${quotes[random].author}`;
+}
```
+{{EmbedLiveSample("aria-no-live", "100", "180")}}
+
This works OK, but it is not good for accessibility — the content update is not detected by screen readers, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.
WAI-ARIA, fortunately, provides a useful mechanism to provide these alerts — the [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) property. Applying this to an element causes screen readers to read out the content that is updated. How urgently the content is read out depends on the attribute value:
@@ -238,7 +732,7 @@ WAI-ARIA, fortunately, provides a useful mechanism to provide these alerts — t
- `assertive`
- : Updates should be announced to the user as soon as possible.
-We'd like you to take a copy of [`aria-no-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) and [`quotes.json`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/quotes.json), and update your `
` opening tag as follows:
+Here we update the `` opening tag as follows:
```html
@@ -246,9 +740,6 @@ We'd like you to take a copy of [`aria-no-live.html`](https://github.com/mdn/lea
This will cause a screen reader to read out the content as it is updated.
-> [!NOTE]
-> Most browsers will throw a security exception if you try to make an HTTP request from a `file://` URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). See [how to set up a local testing server](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server).
-
There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the [`aria-atomic`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) property to the section. Update your `` opening tag again, like so:
```html
@@ -257,8 +748,70 @@ There is an additional consideration here — only the bit of text that updates
The `aria-atomic="true"` attribute tells screen readers to read out the entire element contents as one atomic unit, not just the bits that were updated.
-> [!NOTE]
-> You can see the finished example at [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([see it running live](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
+```html live-sample___aria-live
+
+```
+
+```css live-sample___aria-live
+html {
+ font-family: sans-serif;
+}
+
+h1 {
+ letter-spacing: 2px;
+}
+
+p {
+ line-height: 1.6;
+}
+
+section {
+ padding: 10px;
+ width: calc(100% - 20px);
+ background: #666;
+ text-shadow: 1px 1px 1px black;
+ color: white;
+ min-height: 160px;
+}
+```
+
+```js live-sample___aria-live
+let quotes = [
+ {
+ quote:
+ "Every child is an artist. The problem is how to remain an artist once he grows up.",
+ author: "Pablo Picasso",
+ },
+ {
+ quote:
+ "You can never cross the ocean until you have the courage to lose sight of the shore.",
+ author: "Christopher Columbus",
+ },
+ {
+ quote:
+ "I love deadlines. I love the whooshing noise they make as they go by.",
+ author: "Douglas Adams",
+ },
+];
+```
+
+```js live-sample___aria-live
+const quotePara = document.querySelector("section p");
+
+window.setInterval(showQuote, 10000);
+
+function showQuote() {
+ let random = Math.floor(Math.random() * quotes.length);
+ quotePara.textContent = `${quotes[random].quote} -- ${quotes[random].author}`;
+}
+```
+
+{{EmbedLiveSample("aria-live", "100", "180")}}
> [!NOTE]
> The [`aria-relevant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.
@@ -384,49 +937,277 @@ Now when you try this using a screen reader, you'll have buttons be reported usi
There are a whole host of other [roles](/en-US/docs/Web/Accessibility/ARIA/Roles) that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role), [`slider`](/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role), [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role), [`tree`](/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role). You can see several useful examples in the [Deque university code library](https://dequeuniversity.com/library/) to give you an idea of how such controls can be made accessible.
-Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html)).
+Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](/en-US/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples#a_tabbed_info-box).
+
+```html live-sample___aria-tabbed-info-box
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+
+ The first tab
+ This is the content for tab one and is just a paragraph.
+
+
+ The second tab
+ This is the content for tab two and is just a paragraph.
+
+
+ The third tab
+ This is the content for tab three and is a paragraph and a list.
+
+
+
+
+```
-This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate, even if you can't see what is happening on screen. It is however not that obvious what the content is — a screen reader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.
+```css live-sample___aria-tabbed-info-box
+/* General setup */
-To improve things, we've created a new version of the example called [`aria-tabbed-info-box.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-tabbed-info-box.html) ([see it running live](https://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). We've updated the structure of the tabbed interface like so:
+html {
+ font-family: sans-serif;
+}
-```html
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+}
+
+/* info-box setup */
+
+.info-box {
+ width: 452px;
+ height: 250px;
+ margin: 1.25rem auto 0;
+}
+
+/* styling info-box tabs */
+
+.info-box [role="tablist"] {
+ min-width: 100%;
+ display: flex;
+}
+
+.info-box [role="tab"] {
+ border: none;
+ background: white;
+ padding: 0 1rem 0 1rem;
+ line-height: 3rem;
+ color: #b60000;
+ font-weight: bold;
+ outline: none;
+}
+
+.info-box [role="tab"]:focus span,
+.info-box [role="tab"]:hover span {
+ outline: 1px solid blue;
+ outline-offset: 6px;
+ border-radius: 4px;
+}
+
+.info-box [role="tab"][aria-selected="true"] {
+ background-color: #b60000;
+ color: white;
+}
+
+/* styling info-box panels */
+
+.info-box .panels {
+ height: 200px;
+ clear: both;
+ position: relative;
+}
+
+.info-box [role="tabpanel"] {
+ color: white;
+ position: absolute;
+ padding: 0.8rem 1.2rem;
+ height: 200px;
+ width: 100%;
+ top: 0;
+ background-color: #b60000;
+ left: 0;
+}
+
+.info-box [role="tabpanel"].is-hidden {
+ display: none;
+}
```
-> [!NOTE]
-> The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screen reader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.
+```js live-sample___aria-tabbed-info-box
+class TabsManual {
+ constructor(groupNode) {
+ this.tablistNode = groupNode;
+
+ this.tabs = [];
+
+ this.firstTab = null;
+ this.lastTab = null;
+
+ this.tabs = Array.from(this.tablistNode.querySelectorAll("[role=tab]"));
+ this.tabpanels = [];
+
+ for (let i = 0; i < this.tabs.length; i += 1) {
+ const tab = this.tabs[i];
+ const tabpanel = document.getElementById(
+ tab.getAttribute("aria-controls"),
+ );
+
+ tab.tabIndex = -1;
+ tab.setAttribute("aria-selected", "false");
+ this.tabpanels.push(tabpanel);
+
+ tab.addEventListener("keydown", this.onKeydown.bind(this));
+ tab.addEventListener("click", this.onClick.bind(this));
+
+ if (!this.firstTab) {
+ this.firstTab = tab;
+ }
+ this.lastTab = tab;
+ }
+
+ this.setSelectedTab(this.firstTab);
+ }
+
+ setSelectedTab(currentTab) {
+ for (let i = 0; i < this.tabs.length; i += 1) {
+ const tab = this.tabs[i];
+ if (currentTab === tab) {
+ tab.setAttribute("aria-selected", "true");
+ tab.removeAttribute("tabindex");
+ this.tabpanels[i].classList.remove("is-hidden");
+ } else {
+ tab.setAttribute("aria-selected", "false");
+ tab.tabIndex = -1;
+ this.tabpanels[i].classList.add("is-hidden");
+ }
+ }
+ }
+
+ moveFocusToTab(currentTab) {
+ currentTab.focus();
+ }
+
+ moveFocusToPreviousTab(currentTab) {
+ let index;
+
+ if (currentTab === this.firstTab) {
+ this.moveFocusToTab(this.lastTab);
+ } else {
+ index = this.tabs.indexOf(currentTab);
+ this.moveFocusToTab(this.tabs[index - 1]);
+ }
+ }
+
+ moveFocusToNextTab(currentTab) {
+ let index;
+
+ if (currentTab === this.lastTab) {
+ this.moveFocusToTab(this.firstTab);
+ } else {
+ index = this.tabs.indexOf(currentTab);
+ this.moveFocusToTab(this.tabs[index + 1]);
+ }
+ }
+
+ /* EVENT HANDLERS */
+
+ onKeydown(event) {
+ const tgt = event.currentTarget;
+ let flag = false;
+
+ switch (event.key) {
+ case "ArrowLeft":
+ this.moveFocusToPreviousTab(tgt);
+ flag = true;
+ break;
+
+ case "ArrowRight":
+ this.moveFocusToNextTab(tgt);
+ flag = true;
+ break;
+
+ case "Home":
+ this.moveFocusToTab(this.firstTab);
+ flag = true;
+ break;
+
+ case "End":
+ this.moveFocusToTab(this.lastTab);
+ flag = true;
+ break;
+
+ default:
+ break;
+ }
+
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ }
+
+ // Since this example uses buttons for the tabs, the click onr also is activated
+ // with the space and enter keys
+ onClick(event) {
+ this.setSelectedTab(event.currentTarget);
+ }
+}
+
+// Initialize tablist
+
+window.addEventListener("load", function () {
+ const tablists = document.querySelectorAll("[role=tablist].manual");
+ for (let i = 0; i < tablists.length; i++) {
+ new TabsManual(tablists[i]);
+ }
+});
+```
+
+{{EmbedLiveSample("aria-tabbed-info-box", "100", "270")}}
+
+In this example we have used a combination of semantic elements, aria roles and aria attributes. The first of these is we have used a {{htmlelement("button")}} element as a _tab_, this means that the tab can be selected via a mouse click or via the keyboard using space or enter.
ARIA features used include:
@@ -434,19 +1215,16 @@ ARIA features used include:
- : These identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.
- [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
- : Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
-- [`aria-hidden`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)
- - : Hides an element from being read out by a screen reader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
-- `tabindex="0"`
- - : As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.
-- [`aria-setsize`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize)
- - : This property allows you to specify to screen readers that an element is part of a series, and how many items the series has.
-- [`aria-posinset`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset)
- - : This property allows you to specify what position in a series an element is in. Along with `aria-setsize`, it provides a screen reader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.
+- `tabindex="-1"`
+ - : `tabindex="-1"` takes the element out of the tab order. As we are using JavaScript to allow the user to control the tabs via keyboard or mouse we do not want the user to be able to use the tab key to navigate to the buttons.
+- [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
+ - : This attribute identifies an element (by its `id`) that labels the element, in this example the `` is labelled by the corresponding tab or ``.
+- [`aria-controls`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
+ - : This attribute identifies an element (by its `id`) that is controlled the element, in this example the `` is controlled by the corresponding tab or ``.
-In our tests, this new structure did serve to improve things overall. The tabs are now recognized as tabs (e.g. "tab" is spoken by the screen reader), the selected tab is indicated by "selected" being read out with the tab name, and the screen reader also tells you which tab number you are currently on. In addition, because of the `aria-hidden` settings (only the non-hidden tab ever has `aria-hidden="false"` set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.
+We could have used `aria-hidden` to hide the content of the tabpanels from assistive technologies but if that content contained focusable content, such as links, the user would still be able to tab to that content even when aria-hidden=true is set for the non-active panels. In this example we have applied `class="is-hidden"` to tabpanels that correspond to the tabs with `aria-selected="false"` and using CSS to `display: none;` which prevents the hidden content from being tabbed to.
-> [!NOTE]
-> If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"` attribute.
+In our tests, this new structure did serve to improve things overall. The ``s are now recognized as tabs (e.g. "tab" is spoken by the screen reader), the selected tab is indicated by "selected" being read out with the tab name and any content that is not shown can not be tabbed to. The user can also navigate the tabs with keyboard or mouse.
## Test your skills!
diff --git a/files/en-us/learn_web_development/core/css_layout/introduction/index.md b/files/en-us/learn_web_development/core/css_layout/introduction/index.md
index ed93da9e94e78a5..46fdbe23a5d40cc 100644
--- a/files/en-us/learn_web_development/core/css_layout/introduction/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/introduction/index.md
@@ -89,7 +89,9 @@ Let's look at a simple example that explains all of this:
line. Overflowing inline elements will
wrap onto a new line if possible (like this one containing text) ,
or just go on to a new line if not, much like this image will do:
-
+
```
@@ -129,7 +131,7 @@ The methods that can override normal flow and change how elements are laid out i
- Positioning
- : The {{cssxref("position")}} property allows you to precisely control the placement of boxes inside other boxes. `static` positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example, fixing them to the top of the browser viewport using `position: fixed`.
- Specific layout systems accessed through `display`
- - : We also have entire layout methods that are enabled via specific `display` values. This most important ones for you to know about are [CSS grid](/en-US/docs/Learn_web_development/Core/CSS_layout/Grids) and [Flexbox](/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox), which both alter how child elements are laid out inside their parents.
+ - : We also have entire layout methods that are enabled via specific `display` values. The most important ones for you to know about are [CSS grid](/en-US/docs/Learn_web_development/Core/CSS_layout/Grids) and [Flexbox](/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox), which both alter how child elements are laid out inside their parents.
- Responsive design
- : Responsive design refers to creating layouts that adapt to different devices the web page is rendered on (for example, desktops and mobile phones). Responsive design doesn't provide any specific layout tools of its own; its most significant component is the {{cssxref("@media")}} at-rule, which allows you to apply different layouts depending on device attributes such as screen width or resolution.
diff --git a/files/en-us/learn_web_development/core/css_layout/positioning/index.md b/files/en-us/learn_web_development/core/css_layout/positioning/index.md
index 9d04e614814ea14..1d9b21e269c63df 100644
--- a/files/en-us/learn_web_development/core/css_layout/positioning/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/positioning/index.md
@@ -118,7 +118,9 @@ If you now save and refresh, you'll get a result something like this:
the same line. Overflowing inline elements
wrap onto a new line if possible — like this one containing text ,
or just go on to a new line if not, much like this image will do:
-
+
```
@@ -194,7 +196,9 @@ If you now save and refresh, you should see something like so:
the same line. Overflowing inline elements
wrap onto a new line if possible — like this one containing text ,
or just go on to a new line if not, much like this image will do:
-
+
```
@@ -277,7 +281,9 @@ This should give the following result:
the same line. Overflowing inline elements
wrap onto a new line if possible — like this one containing text ,
or just go on to a new line if not, much like this image will do:
-
+
```
@@ -368,7 +374,9 @@ You should now see the lime paragraph on top:
the same line. Overflowing inline elements
wrap onto a new line if possible — like this one containing text ,
or just go on to a new line if not, much like this image will do:
-
+
```
@@ -476,7 +484,9 @@ You should now see the finished example:
the same line. Overflowing inline elements
wrap onto a new line if possible — like this one containing text ,
or just go on to a new line if not, much like this image will do:
-
+
```
diff --git a/files/en-us/learn_web_development/core/css_layout/positioning/long.jpg b/files/en-us/learn_web_development/core/css_layout/positioning/long.jpg
deleted file mode 100644
index 56d61cb09c714cd..000000000000000
Binary files a/files/en-us/learn_web_development/core/css_layout/positioning/long.jpg and /dev/null differ
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md
index 65de76aa6281d27..f39eb7b6474e2d8 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md
@@ -499,7 +499,7 @@ In React:
## See also
-- [Learn React](https://v2.scrimba.com/learn-react-c0e?via=mdn) _MDN Curriculum partner_
+- [Learn React](https://v2.scrimba.com/learn-react-c0e?via=mdn) _MDN learning partner_
- : [Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects.
{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/en-us/learn_web_development/core/index.md b/files/en-us/learn_web_development/core/index.md
index cafd7f7b370cdca..144c5f32c55c21a 100644
--- a/files/en-us/learn_web_development/core/index.md
+++ b/files/en-us/learn_web_development/core/index.md
@@ -37,5 +37,5 @@ In particular, if you've never done any coding before, we'd recommend the [Your
## See also
-- [The Frontend Developer Career Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) _MDN Curriculum partner_
+- [The Frontend Developer Career Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) _MDN learning partner_
- : [Scrimba's](https://scrimba.com?via=mdn) _Frontend Developer Career Path_ teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions.
diff --git a/files/en-us/learn_web_development/core/scripting/arrays/index.md b/files/en-us/learn_web_development/core/scripting/arrays/index.md
index ef687447ed50693..78f439a1ade1146 100644
--- a/files/en-us/learn_web_development/core/scripting/arrays/index.md
+++ b/files/en-us/learn_web_development/core/scripting/arrays/index.md
@@ -690,7 +690,7 @@ In the next article we're giving you a challenge to test your understanding of t
- : An advanced level guide to arrays and their cousins, typed arrays.
- {{jsxref("Array")}}
- : The `Array` object reference page — for a detailed reference guide to the features discussed in this page, and many more.
-- [Aside: Intro to arrays](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~06e?via=mdn), Scrimba _MDN Curriculum partner_
+- [Aside: Intro to arrays](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~06e?via=mdn), Scrimba _MDN learning partner_
- : An interactive lesson providing an introduction to arrays.
{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}}
diff --git a/files/en-us/learn_web_development/core/scripting/functions/index.md b/files/en-us/learn_web_development/core/scripting/functions/index.md
index bcf8de7975872bf..71238b33f40208e 100644
--- a/files/en-us/learn_web_development/core/scripting/functions/index.md
+++ b/files/en-us/learn_web_development/core/scripting/functions/index.md
@@ -481,7 +481,7 @@ This article has explored the fundamental concepts behind functions, paving the
- [Functions detailed guide](/en-US/docs/Web/JavaScript/Guide/Functions) — covers some advanced features not included here.
- [Functions reference](/en-US/docs/Web/JavaScript/Reference/Functions)
-- [Using functions to write less code](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~04g?via=mdn), Scrimba _MDN Curriculum partner_
+- [Using functions to write less code](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~04g?via=mdn), Scrimba _MDN learning partner_
- : An interactive lesson providing a useful functions introduction.
{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}}
diff --git a/files/en-us/learn_web_development/core/scripting/index.md b/files/en-us/learn_web_development/core/scripting/index.md
index 7122a2b90620b08..c71bd44da7f0d1f 100644
--- a/files/en-us/learn_web_development/core/scripting/index.md
+++ b/files/en-us/learn_web_development/core/scripting/index.md
@@ -68,7 +68,7 @@ Before starting this module, you don't need any previous JavaScript knowledge, b
## See also
-- [Scrimba: Learn JavaScript](https://v2.scrimba.com/learn-javascript-c0v?via=mdn) _MDN Curriculum partner_
+- [Scrimba: Learn JavaScript](https://v2.scrimba.com/learn-javascript-c0v?via=mdn) _MDN learning partner_
- : [Scrimba's](https://scrimba.com?via=mdn) _Learn JavaScript_ course teaches you JavaScript through solving 140+ interactive coding challenges, building projects including a game, a browser extension, and even a mobile app. Scrimba features fun interactive lessons taught by knowledgeable teachers.
- [Learn JavaScript](https://learnjavascript.online/)
- : An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.
diff --git a/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md
index 7f919be325173b4..943e0a5f7adb60b 100644
--- a/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md
@@ -47,6 +47,10 @@ If we wanted the text to stand by itself, we could specify that it is a paragrap
My cat is very grumpy
```
+HTML lives inside text files called **HTML documents**, or just **documents**, with a `.html` file extension. Where previously we've talked about web pages, an HTML document contains the web page's content and specifies its structure.
+
+The most common HTML file you'll encounter is `index.html`, which is generally used to contain a website's home page content. It's also common to see subfolders with their own `index.html`, so a website can have multiple index files in different places.
+
> [!NOTE]
> Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. For example, a {{htmlelement("title")}} tag could be written as ``, ``, ``, ``, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency and readability.
diff --git a/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md
index d53c83e3f45a6d3..481f9d229a70881 100644
--- a/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md
@@ -272,17 +272,13 @@ Other tips:
### Linking to non-HTML resources — leave clear signposts
-When linking to a resource that will be downloaded (like a PDF or Word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window), you should add clear wording to reduce any confusion.
-
-For example:
-
-- If you're on a low bandwidth connection, click a link, and then a multiple megabyte download starts unexpectedly.
+When linking to a resource that will not be opened in the current page as a "normal navigation", you should add clear wording to the link text about what is going to happen. For example, if you're downloading or streaming a resource, or if the link is going to open a popup or perform some other potentially unexpected effect, this should be stated in the text. This is important for users on low bandwidth connections, who might want to avoid downloading assets of multiple megabytes. It also helps to set up expectations for screen reader users, who may not be aware of what's happening otherwise.
Let's look at some examples, to see what kind of text can be used here:
```html
-
+
Download the sales report (PDF, 10MB)
@@ -306,6 +302,26 @@ When you are linking to a resource that's to be downloaded rather than opened in
```
+### When to open links in a new tab
+
+Links by default open in the same tab as the page they are on, which allows the user to navigate back to the previous page using the browser's back button. However, many sites (including MDN) choose to open certain links, especially external links, in a new tab. This is done by setting the [`target`](/en-US/docs/Web/HTML/Element/a#target) attribute to `"_blank"`.
+
+```html
+Firefox is developed by the
+Mozilla Foundation .
+```
+
+Whether or not to open links in a new tab should be a conscious decision, based on user experience design considerations. Here are some things to think about:
+
+- Opening links in a new tab presents the two documents simultaneously, which is useful for a "parallel" navigation experience. On the other hand, links that open in the same tab are more like a continuation of the current page.
+- Opening links in a new tab can be disorienting for users who are accustomed to using the back button.
+- Even when links are opened in the same tab by default, users can still choose to open them in a new tab, using keyboard shortcuts or context menu options. On the other hand, links that open in a new tab are hard to open in the same tab.
+- Screen reader users may be confused by links that open in a new tab, as they may not realize that the new tab has opened, and they may lose context about their location on the page.
+
+A common approach is to open external links in new tabs and internal links in the same tab.
+Some designers prefer to open all links in the same tab.
+If you do open links in new tabs, then it is recommended that you provide cues for these links, such as an icon next to the link text.
+
## Active learning: creating a navigation menu
For this exercise, we'd like you to link some pages together with a navigation menu to create a multipage website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.
diff --git a/files/en-us/learn_web_development/core/structuring_content/index.md b/files/en-us/learn_web_development/core/structuring_content/index.md
index 716b7d617c0c98c..a3d8a4d55227712 100644
--- a/files/en-us/learn_web_development/core/structuring_content/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/index.md
@@ -67,11 +67,11 @@ These tutorials are not part of the learning pathway, but they are interesting n
## See also
-- [Learn HTML and CSS](https://v2.scrimba.com/learn-html-and-css-c0p?via=mdn), Scrimba _MDN Curriculum partner_
+- [Learn HTML](https://www.codecademy.com/learn/learn-html), Codecademy
+ - : A useful (and free resource) for learning HTML basics.
+- [Learn HTML and CSS](https://v2.scrimba.com/learn-html-and-css-c0p?via=mdn), Scrimba _MDN learning partner_
- : [Scrimba's](https://scrimba.com?via=mdn) _Learn HTML and CSS_ course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers.
-- [The basics of semantic HTML](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0xid?via=mdn), Scrimba _MDN Curriculum partner_
+- [The basics of semantic HTML](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0xid?via=mdn), Scrimba _MDN learning partner_
- : This interactive lesson provides a useful description of HTML, with particular emphasis on why the _semantic_ aspect of it is important.
-- [Learn HTML](https://www.codecademy.com/learn/learn-html), Codecademy
- - : Another useful (and free resource) for learning HTML basics.
{{NextMenu("Learn_web_development/Core/Structuring_content/Basic_HTML_syntax", "Learn_web_development/Core")}}
diff --git a/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md b/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md
index 67e5f223cb4d376..25532a930ea49b3 100644
--- a/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md
@@ -137,9 +137,9 @@ A caption is placed directly beneath the `` tag.
### Active learning: Adding a caption
-Let's try this out, revisiting an example we first met in the previous article.
+Let's try this out, using a language teacher's school timetable as an example.
-1. Open up your language teacher's school timetable from the end of [HTML table basics](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics#active_learning_colgroup_and_col), or make a local copy of our [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) file.
+1. Make a local copy of our [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) file.
2. Add a suitable caption for the table.
3. Save your code and open it in a browser to see what it looks like.
diff --git a/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md b/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md
index 46284b98c61e6a9..2f447098cf61275 100644
--- a/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md
@@ -342,8 +342,8 @@ When you do this you may end up with background images overlapping each other. T
The other `background-*` properties can also have comma-separated values in the same way as `background-image`:
```css
-background-image: url(image1.png), url(image2.png), url(image3.png),
- url(image4.png);
+background-image:
+ url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
10px 20px,
@@ -374,7 +374,8 @@ Let's play. The example below includes two background images. To demonstrate the
}
.box {
- background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png),
+ background-image:
+ url(https://mdn.github.io/shared-assets/images/examples/star.png),
url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
}
```
diff --git a/files/en-us/learn_web_development/core/styling_basics/basic_selectors/index.md b/files/en-us/learn_web_development/core/styling_basics/basic_selectors/index.md
index d37b42693fc9ea1..a2f304d8147bc6d 100644
--- a/files/en-us/learn_web_development/core/styling_basics/basic_selectors/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/basic_selectors/index.md
@@ -401,7 +401,7 @@ In this article we've recapped CSS selectors, which enable you to target particu
## See also
-- [CSS classes](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~01d?via=mdn), Scrimba _MDN Curriculum partner_
+- [CSS classes](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~01d?via=mdn), Scrimba _MDN learning partner_
- : An interactive lesson that provides some guidance on CSS classes.
{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics")}}
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 7a729e2a3dcd257..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/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.
@@ -45,7 +45,7 @@ The 'C' in CSS stands for "Cascading". It is the method by which styles cascade
2. **Importance:** Sort rules based on whether they are normal or important. Important styles are those that have the [`!important`](/en-US/docs/Web/CSS/important) flag set.
3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin.
4. **Cascade layers:** Within each of the six origin importance buckets, sort by cascade layer. The layer order for normal declarations is from the first layer created to the last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence.
-5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/Specificity).
+5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
6. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example.
7. **Order of appearance:** When two selectors in the origin layer with precedence have the same specificity and scope proximity, the property value from the last declared selector with the highest specificity wins.
@@ -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
@@ -68,9 +68,9 @@ The "user-agent" is the browser. The "user" is the site visitor. The "author" is
### Origin and specificity
-For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins.
+For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins.
-In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) and [`color`](/en-US/docs/Web/CSS/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence.
+In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) and [`color`](/en-US/docs/Web/CSS/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence.
```html live-sample___basic-cascade
User agent styles
@@ -86,7 +86,7 @@ In the example below, there are two links. The first has no author styles applie
{{EmbedLiveSample("basic-cascade")}}
-The "competing" selector in the user-agent stylesheet at the time of this writing is `a:any-link`, which has a specificity weight of `0-1-1`. While this is greater than the `0-0-0` selector in the author stylesheet, even if the selector in your current user agent is different, it doesn't matter: the specificity weights from author and user-agent origins are never compared. Learn more about [how specificity weight is calculated](/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated).
+The "competing" selector in the user-agent stylesheet at the time of this writing is `a:any-link`, which has a specificity weight of `0-1-1`. While this is greater than the `0-0-0` selector in the author stylesheet, even if the selector in your current user agent is different, it doesn't matter: the specificity weights from author and user-agent origins are never compared. Learn more about [how specificity weight is calculated](/en-US/docs/Web/CSS/CSS_cascade/Specificity#how_is_specificity_calculated).
Origin precedence always wins over selector specificity. If an element property is styled with a normal style declaration in multiple origins, the author style sheet will always override the redundant normal properties declared in a user or user-agent stylesheet. If the style is important, the user-agent stylesheet will always win over author and user styles. Cascade origin precedence ensures specificity conflicts between origins never happen.
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 40b1474079e9a95..d1e2327bd43c64d 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,15 +41,15 @@ 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/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.
+Also significant here is the concept of [**inheritance**](/en-US/docs/Web/CSS/CSS_cascade/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.
Let's start by taking a quick look at the key things we are dealing with, then we'll look at each in turn and see how they interact with each other and your CSS. These can seem like a tricky set of concepts to understand. As you get more practice writing CSS, the way it works will become more obvious to you.
### 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.
@@ -70,7 +70,7 @@ h1 {
### Specificity
-[Specificity](/en-US/docs/Web/CSS/Specificity) is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be:
+[Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be:
- An element selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors.
- A class selector is more specific; it will select only the elements on a page that have a specific `class` attribute value, so it has more weight. Attribute selectors and pseudo-classes have the same weight as a class.
@@ -191,7 +191,7 @@ CSS provides five special universal property values for controlling inheritance.
- {{cssxref("inherit")}}
- : Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".
- {{cssxref("initial")}}
- - : Sets the property value applied to a selected element to the [initial value](/en-US/docs/Web/CSS/initial_value) of that property.
+ - : Sets the property value applied to a selected element to the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of that property.
- {{cssxref("revert")}}
- : Resets the property value applied to a selected element to the browser's default styling rather than the defaults applied to that property. This value acts like {{cssxref("unset")}} in many cases.
- {{cssxref("revert-layer")}}
@@ -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/handling_different_text_directions/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md
index fd6d7c64fe3619c..fd5f0c7251c5476 100644
--- a/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md
@@ -71,7 +71,7 @@ So the `writing-mode` property is in reality setting the direction in which bloc
## Writing modes and block and inline layout
-We have already discussed [block and inline layout](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.
+We have already discussed [block and inline layout](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.
If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left.
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 9a82a19bf15d7eb..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/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)
@@ -73,9 +73,9 @@ These tutorials are not part of the learning pathway, but they are interesting n
## See also
-- [Learn HTML and CSS](https://v2.scrimba.com/learn-html-and-css-c0p?via=mdn), Scrimba _MDN Curriculum partner_
+- [Learn HTML and CSS](https://v2.scrimba.com/learn-html-and-css-c0p?via=mdn), Scrimba _MDN learning partner_
- : [Scrimba's](https://scrimba.com?via=mdn) _Learn HTML and CSS_ course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers.
-- [Write your first lines of CSS!](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~015?via=mdn), Scrimba _MDN Curriculum partner_
+- [Write your first lines of CSS!](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~015?via=mdn), Scrimba _MDN learning partner_
- : This interactive lesson provides a useful introduction to CSS syntax.
{{NextMenu("Learn_web_development/Core/Styling_basics/What_is_CSS", "Learn_web_development/Core")}}
diff --git a/files/en-us/learn_web_development/core/styling_basics/organizing/index.md b/files/en-us/learn_web_development/core/styling_basics/organizing/index.md
index 5352cf37a305fbb..d289a992227fc54 100644
--- a/files/en-us/learn_web_development/core/styling_basics/organizing/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/organizing/index.md
@@ -346,7 +346,7 @@ The most popular pre-processor is [Sass](https://sass-lang.com/). This is not a
#### Defining variables
-CSS now has native [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), making this feature increasingly less important. However, one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then to use that variable around the project. This means that if you realize you have used the wrong shade of blue, you only need change it in one place.
+CSS now has native [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), making this feature increasingly less important. However, one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then to use that variable around the project. This means that if you realize you have used the wrong shade of blue, you only need change it in one place.
If we created a variable called `$base-color`, as in the first line below, we could then use it through the stylesheet anywhere that required that color.
diff --git a/files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md b/files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md
index ebab59231745dcd..e7ca7a0b43480d4 100644
--- a/files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md
@@ -57,31 +57,34 @@ The web would be a boring place if all websites looked like that. This is why yo
Using CSS, you can control exactly how HTML elements look in the browser, presenting your documents to your users with whatever design and layout you like.
-A **document** is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.
-
-**Presenting** a document to a user means converting it into a form usable by your audience. {{Glossary("browser","Browsers")}}, like {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, or {{Glossary("Microsoft Edge","Edge")}}, are designed to present documents visually, for example, on a computer screen, projector, or printer.
+- A **document** is usually a text file structured using a markup language, most commonly {{Glossary("HTML")}} (these are termed _HTML documents_). You may also come across documents written in other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}. Where previously we've talked about web pages, an HTML document contains the web page's content and specifies its structure.
+- **Presenting** a document to a user means converting it into a form usable by your audience. {{Glossary("browser","Browsers")}} like {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Apple_Safari","Safari")}}, and {{Glossary("Microsoft Edge","Edge")}} are designed to present documents visually, for example, on a computer screen, projector, mobile device, or printer. In a web context, this is generally referred to as _rendering_; we provided a simplified description of the process by which a web page is rendered in [How browsers load websites](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites).
> [!NOTE]
> A browser is sometimes called a {{Glossary("User agent","user agent")}}, which basically means a computer program that represents a person inside a computer system.
-CSS can be used for text styling — for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links. It can be used to create a layout — for example, [turning a single column of text into a layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) with a main content area and a sidebar for related information. It can even be used for effects such as [animation](/en-US/docs/Web/CSS/CSS_animations). Have a look at the links in this paragraph for specific examples.
+CSS can be used for many purposes related to the look and feel of your web page. The most important are:
+
+- Text styling, for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links.
+- Creating layouts, for example, [turning a single column of text into a multiple-column layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts).
+- Special effects such as [animation](/en-US/docs/Web/CSS/CSS_animations).
The CSS language is organized into _modules_ that contain related functionality. For example, take a look at the MDN reference pages for the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to _Specifications_ that defines the technology.
## CSS syntax basics
-CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.
+CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to particular element or groups of elements on your web page.
-For example, you can decide to style the main heading on your page as large red text. The following code shows a very simple CSS rule that would achieve this:
+For example, you might decide to style the main heading on your page as large red text. The following code shows a very simple CSS rule that would achieve this:
```css
h1 {
color: red;
- font-size: 5em;
+ font-size: 2.5em;
}
```
-- In the above example, the CSS rule opens with a {{Glossary("CSS Selector", "selector")}}. This _selects_ the HTML element that we are going to style. In this case, we are styling level one headings (`{{htmlelement("Heading_Elements", "<h1>")}}`).
+- In the above example, the CSS rule opens with a {{Glossary("CSS Selector", "selector")}}. This _selects_ the HTML elements that we are going to style. In this case, we are styling level one headings (`{{htmlelement("Heading_Elements", "<h1>")}}`).
- We then have a set of curly braces — `{ }`.
- The braces contain one or more **declarations**, which take the form of **property** and **value** pairs. We specify the property (for example, `color` in the above example) before the colon, and we specify the value of the property after the colon (`red` is the value being set for the `color` property).
- This example contains two declarations, one for `color` and another for `font-size`.
@@ -93,11 +96,13 @@ A CSS stylesheet contains many such rules, written one after the other.
```css
h1 {
color: red;
- font-size: 5em;
+ font-size: 2.5em;
}
p {
- color: black;
+ color: aqua;
+ padding: 5px;
+ background: midnightblue;
}
```
@@ -108,89 +113,56 @@ You will find that you quickly learn some values, whereas others you will need t
## How is CSS applied to HTML?
-When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways.
-
-1. The browser loads the HTML.
-2. It converts the HTML into a tree-like structure called a {{Glossary("DOM")}} (_Document Object Model_) tree. The DOM represents the document in the computer's memory.
-3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images, videos, and CSS! JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler.
-4. The browser parses the fetched CSS, and sorts the different rules into different "buckets" based on which HTML elements (represented in the DOM as **nodes**) they will be applied to. The browser then attaches styles to different elements as required (this intermediate step is called a **render tree**).
-5. The render tree is laid out in the structure it should appear in after the rules have been applied.
-6. The visual display of the page is shown on the screen (this stage is called painting).
-
-The following diagram also offers a simple view of the process.
-
-
+As explained in [How browsers load websites](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites), when you navigate to a web page, the browser first receives the HTML document containing the web page content and converts it to a **DOM tree**.
-### More on the DOM
+After that, any CSS rules found in the web page (either inserted directly in the HTML, or in referenced external `.css` files) are sorted into different "buckets", based on the different elements they will be applied to (as specified by their selectors). The CSS rules are then applied to the DOM tree, resulting in a **render tree**, which is then painted to the browser window.
-As mentioned above, the DOM has a tree-like structure. Each element, attribute, and piece of text in the markup language becomes a {{Glossary("Node/DOM","DOM node")}} in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.
-
-Understanding the DOM will help you design, debug, and maintain your CSS because the DOM is where your CSS and the document's content meet up. When you use browser DevTools you navigate the DOM as you select items in order to see which rules apply.
-
-Let's look at an example to see how a real HTML snippet is converted into a DOM.
-
-Take the following HTML code:
+Let's look at an example. First of all, we'll define an HTML snippet that the CSS could be applied to:
```html
-
- Let's use:
- Cascading
- Style
- Sheets
-
-```
+CSS is great
+
+You can style text.
-The browser parses the HTML and creates a DOM from it, which looks like this:
-
-```plain
-P
-├─ "Let's use:"
-├─ SPAN
-| └─ "Cascading"
-├─ SPAN
-| └─ "Style"
-└─ SPAN
- └─ "Sheets"
+And create layouts and special effects.
```
-In the DOM, the node corresponding to our `` element is a parent. Its children are a text node and the three nodes corresponding to our `` elements. The `SPAN` nodes are also parents, with text nodes as their children. When the browser renders the above DOM tree, it will look like so:
+Now, our CSS, repeated from the previous section:
-{{EmbedLiveSample('More on the DOM', '100%', 55)}}
+```css
+h1 {
+ color: red;
+ font-size: 2.5em;
+}
-```css hidden
p {
- margin: 0;
+ color: aqua;
+ padding: 5px;
+ background: midnightblue;
}
```
-### Applying CSS to the DOM
-
-Let's say we modify our code to apply the following CSS to our document, to style it:
+This CSS:
-```html hidden
-
- Let's use:
- Cascading
- Style
- Sheets
-
-```
-
-```css
-span {
- border: 1px solid black;
- background-color: lime;
-}
-```
+- Selects all `` elements on the page, coloring their text red and making them bigger than their default size. Since there is only one `` in our example HTML, only that element will get the styling.
+- Selects all ` ` elements on the page, giving them a custom text and background color and some spacing around the text. There are two `
` elements in our example HTML, and they both get the styling.
-In this case, the browser will first create a DOM tree, as in the previous section. Next, it parses the CSS. Since the only rule available in the CSS has a `span` selector, the browser sorts the CSS very quickly! It applies that rule to each one of the three ``s, then paints the final visual representation to the screen.
+When the CSS is applied to the HTML, the rendered output is as follows:
-The updated output is as follows:
+{{EmbedLiveSample('How is CSS applied to HTML?', '100%', 200)}}
-{{EmbedLiveSample('Applying CSS to the DOM', '100%', 90)}}
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Try playing with the above example. To do so, press the "Play" button in the top-right corner to load it in our Playground editor. Try the following:
+>
+> 1. Add another paragraph of text below the two existing ones, and note how the second CSS rule is automatically applied to the new paragraph.
+> 2. Add an `` subheading somewhere below the ``, maybe after one of the paragraphs. Try giving it a different color by adding a new rule to the CSS. Make a copy of the `h1` rule, change the selector to `h2`, and change the `color` value from `red` to `purple`, for example.
+> 3. If you are feeling adventurous, try looking up some new CSS properties and values in the MDN [CSS reference](/en-US/docs/Web/CSS/Reference) to add to your rules!
## Summary
-Now that you have some understanding of what CSS is and how it works, let's move on to getting you started with writing some CSS yourself.
+Now that you have some understanding of what CSS is and how it works, let's move on to giving you some practice with writing CSS yourself and explaining the syntax in more detail.
{{NextMenu("Learn_web_development/Core/Styling_basics/Getting_started", "Learn_web_development/Core/Styling_basics")}}
diff --git a/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md b/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md
index 5dc3311e1ee3e63..d1b2d55afa17074 100644
--- a/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md
+++ b/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md
@@ -792,7 +792,7 @@ We hope you enjoyed playing with text in this article! The next article will pro
## See also
-- [Web-safe fonts](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~02b?via=mdn), Scrimba _MDN Curriculum partner_
- [All about the CSS font-family property](https://explainers.dev/font-family/), explainers.dev
+- [Web-safe fonts](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~02b?via=mdn), Scrimba _MDN learning partner_
{{NextMenu("Learn_web_development/Core/Text_styling/Styling_lists", "Learn_web_development/Core/Text_styling")}}
diff --git a/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md b/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md
index 08012e78e44bae2..f46b262d74237e1 100644
--- a/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md
+++ b/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md
@@ -78,6 +78,7 @@ function alarm(person, delay) {
return new Promise((resolve, reject) => {
if (delay < 0) {
reject(new Error("Alarm delay must not be negative"));
+ return;
}
setTimeout(() => {
resolve(`Wake up, ${person}!`);
@@ -132,6 +133,7 @@ function alarm(person, delay) {
return new Promise((resolve, reject) => {
if (delay < 0) {
reject(new Error("Alarm delay must not be negative"));
+ return;
}
setTimeout(() => {
resolve(`Wake up, ${person}!`);
@@ -190,6 +192,7 @@ function alarm(person, delay) {
return new Promise((resolve, reject) => {
if (delay < 0) {
reject(new Error("Alarm delay must not be negative"));
+ return;
}
setTimeout(() => {
resolve(`Wake up, ${person}!`);
diff --git a/files/en-us/learn_web_development/extensions/server-side/django/home_page/index.md b/files/en-us/learn_web_development/extensions/server-side/django/home_page/index.md
index 321f3b4a3540a7e..e1c75fe8ca21418 100644
--- a/files/en-us/learn_web_development/extensions/server-side/django/home_page/index.md
+++ b/files/en-us/learn_web_development/extensions/server-side/django/home_page/index.md
@@ -339,7 +339,7 @@ You can add an image into the page in a similar way, for example:
```django
{% load static %}
```
diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md
index 1ab7d56036dc2a1..d82d55e9ff53581 100644
--- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md
+++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md
@@ -42,11 +42,11 @@ For more information on the options see [Database integration](https://expressjs
There are two common approaches for interacting with a database:
- Using the databases' native query language, such as SQL.
-- Using an Object Relational Mapper ("ORM"). An ORM represents the website's data as JavaScript objects, which are then mapped to the underlying database. Some ORMs are tied to a specific database, while others provide a database-agnostic backend.
+- Using an Object Relational Mapper ("ORM") or Object Document Mapper ("ODM"). These represent the website's data as JavaScript objects, which are then mapped to the underlying database. Some ORMs and ODMs are tied to a specific database, while others provide a database-agnostic backend.
-The very best _performance_ can be gained by using SQL, or whatever query language is supported by the database. ODM's are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the ODM supports different database backends, and must make greater compromises in terms of what database features are supported).
+The very best _performance_ can be gained by using SQL, or whatever query language is supported by the database. Object mappers are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the mapper supports different database backends, and must make greater compromises in terms of what database features are supported).
-The benefit of using an ORM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform data validation.
+The benefit of using an ORM/ODM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform data validation.
> [!NOTE]
> Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM.
diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md
index 1fdaab3cdeafaf4..0fb988764df3d2f 100644
--- a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md
+++ b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md
@@ -152,7 +152,7 @@ For now, try opening a web browser and loading up a couple of your favorite site
As a web developer, you will spend a lot of time searching for information, from syntax you can't remember to solutions to specific problems. It is therefore a good idea to learn how to effectively search the web.
-If you are looking for general information about a specific web technology feature, you should type the name of the feature into the MDN search box. For example, try typing `box model`, `fetch()` or `video element` into the the search box and see what comes up. If you don't find the information you need, try expanding your search — try your search term in a search engine.
+If you are looking for general information about a specific web technology feature, you should type the name of the feature into the MDN search box. For example, try typing `box model`, `fetch()` or `video element` into the search box and see what comes up. If you don't find the information you need, try expanding your search — try your search term in a search engine.
If you are looking for a solution to a specific problem, such as `how to print out the fibonacci sequence with JavaScript` or `how to calculate whether a number is a prime number with JavaScript`, it is a good idea to search on a website such as [StackOverflow](https://stackoverflow.com), which is a community dedicated to answering programming problems. Again, try using a general search engine if a specific site doesn't give you a helpful answer.
diff --git a/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md b/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md
index e9eac54f79c4e40..0b81f1967d874a7 100644
--- a/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md
+++ b/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md
@@ -8,10 +8,7 @@ page-type: tutorial-chapter
{{PreviousMenuNext("Learn_web_development/Getting_started/Web_standards/The_web_standards_model", "Learn_web_development/Getting_started/Soft_skills", "Learn_web_development/Getting_started/Web_standards")}}
-> [!NOTE]
-> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon.
-
-In this article, we talk through the rendering process of a website — when a browser has received the files and assets that make up a website, how are they put together to create the finished experience that the user sees?
+In the previous article, we looked at an [overview of the technologies](/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model#overview_of_modern_web_technologies) that websites are built from. In this article we walk through the process by which those technologies are rendered — when a browser has received the code files and other assets that make up a web page (as covered in [How the web works](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)), how are they put together to create the finished experience that the user interacts with?
@@ -26,8 +23,7 @@ In this article, we talk through the rendering process of a website — when a b
The different kinds of assets that are returned in an HTTP response.
- Static versus dynamic files.
- How the different files are assembled to create a web document that is then displayed by the browser.
+ How the different files are assembled by the browser to render a web page that is then displayed to the user.
Why the browser is sometimes seen as a hostile programming environment, but also an awesome programming environment.
@@ -35,44 +31,153 @@ In this article, we talk through the rendering process of a website — when a b
-## The different types of file returned in an HTTP response
+## What files are returned in HTTP responses?
+
+To summarize the [overview of web technologies](/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model#overview_of_modern_web_technologies) we looked at in the last article, HTTP responses (to requests for a web page) will generally contain some of the following file types:
+
+- HTML files, which specify the web page content and its structure.
+- CSS files, which specify styling and layout information.
+- JavaScript files, which specify the behavior of interactive parts of the web page.
+- Media assets such as images, videos, audio files, [PDFs](/en-US/docs/Glossary/PDF), and [SVGs](/en-US/docs/Glossary/SVG), which are embedded in web pages or otherwise displayed by the browser.
+- Other kinds of file that the browser can't handle natively and therefore hands off to a relevant app on the device to render, for example Word or Pages documents, PowerPoint slide decks, and Open Office files.
+
+## Web page rendering
+
+When the user navigates to a new web page (by clicking a link, or entering a web address in the browser address bar), several HTTP requests are sent, and several files are sent back in HTTP responses. The files received in these responses are processed by the browser and put together into a web page that the user can interact with. This process of assembling the pieces into a web page is called **rendering**.
+
+The below sections provide a high-level explanation of how a browser renders a web page. Bear in mind that this is a very simplified description, and that different browsers will handle the process in different ways. However, this will still give you an idea of the basics behind how things work.
+
+## Handling HTML
+
+To start with, the HTML file that contains the web page content and defines its structure is received by the browser, and parsed. The browser converts it into a tree-like structure called a **DOM tree** (**Document Object Model**). The DOM represents the HTML document structure in the computer's memory. Take this basic HTML snippet as an example:
+
+```html
+
+ Let's use:
+ HTML
+ CSS
+ JavaScript
+
+```
+
+Each element, attribute, and piece of text in the HTML becomes a **DOM node** in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings. The browser would parse the above HTML and create the following DOM tree from it:
+
+```plain
+P
+├─ "Let's use:"
+├─ SPAN
+| └─ "HTML"
+├─ SPAN
+| └─ "CSS"
+└─ SPAN
+ └─ "JavaScript"
+```
+
+In the DOM, the node corresponding to our `` element is a parent. Its children are a text node and the three nodes corresponding to our `` elements. The `SPAN` nodes are also parents, with text nodes as their children. When the browser renders the above DOM tree, it will look like so:
+
+{{EmbedLiveSample('Handling the HTML', '100%', 55)}}
+
+```css hidden
+p {
+ margin: 0;
+}
+```
+
+Certain HTML elements, when parsed, will trigger more HTTP requests:
+
+- {{htmlelement("link")}} elements referencing external [CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) stylesheets.
+- {{htmlelement("script")}} elements referencing external [JavaScript](/en-US/docs/Learn_web_development/Core/Scripting) files.
+- Elements such as {{htmlelement("img")}}, {{htmlelement("video")}}, and {{htmlelement("video")}}, which reference media files you want to embed in the web page.
+
+## Parsing CSS and rendering the page
+
+Next, let's look at the CSS is handled.
+
+1. The browser parses the CSS found on the page (either included in the HTML file, or fetched from external stylesheets), and sorts the different CSS styling rules into different "buckets" based on which HTML elements (represented in the DOM as items called **nodes**) they will be applied to. The browser then attaches styles to different elements as required (this intermediate step is called a render tree).
+2. The render tree is laid out in the structure it should appear in after the rules have been applied. This includes any images and other media files that are to be embedded in the page.
+3. The visual display of the page is shown on the screen (this stage is called painting).
+
+The following diagram offers a visualization of the process we've talked about so far:
+
+
+
+Going back to our example, let's say the following CSS is found in the HTML file:
+
+```html hidden
+
+ Let's use:
+ HTML
+ CSS
+ JavaScript
+
+```
+
+```css
+span {
+ border: 1px solid black;
+ background-color: lime;
+}
+```
+
+The only rule available in the CSS has a `span` selector, so the browser is able to sort the CSS very quickly! It applies that rule to each one of the three SPAN nodes in the DOM tree, giving them a black border and a lime green background, then paints the final visual representation to the screen.
+
+The updated output is as follows:
+
+{{EmbedLiveSample('Parsing the CSS, and rendering the page', '100%', 90)}}
+
+## Handling JavaScript
+
+Any JavaScript found on the page (either included in the HTML file, or fetched from external script files) is parsed, interpreted, compiled, and executed. This happens at some point before the final page rendering is completed — after all, some JavaScript may affect the rendering, for example by adding nodes to the DOM or modifying existing ones.
+
+Returning to our example, let's say the following JavaScript is found in the HTML file:
+
+```html hidden
+
+ Let's use:
+ HTML
+ CSS
+ JavaScript
+
+```
+
+```css hidden
+span {
+ border: 1px solid black;
+ background-color: lime;
+}
+```
+
+```js
+const spans = document.querySelectorAll("span");
+spans.forEach((span) => {
+ const reversedText = span.textContent.split("").reverse().join("");
+ span.textContent = reversedText;
+});
+```
+
+You don't need to understand exactly how this JavaScript works, but at a high level, it finds every SPAN node in the DOM and reverses the order of the characters in their child text nodes.
-- HTML files.
-- CSS files.
-- JavaScript files.
-- Media assets such as images, videos, audio files, [PDFs](/en-US/docs/Glossary/PDF), and [SVGs](/en-US/docs/Glossary/SVG).
-- Other kinds of file that the browser can't handle natively and hands off to a relevant app on the device, for example Word documents and PowerPoint slide decks.
+The final output is as follows:
-## Static versus dynamic files
+{{EmbedLiveSample('Handling the JavaScript', '100%', 90)}}
-Some downloaded code files will be static (they exist on the server in the same form as they are downloaded), and some will be dynamic (generated by the server based on varying data).
+## What other rendering steps are there?
-## How files are assembled to render a web document in the browser
+Several other things happen during page rendering, but we won't discuss them all here. One notable additional occurrence worth mentioning is that an accessibility tree is built, based on the DOM, for assistive technologies (for example screen readers) to hook into, which enables people who are not able to see the rendered content to interact with it.
-- A web page is requested (e.g. by clicking a link).
-- A DNS lookup is performed to find the location of all the assets to download for the web page.
-- The assets start to be fetched. This involves [TCP handshakes](/en-US/docs/Glossary/TCP_handshake), [TLS](/en-US/docs/Glossary/TLS) negotiation, and HTTP requests and responses.
-- A [DOM](/en-US/docs/Glossary/DOM) tree is assembled from the downloaded HTML.
-- The [CSSOM](/en-US/docs/Glossary/CSSOM) is built from the CSS rules.
-- The JavaScript is parsed, interpreted, compiled, and executed.
-- The accessibility tree is built for assistive technologies (e.g. screen readers) to hook into.
-- The render tree is created from the DOM and CSSOM, to identify visual styles applied to each DOM node.
-- Page layout is calculated.
-- The styled, laid-out nodes are painted to the screen in the right order, via painting and compositing.
+You will learn more about this later on, in our [Accessibility](/en-US/docs/Learn_web_development/Core/Accessibility) module.
-## The browser: hostile versus awesome programming environment
+## The browser: a hostile _and_ an awesome programming environment
-Why the browser is sometimes seen as a hostile programming environment:
+Front-end web development can sometimes be frustrating, and some people consider the browser to be a hostile programming environment. This is because, unlike other programming environments, it is much harder to make guarantees about the environment your code will run on. You cannot know ahead of time all the different combinations of operating system, browser, language, location, network connection, CPU, GPU, memory, battery life, etc., that your users will have, therefore you cannot guarantee a perfect user experience for all of them.
-- Unlike other programming environments, it is much harder to make guarantees about the environment your code will run on.
-- You cannot guarantee a user's OS, browser, language, location, network connection, CPU, GPU, memory, etc.
-- You need to embrace uncertainty and learn to program defensively. This relies on adhering to the best practices discussed in [The web standards model](/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model). This would also be a good place to look at related concepts such as error handling, feature detection, and responsive design.
+Modern browsers tend to implement web standards pretty consistently, but there is still a lot of uncertainty to navigate. As a web developer, you will need to embrace that uncertainty, programming defensively and being conservative with the features you use. This relies on adhering to the [best practices](/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model#web_best_practices) outlined in the previous article.
-The flipside — why the web is an awesome programming environment:
+On the upside, the web is also an awesome programming environment, for many reasons.
-- Its basic state is accessible and linkable. Some of these basics are harder to achieve in other environments.
-- App delivery across the web is simple and powerful.
-- Updates are easy — in many cases, you can just reload the browser tab. You don't need to worry about constantly downloading and installing large packages.
-- The community is vibrant and helpful, and there are lots of great resources available to learn.
+- For a start, it is designed with universal access in mind. The web's basic state is accessible and linkable. Some of these basics are harder to achieve in other environments.
+- App delivery across the web is simple and powerful. You don't need to take your users through a complicated installation process: you just point them to a web address and off they go.
+- App updates are usually straightforward. In many cases, visitors can see new versions of an application when they reload their browser tab. You don't need to worry about getting visitors to regularly download and install software updates.
+- The web community is vibrant and helpful. As we discuss later on in our [Research and learning](/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) article, there are lots of places you can do to ask for help, and great resources available to learn from.
{{PreviousMenuNext("Learn_web_development/Getting_started/Web_standards/The_web_standards_model", "Learn_web_development/Getting_started/Soft_skills", "Learn_web_development/Getting_started/Web_standards")}}
diff --git a/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/rendering.svg b/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/rendering.svg
new file mode 100644
index 000000000000000..d2cc2b525ed9c56
--- /dev/null
+++ b/files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/rendering.svg
@@ -0,0 +1 @@
+Load HTML Parse HTML Load CSS Parse CSS Create DOM tree Display Attach style to DOM nodes
\ No newline at end of file
diff --git a/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md b/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md
index f72effa27991066..8d3dac751c45e2a 100644
--- a/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md
+++ b/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md
@@ -8,10 +8,13 @@ page-type: tutorial-chapter
{{NextMenu("Learn_web_development/Getting_started/Web_standards/The_Web_standards_model", "Learn_web_development/Getting_started/Web_standards")}}
-_How the web works_ provides a description of what happens when you view a webpage in a web browser on your computer or phone.
+_How the web works_ provides a high-level description of what happens when you use a web browser to navigate to a web page, explaining the magic that goes on behind the scenes to deliver the relevant code to your computer for the browser to assemble into something you can look at.
This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.
+> [!NOTE]
+> This article does not cover how web browsers actually render code into web pages. That's covered in [How browsers load websites](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites).
+
@@ -26,10 +29,10 @@ This theory is not essential to writing web code in the short term, but before l
Clients and servers and their roles in the web.
DNS and how it works at a high level.
- TCP/IP, HTTP, and packets.
+ The purpose of TCP/IP, HTTP, and packets.
HTTP syntax at a basic level.
Common HTTP response codes (e.g. 200, 301, 403, 404, and 500).
- Components of a URL (protocol, domain, and subdomain).
+ Basic components of a URL (protocol, domain, subdomain, path).
@@ -43,56 +46,141 @@ Computers connected to the internet are called **clients** and **servers**. A si

- Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
-- Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.
+- Servers are computers that store webpages, sites, or apps. When a client wants to access a webpage, a copy of the webpage code is downloaded from the server onto the client machine to rendered by the browser and displayed to the user.
## The other parts of the toolbox
The client and server we've described above don't tell the whole story. There are many other parts involved, and we'll describe them below.
-For now, let's imagine that the web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.
+For now, let's imagine that the internet is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is like a shop you want to buy something from.

-In addition to the client and the server, we also need to say hello to:
+In order for data to get back and forth, we need the following things:
+
+- **Your internet connection**: Allows you to send and receive data on the internet. It's basically like the street between your house and the shop.
+- **TCP/IP**: **Transmission Control Protocol** and **Internet Protocol** (TCP/IP) are communication protocols that define how data should travel across the internet. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might travel along the road).
+- **DNS**: The **Domain Name System** (DNS) is like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's IP address — the actual address the server is located at — before it can retrieve the website (see [DNS explained](#dns_explained) below for more information). The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop before you visit it.
+- **HTTP**: **Hypertext Transfer Protocol** (HTTP) is an application {{Glossary("Protocol", "protocol")}} that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods. See [HTTP basics](#http_basics) below.
+- **Files**: A website is made up of many different files, which are like the different goods you buy from the shop. These files come in two main types:
-- **Your internet connection**: Allows you to send and receive data on the web. It's basically like the street between your house and the shop.
-- **TCP/IP**: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the internet. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around).
-- **DNS**: Domain Name System is like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's IP address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.
-- **HTTP**: Hypertext Transfer Protocol is an application {{Glossary("Protocol", "protocol")}} that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
-- **Component files**: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
+ - **Code**: Websites are built primarily from HTML, CSS, and JavaScript — the different programming languages websites are written in, which the browser interprets and assembles into a web page to display to a user.
+ - **Assets**: This is a collective term for all the other items that appear on a website — such as images, music, video, Word documents, and PDFs — that aren't code that the browser interprets.
- - **Code files**: Websites are built primarily from HTML, CSS, and JavaScript, though you'll meet other technologies a bit later.
- - **Assets**: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.
+ > [!NOTE]
+ > You can find out how the browser assembles these files into a web page later in the course, in [How browsers load websites](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites).
## So what happens, exactly?
-When you type a web address into your browser (for our analogy that's like walking to the shop):
+When you type a web address (which is technically part of a [URL](#components_of_a_url)) into your browser address bar, the following steps occur:
-1. The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop).
+1. The browser goes to the DNS server and finds the real address of the server that the website lives on (you look up the address of the shop).
2. The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
-3. If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
-4. The browser assembles the small chunks into a complete web page and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).
-
-## Order in which component files are parsed
-
-When browsers send requests to servers for HTML files, those HTML files often contain {{htmlelement("link")}} elements referencing external [CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) stylesheets and {{htmlelement("script")}} elements referencing external [JavaScript](/en-US/docs/Learn_web_development/Core/Scripting) scripts. It's important to know the order in which those files are [parsed by the browser](/en-US/docs/Web/Performance/How_browsers_work#parsing) as the browser loads the page:
-
-- The browser parses the HTML file first, and that leads to the browser recognizing any ` `-element references to external CSS stylesheets and any `";
el.innerHTML = name; // harmless in this case
```
-Although this may look like a [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attack, the result is harmless. HTML specifies that a {{HTMLElement("script")}} tag inserted with `innerHTML` [should not execute](https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0).
+Although this may look like a [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attack, the result is harmless. A {{HTMLElement("script")}} tag inserted with `innerHTML` will not execute.
However, there are ways to execute JavaScript without using {{HTMLElement("script")}} elements, so there is still a security risk whenever you use `innerHTML` to set strings over which you have no control.
For example:
diff --git a/files/en-us/web/api/element/shadowroot/index.md b/files/en-us/web/api/element/shadowroot/index.md
index 6fbde10f864e745..aa56bff43764637 100644
--- a/files/en-us/web/api/element/shadowroot/index.md
+++ b/files/en-us/web/api/element/shadowroot/index.md
@@ -19,6 +19,8 @@ A {{DOMxRef("ShadowRoot")}} object instance, or `null` if the associated
shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to
`closed`. (See {{DOMxRef("Element.attachShadow()")}} for further details).
+Some built-in elements, such as {{HTMLElement("input")}} and {{HTMLElement("img")}}, have user-agent shadow roots that are closed to script. Therefore, their `shadowRoot` property is always `null`.
+
## Examples
The following snippets are taken from our [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks)
diff --git a/files/en-us/web/api/fetch_api/using_fetch/index.md b/files/en-us/web/api/fetch_api/using_fetch/index.md
index 3c777e9386f0000..a5b55a34284727f 100644
--- a/files/en-us/web/api/fetch_api/using_fetch/index.md
+++ b/files/en-us/web/api/fetch_api/using_fetch/index.md
@@ -91,6 +91,19 @@ You can supply the body as an instance of any of the following types:
- {{domxref("FormData")}}
- {{domxref("ReadableStream")}}
+Other objects are converted to strings using their `toString()` method. For example, you can use a {{domxref("URLSearchParams")}} object to encode form data (see [setting headers](#setting_headers) for more information):
+
+```js
+const response = await fetch("https://example.org/post", {
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ // Automatically converted to "username=example&password=password"
+ body: new URLSearchParams({ username: "example", password: "password" }),
+ // ...
+});
+```
+
Note that just like response bodies, request bodies are streams, and making the request reads the stream, so if a request contains a body, you can't make it twice:
```js example-bad
@@ -155,7 +168,7 @@ const response = await fetch("https://example.org/post", {
});
```
-Many headers are set automatically by the browser and can't be set by a script: these are called {{glossary("Forbidden header name", "Forbidden header names")}}. If the {{domxref("Request.mode", "mode")}} option is set to `no-cors`, then the set of permitted headers is further restricted.
+Compared to using plain objects, the `Headers` object provides some additional input sanitization. For example, it normalizes header names to lowercase, strips leading and trailing whitespace from header values, and prevents certain headers from being set. Many headers are set automatically by the browser and can't be set by a script: these are called {{glossary("Forbidden header name", "Forbidden header names")}}. If the {{domxref("Request.mode", "mode")}} option is set to `no-cors`, then the set of permitted headers is further restricted.
### Making POST requests
diff --git a/files/en-us/web/api/gyroscope/y/index.md b/files/en-us/web/api/gyroscope/y/index.md
index 50534d19766399c..2be33275b02047e 100644
--- a/files/en-us/web/api/gyroscope/y/index.md
+++ b/files/en-us/web/api/gyroscope/y/index.md
@@ -1,6 +1,6 @@
---
title: "Gyroscope: y property"
-short-title: "y"
+short-title: y
slug: Web/API/Gyroscope/y
page-type: web-api-instance-property
browser-compat: api.Gyroscope.y
diff --git a/files/en-us/web/api/headers/index.md b/files/en-us/web/api/headers/index.md
index 9a1be03674ce2d8..fbdf62b512d7c07 100644
--- a/files/en-us/web/api/headers/index.md
+++ b/files/en-us/web/api/headers/index.md
@@ -9,7 +9,7 @@ browser-compat: api.Headers
The **`Headers`** interface of the [Fetch API](/en-US/docs/Web/API/Fetch_API) allows you to perform various actions on [HTTP request and response headers](/en-US/docs/Web/HTTP/Headers). These actions include retrieving, setting, adding to, and removing headers from the list of the request's headers.
-You can retrieve a `Headers` object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new `Headers` object using the {{domxref("Headers.Headers", "Headers()")}} constructor.
+You can retrieve a `Headers` object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new `Headers` object using the {{domxref("Headers.Headers", "Headers()")}} constructor. Compared to using plain objects, using `Headers` objects to send requests provides some additional input sanitization. For example, it normalizes header names to lowercase, strips leading and trailing whitespace from header values, and prevents certain headers from being set.
> [!NOTE]
> You can find out more about the available headers by reading our [HTTP headers](/en-US/docs/Web/HTTP/Headers) reference.
diff --git a/files/en-us/web/api/houdini_apis/index.md b/files/en-us/web/api/houdini_apis/index.md
index 647e1af9eff2ad9..dd16669c32af1f5 100644
--- a/files/en-us/web/api/houdini_apis/index.md
+++ b/files/en-us/web/api/houdini_apis/index.md
@@ -39,11 +39,6 @@ CSS.paintWorklet.addModule("css-component.js");
This added module contains {{domxref("PaintWorkletGlobalScope.registerPaint")}} functions,
which register completely configurable worklets.
-> [!NOTE]
-> You can write your own worklets, or install components created by other people.
-> The [Houdini.how](https://houdini.how/) website is a collection of worklets,
-> with [instructions on how to use them](https://houdini.how/usage/).
-
The CSS `paint()` function is an additional function supported by the {{cssxref("image")}} type.
It takes parameters that include the name of the worklet,
plus additional parameters needed by the worklet.
@@ -140,6 +135,5 @@ _This API is currently a proposal, and has no browser implementations or documen
## See also
-- The [Worklet library](https://houdini.how/) for examples and code.
- [Interactive introduction to Houdini](https://houdini.glitch.me/)
- [Is Houdini Ready Yet?](https://houdini.glitch.me/)
diff --git a/files/en-us/web/api/htmlanchorelement/hash/index.md b/files/en-us/web/api/htmlanchorelement/hash/index.md
index 47ead42cba324f9..944775f4ce1d025 100644
--- a/files/en-us/web/api/htmlanchorelement/hash/index.md
+++ b/files/en-us/web/api/htmlanchorelement/hash/index.md
@@ -8,9 +8,9 @@ browser-compat: api.HTMLAnchorElement.hash
{{ APIRef("HTML DOM") }}
-The **`HTMLAnchorElement.hash`** property returns a string containing a `'#'` followed by the fragment identifier of the URL.
+The **`hash`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing a `"#"` followed by the fragment identifier of the `` element's `href`. If the URL does not have a fragment identifier, this property contains an empty string, `""`.
-The fragment is [percent-encoded](/en-US/docs/Glossary/Percent-encoding). If the URL does not have a fragment identifier, this property contains an empty string, `""`.
+See {{domxref("URL.hash")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/host/index.md b/files/en-us/web/api/htmlanchorelement/host/index.md
index f74d062ef725b5b..594ab76b1d87340 100644
--- a/files/en-us/web/api/htmlanchorelement/host/index.md
+++ b/files/en-us/web/api/htmlanchorelement/host/index.md
@@ -8,10 +8,9 @@ browser-compat: api.HTMLAnchorElement.host
{{ApiRef("HTML DOM")}}
-The **`HTMLAnchorElement.host`** property is a
-string containing the host, that is the _hostname_, and then,
-if the _port_ of the URL is nonempty, a `':'`, and the _port_
-of the URL.
+The **`host`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the host, which is the {{domxref("HTMLAnchorElement.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a `":"`, followed by the {{domxref("HTMLAnchorElement.port", "port")}} of the URL. If the URL does not have a `hostname`, this property contains an empty string, `""`.
+
+See {{domxref("URL.host")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/hostname/index.md b/files/en-us/web/api/htmlanchorelement/hostname/index.md
index 79dc0ccd432d5b0..84f264e0ed0b38b 100644
--- a/files/en-us/web/api/htmlanchorelement/hostname/index.md
+++ b/files/en-us/web/api/htmlanchorelement/hostname/index.md
@@ -8,8 +8,9 @@ browser-compat: api.HTMLAnchorElement.hostname
{{ApiRef("HTML DOM")}}
-The **`HTMLAnchorElement.hostname`** property is a
-string containing the domain of the URL.
+The **`hostname`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing either the {{glossary("domain name")}} or {{glossary("IP address")}} of the ` ` element's `href`. If the URL does not have a hostname, this property contains an empty string, `""`. IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to [IDN](https://en.wikipedia.org/wiki/Internationalized_domain_name).
+
+See {{domxref("URL.hostname")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/origin/index.md b/files/en-us/web/api/htmlanchorelement/origin/index.md
index d560d27fc2edfac..2777a7799272462 100644
--- a/files/en-us/web/api/htmlanchorelement/origin/index.md
+++ b/files/en-us/web/api/htmlanchorelement/origin/index.md
@@ -8,21 +8,17 @@ browser-compat: api.HTMLAnchorElement.origin
{{APIRef("HTML DOM")}}
-The
-**`HTMLAnchorElement.origin`** read-only property is a
-string containing the Unicode serialization of the origin of the
-represented URL.
-
-That is:
-
-- for URL using the `http` or `https`, the scheme followed by
- `'://'`, followed by the domain, followed by `':'`, followed by
- the port (the default port, `80` and `443` respectively, if
- explicitly specified);
-- for URL using `file:` scheme, the value is browser dependent;
-- for URL using the `blob:` scheme, the origin of the URL following
- `blob:`. E.g. `"blob:https://mozilla.org"` will have
- `"https://mozilla.org".`
+The **`origin`** read-only property of the {{domxref("HTMLAnchorElement")}} interface returns a string containing the Unicode serialization of the origin of the ` ` element's `href`.
+
+The exact structure varies depending on the type of URL:
+
+- For URLs using the `ftp:`, `http:`, `https:`, `ws:`, and `wss:` schemes, the {{domxref("HTMLAnchorElement.protocol", "protocol")}} followed by `//`, followed by the {{domxref("HTMLAnchorElement.host", "host")}}. Same as `host`, the {{domxref("HTMLAnchorElement.port", "port")}} is only included if it's not the default for the protocol.
+- For URLs using `file:` scheme, the value is browser dependent.
+- For URLs using the `blob:` scheme, the origin of the URL following `blob:`, but only if that URL uses the `http:`, `https:`, or `file:` scheme. For example, `blob:https://mozilla.org` will have `https://mozilla.org`.
+
+For all other cases, the string `"null"` is returned.
+
+See {{domxref("URL.origin")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/password/index.md b/files/en-us/web/api/htmlanchorelement/password/index.md
index 22bbb82927bd7d6..e812fa0bc6a5dd7 100644
--- a/files/en-us/web/api/htmlanchorelement/password/index.md
+++ b/files/en-us/web/api/htmlanchorelement/password/index.md
@@ -8,12 +8,13 @@ browser-compat: api.HTMLAnchorElement.password
{{ApiRef("HTML DOM")}}
-The **`HTMLAnchorElement.password`** property is a
-string containing the password specified before the domain name.
+The **`password`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the password component of the ` ` element's `href`. If the URL does not have a password, this property contains an empty string, `""`.
-If it is set without first setting the
-[`username`](/en-US/docs/Web/API/HTMLAnchorElement/username)
-property, it silently fails.
+This property can be set to change the password of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect.
+
+The password is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading.
+
+See {{domxref("URL.password")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/port/index.md b/files/en-us/web/api/htmlanchorelement/port/index.md
index aed679bcd1a47c1..6b0bed38042d727 100644
--- a/files/en-us/web/api/htmlanchorelement/port/index.md
+++ b/files/en-us/web/api/htmlanchorelement/port/index.md
@@ -8,10 +8,11 @@ browser-compat: api.HTMLAnchorElement.port
{{ApiRef("HTML DOM")}}
-The **`port`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the port number of the URL, or the empty string if the port is the default for the protocol.
+The **`port`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the port number of the ` ` element's `href`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`.
-> [!NOTE]
-> If the {{domxref("HTMLAnchorElement")}} object refers to a URL that doesn't contain an explicit port number (e.g., `https://localhost`) or contains a port number that's the default port number corresponding to the protocol part of the URL (e.g., `https://localhost:443`), then the `port` property will be the empty string: `''`.
+This property can be set to change the port of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. It also silently ignores invalid port numbers.
+
+See {{domxref("URL.port")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/protocol/index.md b/files/en-us/web/api/htmlanchorelement/protocol/index.md
index 7db2ae8759dc5a7..da8203f85c3c17c 100644
--- a/files/en-us/web/api/htmlanchorelement/protocol/index.md
+++ b/files/en-us/web/api/htmlanchorelement/protocol/index.md
@@ -8,10 +8,11 @@ browser-compat: api.HTMLAnchorElement.protocol
{{ApiRef("HTML DOM")}}
-The
-**`HTMLAnchorElement.protocol`**
-property is a string representing the protocol scheme of the URL,
-including the final `':'`.
+The **`protocol`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the protocol or scheme of the ` ` element's `href`, including the final `":"`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`.
+
+This property can be set to change the protocol of the URL. A `":"` is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid.
+
+See {{domxref("URL.protocol")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlanchorelement/search/index.md b/files/en-us/web/api/htmlanchorelement/search/index.md
index 87bbe85cad04cc1..b1b582f11961166 100644
--- a/files/en-us/web/api/htmlanchorelement/search/index.md
+++ b/files/en-us/web/api/htmlanchorelement/search/index.md
@@ -8,9 +8,11 @@ browser-compat: api.HTMLAnchorElement.search
{{ApiRef("HTML DOM")}}
-The **`HTMLAnchorElement.search`** property is a search
-string, also called a _query string_, that is a string containing
-a `'?'` followed by the parameters of the URL.
+The **`search`** property of the {{domxref("HTMLAnchorElement")}} interface is a search string, also called a _query string_, that is a string containing a `"?"` followed by the parameters of the ` ` element's `href`. If the URL does not have a search query, this property contains an empty string, `""`.
+
+This property can be set to change the query string of the URL. When setting, a single `"?"` prefix is added to the provided value, if not already present. Setting it to `""` removes the query string.
+
+The query is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading.
Modern browsers provide
[`URLSearchParams`](/en-US/docs/Web/API/URLSearchParams/get#examples)
@@ -18,6 +20,8 @@ and
[`URL.searchParams`](/en-US/docs/Web/API/URL/searchParams#examples)
to make it easy to parse out the parameters from the query string.
+See {{domxref("URL.search")}} for more information.
+
## Value
A string.
diff --git a/files/en-us/web/api/htmlanchorelement/username/index.md b/files/en-us/web/api/htmlanchorelement/username/index.md
index 1e922b7d266069e..8e8c8718f2a04b7 100644
--- a/files/en-us/web/api/htmlanchorelement/username/index.md
+++ b/files/en-us/web/api/htmlanchorelement/username/index.md
@@ -8,8 +8,13 @@ browser-compat: api.HTMLAnchorElement.username
{{ApiRef("HTML DOM")}}
-The **`HTMLAnchorElement.username`** property is a
-string containing the username specified before the domain name.
+The **`username`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the username component of the ` ` element's `href`. If the URL does not have a username, this property contains an empty string, `""`.
+
+This property can be set to change the username of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect.
+
+The username is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading.
+
+See {{domxref("URL.username")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/hash/index.md b/files/en-us/web/api/htmlareaelement/hash/index.md
index c99b863596e455f..df0e357ffd11943 100644
--- a/files/en-us/web/api/htmlareaelement/hash/index.md
+++ b/files/en-us/web/api/htmlareaelement/hash/index.md
@@ -8,9 +8,9 @@ browser-compat: api.HTMLAreaElement.hash
{{ APIRef("HTML DOM") }}
-The **`HTMLAreaElement.hash`** property returns a string containing a `'#'` followed by the fragment identifier of the URL.
+The **`hash`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing a `"#"` followed by the fragment identifier of the ` ` element's `href`. If the URL does not have a fragment identifier, this property contains an empty string, `""`.
-The fragment is not {{Glossary("Percent-encoding", "percent-encoded")}}. If the URL does not have a fragment identifier, this property contains an empty string, `""`.
+See {{domxref("URL.hash")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/host/index.md b/files/en-us/web/api/htmlareaelement/host/index.md
index 5a2a8b2e023dcd4..3e118441eb8011a 100644
--- a/files/en-us/web/api/htmlareaelement/host/index.md
+++ b/files/en-us/web/api/htmlareaelement/host/index.md
@@ -8,10 +8,9 @@ browser-compat: api.HTMLAreaElement.host
{{ApiRef("HTML DOM")}}
-The **`HTMLAreaElement.host`** property is a
-string containing the host, that is the _hostname_, and then,
-if the _port_ of the URL is nonempty, a `':'`, and the _port_
-of the URL.
+The **`host`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the host, which is the {{domxref("HTMLAreaElement.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a `":"`, followed by the {{domxref("HTMLAreaElement.port", "port")}} of the URL. If the URL does not have a `hostname`, this property contains an empty string, `""`.
+
+See {{domxref("URL.host")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/hostname/index.md b/files/en-us/web/api/htmlareaelement/hostname/index.md
index b85c3b8ff6a066e..8ef1de461dd9d65 100644
--- a/files/en-us/web/api/htmlareaelement/hostname/index.md
+++ b/files/en-us/web/api/htmlareaelement/hostname/index.md
@@ -8,7 +8,9 @@ browser-compat: api.HTMLAreaElement.hostname
{{ApiRef("HTML DOM")}}
-The **`HTMLAreaElement.hostname`** property is a string containing the domain of the URL.
+The **`hostname`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing either the {{glossary("domain name")}} or {{glossary("IP address")}} of the ` ` element's URL. If the URL does not have a hostname, this property contains an empty string, `""`. IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to [IDN](https://en.wikipedia.org/wiki/Internationalized_domain_name).
+
+See {{domxref("URL.hostname")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/origin/index.md b/files/en-us/web/api/htmlareaelement/origin/index.md
index 8f004d3a473cb3a..1b6a982544893d8 100644
--- a/files/en-us/web/api/htmlareaelement/origin/index.md
+++ b/files/en-us/web/api/htmlareaelement/origin/index.md
@@ -8,21 +8,17 @@ browser-compat: api.HTMLAreaElement.origin
{{APIRef("HTML DOM")}}
-The
-**`HTMLAreaElement.origin`** read-only property is a
-string containing the Unicode serialization of the origin of the
-represented URL.
-
-That is:
-
-- for URL using the `http` or `https`, the scheme followed by
- `'://'`, followed by the domain, followed by `':'`, followed by
- the port (the default port, `80` and `443` respectively, if
- explicitly specified);
-- for URL using `file:` scheme, the value is browser dependent;
-- for URL using the `blob:` scheme, the origin of the URL following
- `blob:`. E.g. `"blob:https://mozilla.org"` will have
- `"https://mozilla.org".`
+The **`origin`** read-only property of the {{domxref("HTMLAreaElement")}} interface returns a string containing the Unicode serialization of the origin of the ` ` element's `href`.
+
+The exact structure varies depending on the type of URL:
+
+- For URLs using the `ftp:`, `http:`, `https:`, `ws:`, and `wss:` schemes, the {{domxref("HTMLAnchorElement.protocol", "protocol")}} followed by `//`, followed by the {{domxref("HTMLAnchorElement.host", "host")}}. Same as `host`, the {{domxref("HTMLAnchorElement.port", "port")}} is only included if it's not the default for the protocol.
+- For URLs using `file:` scheme, the value is browser dependent.
+- For URLs using the `blob:` scheme, the origin of the URL following `blob:`, but only if that URL uses the `http:`, `https:`, or `file:` scheme. For example, `blob:https://mozilla.org` will have `https://mozilla.org`.
+
+For all other cases, the string `"null"` is returned.
+
+See {{domxref("URL.origin")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/password/index.md b/files/en-us/web/api/htmlareaelement/password/index.md
index 168571a1f1c8ac8..ec76187d8d614b1 100644
--- a/files/en-us/web/api/htmlareaelement/password/index.md
+++ b/files/en-us/web/api/htmlareaelement/password/index.md
@@ -8,12 +8,13 @@ browser-compat: api.HTMLAreaElement.password
{{ApiRef("HTML DOM")}}
-The **`HTMLAreaElement.password`** property is a
-string containing the password specified before the domain name.
+The **`password`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the password component of the ` ` element's `href`. If the URL does not have a password, this property contains an empty string, `""`.
-If it is set without first setting the
-[`username`](/en-US/docs/Web/API/HTMLAreaElement/username)
-property, it silently fails.
+This property can be set to change the password of the URL. If the URL has no {{domxref("HTMLAreaElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect.
+
+The password is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading.
+
+See {{domxref("URL.password")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/pathname/index.md b/files/en-us/web/api/htmlareaelement/pathname/index.md
index 354d90151a5dfe4..eeb51a4ba59cbfe 100644
--- a/files/en-us/web/api/htmlareaelement/pathname/index.md
+++ b/files/en-us/web/api/htmlareaelement/pathname/index.md
@@ -13,6 +13,8 @@ string containing an initial `'/'` followed by the path of
the URL not including the query string or fragment (or the empty string if there is no
path).
+The pathname is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when read.
+
## Value
A string.
diff --git a/files/en-us/web/api/htmlareaelement/port/index.md b/files/en-us/web/api/htmlareaelement/port/index.md
index ee4a631f87c5b59..5426e70500141d8 100644
--- a/files/en-us/web/api/htmlareaelement/port/index.md
+++ b/files/en-us/web/api/htmlareaelement/port/index.md
@@ -8,10 +8,11 @@ browser-compat: api.HTMLAreaElement.port
{{ApiRef("HTML DOM")}}
-The **`port`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the port number of the URL, or the empty string if the port is the default for the protocol.
+The **`port`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the port number of the ` ` element's `href`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`.
-> [!NOTE]
-> If the {{domxref("HTMLAreaElement")}} object refers to a URL that doesn't contain an explicit port number (e.g., `https://localhost`) or contains a port number that's the default port number corresponding to the protocol part of the URL (e.g., `https://localhost:443`), then the `port` property will be the empty string: `''`.
+This property can be set to change the port of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. It also silently ignores invalid port numbers.
+
+See {{domxref("URL.port")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/protocol/index.md b/files/en-us/web/api/htmlareaelement/protocol/index.md
index 8692885ed81aadd..492665973290fc0 100644
--- a/files/en-us/web/api/htmlareaelement/protocol/index.md
+++ b/files/en-us/web/api/htmlareaelement/protocol/index.md
@@ -8,10 +8,11 @@ browser-compat: api.HTMLAreaElement.protocol
{{ApiRef("HTML DOM")}}
-The
-**`HTMLAreaElement.protocol`**
-property is a string representing the protocol scheme of the URL,
-including the final `':'`.
+The **`protocol`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the protocol or scheme of the ` ` element's `href`, including the final `":"`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`.
+
+This property can be set to change the protocol of the URL. A `":"` is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid.
+
+See {{domxref("URL.protocol")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlareaelement/search/index.md b/files/en-us/web/api/htmlareaelement/search/index.md
index 91a229bb0031b18..a2158578d995635 100644
--- a/files/en-us/web/api/htmlareaelement/search/index.md
+++ b/files/en-us/web/api/htmlareaelement/search/index.md
@@ -8,9 +8,11 @@ browser-compat: api.HTMLAreaElement.search
{{ApiRef("HTML DOM")}}
-The **`HTMLAreaElement.search`** property is a search
-string, also called a _query string_, that is a string containing
-a `'?'` followed by the parameters of the URL.
+The **`search`** property of the {{domxref("HTMLAreaElement")}} interface is a search string, also called a _query string_, that is a string containing a `"?"` followed by the parameters of the ` ` element's `href`. If the URL does not have a search query, this property contains an empty string, `""`.
+
+This property can be set to change the query string of the URL. When setting, a single `"?"` prefix is added to the provided value, if not already present. Setting it to `""` removes the query string.
+
+The query is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading.
Modern browsers provide
[`URLSearchParams`](/en-US/docs/Web/API/URLSearchParams/get#examples)
@@ -18,6 +20,8 @@ and
[`URL.searchParams`](/en-US/docs/Web/API/URL/searchParams#examples)
to make it easy to parse out the parameters from the query string.
+See {{domxref("URL.search")}} for more information.
+
## Value
A string.
diff --git a/files/en-us/web/api/htmlareaelement/username/index.md b/files/en-us/web/api/htmlareaelement/username/index.md
index f08eebb873d4c90..102224cf76db283 100644
--- a/files/en-us/web/api/htmlareaelement/username/index.md
+++ b/files/en-us/web/api/htmlareaelement/username/index.md
@@ -8,8 +8,13 @@ browser-compat: api.HTMLAreaElement.username
{{ApiRef("HTML DOM")}}
-The **`HTMLAreaElement.username`** property is a
-string containing the username specified before the domain name.
+The **`username`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the username component of the ` ` element's `href`. If the URL does not have a username, this property contains an empty string, `""`.
+
+This property can be set to change the username of the URL. If the URL has no {{domxref("HTMLAreaElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect.
+
+The username is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading.
+
+See {{domxref("URL.username")}} for more information.
## Value
diff --git a/files/en-us/web/api/htmlcanvaselement/height/index.md b/files/en-us/web/api/htmlcanvaselement/height/index.md
index 95ed2319b6593aa..3891f3b42186bb4 100644
--- a/files/en-us/web/api/htmlcanvaselement/height/index.md
+++ b/files/en-us/web/api/htmlcanvaselement/height/index.md
@@ -50,9 +50,9 @@ console.log(canvas.height); // 300
- {{domxref("HTMLCanvasElement")}}: Interface used to define the `HTMLCanvasElement.height` property
- {{domxref("HTMLCanvasElement.width")}}: Other property used to control the size of the canvas
-- {{domxref("HTMLEmbedElement.width")}}
-- {{domxref("HTMLIFrameElement.width")}}
-- {{domxref("HTMLImageElement.width")}}
-- {{domxref("HTMLObjectElement.width")}}
-- {{domxref("HTMLSourceElement.width")}}
-- {{domxref("HTMLVideoElement.width")}}
+- {{domxref("HTMLEmbedElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
+- {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
+- {{domxref("HTMLVideoElement.height")}}
diff --git a/files/en-us/web/api/htmldialogelement/showmodal/index.md b/files/en-us/web/api/htmldialogelement/showmodal/index.md
index fa1192568e1edcb..7af071fd8a80c9c 100644
--- a/files/en-us/web/api/htmldialogelement/showmodal/index.md
+++ b/files/en-us/web/api/htmldialogelement/showmodal/index.md
@@ -11,8 +11,7 @@ browser-compat: api.HTMLDialogElement.showModal
The **`showModal()`** method of the
{{domxref("HTMLDialogElement")}} interface displays the dialog as a modal, over the top
of any other dialogs that might be present. It displays in the {{glossary("top layer")}}, along with a
-{{cssxref('::backdrop')}} pseudo-element. Interaction outside the dialog is blocked and
-the content outside it is rendered inert.
+{{cssxref('::backdrop')}} pseudo-element. Elements inside the same document as the dialog, except the dialog and its descendants, become _inert_ (as if the [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) attribute is specified). Only the containing document becomes blocked; if the dialog is rendered inside an iframe, the rest of the page remains interactive.
## Syntax
diff --git a/files/en-us/web/api/htmlelement/autocorrect/index.md b/files/en-us/web/api/htmlelement/autocorrect/index.md
index fa599cdff60f462..8544438b62283e1 100644
--- a/files/en-us/web/api/htmlelement/autocorrect/index.md
+++ b/files/en-us/web/api/htmlelement/autocorrect/index.md
@@ -3,12 +3,10 @@ title: "HTMLElement: autocorrect property"
short-title: autocorrect
slug: Web/API/HTMLElement/autocorrect
page-type: web-api-instance-property
-status:
- - experimental
browser-compat: api.HTMLElement.autocorrect
---
-{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+{{APIRef("HTML DOM")}}
The **`autocorrect`** property of the {{domxref("HTMLElement")}} interface controls whether or not autocorrection of editable text is enabled for spelling and/or punctuation errors.
diff --git a/files/en-us/web/api/htmlelement/beforetoggle_event/index.md b/files/en-us/web/api/htmlelement/beforetoggle_event/index.md
index 901ba9272c5a9f5..607b1585bdc49a5 100644
--- a/files/en-us/web/api/htmlelement/beforetoggle_event/index.md
+++ b/files/en-us/web/api/htmlelement/beforetoggle_event/index.md
@@ -18,7 +18,7 @@ Among other things, this event can be used to:
- prevent an element from being shown.
- add or remove classes or properties from the element or associated elements, for example to control the animation behaviour of a dialog as it is opened and closed.
-- clear the state of the element before before it is opened or after it is hidden, for example to reset a dialog form and return value to an empty state, or hide any nested manual popovers when reopening a popup.
+- clear the state of the element before it is opened or after it is hidden, for example to reset a dialog form and return value to an empty state, or hide any nested manual popovers when reopening a popup.
## Syntax
diff --git a/files/en-us/web/api/htmlelement/focus/index.md b/files/en-us/web/api/htmlelement/focus/index.md
index eab5c19079701c1..37eb390650b8305 100644
--- a/files/en-us/web/api/htmlelement/focus/index.md
+++ b/files/en-us/web/api/htmlelement/focus/index.md
@@ -78,7 +78,7 @@ This example demonstrates how you can set the focus on a button element.
First we define three buttons.
Both the middle and right button will set focus on the left-most button.
-The right right-most button will also specify `focusVisible`.
+The right-most button will also specify `focusVisible`.
```html
Button
diff --git a/files/en-us/web/api/htmlelement/index.md b/files/en-us/web/api/htmlelement/index.md
index 8a6aa92ad23d0f8..b1a4d1d7b329108 100644
--- a/files/en-us/web/api/htmlelement/index.md
+++ b/files/en-us/web/api/htmlelement/index.md
@@ -27,7 +27,7 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}._
- : A string that represents the element's capitalization behavior for user input. Valid values are: `none`, `off`, `on`, `characters`, `words`, `sentences`.
- {{domxref("HTMLElement.autofocus")}}
- : A boolean value reflecting the [`autofocus`](/en-US/docs/Web/HTML/Element/select#autofocus) HTML global attribute, which indicates whether the control should be focused when the page loads, or when dialog or popover become shown if specified in an element inside {{htmlelement("dialog")}} elements or elements whose popover attribute is set.
-- {{domxref("HTMLElement.autocorrect")}} {{experimental_inline}}
+- {{domxref("HTMLElement.autocorrect")}}
- : A boolean that represents whether or not text input by a user should be automatically corrected.
This reflects the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) HTML global attribute.
- {{DOMxRef("HTMLElement.contentEditable")}}
diff --git a/files/en-us/web/api/htmlelement/inert/index.md b/files/en-us/web/api/htmlelement/inert/index.md
index 54729e820fa5cf2..9cbc1215f16e879 100644
--- a/files/en-us/web/api/htmlelement/inert/index.md
+++ b/files/en-us/web/api/htmlelement/inert/index.md
@@ -10,8 +10,7 @@ browser-compat: api.HTMLElement.inert
The {{domxref("HTMLElement")}} property **`inert`** reflects the value of the element's [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible.
-> [!NOTE]
-> Do not nest interactive elements or important content within elements with the `inert` attribute as inert content and their descendants are neither focusable nor perceivable by all users.
+Note that if the `inert` attribute is unspecified, the element itself may still inherit inertness from its parent. However, that inherited inertness is not reflected by this property's value.
## Value
diff --git a/files/en-us/web/api/htmlelement/lang/index.md b/files/en-us/web/api/htmlelement/lang/index.md
index 141f3f2ea3b765f..78059142c268e97 100644
--- a/files/en-us/web/api/htmlelement/lang/index.md
+++ b/files/en-us/web/api/htmlelement/lang/index.md
@@ -8,21 +8,13 @@ browser-compat: api.HTMLElement.lang
{{ APIRef("HTML DOM") }}
-The **`HTMLElement.lang`** property gets or sets the base
-language of an element's attribute values and text content.
+The **`lang`** property of the {{domxref("HTMLElement")}} interface indicates the base language of an element's attribute values and text content, in the form of a {{RFC(5646, "BCP 47 language identifier tag")}}. It reflects the element's [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) attribute; the `xml:lang` attribute does not affect this property.
-The language code returned by this property is defined in {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}}.
-Common examples include "en" for English, "ja" for
-Japanese, "es" for Spanish and so on. The default value of this attribute is
-`unknown`. Note that this attribute, though valid at the individual element
-level described here, is most often specified for the root element of the document.
-
-This also only works with the `lang` attribute and not with
-`xml:lang`.
+Note that if the `lang` attribute is unspecified, the element itself may still inherit the language from its parent. However, that inherited language is not reflected by this property's value.
## Value
-A string.
+A string. Common examples include "en" for English, "ja" for Japanese, "es" for Spanish and so on. If unspecified, the value is an empty string.
## Examples
diff --git a/files/en-us/web/api/htmlelement/offsetparent/index.md b/files/en-us/web/api/htmlelement/offsetparent/index.md
index 76582a80a045a9f..822d7266dc94ab2 100644
--- a/files/en-us/web/api/htmlelement/offsetparent/index.md
+++ b/files/en-us/web/api/htmlelement/offsetparent/index.md
@@ -14,7 +14,7 @@ positioned ancestor element.
A positioned ancestor might be:
-- a [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block) for absolutely-positioned elements
+- a [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block) for absolutely-positioned elements
- an element with a different effective [zoom](/en-US/docs/Web/CSS/zoom) value (that is, the product of all zoom scales of its parents) from this element
- `td`, `th`, `table` in case the element itself is static positioned.
diff --git a/files/en-us/web/api/htmlimageelement/sizes/index.md b/files/en-us/web/api/htmlimageelement/sizes/index.md
index 7ec3f6ba6219429..b2ceccb25bd1010 100644
--- a/files/en-us/web/api/htmlimageelement/sizes/index.md
+++ b/files/en-us/web/api/htmlimageelement/sizes/index.md
@@ -21,33 +21,10 @@ by [media queries](/en-US/docs/Web/CSS/CSS_media_queries).
## Value
A string containing a comma-separated list of source size descriptors
-followed by an optional fallback size. Each **source size descriptor** is
+followed by an optional fallback size. Each source size descriptor is
comprised of a media condition, then at least one whitespace character, then the
-**source size value** to use for the image when the media condition
-evaluates to `true`.
-
-### Media conditions
-
-Each source size descriptor consists of a media condition as defined by the media
-queries standard. Because a source size descriptor is used to specify the width to use
-for the image during layout of the page, the media condition is typically (but not
-necessarily) based entirely on [width](/en-US/docs/Web/CSS/@media/width) information. See
-[Using media queries, Syntax](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntax) for
-details on how to construct a media condition.
-
-### Source size values
-
-The source size value is a CSS {{cssxref("length")}}. It may
-be specified using font-relative units (such as `em` or `ex`),
-absolute units (such as `px` or `cm`), or the `vw`
-unit, which lets you specify the width as a percentage of the viewport width
-(`1vw` being 1% of the viewport width).
-
-> [!NOTE]
-> The source size value must _not_ be specified as a
-> percentage of the container size; that is, lengths such as `50%` or
-> `100%` are not allowed, as there would be uncertainty as to what the
-> specified value is a percentage of.
+source size value to use for the image when the media condition
+evaluates to `true`. For more information about the syntax of the `sizes` attribute, see [` `](/en-US/docs/Web/HTML/Element/img#sizes).
## Examples
diff --git a/files/en-us/web/api/htmlimageelement/y/index.md b/files/en-us/web/api/htmlimageelement/y/index.md
index 9b0ae36cb3fd89a..156801495c0c603 100644
--- a/files/en-us/web/api/htmlimageelement/y/index.md
+++ b/files/en-us/web/api/htmlimageelement/y/index.md
@@ -1,6 +1,6 @@
---
title: "HTMLImageElement: y property"
-short-title: "y"
+short-title: y
slug: Web/API/HTMLImageElement/y
page-type: web-api-instance-property
browser-compat: api.HTMLImageElement.y
diff --git a/files/en-us/web/api/htmltextareaelement/selectionstart/index.md b/files/en-us/web/api/htmltextareaelement/selectionstart/index.md
index 0f0870a3e581fd2..8907ffb6b7b5918 100644
--- a/files/en-us/web/api/htmltextareaelement/selectionstart/index.md
+++ b/files/en-us/web/api/htmltextareaelement/selectionstart/index.md
@@ -12,7 +12,7 @@ The **`selectionStart`** property of the {{domxref("HTMLTextAreaElement")}} inte
When nothing is selected, the value of both the `selectionStart` and {{domxref("HTMLTextAreaElement.selectionEnd", "selectionEnd")}} is the position of the cursor (caret) inside the `
diff --git a/files/en-us/web/api/window/fetch/index.md b/files/en-us/web/api/window/fetch/index.md
index aff6f77e2ba8e98..a5e9d8ed6852320 100644
--- a/files/en-us/web/api/window/fetch/index.md
+++ b/files/en-us/web/api/window/fetch/index.md
@@ -253,6 +253,8 @@ const options = {
const req = new Request("flowers.jpg", options);
```
+The [Using fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) article provides more examples of using `fetch()`.
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/api/window/getcomputedstyle/index.md b/files/en-us/web/api/window/getcomputedstyle/index.md
index 233fc6b1cbdf2a1..c2edc314bd6bb0d 100644
--- a/files/en-us/web/api/window/getcomputedstyle/index.md
+++ b/files/en-us/web/api/window/getcomputedstyle/index.md
@@ -152,9 +152,9 @@ Java.
using array or [dot notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#dot_notation) such as `obj['z-index']` or `obj.zIndex`.
- The values returned by `getComputedStyle` are [resolved values](/en-US/docs/Web/CSS/resolved_value).
These are usually the same as CSS 2.1's
- [computed values](/en-US/docs/Web/CSS/computed_value), but for some older properties
+ [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value), but for some older properties
like `width`, `height`, or `padding`, they are
- instead the same as [used values](/en-US/docs/Web/CSS/used_value). Originally, CSS
+ instead the same as [used values](/en-US/docs/Web/CSS/CSS_cascade/used_value). Originally, CSS
2.0 defined the _computed values_ as the "ready to be used" final values of
properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout,
and _used values_ as post-layout. For CSS 2.0 properties,
diff --git a/files/en-us/web/api/window/getdefaultcomputedstyle/index.md b/files/en-us/web/api/window/getdefaultcomputedstyle/index.md
index be756037711436e..ee58e7ca9fa4dec 100644
--- a/files/en-us/web/api/window/getdefaultcomputedstyle/index.md
+++ b/files/en-us/web/api/window/getdefaultcomputedstyle/index.md
@@ -10,7 +10,7 @@ browser-compat: api.Window.getDefaultComputedStyle
{{APIRef("CSSOM")}}{{Non-standard_Header}}
-The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/computed_value) of all the CSS
+The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of all the CSS
properties of an element, ignoring author styling. That is, only user-agent and user
styles are taken into account.
diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md
index 104a2dd2940eb40..8bc6d70d377600a 100644
--- a/files/en-us/web/api/window/index.md
+++ b/files/en-us/web/api/window/index.md
@@ -31,9 +31,7 @@ Note that properties which are objects (e.g., for overriding the prototype of bu
- : An alias for {{domxref("Window.navigator")}}.
- {{domxref("Window.closed")}} {{ReadOnlyInline}}
- : This property indicates whether the current window is closed or not.
-- {{domxref("Window.console")}} {{ReadOnlyInline}}
- - : Returns a reference to the console object which provides access to the browser's debugging console.
-- {{domxref("Window.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} {{SecureContext_Inline}}
+- {{domxref("Window.cookieStore")}} {{ReadOnlyInline}} {{SecureContext_Inline}}
- : Returns a reference to the {{domxref("CookieStore")}} object for the current document context.
- {{domxref("Window.credentialless")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : Returns a boolean that indicates whether the current document was loaded inside a credentialless {{htmlelement("iframe")}}. See [IFrame credentialless](/en-US/docs/Web/Security/IFrame_credentialless) for more details.
diff --git a/files/en-us/web/api/window/showdirectorypicker/index.md b/files/en-us/web/api/window/showdirectorypicker/index.md
index 6109d80dd51884b..52f4667c1bf39e3 100644
--- a/files/en-us/web/api/window/showdirectorypicker/index.md
+++ b/files/en-us/web/api/window/showdirectorypicker/index.md
@@ -34,7 +34,7 @@ showDirectoryPicker()
- : A string that defaults to `"read"` for read-only access or `"readwrite"` for read
and write access to the directory.
- `startIn` {{optional_inline}}
- - : A `FileSystemHandle` or a well known directory (`"desktop"`, `"documents"`,
+ - : A {{domxref("FileSystemHandle")}} or a well known directory (`"desktop"`, `"documents"`,
`"downloads"`, `"music"`, `"pictures"`, or `"videos"`) to open the dialog in.
### Return value
diff --git a/files/en-us/web/api/window/showopenfilepicker/index.md b/files/en-us/web/api/window/showopenfilepicker/index.md
index 57d28dc587f77fe..2ee1fb0ca6f753e 100644
--- a/files/en-us/web/api/window/showopenfilepicker/index.md
+++ b/files/en-us/web/api/window/showopenfilepicker/index.md
@@ -39,7 +39,7 @@ showOpenFilePicker()
- : A boolean value that defaults to `false`. When
set to `true` multiple files may be selected.
- `startIn` {{Optional_Inline}}
- - : A `FileSystemHandle` or a well known directory (`"desktop"`, `"documents"`,
+ - : A {{domxref("FileSystemHandle")}} or a well known directory (`"desktop"`, `"documents"`,
`"downloads"`, `"music"`, `"pictures"`, or `"videos"`) to open the dialog in.
- `types` {{Optional_Inline}}
diff --git a/files/en-us/web/api/window/showsavefilepicker/index.md b/files/en-us/web/api/window/showsavefilepicker/index.md
index 710ce40c7cf3194..6e63ba20bb2d234 100644
--- a/files/en-us/web/api/window/showsavefilepicker/index.md
+++ b/files/en-us/web/api/window/showsavefilepicker/index.md
@@ -36,7 +36,7 @@ showSaveFilePicker()
IDs. If the same ID is used for another picker, the picker opens in the same
directory.
- `startIn` {{Optional_Inline}}
- - : A `FileSystemHandle` or a well known directory (`"desktop"`, `"documents"`,
+ - : A {{domxref("FileSystemHandle")}} or a well known directory (`"desktop"`, `"documents"`,
`"downloads"`, `"music"`, `"pictures"`, or `"videos"`) to open the dialog in.
- `suggestedName` {{Optional_Inline}}
- : A {{jsxref('String')}}. The suggested file name.
diff --git a/files/en-us/web/api/workerglobalscope/index.md b/files/en-us/web/api/workerglobalscope/index.md
index 77d35c4ec6e8861..33a6f619eba72e4 100644
--- a/files/en-us/web/api/workerglobalscope/index.md
+++ b/files/en-us/web/api/workerglobalscope/index.md
@@ -19,8 +19,6 @@ _This interface inherits properties from the {{domxref("EventTarget")}} interfac
- {{domxref("WorkerGlobalScope.caches")}} {{ReadOnlyInline}} {{SecureContext_Inline}}
- : Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
-- {{domxref("console")}} {{ReadOnlyInline}} {{Non-standard_inline}}
- - : Returns the {{domxref("console")}} associated with the worker.
- {{domxref("WorkerGlobalScope.crossOriginIsolated")}} {{ReadOnlyInline}}
- : Returns a boolean value that indicates whether the website is in a cross-origin isolation state.
- {{domxref("WorkerGlobalScope.crypto")}} {{ReadOnlyInline}}
@@ -32,7 +30,7 @@ _This interface inherits properties from the {{domxref("EventTarget")}} interfac
- {{domxref("WorkerGlobalScope.isSecureContext")}} {{ReadOnlyInline}}
- : Returns a boolean indicating whether the current context is secure (`true`) or not (`false`).
- {{domxref("WorkerGlobalScope.location")}} {{ReadOnlyInline}}
- - : Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.r.
+ - : Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
- {{domxref("WorkerGlobalScope.navigator")}} {{ReadOnlyInline}}
- : Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
- {{domxref("WorkerGlobalScope.origin")}} {{ReadOnlyInline}}
diff --git a/files/en-us/web/api/xmlhttprequest/abort/index.md b/files/en-us/web/api/xmlhttprequest/abort/index.md
index 46c134dbfaab661..62d03dd5e4ac0c5 100644
--- a/files/en-us/web/api/xmlhttprequest/abort/index.md
+++ b/files/en-us/web/api/xmlhttprequest/abort/index.md
@@ -14,6 +14,8 @@ it has already been sent. When a request is aborted, its
`XMLHttpRequest.UNSENT` (0) and the request's
{{domxref("XMLHttpRequest.status", "status")}} code is set to 0.
+If the request is still in progress (its `readyState` is not `XMLHttpRequest.DONE` or `XMLHttpRequest.UNSENT`), a {{domxref("XMLHttpRequest/readystatechange_event", "readystatechange")}} event, {{domxref("XMLHttpRequest/abort_event", "abort")}}, and a {{domxref("XMLHttpRequest/loadend_event", "loadend")}} event are dispatched, in that order. For synchronous requests, no events are dispatched and an error is thrown instead.
+
## Syntax
```js-nolint
diff --git a/files/en-us/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/en-us/web/api/xmlhttprequest/xmlhttprequest/index.md
index 673f472aaa21aad..8329a7054c36189 100644
--- a/files/en-us/web/api/xmlhttprequest/xmlhttprequest/index.md
+++ b/files/en-us/web/api/xmlhttprequest/xmlhttprequest/index.md
@@ -15,11 +15,18 @@ creates a new {{domxref("XMLHttpRequest")}}.
```js-nolint
new XMLHttpRequest()
+// Non-standard
+new XMLHttpRequest(options)
```
### Parameters
-None.
+There are no standard parameters. However, Firefox allows a non-standard parameter:
+
+- `options` {{non-standard_inline}}
+ - : An object that can contain the following flag:
+ - `mozAnon`
+ - : A boolean. When setting this flag to `true` will cause the browser not to expose the {{Glossary("origin")}} and user credentials when fetching resources. Most important, this means that {{Glossary("Cookie", "cookies")}} will not be sent unless explicitly added using `setRequestHeader`.
### Return value
@@ -27,29 +34,6 @@ A new {{domxref("XMLHttpRequest")}} object. The object must be prepared by at le
calling {{domxref("XMLHttpRequest.open", "open()")}} to initialize it before calling
{{domxref("XMLHttpRequest.send", "send()")}} to send the request to the server.
-## Non-standard Firefox syntax
-
-Firefox 16 added a non-standard parameter to the constructor that can enable anonymous
-mode (see [Firefox bug 692677](https://bugzil.la/692677)). Setting the `mozAnon` flag to `true`
-effectively resembles the [`AnonXMLHttpRequest()`](https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest)
-constructor described in older versions of the XMLHttpRequest specification.
-
-```js
-const request = new XMLHttpRequest(paramsDictionary);
-```
-
-### Parameters (non-standard)
-
-- `objParameters`
-
- - : One flag you can set:
-
- - `mozAnon`
- - : Boolean: Setting this flag to `true` will cause the browser not to
- expose the {{Glossary("origin")}} and [user credentials](https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials) when fetching resources. Most important, this means that
- {{Glossary("Cookie", "cookies")}} will not be sent unless explicitly added using
- setRequestHeader.
-
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index 2df6f3be3362e42..05d927bd8c19e90 100644
--- a/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -265,7 +265,7 @@ The recommended way to enable cross-site scripting is to use the `Access-Control
### XMLHttpRequests being stopped
-If you conclude with an XMLHttpRequest receiving `status=0` and `statusText=null`, this means the request was not allowed to be performed. It was [`UNSENT`](https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent). A likely cause for this is when the [`XMLHttpRequest` origin](https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin) (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently `open()`. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in other words, `open()`) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{domxref("Element/DOMActivate_event", "DOMActivate")}} event which is set once the terminated window has its {{domxref("Window/unload_event", "unload")}} event triggered.
+If you conclude with an XMLHttpRequest receiving `status=0` and `statusText=null`, this means the request was not allowed to be performed. It was [`UNSENT`](https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent). A likely cause for this is when the `XMLHttpRequest` origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently `open()`. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in other words, `open()`) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{domxref("Element/DOMActivate_event", "DOMActivate")}} event which is set once the terminated window has its {{domxref("Window/unload_event", "unload")}} event triggered.
## Specifications
diff --git a/files/en-us/web/api/xrviewport/y/index.md b/files/en-us/web/api/xrviewport/y/index.md
index 2a4d090b4f83a98..a85c6c4d3ef5942 100644
--- a/files/en-us/web/api/xrviewport/y/index.md
+++ b/files/en-us/web/api/xrviewport/y/index.md
@@ -1,6 +1,6 @@
---
title: "XRViewport: y property"
-short-title: "y"
+short-title: y
slug: Web/API/XRViewport/y
page-type: web-api-instance-property
browser-compat: api.XRViewport.y
diff --git a/files/en-us/web/api/xsltprocessor/basic_example/index.md b/files/en-us/web/api/xsltprocessor/basic_example/index.md
deleted file mode 100644
index 0ff487976a4f577..000000000000000
--- a/files/en-us/web/api/xsltprocessor/basic_example/index.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: XSLT Basic Example
-slug: Web/API/XSLTProcessor/Basic_Example
-page-type: guide
----
-
-{{APIRef("XSLT")}}
-
-This first example demonstrates the basics of setting up an XSLT transformation in a browser.
-The example takes an XML document that contains information about an article (title, list of authors and body text) and presents it in a human-readable form.
-
-The XML document (**example.xml**) is shown below.
-
-```xml
-
-
-
- My Article
-
- Mr. Foo
- Mr. Bar
-
- This is my article text.
-
-```
-
-The `?xml-stylesheet` processing instruction in the XML file specifies the XSLT stylesheet to apply in its `href` attribute.
-
-This XSL stylesheet file (**example.xsl**) is shown below:
-
-```xml
-
-
-
-
-
-
- Article -
- Authors:
-
-
-
- -
-
-
-
-```
-
-An XSLT stylesheet starts with the `xsl:stylesheet` element, which contains all the _templates_ used to create the final output.
-The example above has two templates - one that matches the root node and one that matches `Author` nodes.
-The template that matches the root node outputs the article's title and then says to process all templates (via `apply-templates`) that match `Author` nodes which are children of the `Authors` node.
-
-To try out the example:
-
-1. Create a directory in your file system and inside it create the files `example.xml` and `example.xsl` listed above
-2. [Start a local server](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server) in the directory containing the files.
- This allows you to browse the files in the directory as though they were hosted on the internet.
-
- > [!WARNING]
- > Opening the XML file directly from the file system will not work, because loading the stylesheet from the file system is a [cross-origin request](/en-US/docs/Web/HTTP/CORS), and will be disallowed by default.
- > Hosting the XML and stylesheet on the same local server ensures that they have the same origin.
-
-3. Open **example.xml** from the browser.
-4. The browser output is then as shown below:
-
- ```plain
- Browser Output :
-
- Article - My Article
- Authors:
- - Mr. Foo
- - Mr. Bar
- ```
diff --git a/files/en-us/web/api/xsltprocessor/index.md b/files/en-us/web/api/xsltprocessor/index.md
index 34b42b514227fd0..828bc1f8dfdee8b 100644
--- a/files/en-us/web/api/xsltprocessor/index.md
+++ b/files/en-us/web/api/xsltprocessor/index.md
@@ -103,7 +103,7 @@ const fragment = xsltProcessor.transformToFragment(xmlRef, document);
### Basic Example
-The basic example will load an XML file and apply a XSL transformation on it. These are the same files used in the [Generating HTML](/en-US/docs/Web/API/XSLTProcessor/Generating_HTML) example. The XML file describes an article and the XSL file formats the information for display.
+The basic example will load an XML file and apply a XSL transformation on it. These are the same files used in the [Generating HTML](/en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT#generating_html) example. The XML file describes an article and the XSL file formats the information for display.
#### XML
@@ -329,6 +329,7 @@ async function sort() {
## See also
- [XSLT](/en-US/docs/Web/XML/XSLT)
-- [What kind of language is XSLT?](https://developer.ibm.com/technologies/web-development/) at [IBM developer](https://developer.ibm.com/)
+- [Transforming with XSLT](/en-US/docs/Web/API/Document_Object_Model/Transforming_with_XSLT)
+- [Chapter 15 of the XML 1.1 Bible: XSL Transformations](https://www.ibiblio.org/xml/books/bible3/chapters/ch15.html)
- [XSLT Tutorial](https://zvon.org/xxl/XSLTutorial/Books/Book1/index.html) at [zvon.org](https://zvon.org/)
- [XPath Tutorial](https://zvon.org/xxl/XPathTutorial/General/examples.html) at [zvon.org](https://zvon.org/)
diff --git a/files/en-us/web/api/xsltprocessor/introduction/index.md b/files/en-us/web/api/xsltprocessor/introduction/index.md
deleted file mode 100644
index 67a8d9322cb19ad..000000000000000
--- a/files/en-us/web/api/xsltprocessor/introduction/index.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Introduction
-slug: Web/API/XSLTProcessor/Introduction
-page-type: guide
----
-
-{{APIRef("XSLT")}}
-
-One noticeable trend in W3C standards has been the effort to separate content from style. This would allow the same style to be reused for multiple content, as well as simplify maintenance and allow a quick (only modify one file) way to change the look of content.
-
-CSS (Cascade Style Sheets) was one of the first ways proposed by the W3C. CSS is a way to apply style rules to a web document. These style rules define how the document (the content) should be laid out. However, it has several limitations, such as lack of programming structures and ability to create complex layout models. CSS also has limited support for changing the position of an element.
-
-XSL (Extensible Stylesheet Language) Transformations are composed of two parts: XSL elements, which allow the transformation of an XML tree into another markup tree and XPath, a selection language for trees. XSLT takes an XML document (the content) and creates a brand new document based on the rules in the XSL stylesheet. This allows XSLT to add, remove and reorganize elements from the original XML document and thus allows more fine-grain control of the resulting document's structure.
-
-Transformations in XSLT are based on rules that consist of templates. Each template matches (using XPath) a certain fragment of the input XML document and then applies the substitution part on that fragment to create the new resulting document.
diff --git a/files/en-us/web/api/xsltprocessor/transformtodocument/index.md b/files/en-us/web/api/xsltprocessor/transformtodocument/index.md
index 8c2b0833a4c062b..6fbd44f903576a5 100644
--- a/files/en-us/web/api/xsltprocessor/transformtodocument/index.md
+++ b/files/en-us/web/api/xsltprocessor/transformtodocument/index.md
@@ -23,7 +23,7 @@ transformToDocument(source)
### Return value
-A {{domxref("Document")}}. The actual interface depends on the [output method](https://www.w3.org/TR/1999/REC-xslt-19991116#output) of the stylesheet:
+A {{domxref("Document")}}. The actual interface depends on the output method of the stylesheet, as specified by [``](/en-US/docs/Web/XML/XSLT/Reference/Element/output) element's `method`.
| Output method | Result interface |
| ------------- | ------------------------------------------------------------------------------------------------------ |
diff --git a/files/en-us/web/css/--_star_/index.md b/files/en-us/web/css/--_star_/index.md
index ee59057e8b1c141..7768a1e678eaa33 100644
--- a/files/en-us/web/css/--_star_/index.md
+++ b/files/en-us/web/css/--_star_/index.md
@@ -1,7 +1,7 @@
---
title: "Custom properties (--*): CSS variables"
slug: Web/CSS/--*
-page-type: guide
+page-type: css-property
browser-compat: css.properties.custom-property
---
@@ -89,5 +89,5 @@ Custom properties are scoped to the element(s) they are declared on, and partici
- The {{cssxref("var", "var()")}} function
- {{cssxref("@property")}} at-rule
-- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) guide
- [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module
diff --git a/files/en-us/web/css/-moz-float-edge/index.md b/files/en-us/web/css/-moz-float-edge/index.md
index b2a5af8a92f2a76..5d64a05a5ab99c2 100644
--- a/files/en-us/web/css/-moz-float-edge/index.md
+++ b/files/en-us/web/css/-moz-float-edge/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-float-edge"
+title: -moz-float-edge
slug: Web/CSS/-moz-float-edge
page-type: css-property
status:
diff --git a/files/en-us/web/css/-moz-force-broken-image-icon/index.md b/files/en-us/web/css/-moz-force-broken-image-icon/index.md
index da5f9fec1d19ba5..b0e1bd0424d83b5 100644
--- a/files/en-us/web/css/-moz-force-broken-image-icon/index.md
+++ b/files/en-us/web/css/-moz-force-broken-image-icon/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-force-broken-image-icon"
+title: -moz-force-broken-image-icon
slug: Web/CSS/-moz-force-broken-image-icon
page-type: css-property
status:
diff --git a/files/en-us/web/css/-moz-image-rect/index.md b/files/en-us/web/css/-moz-image-rect/index.md
index f64e06abf87e069..6e6a770131c2aa5 100644
--- a/files/en-us/web/css/-moz-image-rect/index.md
+++ b/files/en-us/web/css/-moz-image-rect/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-image-rect"
+title: -moz-image-rect
slug: Web/CSS/-moz-image-rect
page-type: css-function
status:
diff --git a/files/en-us/web/css/-moz-image-region/index.md b/files/en-us/web/css/-moz-image-region/index.md
index d6a044df7e7e482..e45c2442b4c6f8d 100644
--- a/files/en-us/web/css/-moz-image-region/index.md
+++ b/files/en-us/web/css/-moz-image-region/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-image-region"
+title: -moz-image-region
slug: Web/CSS/-moz-image-region
page-type: css-property
status:
diff --git a/files/en-us/web/css/-moz-orient/index.md b/files/en-us/web/css/-moz-orient/index.md
index f4d2a17d1f6c264..2c9022558570bcc 100644
--- a/files/en-us/web/css/-moz-orient/index.md
+++ b/files/en-us/web/css/-moz-orient/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-orient"
+title: -moz-orient
slug: Web/CSS/-moz-orient
page-type: css-property
status:
diff --git a/files/en-us/web/css/-moz-user-focus/index.md b/files/en-us/web/css/-moz-user-focus/index.md
index fea22c919d770d5..5e6ab4cde71a39c 100644
--- a/files/en-us/web/css/-moz-user-focus/index.md
+++ b/files/en-us/web/css/-moz-user-focus/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-user-focus"
+title: -moz-user-focus
slug: Web/CSS/-moz-user-focus
page-type: css-property
status:
diff --git a/files/en-us/web/css/-moz-user-input/index.md b/files/en-us/web/css/-moz-user-input/index.md
index 32f4d620a462cd0..3fbadb6a3766736 100644
--- a/files/en-us/web/css/-moz-user-input/index.md
+++ b/files/en-us/web/css/-moz-user-input/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-user-input"
+title: -moz-user-input
slug: Web/CSS/-moz-user-input
page-type: css-property
status:
@@ -14,7 +14,7 @@ In Mozilla applications, **`-moz-user-input`** determines if an element will acc
As of Firefox 60, this property can no longer grant an element the ability to accept user input if it normally does not. It may only be used to disable user input.
-> **Note:** `-moz-user-input` was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations). A similar property, `user-focus`, was proposed in [early drafts of a predecessor of the User Interface for CSS3 specification](https://www.w3.org/TR/2000/WD-css3-userint-20000216), but was rejected by the working group.
+The `user-input` property is currently not on a standards track.
## Syntax
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 c99fda49b2f3bc2..43c9becefd3591a 100644
--- a/files/en-us/web/css/-webkit-border-before/index.md
+++ b/files/en-us/web/css/-webkit-border-before/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-border-before"
+title: -webkit-border-before
slug: Web/CSS/-webkit-border-before
page-type: css-shorthand-property
status:
diff --git a/files/en-us/web/css/-webkit-box-reflect/index.md b/files/en-us/web/css/-webkit-box-reflect/index.md
index 21e243f6c1c798b..d7624382efa8f10 100644
--- a/files/en-us/web/css/-webkit-box-reflect/index.md
+++ b/files/en-us/web/css/-webkit-box-reflect/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-box-reflect"
+title: -webkit-box-reflect
slug: Web/CSS/-webkit-box-reflect
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-mask-box-image/index.md b/files/en-us/web/css/-webkit-mask-box-image/index.md
index cac4ac35164ffa2..5bbeecd34f4ea4c 100644
--- a/files/en-us/web/css/-webkit-mask-box-image/index.md
+++ b/files/en-us/web/css/-webkit-mask-box-image/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-mask-box-image"
+title: -webkit-mask-box-image
slug: Web/CSS/-webkit-mask-box-image
page-type: css-shorthand-property
status:
@@ -78,10 +78,10 @@ Border repeat styles, when included, are interpreted in the order of `
## Formal definition
-- [Initial value](/en-US/docs/Web/CSS/initial_value): `none`
+- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value): `none`
- Applies to: all elements
-- [Inherited](/en-US/docs/Web/CSS/Inheritance): no
-- [Computed value](/en-US/docs/Web/CSS/computed_value): as specified
+- [Inherited](/en-US/docs/Web/CSS/CSS_cascade/Inheritance): no
+- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value): as specified
## Formal syntax
diff --git a/files/en-us/web/css/-webkit-mask-composite/index.md b/files/en-us/web/css/-webkit-mask-composite/index.md
index 61248db0ccb8725..c8160cc491e9e46 100644
--- a/files/en-us/web/css/-webkit-mask-composite/index.md
+++ b/files/en-us/web/css/-webkit-mask-composite/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-mask-composite"
+title: -webkit-mask-composite
slug: Web/CSS/-webkit-mask-composite
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-mask-position-x/index.md b/files/en-us/web/css/-webkit-mask-position-x/index.md
index 3901d064c89a05c..5e6db4510dd7acc 100644
--- a/files/en-us/web/css/-webkit-mask-position-x/index.md
+++ b/files/en-us/web/css/-webkit-mask-position-x/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-mask-position-x"
+title: -webkit-mask-position-x
slug: Web/CSS/-webkit-mask-position-x
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-mask-position-y/index.md b/files/en-us/web/css/-webkit-mask-position-y/index.md
index 0a7d1c899d4cb80..be6fe5c732ca04a 100644
--- a/files/en-us/web/css/-webkit-mask-position-y/index.md
+++ b/files/en-us/web/css/-webkit-mask-position-y/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-mask-position-y"
+title: -webkit-mask-position-y
slug: Web/CSS/-webkit-mask-position-y
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-mask-repeat-x/index.md b/files/en-us/web/css/-webkit-mask-repeat-x/index.md
index 7a6c6d172d37a3a..cb8cffee664070f 100644
--- a/files/en-us/web/css/-webkit-mask-repeat-x/index.md
+++ b/files/en-us/web/css/-webkit-mask-repeat-x/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-mask-repeat-x"
+title: -webkit-mask-repeat-x
slug: Web/CSS/-webkit-mask-repeat-x
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-mask-repeat-y/index.md b/files/en-us/web/css/-webkit-mask-repeat-y/index.md
index 3f0b263f7d4a6c3..f948d6331181961 100644
--- a/files/en-us/web/css/-webkit-mask-repeat-y/index.md
+++ b/files/en-us/web/css/-webkit-mask-repeat-y/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-mask-repeat-y"
+title: -webkit-mask-repeat-y
slug: Web/CSS/-webkit-mask-repeat-y
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-tap-highlight-color/index.md b/files/en-us/web/css/-webkit-tap-highlight-color/index.md
index 95fa428e0df07fa..1a1f444d1895fae 100644
--- a/files/en-us/web/css/-webkit-tap-highlight-color/index.md
+++ b/files/en-us/web/css/-webkit-tap-highlight-color/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-tap-highlight-color"
+title: -webkit-tap-highlight-color
slug: Web/CSS/-webkit-tap-highlight-color
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-text-fill-color/index.md b/files/en-us/web/css/-webkit-text-fill-color/index.md
index 6e3588415ac83a1..26d9091867421ee 100644
--- a/files/en-us/web/css/-webkit-text-fill-color/index.md
+++ b/files/en-us/web/css/-webkit-text-fill-color/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-text-fill-color"
+title: -webkit-text-fill-color
slug: Web/CSS/-webkit-text-fill-color
page-type: css-property
browser-compat: css.properties.-webkit-text-fill-color
diff --git a/files/en-us/web/css/-webkit-text-security/index.md b/files/en-us/web/css/-webkit-text-security/index.md
index 5d87857df70539a..bb100e90cdfe1f3 100644
--- a/files/en-us/web/css/-webkit-text-security/index.md
+++ b/files/en-us/web/css/-webkit-text-security/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-text-security"
+title: -webkit-text-security
slug: Web/CSS/-webkit-text-security
page-type: css-property
status:
diff --git a/files/en-us/web/css/-webkit-text-stroke-color/index.md b/files/en-us/web/css/-webkit-text-stroke-color/index.md
index 1d4bf99f5e356bd..f2524ead7ed7333 100644
--- a/files/en-us/web/css/-webkit-text-stroke-color/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke-color/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-text-stroke-color"
+title: -webkit-text-stroke-color
slug: Web/CSS/-webkit-text-stroke-color
page-type: css-property
browser-compat: css.properties.-webkit-text-stroke-color
diff --git a/files/en-us/web/css/-webkit-text-stroke-width/index.md b/files/en-us/web/css/-webkit-text-stroke-width/index.md
index e20cc7d84ed0312..a37ee0c326ab23a 100644
--- a/files/en-us/web/css/-webkit-text-stroke-width/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke-width/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-text-stroke-width"
+title: -webkit-text-stroke-width
slug: Web/CSS/-webkit-text-stroke-width
page-type: css-property
browser-compat: css.properties.-webkit-text-stroke-width
diff --git a/files/en-us/web/css/-webkit-text-stroke/index.md b/files/en-us/web/css/-webkit-text-stroke/index.md
index 50035d1abbf6050..7cc775149ba738b 100644
--- a/files/en-us/web/css/-webkit-text-stroke/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-text-stroke"
+title: -webkit-text-stroke
slug: Web/CSS/-webkit-text-stroke
page-type: css-shorthand-property
browser-compat: css.properties.-webkit-text-stroke
diff --git a/files/en-us/web/css/-webkit-touch-callout/index.md b/files/en-us/web/css/-webkit-touch-callout/index.md
index c3f0c183913c688..68065479213c4b0 100644
--- a/files/en-us/web/css/-webkit-touch-callout/index.md
+++ b/files/en-us/web/css/-webkit-touch-callout/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-touch-callout"
+title: -webkit-touch-callout
slug: Web/CSS/-webkit-touch-callout
page-type: css-property
status:
diff --git a/files/en-us/web/css/@counter-style/index.md b/files/en-us/web/css/@counter-style/index.md
index 25fc5c9be6b0766..139d39c6ed66023 100644
--- a/files/en-us/web/css/@counter-style/index.md
+++ b/files/en-us/web/css/@counter-style/index.md
@@ -31,7 +31,7 @@ The `@counter-style` at-rule is identified by a [counter style name](#counter_st
- ``
- - : Provides a name for your counter style. It is specified as a case-sensitive {{cssxref("custom-ident")}} without quotes. The value should not be equal to `none`. Like all custom identifiers, the value of your counter style can't be a [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Types#css-wide_keywords). Avoid other enumerated CSS property values, including values of [list](/en-US/docs/Web/CSS/CSS_lists#properties) and [counter style](/en-US/docs/Web/CSS/CSS_counter_styles#properties) properties. The name of your counter can't be the case-insensitive {{cssxref("list-style-type")}} property values of `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed`.
+ - : Provides a name for your counter style. It is specified as a case-sensitive {{cssxref("custom-ident")}} without quotes. The value should not be equal to `none`. Like all custom identifiers, the value of your counter style can't be a [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types#css-wide_keywords). Avoid other enumerated CSS property values, including values of [list](/en-US/docs/Web/CSS/CSS_lists#properties) and [counter style](/en-US/docs/Web/CSS/CSS_counter_styles#properties) properties. The name of your counter can't be the case-insensitive {{cssxref("list-style-type")}} property values of `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed`.
> [!NOTE]
> The non-overridable counter style names `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed` cannot be used as the name of a custom counter. However, they are valid in other contexts where the `` data type is expected, such as in `system: extends `.
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 2af4d30e008c818..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 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 {
@@ -234,7 +234,7 @@ We include a variable font, ["League Mono"](https://www.theleagueofmoveabletype.
#### HTML
-We include a paragraph with `` initially set to `400`, as that is the the default font-weight for unstyled paragraph text. This paragraph is nestled between two other paragraphs, so you can compare rendered versus declared font weight values.
+We include a paragraph with `` initially set to `400`, as that is the default font-weight for unstyled paragraph text. This paragraph is nestled between two other paragraphs, so you can compare rendered versus declared font weight values.
We include an {{htmlelement("input/range")}} of type `range`, nested in a {{htmlelement("label")}}, setting the `step` to `50`.
diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md
index d1d430bd1c6e05a..41c62b8e8ef674b 100644
--- a/files/en-us/web/css/@font-face/index.md
+++ b/files/en-us/web/css/@font-face/index.md
@@ -85,7 +85,8 @@ The `@font-face` at-rule may be used not only at the top level of a CSS, but als
.className {
@font-face {
font-family: "MyHelvetica";
- src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+ src:
+ local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
@@ -128,7 +129,8 @@ In this example, the user's local copy of "Helvetica Neue Bold" is used; if the
```css
@font-face {
font-family: "MyHelvetica";
- src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+ src:
+ local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
diff --git a/files/en-us/web/css/@font-palette-values/index.md b/files/en-us/web/css/@font-palette-values/index.md
index 67c87a9e8d1417a..a943a3c3c5d9361 100644
--- a/files/en-us/web/css/@font-palette-values/index.md
+++ b/files/en-us/web/css/@font-palette-values/index.md
@@ -20,7 +20,7 @@ The **`@font-palette-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/
}
```
-The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](/en-US/docs/Web/CSS/var).
+The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](/en-US/docs/Web/CSS/var).
### Descriptors
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/@media/-moz-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md
index 2340c67e3df8f29..e85b6e95f657274 100644
--- a/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md
@@ -1,5 +1,5 @@
---
-title: "-moz-device-pixel-ratio"
+title: -moz-device-pixel-ratio
slug: Web/CSS/@media/-moz-device-pixel-ratio
page-type: css-media-feature
status:
diff --git a/files/en-us/web/css/@media/-webkit-animation/index.md b/files/en-us/web/css/@media/-webkit-animation/index.md
index df3065b45625230..2de17b899593670 100644
--- a/files/en-us/web/css/@media/-webkit-animation/index.md
+++ b/files/en-us/web/css/@media/-webkit-animation/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-animation"
+title: -webkit-animation
slug: Web/CSS/@media/-webkit-animation
page-type: css-media-feature
status:
diff --git a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
index 728e0cadc9ef1e2..a76e75f2920a344 100644
--- a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-device-pixel-ratio"
+title: -webkit-device-pixel-ratio
slug: Web/CSS/@media/-webkit-device-pixel-ratio
page-type: css-media-feature
browser-compat: css.at-rules.media.-webkit-device-pixel-ratio
diff --git a/files/en-us/web/css/@media/-webkit-transform-2d/index.md b/files/en-us/web/css/@media/-webkit-transform-2d/index.md
index 7d7baa0fb5093d2..d7bb0f8adbe0a68 100644
--- a/files/en-us/web/css/@media/-webkit-transform-2d/index.md
+++ b/files/en-us/web/css/@media/-webkit-transform-2d/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-transform-2d"
+title: -webkit-transform-2d
slug: Web/CSS/@media/-webkit-transform-2d
page-type: css-media-feature
status:
diff --git a/files/en-us/web/css/@media/-webkit-transform-3d/index.md b/files/en-us/web/css/@media/-webkit-transform-3d/index.md
index 5f716c0ef9913b8..e71a8bd522d6ba8 100644
--- a/files/en-us/web/css/@media/-webkit-transform-3d/index.md
+++ b/files/en-us/web/css/@media/-webkit-transform-3d/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-transform-3d"
+title: -webkit-transform-3d
slug: Web/CSS/@media/-webkit-transform-3d
page-type: css-media-feature
browser-compat: css.at-rules.media.-webkit-transform-3d
diff --git a/files/en-us/web/css/@media/-webkit-transition/index.md b/files/en-us/web/css/@media/-webkit-transition/index.md
index d97e9360e209864..fe6fd792ccf6453 100644
--- a/files/en-us/web/css/@media/-webkit-transition/index.md
+++ b/files/en-us/web/css/@media/-webkit-transition/index.md
@@ -1,5 +1,5 @@
---
-title: "-webkit-transition"
+title: -webkit-transition
slug: Web/CSS/@media/-webkit-transition
page-type: css-media-feature
status:
diff --git a/files/en-us/web/css/@media/device-posture/index.md b/files/en-us/web/css/@media/device-posture/index.md
new file mode 100644
index 000000000000000..df5b5fca17a1ce0
--- /dev/null
+++ b/files/en-us/web/css/@media/device-posture/index.md
@@ -0,0 +1,56 @@
+---
+title: device-posture
+slug: Web/CSS/@media/device-posture
+page-type: css-media-feature
+status:
+ - experimental
+browser-compat: css.at-rules.media.device-posture
+---
+
+{{CSSRef}}{{seecompattable}}
+
+The **`device-posture`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to detect the device's [current posture](/en-US/docs/Web/API/Device_Posture_API), that is, whether the viewport is in a flat (`continuous`) or folded state (`folded`).
+
+## Syntax
+
+The `device-posture` feature is specified as a keyword value chosen from the list below:
+
+- `continuous`
+ - : Indicates a flat screen state. Foldable devices are `continuous` while they are flat; either fully opened or fully closed. Non-foldable devices are considered flat and therefore always `continuous` — this includes seamless curved displays and standard desktop, laptop, tablet, and mobile screens.
+- `folded`
+ - : Indicates a folded screen state. Foldable devices are `folded` while used in a book or laptop posture.
+
+## Examples
+
+In this example, the `device-posture` media feature detects when a device is in a folded posture, adding a margin based on its [`orientation`](/en-US/docs/Web/CSS/@media/orientation) to create a larger gutter between the application's two panels for easier reading.
+
+```css
+@media (device-posture: folded) and (orientation: landscape) {
+ .list-view {
+ margin-inline-end: 60px;
+ }
+}
+
+@media (device-posture: folded) and (orientation: portrait) {
+ .list-view {
+ margin-block-end: 60px;
+ }
+}
+```
+
+To see the above code in action, view the [Device Posture API demo](https://mdn.github.io/dom-examples/device-posture-api/) on a foldable device if possible. Current browser developer tools enable emulating foldable devices, but don't include emulation of partially folded devices — only fully open or closed devices — so they will always return `continuous`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DevicePosture")}}
+- [Device Posture API](/en-US/docs/Web/API/Device_Posture_API)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md
index 26db828a46c7c42..a3059db4fd3b8e2 100644
--- a/files/en-us/web/css/@media/index.md
+++ b/files/en-us/web/css/@media/index.md
@@ -78,6 +78,8 @@ Media feature expressions test for their presence, value, or range of values, an
- : Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4.
- {{cssxref("@media/device-height", "device-height")}}
- : Height of the rendering surface of the output device. Deprecated in Media Queries Level 4.
+- {{cssxref("@media/device-posture", "device-posture")}}
+ - : Detects the device's current posture, that is, whether the viewport is in a flat or folded state. Defined in the [Device Posture API](/en-US/docs/Web/API/Device_Posture_API).
- {{cssxref("@media/device-width", "device-width")}}
- : Width of the rendering surface of the output device. Deprecated in Media Queries Level 4.
- {{cssxref("@media/display-mode", "display-mode")}}
diff --git a/files/en-us/web/css/@media/overflow-block/index.md b/files/en-us/web/css/@media/overflow-block/index.md
index a3abdf5b6d410e4..bd47c82f54a0605 100644
--- a/files/en-us/web/css/@media/overflow-block/index.md
+++ b/files/en-us/web/css/@media/overflow-block/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.overflow-block
{{CSSRef}}
-The **`overflow-block`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the block axis.
+The **`overflow-block`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) along the block axis.
> [!NOTE]
> The `overflow-block` property does not determine whether overflow occurs; rather, it reveals the device's handling of such overflow. Typically, on screens in most browsers, the behavior will be "scroll": when content exceeds the available vertical space, the device allows you to scroll to access the overflowed content.
diff --git a/files/en-us/web/css/@media/overflow-inline/index.md b/files/en-us/web/css/@media/overflow-inline/index.md
index 47a4f5552ad02cd..c3f1e452a3a1154 100644
--- a/files/en-us/web/css/@media/overflow-inline/index.md
+++ b/files/en-us/web/css/@media/overflow-inline/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.overflow-inline
{{CSSRef}}
-The **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the inline axis.
+The **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) along the inline axis.
> [!NOTE]
> The `overflow-inline` property does not determine whether overflow occurs; rather, it reveals the device's handling of such overflow. Typically, on screens in most browsers, the behavior will be "scroll": when content exceeds the available horizontal space, the device allows you to scroll to access the overflowed content.
diff --git a/files/en-us/web/css/@media/prefers-reduced-data/index.md b/files/en-us/web/css/@media/prefers-reduced-data/index.md
index d3f27015486c48d..be048af526f9359 100644
--- a/files/en-us/web/css/@media/prefers-reduced-data/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-data/index.md
@@ -60,9 +60,10 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
local("Montserrat Regular"),
local("Montserrat-Regular"),
url("fonts/montserrat-regular.woff2") format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
- U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
- U+2212, U+2215, U+FEFF, U+FFFD;
+ unicode-range:
+ U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+ U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+ U+FEFF, U+FFFD;
}
}
diff --git a/files/en-us/web/css/@media/prefers-reduced-motion/index.md b/files/en-us/web/css/@media/prefers-reduced-motion/index.md
index 87f168b0e769349..e7231232dd0eeed 100644
--- a/files/en-us/web/css/@media/prefers-reduced-motion/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-motion/index.md
@@ -46,7 +46,7 @@ For Firefox, the `reduce` request is honoured if:
## Examples
-This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/Specificity) but coming later in the [CSS source order](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#source_order), will take precedence. As a result, the [animation](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger.
+This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) but coming later in the [CSS source order](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#source_order), will take precedence. As a result, the [animation](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger.
### Toning down the animation scaling
diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md
index 6eec0d5f5ec6e31..7e54de53d55b2f5 100644
--- a/files/en-us/web/css/@property/index.md
+++ b/files/en-us/web/css/@property/index.md
@@ -141,5 +141,5 @@ For item three, the `--item-size` value gets set to `1000px`. While `1000px` is
- [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API)
- [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API)
- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs)
-- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) guide
- [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module
diff --git a/files/en-us/web/css/@scope/index.md b/files/en-us/web/css/@scope/index.md
index ece82eefdf94af6..b93b2b356aceb8f 100644
--- a/files/en-us/web/css/@scope/index.md
+++ b/files/en-us/web/css/@scope/index.md
@@ -278,7 +278,7 @@ To fix this, you can use `@scope` as follows:
Now the innermost paragraph is correctly colored black. This is because it is only one DOM tree hierarchy level away from the `.light-theme` scope root, but two levels away from the `.dark-theme` scope root. Therefore, the light style wins.
> [!NOTE]
-> Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as [importance](/en-US/docs/Web/CSS/important), [layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), and [specificity](/en-US/docs/Web/CSS/Specificity).
+> Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as [importance](/en-US/docs/Web/CSS/important), [layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), and [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
## Formal syntax
diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md
index 34dcb2ea2f5ea40..daa5941bb7924f2 100644
--- a/files/en-us/web/css/@starting-style/index.md
+++ b/files/en-us/web/css/@starting-style/index.md
@@ -64,7 +64,7 @@ To specify the starting values of the popover's properties that will be animated
```
> [!NOTE]
-> The `@starting-style` at-rule and the "original rule" have the same {{cssxref("specificity")}}. To ensure that starting styles get applied, include the `@starting-style` at-rule _after_ the "original rule". If you specify the `@starting-style` at-rule before the "original rule", the original styles will override the starting styles.
+> The `@starting-style` at-rule and the "original rule" have the same [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). To ensure that starting styles get applied, include the `@starting-style` at-rule _after_ the "original rule". If you specify the `@starting-style` at-rule before the "original rule", the original styles will override the starting styles.
To specify the starting style for the popover using the nested method, you can nest the `@starting-style` block inside the "original rule":
diff --git a/files/en-us/web/css/_colon_-moz-broken/index.md b/files/en-us/web/css/_colon_-moz-broken/index.md
index 3edb648bea47bac..b8cbca4da0988fd 100644
--- a/files/en-us/web/css/_colon_-moz-broken/index.md
+++ b/files/en-us/web/css/_colon_-moz-broken/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-broken"
+title: :-moz-broken
slug: Web/CSS/:-moz-broken
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-drag-over/index.md b/files/en-us/web/css/_colon_-moz-drag-over/index.md
index 83092dcd1940510..7dde29572b29a62 100644
--- a/files/en-us/web/css/_colon_-moz-drag-over/index.md
+++ b/files/en-us/web/css/_colon_-moz-drag-over/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-drag-over"
+title: :-moz-drag-over
slug: Web/CSS/:-moz-drag-over
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-first-node/index.md b/files/en-us/web/css/_colon_-moz-first-node/index.md
index faa0ee19045db4b..0dc1d2894f64575 100644
--- a/files/en-us/web/css/_colon_-moz-first-node/index.md
+++ b/files/en-us/web/css/_colon_-moz-first-node/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-first-node"
+title: :-moz-first-node
slug: Web/CSS/:-moz-first-node
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-handler-blocked/index.md b/files/en-us/web/css/_colon_-moz-handler-blocked/index.md
index 127ca3ae7ad76ee..4c0129d984f1036 100644
--- a/files/en-us/web/css/_colon_-moz-handler-blocked/index.md
+++ b/files/en-us/web/css/_colon_-moz-handler-blocked/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-handler-blocked"
+title: :-moz-handler-blocked
slug: Web/CSS/:-moz-handler-blocked
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-handler-crashed/index.md b/files/en-us/web/css/_colon_-moz-handler-crashed/index.md
index c84d7a9f0fefea4..cbc7a9b6f3bf958 100644
--- a/files/en-us/web/css/_colon_-moz-handler-crashed/index.md
+++ b/files/en-us/web/css/_colon_-moz-handler-crashed/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-handler-crashed"
+title: :-moz-handler-crashed
slug: Web/CSS/:-moz-handler-crashed
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-handler-disabled/index.md b/files/en-us/web/css/_colon_-moz-handler-disabled/index.md
index bd02d557e2ecfba..573bbae17190f1c 100644
--- a/files/en-us/web/css/_colon_-moz-handler-disabled/index.md
+++ b/files/en-us/web/css/_colon_-moz-handler-disabled/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-handler-disabled"
+title: :-moz-handler-disabled
slug: Web/CSS/:-moz-handler-disabled
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-last-node/index.md b/files/en-us/web/css/_colon_-moz-last-node/index.md
index e5de2c87d485293..ae9526d377f6440 100644
--- a/files/en-us/web/css/_colon_-moz-last-node/index.md
+++ b/files/en-us/web/css/_colon_-moz-last-node/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-last-node"
+title: :-moz-last-node
slug: Web/CSS/:-moz-last-node
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-loading/index.md b/files/en-us/web/css/_colon_-moz-loading/index.md
index ed4888786312540..82ed0d1dff56bd8 100644
--- a/files/en-us/web/css/_colon_-moz-loading/index.md
+++ b/files/en-us/web/css/_colon_-moz-loading/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-loading"
+title: :-moz-loading
slug: Web/CSS/:-moz-loading
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-locale-dir_ltr/index.md b/files/en-us/web/css/_colon_-moz-locale-dir_ltr/index.md
index 6ff0f224f4e31d2..4ac00a39785782b 100644
--- a/files/en-us/web/css/_colon_-moz-locale-dir_ltr/index.md
+++ b/files/en-us/web/css/_colon_-moz-locale-dir_ltr/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-locale-dir(ltr)"
+title: :-moz-locale-dir(ltr)
slug: Web/CSS/:-moz-locale-dir_ltr
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-locale-dir_rtl/index.md b/files/en-us/web/css/_colon_-moz-locale-dir_rtl/index.md
index 5fce700f6cda5f2..eb855b273a6a721 100644
--- a/files/en-us/web/css/_colon_-moz-locale-dir_rtl/index.md
+++ b/files/en-us/web/css/_colon_-moz-locale-dir_rtl/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-locale-dir(rtl)"
+title: :-moz-locale-dir(rtl)
slug: Web/CSS/:-moz-locale-dir_rtl
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-only-whitespace/index.md b/files/en-us/web/css/_colon_-moz-only-whitespace/index.md
index 661de785053075c..ffa88b868484ac5 100644
--- a/files/en-us/web/css/_colon_-moz-only-whitespace/index.md
+++ b/files/en-us/web/css/_colon_-moz-only-whitespace/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-only-whitespace"
+title: :-moz-only-whitespace
slug: Web/CSS/:-moz-only-whitespace
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-submit-invalid/index.md b/files/en-us/web/css/_colon_-moz-submit-invalid/index.md
index 6f11b631fce0f60..d4c646c7f89c884 100644
--- a/files/en-us/web/css/_colon_-moz-submit-invalid/index.md
+++ b/files/en-us/web/css/_colon_-moz-submit-invalid/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-submit-invalid"
+title: :-moz-submit-invalid
slug: Web/CSS/:-moz-submit-invalid
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-suppressed/index.md b/files/en-us/web/css/_colon_-moz-suppressed/index.md
index 093773589cdb8f1..dea4ba93d028596 100644
--- a/files/en-us/web/css/_colon_-moz-suppressed/index.md
+++ b/files/en-us/web/css/_colon_-moz-suppressed/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-suppressed"
+title: :-moz-suppressed
slug: Web/CSS/:-moz-suppressed
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-user-disabled/index.md b/files/en-us/web/css/_colon_-moz-user-disabled/index.md
index 7491ee647d7ac98..8976780efd4fccd 100644
--- a/files/en-us/web/css/_colon_-moz-user-disabled/index.md
+++ b/files/en-us/web/css/_colon_-moz-user-disabled/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-user-disabled"
+title: :-moz-user-disabled
slug: Web/CSS/:-moz-user-disabled
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_-moz-window-inactive/index.md b/files/en-us/web/css/_colon_-moz-window-inactive/index.md
index ace793d3e6c0884..31c3835372731b4 100644
--- a/files/en-us/web/css/_colon_-moz-window-inactive/index.md
+++ b/files/en-us/web/css/_colon_-moz-window-inactive/index.md
@@ -1,5 +1,5 @@
---
-title: ":-moz-window-inactive"
+title: :-moz-window-inactive
slug: Web/CSS/:-moz-window-inactive
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_active/index.md b/files/en-us/web/css/_colon_active/index.md
index f89689bd7769eef..ef6e6bb44bcab7f 100644
--- a/files/en-us/web/css/_colon_active/index.md
+++ b/files/en-us/web/css/_colon_active/index.md
@@ -1,5 +1,5 @@
---
-title: ":active"
+title: :active
slug: Web/CSS/:active
page-type: css-pseudo-class
browser-compat: css.selectors.active
diff --git a/files/en-us/web/css/_colon_any-link/index.md b/files/en-us/web/css/_colon_any-link/index.md
index ee83224c8548bf6..0f71ed287516929 100644
--- a/files/en-us/web/css/_colon_any-link/index.md
+++ b/files/en-us/web/css/_colon_any-link/index.md
@@ -1,5 +1,5 @@
---
-title: ":any-link"
+title: :any-link
slug: Web/CSS/:any-link
page-type: css-pseudo-class
browser-compat: css.selectors.any-link
diff --git a/files/en-us/web/css/_colon_autofill/index.md b/files/en-us/web/css/_colon_autofill/index.md
index 8576d220d4caf78..0ab9173284ac066 100644
--- a/files/en-us/web/css/_colon_autofill/index.md
+++ b/files/en-us/web/css/_colon_autofill/index.md
@@ -1,5 +1,5 @@
---
-title: ":autofill"
+title: :autofill
slug: Web/CSS/:autofill
page-type: css-pseudo-class
browser-compat: css.selectors.autofill
diff --git a/files/en-us/web/css/_colon_blank/index.md b/files/en-us/web/css/_colon_blank/index.md
index d264d3267933ddb..805ccfd419ce1a5 100644
--- a/files/en-us/web/css/_colon_blank/index.md
+++ b/files/en-us/web/css/_colon_blank/index.md
@@ -1,5 +1,5 @@
---
-title: ":blank"
+title: :blank
slug: Web/CSS/:blank
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_buffering/index.md b/files/en-us/web/css/_colon_buffering/index.md
index 38c1aeab29c871c..08f8762c8e43627 100644
--- a/files/en-us/web/css/_colon_buffering/index.md
+++ b/files/en-us/web/css/_colon_buffering/index.md
@@ -1,5 +1,5 @@
---
-title: ":buffering"
+title: :buffering
slug: Web/CSS/:buffering
page-type: css-pseudo-class
browser-compat: css.selectors.buffering
diff --git a/files/en-us/web/css/_colon_checked/index.md b/files/en-us/web/css/_colon_checked/index.md
index 239f486e08a4cd5..b532cf0ba0713b7 100644
--- a/files/en-us/web/css/_colon_checked/index.md
+++ b/files/en-us/web/css/_colon_checked/index.md
@@ -1,5 +1,5 @@
---
-title: ":checked"
+title: :checked
slug: Web/CSS/:checked
page-type: css-pseudo-class
browser-compat: css.selectors.checked
diff --git a/files/en-us/web/css/_colon_current/index.md b/files/en-us/web/css/_colon_current/index.md
index 6d7c897a3846030..81bf9f1adf75fd1 100644
--- a/files/en-us/web/css/_colon_current/index.md
+++ b/files/en-us/web/css/_colon_current/index.md
@@ -1,5 +1,5 @@
---
-title: ":current"
+title: :current
slug: Web/CSS/:current
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_default/index.md b/files/en-us/web/css/_colon_default/index.md
index 98fea05f2d8a6a6..0820e313410b397 100644
--- a/files/en-us/web/css/_colon_default/index.md
+++ b/files/en-us/web/css/_colon_default/index.md
@@ -1,5 +1,5 @@
---
-title: ":default"
+title: :default
slug: Web/CSS/:default
page-type: css-pseudo-class
browser-compat: css.selectors.default
diff --git a/files/en-us/web/css/_colon_defined/index.md b/files/en-us/web/css/_colon_defined/index.md
index 0c49fdb055a424f..514bbca6445f2c2 100644
--- a/files/en-us/web/css/_colon_defined/index.md
+++ b/files/en-us/web/css/_colon_defined/index.md
@@ -1,5 +1,5 @@
---
-title: ":defined"
+title: :defined
slug: Web/CSS/:defined
page-type: css-pseudo-class
browser-compat: css.selectors.defined
diff --git a/files/en-us/web/css/_colon_dir/index.md b/files/en-us/web/css/_colon_dir/index.md
index 1a2bbb1d3a0ac9a..0c78c223d2e290a 100644
--- a/files/en-us/web/css/_colon_dir/index.md
+++ b/files/en-us/web/css/_colon_dir/index.md
@@ -1,5 +1,5 @@
---
-title: ":dir()"
+title: :dir()
slug: Web/CSS/:dir
page-type: css-pseudo-class
browser-compat: css.selectors.dir
diff --git a/files/en-us/web/css/_colon_disabled/index.md b/files/en-us/web/css/_colon_disabled/index.md
index 57a6fd76f097345..bdff2663ceb1d63 100644
--- a/files/en-us/web/css/_colon_disabled/index.md
+++ b/files/en-us/web/css/_colon_disabled/index.md
@@ -1,5 +1,5 @@
---
-title: ":disabled"
+title: :disabled
slug: Web/CSS/:disabled
page-type: css-pseudo-class
browser-compat: css.selectors.disabled
diff --git a/files/en-us/web/css/_colon_empty/index.md b/files/en-us/web/css/_colon_empty/index.md
index 85504b7248765e4..42021ace0930c20 100644
--- a/files/en-us/web/css/_colon_empty/index.md
+++ b/files/en-us/web/css/_colon_empty/index.md
@@ -1,5 +1,5 @@
---
-title: ":empty"
+title: :empty
slug: Web/CSS/:empty
page-type: css-pseudo-class
browser-compat: css.selectors.empty
diff --git a/files/en-us/web/css/_colon_enabled/index.md b/files/en-us/web/css/_colon_enabled/index.md
index 6e1ba82981ab522..0bf8ddf33ce562f 100644
--- a/files/en-us/web/css/_colon_enabled/index.md
+++ b/files/en-us/web/css/_colon_enabled/index.md
@@ -1,5 +1,5 @@
---
-title: ":enabled"
+title: :enabled
slug: Web/CSS/:enabled
page-type: css-pseudo-class
browser-compat: css.selectors.enabled
diff --git a/files/en-us/web/css/_colon_first-child/index.md b/files/en-us/web/css/_colon_first-child/index.md
index 59e8a5838736f63..71b71c470e22d2c 100644
--- a/files/en-us/web/css/_colon_first-child/index.md
+++ b/files/en-us/web/css/_colon_first-child/index.md
@@ -1,5 +1,5 @@
---
-title: ":first-child"
+title: :first-child
slug: Web/CSS/:first-child
page-type: css-pseudo-class
browser-compat: css.selectors.first-child
diff --git a/files/en-us/web/css/_colon_first-of-type/index.md b/files/en-us/web/css/_colon_first-of-type/index.md
index a7fb63290e394da..7971657272fae43 100644
--- a/files/en-us/web/css/_colon_first-of-type/index.md
+++ b/files/en-us/web/css/_colon_first-of-type/index.md
@@ -1,5 +1,5 @@
---
-title: ":first-of-type"
+title: :first-of-type
slug: Web/CSS/:first-of-type
page-type: css-pseudo-class
browser-compat: css.selectors.first-of-type
diff --git a/files/en-us/web/css/_colon_first/index.md b/files/en-us/web/css/_colon_first/index.md
index 756e512c2fd39fe..f34d07ed84cc4da 100644
--- a/files/en-us/web/css/_colon_first/index.md
+++ b/files/en-us/web/css/_colon_first/index.md
@@ -1,5 +1,5 @@
---
-title: ":first"
+title: :first
slug: Web/CSS/:first
page-type: css-pseudo-class
browser-compat: css.selectors.first
diff --git a/files/en-us/web/css/_colon_focus-visible/index.md b/files/en-us/web/css/_colon_focus-visible/index.md
index 254f2e5b335af81..c0b67dc8df1ad13 100644
--- a/files/en-us/web/css/_colon_focus-visible/index.md
+++ b/files/en-us/web/css/_colon_focus-visible/index.md
@@ -1,5 +1,5 @@
---
-title: ":focus-visible"
+title: :focus-visible
slug: Web/CSS/:focus-visible
page-type: css-pseudo-class
browser-compat: css.selectors.focus-visible
diff --git a/files/en-us/web/css/_colon_focus-within/index.md b/files/en-us/web/css/_colon_focus-within/index.md
index 183250821c691de..3fd4f9a476a36d5 100644
--- a/files/en-us/web/css/_colon_focus-within/index.md
+++ b/files/en-us/web/css/_colon_focus-within/index.md
@@ -1,5 +1,5 @@
---
-title: ":focus-within"
+title: :focus-within
slug: Web/CSS/:focus-within
page-type: css-pseudo-class
browser-compat: css.selectors.focus-within
diff --git a/files/en-us/web/css/_colon_focus/index.md b/files/en-us/web/css/_colon_focus/index.md
index c17655b86dec7e7..3119b16f111c7f8 100644
--- a/files/en-us/web/css/_colon_focus/index.md
+++ b/files/en-us/web/css/_colon_focus/index.md
@@ -1,5 +1,5 @@
---
-title: ":focus"
+title: :focus
slug: Web/CSS/:focus
page-type: css-pseudo-class
browser-compat: css.selectors.focus
diff --git a/files/en-us/web/css/_colon_fullscreen/index.md b/files/en-us/web/css/_colon_fullscreen/index.md
index 4c2a58fe5335138..5729086bc7b622a 100644
--- a/files/en-us/web/css/_colon_fullscreen/index.md
+++ b/files/en-us/web/css/_colon_fullscreen/index.md
@@ -1,5 +1,5 @@
---
-title: ":fullscreen"
+title: :fullscreen
slug: Web/CSS/:fullscreen
page-type: css-pseudo-class
browser-compat: css.selectors.fullscreen
diff --git a/files/en-us/web/css/_colon_future/index.md b/files/en-us/web/css/_colon_future/index.md
index c6f346527b6283c..44c1718adca37fa 100644
--- a/files/en-us/web/css/_colon_future/index.md
+++ b/files/en-us/web/css/_colon_future/index.md
@@ -1,5 +1,5 @@
---
-title: ":future"
+title: :future
slug: Web/CSS/:future
page-type: css-pseudo-class
browser-compat: css.selectors.future
diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md
index 6dc8e9a3c5169ff..1afa3c2aadcbb4c 100644
--- a/files/en-us/web/css/_colon_has-slotted/index.md
+++ b/files/en-us/web/css/_colon_has-slotted/index.md
@@ -1,13 +1,11 @@
---
-title: ":has-slotted"
+title: :has-slotted
slug: Web/CSS/:has-slotted
page-type: css-pseudo-class
-status:
- - experimental
browser-compat: css.selectors.has-slotted
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`:has-slotted`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches when the content of a {{HTMLElement("slot")}} element is not empty or not using the default value (see [Using templates and slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots) for more information).
@@ -60,7 +58,7 @@ This example has two `` elements, one of which has been assigned some cont
The `` element that has been assigned content matched the `:has-slotted` pseudo-class and has the `color` value of `rebeccapurple` applied.
-{{EmbedLiveSample("simple_example",100,300)}}
+{{EmbedLiveSample("simple_example",100,70)}}
## Specifications
diff --git a/files/en-us/web/css/_colon_has/index.md b/files/en-us/web/css/_colon_has/index.md
index 3590062b609d513..66308878e2cb0e4 100644
--- a/files/en-us/web/css/_colon_has/index.md
+++ b/files/en-us/web/css/_colon_has/index.md
@@ -1,5 +1,5 @@
---
-title: ":has()"
+title: :has()
slug: Web/CSS/:has
page-type: css-pseudo-class
browser-compat: css.selectors.has
@@ -18,7 +18,7 @@ h1:has(+ p) {
}
```
-The `:has()` pseudo-class takes on the [specificity](/en-US/docs/Web/CSS/Specificity) of the most specific selector in its arguments the same way as {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":not", ":not()")}} do.
+The `:has()` pseudo-class takes on the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of the most specific selector in its arguments the same way as {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":not", ":not()")}} do.
## Syntax
diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md
index a0c0b300cef8285..1091b1e3cf4cf70 100644
--- a/files/en-us/web/css/_colon_host-context/index.md
+++ b/files/en-us/web/css/_colon_host-context/index.md
@@ -1,5 +1,5 @@
---
-title: ":host-context()"
+title: :host-context()
slug: Web/CSS/:host-context
page-type: css-pseudo-class
browser-compat: css.selectors.host-context
@@ -20,7 +20,7 @@ To limit the selector to only the `` host directly or limit the sele
> [!NOTE]
> This has no effect when used outside a shadow DOM.
-The [specificity](/en-US/docs/Web/CSS/Specificity) of `:host-context()` is that of a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), plus the specificity of the selector passed as the function's argument.
+The [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of `:host-context()` is that of a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), plus the specificity of the selector passed as the function's argument.
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host-context.html", "tabbed-shorter")}}
diff --git a/files/en-us/web/css/_colon_host/index.md b/files/en-us/web/css/_colon_host/index.md
index 81db21f43d157e3..d8de6631843d1e8 100644
--- a/files/en-us/web/css/_colon_host/index.md
+++ b/files/en-us/web/css/_colon_host/index.md
@@ -1,5 +1,5 @@
---
-title: ":host"
+title: :host
slug: Web/CSS/:host
page-type: css-pseudo-class
browser-compat: css.selectors.host
diff --git a/files/en-us/web/css/_colon_host_function/index.md b/files/en-us/web/css/_colon_host_function/index.md
index 68100c471d7fe75..cbc8f8d4b2e5569 100644
--- a/files/en-us/web/css/_colon_host_function/index.md
+++ b/files/en-us/web/css/_colon_host_function/index.md
@@ -1,5 +1,5 @@
---
-title: ":host()"
+title: :host()
slug: Web/CSS/:host_function
page-type: css-pseudo-class
browser-compat: css.selectors.hostfunction
diff --git a/files/en-us/web/css/_colon_hover/index.md b/files/en-us/web/css/_colon_hover/index.md
index d4248cc218518aa..eb77499a16ba966 100644
--- a/files/en-us/web/css/_colon_hover/index.md
+++ b/files/en-us/web/css/_colon_hover/index.md
@@ -1,5 +1,5 @@
---
-title: ":hover"
+title: :hover
slug: Web/CSS/:hover
page-type: css-pseudo-class
browser-compat: css.selectors.hover
diff --git a/files/en-us/web/css/_colon_in-range/index.md b/files/en-us/web/css/_colon_in-range/index.md
index 11ecb604259ea91..a0eccfdda2044c2 100644
--- a/files/en-us/web/css/_colon_in-range/index.md
+++ b/files/en-us/web/css/_colon_in-range/index.md
@@ -1,5 +1,5 @@
---
-title: ":in-range"
+title: :in-range
slug: Web/CSS/:in-range
page-type: css-pseudo-class
browser-compat: css.selectors.in-range
diff --git a/files/en-us/web/css/_colon_indeterminate/index.md b/files/en-us/web/css/_colon_indeterminate/index.md
index 990776393fbba3b..c5bb51781004981 100644
--- a/files/en-us/web/css/_colon_indeterminate/index.md
+++ b/files/en-us/web/css/_colon_indeterminate/index.md
@@ -1,5 +1,5 @@
---
-title: ":indeterminate"
+title: :indeterminate
slug: Web/CSS/:indeterminate
page-type: css-pseudo-class
browser-compat: css.selectors.indeterminate
diff --git a/files/en-us/web/css/_colon_invalid/index.md b/files/en-us/web/css/_colon_invalid/index.md
index b19c341e0d6e895..f23f1e7c99f04f0 100644
--- a/files/en-us/web/css/_colon_invalid/index.md
+++ b/files/en-us/web/css/_colon_invalid/index.md
@@ -1,5 +1,5 @@
---
-title: ":invalid"
+title: :invalid
slug: Web/CSS/:invalid
page-type: css-pseudo-class
browser-compat: css.selectors.invalid
diff --git a/files/en-us/web/css/_colon_is/index.md b/files/en-us/web/css/_colon_is/index.md
index 58de16e547a0037..3bf72356842696a 100644
--- a/files/en-us/web/css/_colon_is/index.md
+++ b/files/en-us/web/css/_colon_is/index.md
@@ -1,5 +1,5 @@
---
-title: ":is()"
+title: :is()
slug: Web/CSS/:is
page-type: css-pseudo-class
browser-compat: css.selectors.is
@@ -225,6 +225,6 @@ some-element::after {
## See also
-- {{CSSxRef(":where", ":where()")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/Specificity).
+- {{CSSxRef(":where", ":where()")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
- [Selector list](/en-US/docs/Web/CSS/Selector_list)
- [Web components](/en-US/docs/Web/API/Web_components)
diff --git a/files/en-us/web/css/_colon_lang/index.md b/files/en-us/web/css/_colon_lang/index.md
index a18b3f9d645a930..0f75256f1e445d7 100644
--- a/files/en-us/web/css/_colon_lang/index.md
+++ b/files/en-us/web/css/_colon_lang/index.md
@@ -1,5 +1,5 @@
---
-title: ":lang()"
+title: :lang()
slug: Web/CSS/:lang
page-type: css-pseudo-class
browser-compat: css.selectors.lang
diff --git a/files/en-us/web/css/_colon_last-child/index.md b/files/en-us/web/css/_colon_last-child/index.md
index 168115386a0c2ce..53aef551f469db7 100644
--- a/files/en-us/web/css/_colon_last-child/index.md
+++ b/files/en-us/web/css/_colon_last-child/index.md
@@ -1,5 +1,5 @@
---
-title: ":last-child"
+title: :last-child
slug: Web/CSS/:last-child
page-type: css-pseudo-class
browser-compat: css.selectors.last-child
diff --git a/files/en-us/web/css/_colon_last-of-type/index.md b/files/en-us/web/css/_colon_last-of-type/index.md
index bbf40c79f26277f..02e16cbfc2da2b3 100644
--- a/files/en-us/web/css/_colon_last-of-type/index.md
+++ b/files/en-us/web/css/_colon_last-of-type/index.md
@@ -1,5 +1,5 @@
---
-title: ":last-of-type"
+title: :last-of-type
slug: Web/CSS/:last-of-type
page-type: css-pseudo-class
browser-compat: css.selectors.last-of-type
diff --git a/files/en-us/web/css/_colon_left/index.md b/files/en-us/web/css/_colon_left/index.md
index 176179b22f455e7..b711c163acac67d 100644
--- a/files/en-us/web/css/_colon_left/index.md
+++ b/files/en-us/web/css/_colon_left/index.md
@@ -1,5 +1,5 @@
---
-title: ":left"
+title: :left
slug: Web/CSS/:left
page-type: css-pseudo-class
browser-compat: css.selectors.left
diff --git a/files/en-us/web/css/_colon_link/index.md b/files/en-us/web/css/_colon_link/index.md
index 4a3812b040d483a..6466e3f5d256589 100644
--- a/files/en-us/web/css/_colon_link/index.md
+++ b/files/en-us/web/css/_colon_link/index.md
@@ -1,5 +1,5 @@
---
-title: ":link"
+title: :link
slug: Web/CSS/:link
page-type: css-pseudo-class
browser-compat: css.selectors.link
diff --git a/files/en-us/web/css/_colon_local-link/index.md b/files/en-us/web/css/_colon_local-link/index.md
index a97563cd020c361..7a09dbd59ae59a8 100644
--- a/files/en-us/web/css/_colon_local-link/index.md
+++ b/files/en-us/web/css/_colon_local-link/index.md
@@ -1,5 +1,5 @@
---
-title: ":local-link"
+title: :local-link
slug: Web/CSS/:local-link
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_modal/index.md b/files/en-us/web/css/_colon_modal/index.md
index d0e459b11de800e..9efd3a2f22e7308 100644
--- a/files/en-us/web/css/_colon_modal/index.md
+++ b/files/en-us/web/css/_colon_modal/index.md
@@ -1,5 +1,5 @@
---
-title: ":modal"
+title: :modal
slug: Web/CSS/:modal
page-type: css-pseudo-class
browser-compat: css.selectors.modal
diff --git a/files/en-us/web/css/_colon_muted/index.md b/files/en-us/web/css/_colon_muted/index.md
index f124212a34101f9..8171390c27bfd40 100644
--- a/files/en-us/web/css/_colon_muted/index.md
+++ b/files/en-us/web/css/_colon_muted/index.md
@@ -1,5 +1,5 @@
---
-title: ":muted"
+title: :muted
slug: Web/CSS/:muted
page-type: css-pseudo-class
browser-compat: css.selectors.muted
diff --git a/files/en-us/web/css/_colon_not/index.md b/files/en-us/web/css/_colon_not/index.md
index 15b0271e9c50cca..c322bc79a99d787 100644
--- a/files/en-us/web/css/_colon_not/index.md
+++ b/files/en-us/web/css/_colon_not/index.md
@@ -1,5 +1,5 @@
---
-title: ":not()"
+title: :not()
slug: Web/CSS/:not
page-type: css-pseudo-class
browser-compat: css.selectors.not
@@ -28,7 +28,7 @@ The `:not()` pseudo-class requires a [selector list](/en-US/docs/Web/CSS/CSS_sel
There are several unusual effects and outcomes when using `:not()` that you should keep in mind when using it:
- Useless selectors can be written using this pseudo-class. For example, `:not(*)` matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
-- This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors.
+- This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors.
- The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written [`:not(:is(argument))`](/en-US/docs/Web/CSS/:is).
- `:not(.foo)` will match anything that isn't `.foo`, _including {{HTMLElement("html")}} and {{HTMLElement("body")}}._
- This selector will match everything that is "not an X". This may be surprising when used with [descendant combinators](/en-US/docs/Web/CSS/Descendant_combinator), since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a {{HTMLElement("table")}}, since {{HTMLElement("tr")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("td")}}, {{HTMLElement("caption")}}, etc. can all match the `:not(table)` part of the selector. To avoid this, you can use `body a:not(table a)` instead, which will only apply to links that are not descendants of a table.
diff --git a/files/en-us/web/css/_colon_nth-child/index.md b/files/en-us/web/css/_colon_nth-child/index.md
index aca7f74c7188cc8..71554211745e086 100644
--- a/files/en-us/web/css/_colon_nth-child/index.md
+++ b/files/en-us/web/css/_colon_nth-child/index.md
@@ -1,5 +1,5 @@
---
-title: ":nth-child()"
+title: :nth-child()
slug: Web/CSS/:nth-child
page-type: css-pseudo-class
browser-compat: css.selectors.nth-child
diff --git a/files/en-us/web/css/_colon_nth-last-child/index.md b/files/en-us/web/css/_colon_nth-last-child/index.md
index c5e1627607b9067..2b04b4fc3c9b738 100644
--- a/files/en-us/web/css/_colon_nth-last-child/index.md
+++ b/files/en-us/web/css/_colon_nth-last-child/index.md
@@ -1,5 +1,5 @@
---
-title: ":nth-last-child()"
+title: :nth-last-child()
slug: Web/CSS/:nth-last-child
page-type: css-pseudo-class
browser-compat: css.selectors.nth-last-child
diff --git a/files/en-us/web/css/_colon_nth-last-of-type/index.md b/files/en-us/web/css/_colon_nth-last-of-type/index.md
index c541c625a1cb5a0..9ddf1a5124b7f2e 100644
--- a/files/en-us/web/css/_colon_nth-last-of-type/index.md
+++ b/files/en-us/web/css/_colon_nth-last-of-type/index.md
@@ -1,5 +1,5 @@
---
-title: ":nth-last-of-type()"
+title: :nth-last-of-type()
slug: Web/CSS/:nth-last-of-type
page-type: css-pseudo-class
browser-compat: css.selectors.nth-last-of-type
diff --git a/files/en-us/web/css/_colon_nth-of-type/index.md b/files/en-us/web/css/_colon_nth-of-type/index.md
index 0f5ff4295db91e2..3cf37413afca04c 100644
--- a/files/en-us/web/css/_colon_nth-of-type/index.md
+++ b/files/en-us/web/css/_colon_nth-of-type/index.md
@@ -1,5 +1,5 @@
---
-title: ":nth-of-type()"
+title: :nth-of-type()
slug: Web/CSS/:nth-of-type
page-type: css-pseudo-class
browser-compat: css.selectors.nth-of-type
diff --git a/files/en-us/web/css/_colon_only-child/index.md b/files/en-us/web/css/_colon_only-child/index.md
index 34aac6f8b11f1ee..06c12c70a66c0a6 100644
--- a/files/en-us/web/css/_colon_only-child/index.md
+++ b/files/en-us/web/css/_colon_only-child/index.md
@@ -1,5 +1,5 @@
---
-title: ":only-child"
+title: :only-child
slug: Web/CSS/:only-child
page-type: css-pseudo-class
browser-compat: css.selectors.only-child
diff --git a/files/en-us/web/css/_colon_only-of-type/index.md b/files/en-us/web/css/_colon_only-of-type/index.md
index e8ef211a31b460c..1b57ffbd1260717 100644
--- a/files/en-us/web/css/_colon_only-of-type/index.md
+++ b/files/en-us/web/css/_colon_only-of-type/index.md
@@ -1,5 +1,5 @@
---
-title: ":only-of-type"
+title: :only-of-type
slug: Web/CSS/:only-of-type
page-type: css-pseudo-class
browser-compat: css.selectors.only-of-type
diff --git a/files/en-us/web/css/_colon_open/index.md b/files/en-us/web/css/_colon_open/index.md
index 14e734bd4517b16..a517c03b0a99ba1 100644
--- a/files/en-us/web/css/_colon_open/index.md
+++ b/files/en-us/web/css/_colon_open/index.md
@@ -1,11 +1,11 @@
---
-title: ":open"
+title: :open
slug: Web/CSS/:open
page-type: css-pseudo-class
browser-compat: css.selectors.open
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`:open`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element that has open and closed states, only when it is currently in the open state.
@@ -101,7 +101,7 @@ There is nothing special about our fruit selector.
```html
- Choose your favourite fruit:
+ Choose your favorite fruit:
apple
banana
diff --git a/files/en-us/web/css/_colon_optional/index.md b/files/en-us/web/css/_colon_optional/index.md
index b6dd7ed41d7df11..35e710513fbfe89 100644
--- a/files/en-us/web/css/_colon_optional/index.md
+++ b/files/en-us/web/css/_colon_optional/index.md
@@ -1,5 +1,5 @@
---
-title: ":optional"
+title: :optional
slug: Web/CSS/:optional
page-type: css-pseudo-class
browser-compat: css.selectors.optional
diff --git a/files/en-us/web/css/_colon_out-of-range/index.md b/files/en-us/web/css/_colon_out-of-range/index.md
index 0198867f81d78e3..4e07682269a28c1 100644
--- a/files/en-us/web/css/_colon_out-of-range/index.md
+++ b/files/en-us/web/css/_colon_out-of-range/index.md
@@ -1,5 +1,5 @@
---
-title: ":out-of-range"
+title: :out-of-range
slug: Web/CSS/:out-of-range
page-type: css-pseudo-class
browser-compat: css.selectors.out-of-range
diff --git a/files/en-us/web/css/_colon_past/index.md b/files/en-us/web/css/_colon_past/index.md
index 50c53ed332fff1b..67b6666e02060ef 100644
--- a/files/en-us/web/css/_colon_past/index.md
+++ b/files/en-us/web/css/_colon_past/index.md
@@ -1,5 +1,5 @@
---
-title: ":past"
+title: :past
slug: Web/CSS/:past
page-type: css-pseudo-class
browser-compat: css.selectors.past
diff --git a/files/en-us/web/css/_colon_paused/index.md b/files/en-us/web/css/_colon_paused/index.md
index f44f58ff78f5e85..031cdfcd08c6dfe 100644
--- a/files/en-us/web/css/_colon_paused/index.md
+++ b/files/en-us/web/css/_colon_paused/index.md
@@ -1,5 +1,5 @@
---
-title: ":paused"
+title: :paused
slug: Web/CSS/:paused
page-type: css-pseudo-class
browser-compat: css.selectors.paused
diff --git a/files/en-us/web/css/_colon_picture-in-picture/index.md b/files/en-us/web/css/_colon_picture-in-picture/index.md
index d5da14c1dfde17e..672b828725d25a4 100644
--- a/files/en-us/web/css/_colon_picture-in-picture/index.md
+++ b/files/en-us/web/css/_colon_picture-in-picture/index.md
@@ -1,5 +1,5 @@
---
-title: ":picture-in-picture"
+title: :picture-in-picture
slug: Web/CSS/:picture-in-picture
page-type: css-pseudo-class
browser-compat: css.selectors.picture-in-picture
diff --git a/files/en-us/web/css/_colon_placeholder-shown/index.md b/files/en-us/web/css/_colon_placeholder-shown/index.md
index 70b5f8bda9f548c..4b2656e6aa7f845 100644
--- a/files/en-us/web/css/_colon_placeholder-shown/index.md
+++ b/files/en-us/web/css/_colon_placeholder-shown/index.md
@@ -1,5 +1,5 @@
---
-title: ":placeholder-shown"
+title: :placeholder-shown
slug: Web/CSS/:placeholder-shown
page-type: css-pseudo-class
browser-compat: css.selectors.placeholder-shown
diff --git a/files/en-us/web/css/_colon_playing/index.md b/files/en-us/web/css/_colon_playing/index.md
index a49d08c862faf7f..b5ba60b7d171c18 100644
--- a/files/en-us/web/css/_colon_playing/index.md
+++ b/files/en-us/web/css/_colon_playing/index.md
@@ -1,5 +1,5 @@
---
-title: ":playing"
+title: :playing
slug: Web/CSS/:playing
page-type: css-pseudo-class
browser-compat: css.selectors.playing
diff --git a/files/en-us/web/css/_colon_popover-open/index.md b/files/en-us/web/css/_colon_popover-open/index.md
index 4f388c246cbc4a5..d10986fba19e31d 100644
--- a/files/en-us/web/css/_colon_popover-open/index.md
+++ b/files/en-us/web/css/_colon_popover-open/index.md
@@ -1,5 +1,5 @@
---
-title: ":popover-open"
+title: :popover-open
slug: Web/CSS/:popover-open
page-type: css-pseudo-class
browser-compat: css.selectors.popover-open
diff --git a/files/en-us/web/css/_colon_read-only/index.md b/files/en-us/web/css/_colon_read-only/index.md
index c9f0d0e691e63d6..584088a9fe6592a 100644
--- a/files/en-us/web/css/_colon_read-only/index.md
+++ b/files/en-us/web/css/_colon_read-only/index.md
@@ -1,5 +1,5 @@
---
-title: ":read-only"
+title: :read-only
slug: Web/CSS/:read-only
page-type: css-pseudo-class
browser-compat: css.selectors.read-only
diff --git a/files/en-us/web/css/_colon_read-write/index.md b/files/en-us/web/css/_colon_read-write/index.md
index 9e8d6ba2bfcf3ce..9229d5c8062b786 100644
--- a/files/en-us/web/css/_colon_read-write/index.md
+++ b/files/en-us/web/css/_colon_read-write/index.md
@@ -1,5 +1,5 @@
---
-title: ":read-write"
+title: :read-write
slug: Web/CSS/:read-write
page-type: css-pseudo-class
browser-compat: css.selectors.read-write
diff --git a/files/en-us/web/css/_colon_required/index.md b/files/en-us/web/css/_colon_required/index.md
index aa0c5a30cc55ba6..e34adba676370fe 100644
--- a/files/en-us/web/css/_colon_required/index.md
+++ b/files/en-us/web/css/_colon_required/index.md
@@ -1,5 +1,5 @@
---
-title: ":required"
+title: :required
slug: Web/CSS/:required
page-type: css-pseudo-class
browser-compat: css.selectors.required
diff --git a/files/en-us/web/css/_colon_right/index.md b/files/en-us/web/css/_colon_right/index.md
index aa7732263a15a00..1c5223ef0c213a8 100644
--- a/files/en-us/web/css/_colon_right/index.md
+++ b/files/en-us/web/css/_colon_right/index.md
@@ -1,5 +1,5 @@
---
-title: ":right"
+title: :right
slug: Web/CSS/:right
page-type: css-pseudo-class
browser-compat: css.selectors.right
diff --git a/files/en-us/web/css/_colon_root/index.md b/files/en-us/web/css/_colon_root/index.md
index e9f11a8547744ad..01be31f74d3c8f6 100644
--- a/files/en-us/web/css/_colon_root/index.md
+++ b/files/en-us/web/css/_colon_root/index.md
@@ -1,5 +1,5 @@
---
-title: ":root"
+title: :root
slug: Web/CSS/:root
page-type: css-pseudo-class
browser-compat: css.selectors.root
@@ -7,7 +7,7 @@ browser-compat: css.selectors.root
{{CSSRef}}
-The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches the root element of a tree representing the document. In HTML, `:root` represents the {{HTMLElement("html")}} element and is identical to the selector `html`, except that its [specificity](/en-US/docs/Web/CSS/Specificity) is higher.
+The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches the root element of a tree representing the document. In HTML, `:root` represents the {{HTMLElement("html")}} element and is identical to the selector `html`, except that its [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) is higher.
```css
/* Selects the root element of the document:
@@ -29,7 +29,7 @@ The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps
### Declaring global CSS variables
-`:root` can be useful for declaring global [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties):
+`:root` can be useful for declaring global [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties):
```css
:root {
diff --git a/files/en-us/web/css/_colon_scope/index.md b/files/en-us/web/css/_colon_scope/index.md
index 9b0d524daf4a62d..019b3fad81ba3b8 100644
--- a/files/en-us/web/css/_colon_scope/index.md
+++ b/files/en-us/web/css/_colon_scope/index.md
@@ -1,5 +1,5 @@
---
-title: ":scope"
+title: :scope
slug: Web/CSS/:scope
page-type: css-pseudo-class
browser-compat: css.selectors.scope
diff --git a/files/en-us/web/css/_colon_seeking/index.md b/files/en-us/web/css/_colon_seeking/index.md
index d0ffa45bf6d4288..bd458e054c4ee78 100644
--- a/files/en-us/web/css/_colon_seeking/index.md
+++ b/files/en-us/web/css/_colon_seeking/index.md
@@ -1,5 +1,5 @@
---
-title: ":seeking"
+title: :seeking
slug: Web/CSS/:seeking
page-type: css-pseudo-class
browser-compat: css.selectors.seeking
diff --git a/files/en-us/web/css/_colon_stalled/index.md b/files/en-us/web/css/_colon_stalled/index.md
index e7b35d99107eb09..3c976ce42eb689c 100644
--- a/files/en-us/web/css/_colon_stalled/index.md
+++ b/files/en-us/web/css/_colon_stalled/index.md
@@ -1,5 +1,5 @@
---
-title: ":stalled"
+title: :stalled
slug: Web/CSS/:stalled
page-type: css-pseudo-class
browser-compat: css.selectors.stalled
diff --git a/files/en-us/web/css/_colon_state/index.md b/files/en-us/web/css/_colon_state/index.md
index deb1b255d686356..f77073267595c76 100644
--- a/files/en-us/web/css/_colon_state/index.md
+++ b/files/en-us/web/css/_colon_state/index.md
@@ -1,5 +1,5 @@
---
-title: ":state()"
+title: :state()
slug: Web/CSS/:state
page-type: css-pseudo-class
browser-compat: css.selectors.state
diff --git a/files/en-us/web/css/_colon_target-within/index.md b/files/en-us/web/css/_colon_target-within/index.md
index fe1f4f66cef4f6a..9517530a89abb1e 100644
--- a/files/en-us/web/css/_colon_target-within/index.md
+++ b/files/en-us/web/css/_colon_target-within/index.md
@@ -1,5 +1,5 @@
---
-title: ":target-within"
+title: :target-within
slug: Web/CSS/:target-within
page-type: css-pseudo-class
status:
diff --git a/files/en-us/web/css/_colon_target/index.md b/files/en-us/web/css/_colon_target/index.md
index 45c2ede5cb1b865..b7be851e0712d6d 100644
--- a/files/en-us/web/css/_colon_target/index.md
+++ b/files/en-us/web/css/_colon_target/index.md
@@ -1,5 +1,5 @@
---
-title: ":target"
+title: :target
slug: Web/CSS/:target
page-type: css-pseudo-class
browser-compat: css.selectors.target
diff --git a/files/en-us/web/css/_colon_user-invalid/index.md b/files/en-us/web/css/_colon_user-invalid/index.md
index b4186d4ce2eee45..f246c2f356e99e6 100644
--- a/files/en-us/web/css/_colon_user-invalid/index.md
+++ b/files/en-us/web/css/_colon_user-invalid/index.md
@@ -1,5 +1,5 @@
---
-title: ":user-invalid"
+title: :user-invalid
slug: Web/CSS/:user-invalid
page-type: css-pseudo-class
browser-compat: css.selectors.user-invalid
diff --git a/files/en-us/web/css/_colon_user-valid/index.md b/files/en-us/web/css/_colon_user-valid/index.md
index 2ecce88bfa6c99a..36ccbc6ab5f1af1 100644
--- a/files/en-us/web/css/_colon_user-valid/index.md
+++ b/files/en-us/web/css/_colon_user-valid/index.md
@@ -1,5 +1,5 @@
---
-title: ":user-valid"
+title: :user-valid
slug: Web/CSS/:user-valid
page-type: css-pseudo-class
browser-compat: css.selectors.user-valid
diff --git a/files/en-us/web/css/_colon_valid/index.md b/files/en-us/web/css/_colon_valid/index.md
index 08c1d33d360754e..40fd4b55fdae218 100644
--- a/files/en-us/web/css/_colon_valid/index.md
+++ b/files/en-us/web/css/_colon_valid/index.md
@@ -1,5 +1,5 @@
---
-title: ":valid"
+title: :valid
slug: Web/CSS/:valid
page-type: css-pseudo-class
browser-compat: css.selectors.valid
diff --git a/files/en-us/web/css/_colon_visited/index.md b/files/en-us/web/css/_colon_visited/index.md
index ca6e3b6e600c367..5c050d3c56222be 100644
--- a/files/en-us/web/css/_colon_visited/index.md
+++ b/files/en-us/web/css/_colon_visited/index.md
@@ -1,5 +1,5 @@
---
-title: ":visited"
+title: :visited
slug: Web/CSS/:visited
page-type: css-pseudo-class
browser-compat: css.selectors.visited
diff --git a/files/en-us/web/css/_colon_volume-locked/index.md b/files/en-us/web/css/_colon_volume-locked/index.md
index a27ef739152e015..434ff7209a204c0 100644
--- a/files/en-us/web/css/_colon_volume-locked/index.md
+++ b/files/en-us/web/css/_colon_volume-locked/index.md
@@ -1,5 +1,5 @@
---
-title: ":volume-locked"
+title: :volume-locked
slug: Web/CSS/:volume-locked
page-type: css-pseudo-class
browser-compat: css.selectors.volume-locked
diff --git a/files/en-us/web/css/_colon_where/index.md b/files/en-us/web/css/_colon_where/index.md
index 56ae41160e58adb..eea38f8807eb3a1 100644
--- a/files/en-us/web/css/_colon_where/index.md
+++ b/files/en-us/web/css/_colon_where/index.md
@@ -1,5 +1,5 @@
---
-title: ":where()"
+title: :where()
slug: Web/CSS/:where
page-type: css-pseudo-class
browser-compat: css.selectors.where
@@ -9,7 +9,7 @@ browser-compat: css.selectors.where
The **`:where()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
-The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments.
+The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments.
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-where.html", "tabbed-shorter")}}
diff --git a/files/en-us/web/css/_doublecolon_-moz-color-swatch/index.md b/files/en-us/web/css/_doublecolon_-moz-color-swatch/index.md
index d39eff5797d9d11..ae53ce59c712936 100644
--- a/files/en-us/web/css/_doublecolon_-moz-color-swatch/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-color-swatch/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-color-swatch"
+title: ::-moz-color-swatch
slug: Web/CSS/::-moz-color-swatch
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md b/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md
index d764601aa28fd7d..a724d263a806933 100644
--- a/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-focus-inner"
+title: ::-moz-focus-inner
slug: Web/CSS/::-moz-focus-inner
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md b/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md
index a6e0266839ac4cb..73d88eb8c316e0e 100644
--- a/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-list-bullet"
+title: ::-moz-list-bullet
slug: Web/CSS/::-moz-list-bullet
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-list-number/index.md b/files/en-us/web/css/_doublecolon_-moz-list-number/index.md
index 33f4b25abaa51c4..9d50524c6c5fdc4 100644
--- a/files/en-us/web/css/_doublecolon_-moz-list-number/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-list-number/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-list-number"
+title: ::-moz-list-number
slug: Web/CSS/::-moz-list-number
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-meter-bar/index.md b/files/en-us/web/css/_doublecolon_-moz-meter-bar/index.md
index 54ebdfe395b3ec0..00f0f1099d15195 100644
--- a/files/en-us/web/css/_doublecolon_-moz-meter-bar/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-meter-bar/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-meter-bar"
+title: ::-moz-meter-bar
slug: Web/CSS/::-moz-meter-bar
page-type: css-pseudo-element
status:
@@ -19,10 +19,6 @@ The **`::-moz-meter-bar`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/do
}
```
-## Specifications
-
-Not part of any standard.
-
## Examples
### HTML
@@ -55,6 +51,10 @@ meter {
{{ EmbedLiveSample('Examples') }}
+## Specifications
+
+Not part of any standard.
+
## Browser compatibility
{{Compat}}
diff --git a/files/en-us/web/css/_doublecolon_-moz-progress-bar/index.md b/files/en-us/web/css/_doublecolon_-moz-progress-bar/index.md
index 5d8539b6721be95..7a97022e08cfd70 100644
--- a/files/en-us/web/css/_doublecolon_-moz-progress-bar/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-progress-bar/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-progress-bar"
+title: ::-moz-progress-bar
slug: Web/CSS/::-moz-progress-bar
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-range-progress/index.md b/files/en-us/web/css/_doublecolon_-moz-range-progress/index.md
index 0c61d9385878c4e..4dad15ed1687c63 100644
--- a/files/en-us/web/css/_doublecolon_-moz-range-progress/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-range-progress/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-range-progress"
+title: ::-moz-range-progress
slug: Web/CSS/::-moz-range-progress
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-range-thumb/index.md b/files/en-us/web/css/_doublecolon_-moz-range-thumb/index.md
index cfb9846bf864325..86603fb899a24b8 100644
--- a/files/en-us/web/css/_doublecolon_-moz-range-thumb/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-range-thumb/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-range-thumb"
+title: ::-moz-range-thumb
slug: Web/CSS/::-moz-range-thumb
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-moz-range-track/index.md b/files/en-us/web/css/_doublecolon_-moz-range-track/index.md
index 00a13b8029c2f13..5e3a9d8d3da5469 100644
--- a/files/en-us/web/css/_doublecolon_-moz-range-track/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-range-track/index.md
@@ -1,5 +1,5 @@
---
-title: "::-moz-range-track"
+title: ::-moz-range-track
slug: Web/CSS/::-moz-range-track
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md
index 4f35e3206ea2965..ffa6968c83f4721 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-inner-spin-button"
+title: ::-webkit-inner-spin-button
slug: Web/CSS/::-webkit-inner-spin-button
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
index eeb8b22b71b4ae0..34f9542c74eb0f0 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-meter-bar"
+title: ::-webkit-meter-bar
slug: Web/CSS/::-webkit-meter-bar
page-type: css-pseudo-element
status:
@@ -20,10 +20,6 @@ The **`::-webkit-meter-bar`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US
}
```
-## Specifications
-
-Not part of any standard.
-
## Examples
### HTML
@@ -80,6 +76,10 @@ if (is_safari) {
{{ EmbedLiveSample('Examples') }}
+## Specifications
+
+Not part of any standard.
+
## Browser compatibility
{{Compat}}
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
index 36fde06c9d89b83..ce9683d9443f445 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-meter-even-less-good-value"
+title: ::-webkit-meter-even-less-good-value
slug: Web/CSS/::-webkit-meter-even-less-good-value
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md
index c64b72339651bdb..c740b0a8bb79490 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-meter-inner-element"
+title: ::-webkit-meter-inner-element
slug: Web/CSS/::-webkit-meter-inner-element
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
index 0002e96da0e0897..a80056997af7817 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-meter-optimum-value"
+title: ::-webkit-meter-optimum-value
slug: Web/CSS/::-webkit-meter-optimum-value
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
index 3a5ae62fea38c9d..eb11717b55643b8 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-meter-suboptimum-value"
+title: ::-webkit-meter-suboptimum-value
slug: Web/CSS/::-webkit-meter-suboptimum-value
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/en-us/web/css/_doublecolon_-webkit-progress-bar/index.md
index a3c1c7b6d73b403..5a4dc9ef72fdba8 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-progress-bar/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-progress-bar/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-progress-bar"
+title: ::-webkit-progress-bar
slug: Web/CSS/::-webkit-progress-bar
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/en-us/web/css/_doublecolon_-webkit-progress-inner-element/index.md
index 65b59e59dfaf7c1..a3bb9e5da5ecb07 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-progress-inner-element/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-progress-inner-element/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-progress-inner-element"
+title: ::-webkit-progress-inner-element
slug: Web/CSS/::-webkit-progress-inner-element
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-progress-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-progress-value/index.md
index 8b3ba0196529db6..02bf3815e1433a7 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-progress-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-progress-value/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-progress-value"
+title: ::-webkit-progress-value
slug: Web/CSS/::-webkit-progress-value
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md
index 03dc0961bfe585e..7f4d9b0072fc37b 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-scrollbar"
+title: ::-webkit-scrollbar
slug: Web/CSS/::-webkit-scrollbar
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-search-cancel-button/index.md b/files/en-us/web/css/_doublecolon_-webkit-search-cancel-button/index.md
index dbbda1059a853ec..898c69e9f70921f 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-search-cancel-button/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-search-cancel-button/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-search-cancel-button"
+title: ::-webkit-search-cancel-button
slug: Web/CSS/::-webkit-search-cancel-button
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-search-results-button/index.md b/files/en-us/web/css/_doublecolon_-webkit-search-results-button/index.md
index 1e4eeb6001407d6..41f334d8653ce69 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-search-results-button/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-search-results-button/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-search-results-button"
+title: ::-webkit-search-results-button
slug: Web/CSS/::-webkit-search-results-button
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-slider-runnable-track/index.md b/files/en-us/web/css/_doublecolon_-webkit-slider-runnable-track/index.md
index c258f3df19ba4a5..c4d6d49a8211eeb 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-slider-runnable-track/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-slider-runnable-track/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-slider-runnable-track"
+title: ::-webkit-slider-runnable-track
slug: Web/CSS/::-webkit-slider-runnable-track
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/en-us/web/css/_doublecolon_-webkit-slider-thumb/index.md
index 7c7326f8f8f466f..4079b136bce138c 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-slider-thumb/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-slider-thumb/index.md
@@ -1,5 +1,5 @@
---
-title: "::-webkit-slider-thumb"
+title: ::-webkit-slider-thumb
slug: Web/CSS/::-webkit-slider-thumb
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_after/index.md b/files/en-us/web/css/_doublecolon_after/index.md
index 27e778d2862b713..8e20b0ac8cb0ab3 100644
--- a/files/en-us/web/css/_doublecolon_after/index.md
+++ b/files/en-us/web/css/_doublecolon_after/index.md
@@ -1,5 +1,5 @@
---
-title: "::after"
+title: ::after
slug: Web/CSS/::after
page-type: css-pseudo-element
browser-compat: css.selectors.after
diff --git a/files/en-us/web/css/_doublecolon_backdrop/index.md b/files/en-us/web/css/_doublecolon_backdrop/index.md
index 53f725f872a4350..e0e9bbb6ae0af29 100644
--- a/files/en-us/web/css/_doublecolon_backdrop/index.md
+++ b/files/en-us/web/css/_doublecolon_backdrop/index.md
@@ -1,5 +1,5 @@
---
-title: "::backdrop"
+title: ::backdrop
slug: Web/CSS/::backdrop
page-type: css-pseudo-element
browser-compat: css.selectors.backdrop
@@ -64,7 +64,8 @@ We add a background to the backdrop, creating a colorful donut using [CSS gradie
```css
::backdrop {
- background-image: radial-gradient(
+ background-image:
+ radial-gradient(
circle,
#fff 0 5vw,
transparent 5vw 20vw,
diff --git a/files/en-us/web/css/_doublecolon_before/index.md b/files/en-us/web/css/_doublecolon_before/index.md
index 1b96636ad2b1d38..f2ed89055c31959 100644
--- a/files/en-us/web/css/_doublecolon_before/index.md
+++ b/files/en-us/web/css/_doublecolon_before/index.md
@@ -1,5 +1,5 @@
---
-title: "::before"
+title: ::before
slug: Web/CSS/::before
page-type: css-pseudo-element
browser-compat: css.selectors.before
diff --git a/files/en-us/web/css/_doublecolon_cue/index.md b/files/en-us/web/css/_doublecolon_cue/index.md
index 0e3894a64bd10cc..0d2c7dc00ccc772 100644
--- a/files/en-us/web/css/_doublecolon_cue/index.md
+++ b/files/en-us/web/css/_doublecolon_cue/index.md
@@ -1,5 +1,5 @@
---
-title: "::cue"
+title: ::cue
slug: Web/CSS/::cue
page-type: css-pseudo-element
browser-compat: css.selectors.cue
diff --git a/files/en-us/web/css/_doublecolon_details-content/index.md b/files/en-us/web/css/_doublecolon_details-content/index.md
index 7bd746fa0dc0004..f7c16611baaed0d 100644
--- a/files/en-us/web/css/_doublecolon_details-content/index.md
+++ b/files/en-us/web/css/_doublecolon_details-content/index.md
@@ -1,5 +1,5 @@
---
-title: "::details-content"
+title: ::details-content
slug: Web/CSS/::details-content
page-type: css-pseudo-element
status:
diff --git a/files/en-us/web/css/_doublecolon_file-selector-button/index.md b/files/en-us/web/css/_doublecolon_file-selector-button/index.md
index 35121116665234f..85aaade3b33a16a 100644
--- a/files/en-us/web/css/_doublecolon_file-selector-button/index.md
+++ b/files/en-us/web/css/_doublecolon_file-selector-button/index.md
@@ -1,5 +1,5 @@
---
-title: "::file-selector-button"
+title: ::file-selector-button
slug: Web/CSS/::file-selector-button
page-type: css-pseudo-element
browser-compat: css.selectors.file-selector-button
diff --git a/files/en-us/web/css/_doublecolon_first-letter/index.md b/files/en-us/web/css/_doublecolon_first-letter/index.md
index 87fdeceaa19f96a..12ee25fc6e9b2ee 100644
--- a/files/en-us/web/css/_doublecolon_first-letter/index.md
+++ b/files/en-us/web/css/_doublecolon_first-letter/index.md
@@ -1,5 +1,5 @@
---
-title: "::first-letter"
+title: ::first-letter
slug: Web/CSS/::first-letter
page-type: css-pseudo-element
browser-compat: css.selectors.first-letter
diff --git a/files/en-us/web/css/_doublecolon_first-line/index.md b/files/en-us/web/css/_doublecolon_first-line/index.md
index c38b8e43a61d748..7729b3e6d6c201c 100644
--- a/files/en-us/web/css/_doublecolon_first-line/index.md
+++ b/files/en-us/web/css/_doublecolon_first-line/index.md
@@ -1,5 +1,5 @@
---
-title: "::first-line"
+title: ::first-line
slug: Web/CSS/::first-line
page-type: css-pseudo-element
browser-compat: css.selectors.first-line
diff --git a/files/en-us/web/css/_doublecolon_grammar-error/index.md b/files/en-us/web/css/_doublecolon_grammar-error/index.md
index aead6141c39cc84..0dabbba6f46f3a0 100644
--- a/files/en-us/web/css/_doublecolon_grammar-error/index.md
+++ b/files/en-us/web/css/_doublecolon_grammar-error/index.md
@@ -1,5 +1,5 @@
---
-title: "::grammar-error"
+title: ::grammar-error
slug: Web/CSS/::grammar-error
page-type: css-pseudo-element
browser-compat: css.selectors.grammar-error
diff --git a/files/en-us/web/css/_doublecolon_highlight/index.md b/files/en-us/web/css/_doublecolon_highlight/index.md
index 931f489679e6fb7..dc93bd045a234fb 100644
--- a/files/en-us/web/css/_doublecolon_highlight/index.md
+++ b/files/en-us/web/css/_doublecolon_highlight/index.md
@@ -1,5 +1,5 @@
---
-title: "::highlight()"
+title: ::highlight()
slug: Web/CSS/::highlight
page-type: css-pseudo-element
browser-compat: css.selectors.highlight
diff --git a/files/en-us/web/css/_doublecolon_marker/index.md b/files/en-us/web/css/_doublecolon_marker/index.md
index c7dd29f600834b1..86fb0fccbb1c94e 100644
--- a/files/en-us/web/css/_doublecolon_marker/index.md
+++ b/files/en-us/web/css/_doublecolon_marker/index.md
@@ -1,5 +1,5 @@
---
-title: "::marker"
+title: ::marker
slug: Web/CSS/::marker
page-type: css-pseudo-element
browser-compat: css.selectors.marker
diff --git a/files/en-us/web/css/_doublecolon_part/index.md b/files/en-us/web/css/_doublecolon_part/index.md
index f2a049e97c3bd89..31121966579d0f4 100644
--- a/files/en-us/web/css/_doublecolon_part/index.md
+++ b/files/en-us/web/css/_doublecolon_part/index.md
@@ -1,5 +1,5 @@
---
-title: "::part()"
+title: ::part()
slug: Web/CSS/::part
page-type: css-pseudo-element
browser-compat: css.selectors.part
diff --git a/files/en-us/web/css/_doublecolon_placeholder/index.md b/files/en-us/web/css/_doublecolon_placeholder/index.md
index 6ed455ad0e8df6a..5e4546c454e5c6d 100644
--- a/files/en-us/web/css/_doublecolon_placeholder/index.md
+++ b/files/en-us/web/css/_doublecolon_placeholder/index.md
@@ -1,5 +1,5 @@
---
-title: "::placeholder"
+title: ::placeholder
slug: Web/CSS/::placeholder
page-type: css-pseudo-element
browser-compat: css.selectors.placeholder
diff --git a/files/en-us/web/css/_doublecolon_selection/index.md b/files/en-us/web/css/_doublecolon_selection/index.md
index 176ea5e31edec7c..6f4a4ae45d1c191 100644
--- a/files/en-us/web/css/_doublecolon_selection/index.md
+++ b/files/en-us/web/css/_doublecolon_selection/index.md
@@ -1,5 +1,5 @@
---
-title: "::selection"
+title: ::selection
slug: Web/CSS/::selection
page-type: css-pseudo-element
browser-compat: css.selectors.selection
diff --git a/files/en-us/web/css/_doublecolon_slotted/index.md b/files/en-us/web/css/_doublecolon_slotted/index.md
index 2a9419ad726135c..c6ab48e904abc9b 100644
--- a/files/en-us/web/css/_doublecolon_slotted/index.md
+++ b/files/en-us/web/css/_doublecolon_slotted/index.md
@@ -1,5 +1,5 @@
---
-title: "::slotted()"
+title: ::slotted()
slug: Web/CSS/::slotted
page-type: css-pseudo-element
browser-compat: css.selectors.slotted
diff --git a/files/en-us/web/css/_doublecolon_spelling-error/index.md b/files/en-us/web/css/_doublecolon_spelling-error/index.md
index cefa970c888753d..3615bf4f48e3b81 100644
--- a/files/en-us/web/css/_doublecolon_spelling-error/index.md
+++ b/files/en-us/web/css/_doublecolon_spelling-error/index.md
@@ -1,5 +1,5 @@
---
-title: "::spelling-error"
+title: ::spelling-error
slug: Web/CSS/::spelling-error
page-type: css-pseudo-element
browser-compat: css.selectors.spelling-error
diff --git a/files/en-us/web/css/_doublecolon_target-text/index.md b/files/en-us/web/css/_doublecolon_target-text/index.md
index 7e8d326dba0f5fd..3505b05c5113d46 100644
--- a/files/en-us/web/css/_doublecolon_target-text/index.md
+++ b/files/en-us/web/css/_doublecolon_target-text/index.md
@@ -1,5 +1,5 @@
---
-title: "::target-text"
+title: ::target-text
slug: Web/CSS/::target-text
page-type: css-pseudo-element
browser-compat: css.selectors.target-text
diff --git a/files/en-us/web/css/_doublecolon_view-transition-group/index.md b/files/en-us/web/css/_doublecolon_view-transition-group/index.md
index f03722f4cc0249e..e1992686f35b5e4 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-group/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-group/index.md
@@ -1,5 +1,5 @@
---
-title: "::view-transition-group"
+title: ::view-transition-group
slug: Web/CSS/::view-transition-group
page-type: css-pseudo-element
browser-compat: css.selectors.view-transition-group
diff --git a/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md b/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md
index 45a09ec6e689864..0904d6e15e96dd0 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md
@@ -1,5 +1,5 @@
---
-title: "::view-transition-image-pair"
+title: ::view-transition-image-pair
slug: Web/CSS/::view-transition-image-pair
page-type: css-pseudo-element
browser-compat: css.selectors.view-transition-image-pair
diff --git a/files/en-us/web/css/_doublecolon_view-transition-new/index.md b/files/en-us/web/css/_doublecolon_view-transition-new/index.md
index 0170b045cb3fdc5..43e79427782ef63 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-new/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-new/index.md
@@ -1,5 +1,5 @@
---
-title: "::view-transition-new"
+title: ::view-transition-new
slug: Web/CSS/::view-transition-new
page-type: css-pseudo-element
browser-compat: css.selectors.view-transition-new
diff --git a/files/en-us/web/css/_doublecolon_view-transition-old/index.md b/files/en-us/web/css/_doublecolon_view-transition-old/index.md
index a19cfb41fcd4e8c..78ffc9f27b18de5 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-old/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-old/index.md
@@ -1,5 +1,5 @@
---
-title: "::view-transition-old"
+title: ::view-transition-old
slug: Web/CSS/::view-transition-old
page-type: css-pseudo-element
browser-compat: css.selectors.view-transition-old
diff --git a/files/en-us/web/css/_doublecolon_view-transition/index.md b/files/en-us/web/css/_doublecolon_view-transition/index.md
index c1d8e4e7f0e361c..17b1c3c1c0fded0 100644
--- a/files/en-us/web/css/_doublecolon_view-transition/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition/index.md
@@ -1,5 +1,5 @@
---
-title: "::view-transition"
+title: ::view-transition
slug: Web/CSS/::view-transition
page-type: css-pseudo-element
browser-compat: css.selectors.view-transition
diff --git a/files/en-us/web/css/absolute-size/index.md b/files/en-us/web/css/absolute-size/index.md
index 9a76f7c91fce8f9..c726849039e4a25 100644
--- a/files/en-us/web/css/absolute-size/index.md
+++ b/files/en-us/web/css/absolute-size/index.md
@@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-fonts/#valdef-font-size-absolute-size
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the absolute size keywords. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) describes the absolute size keywords. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties.
The font size keywords are mapped to the deprecated HTML `size` attribute. See the [HTML size attribute](#html_size_attribute) section below).
diff --git a/files/en-us/web/css/actual_value/index.md b/files/en-us/web/css/actual_value/index.md
deleted file mode 100644
index 36525b4fa63a1f0..000000000000000
--- a/files/en-us/web/css/actual_value/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Actual value
-slug: Web/CSS/actual_value
-page-type: guide
-spec-urls: https://www.w3.org/TR/CSS22/cascade.html#actual-value
----
-
-{{CSSRef}}
-
-The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value](/en-US/docs/Web/CSS/used_value) of that property after any necessary approximations have been applied. For example, a {{glossary("user agent")}} that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.
-
-## Calculating a property's actual 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).
-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.
-
-## Specifications
-
-{{Specifications}}
-
-## See also
-
-- CSS key concepts:
- - [CSS syntax](/en-US/docs/Web/CSS/Syntax)
- - [At-rules](/en-US/docs/Web/CSS/At-rule)
- - [Comments](/en-US/docs/Web/CSS/Comments)
- - [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
- - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- - [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
- - Values
- - [Initial values](/en-US/docs/Web/CSS/initial_value)
- - [Computed values](/en-US/docs/Web/CSS/computed_value)
- - [Used values](/en-US/docs/Web/CSS/used_value)
- - [Resolved values](/en-US/docs/Web/CSS/resolved_value)
- - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/align-content/index.md b/files/en-us/web/css/align-content/index.md
index ae405e018b1678b..65cca726a7f5f69 100644
--- a/files/en-us/web/css/align-content/index.md
+++ b/files/en-us/web/css/align-content/index.md
@@ -248,8 +248,8 @@ In [block layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_a
- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment)
-- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
+- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow)
- [Block-level_content](/en-US/docs/Glossary/Block-level_content)
- {{CSSXRef("display")}}
diff --git a/files/en-us/web/css/align-items/index.md b/files/en-us/web/css/align-items/index.md
index 55753464726b85b..d6fd0e74d10873f 100644
--- a/files/en-us/web/css/align-items/index.md
+++ b/files/en-us/web/css/align-items/index.md
@@ -288,7 +288,7 @@ display.addEventListener("change", (evt) => {
- {{cssxref("place-items")}} shorthand
- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/align-self/index.md b/files/en-us/web/css/align-self/index.md
index 0d06b47b3712891..2f82421fec33634 100644
--- a/files/en-us/web/css/align-self/index.md
+++ b/files/en-us/web/css/align-self/index.md
@@ -143,7 +143,7 @@ div:nth-child(3) {
- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment)
- {{cssxref("align-items")}}
- {{cssxref("justify-self")}}
diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md
index 3432422f0d086d9..00c22b330f538a1 100644
--- a/files/en-us/web/css/all/index.md
+++ b/files/en-us/web/css/all/index.md
@@ -7,13 +7,13 @@ browser-compat: css.properties.all
{{CSSRef}}
-The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property resets all of an element's properties except {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
+The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property resets all of an element's properties except {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [CSS Custom Properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
{{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).
+This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties).
## Syntax
@@ -31,16 +31,16 @@ The `all` property is specified as one of the CSS global keyword values. Note th
### Values
- {{cssxref("initial")}}
- - : Specifies that all the element's properties should be changed to their [initial values](/en-US/docs/Web/CSS/initial_value).
+ - : Specifies that all the element's properties should be changed to their [initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value).
- {{cssxref("inherit")}}
- - : Specifies that all the element's properties should be changed to their [inherited values](/en-US/docs/Web/CSS/Inheritance).
+ - : Specifies that all the element's properties should be changed to their [inherited values](/en-US/docs/Web/CSS/CSS_cascade/Inheritance).
- {{cssxref("unset")}}
- : 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/CSS_cascade/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/CSS_cascade/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/alpha-value/index.md b/files/en-us/web/css/alpha-value/index.md
index 19e6aa2b2de1a59..1cda9a69260bf85 100644
--- a/files/en-us/web/css/alpha-value/index.md
+++ b/files/en-us/web/css/alpha-value/index.md
@@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-color/#typedef-color-alpha-value
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}, specifying the **{{Glossary("alpha", "alpha channel")}}** or **transparency** of a color.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}, specifying the **{{Glossary("alpha", "alpha channel")}}** or **transparency** of a color.
## Syntax
@@ -54,6 +54,6 @@ shape-image-threshold: 0.7;
## See also
- [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals)
-- [CSS data types](/en-US/docs/Web/CSS/CSS_Types)
+- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types)
- [CSS Color](/en-US/docs/Web/CSS/CSS_colors)
- [``](/en-US/docs/Web/CSS/color_value)
diff --git a/files/en-us/web/css/anchor-name/index.md b/files/en-us/web/css/anchor-name/index.md
index 5d16148a97f4f4d..150444ff51d91cc 100644
--- a/files/en-us/web/css/anchor-name/index.md
+++ b/files/en-us/web/css/anchor-name/index.md
@@ -46,7 +46,7 @@ The anchor element accepts one or more `` anchor names set on it v
If multiple anchor elements have the same anchor name set on them, and that name is referenced by the `position-anchor` property value of a positioned element, that positioned element will be associated with the last anchor element with that anchor name in the source order.
-Anchor positioning changes the [containing block](/en-US/docs/Web/CSS/Containing_block) of anchor-positioned elements, making its `position` relative to its anchor rather than to the nearest positioned ancestor element.
+Anchor positioning changes the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) of anchor-positioned elements, making its `position` relative to its anchor rather than to the nearest positioned ancestor element.
To tether and place a positioned element in a specific location relative to an anchor element, an anchor positioning feature is needed, such as the {{cssxref("anchor()")}} function (set within an {{glossary("inset properties", "inset property's")}} value) or the {{cssxref("position-area")}} property.
diff --git a/files/en-us/web/css/anchor-size/index.md b/files/en-us/web/css/anchor-size/index.md
index 4a796c1b6f0c7dc..719de0db8020c97 100644
--- a/files/en-us/web/css/anchor-size/index.md
+++ b/files/en-us/web/css/anchor-size/index.md
@@ -69,7 +69,7 @@ The parameters are:
- `block`
- - : The length of the anchor element's [containing block](/en-US/docs/Web/CSS/Containing_block) in the block direction.
+ - : The length of the anchor element's [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) in the block direction.
- `inline`
diff --git a/files/en-us/web/css/anchor/index.md b/files/en-us/web/css/anchor/index.md
index 9d3a6144cb81afe..33def4d98e58b65 100644
--- a/files/en-us/web/css/anchor/index.md
+++ b/files/en-us/web/css/anchor/index.md
@@ -60,7 +60,7 @@ The parameters are:
- `left`
- : The left of the anchor element
- `start`
- - : The logical start of the anchor element's [containing block](/en-US/docs/Web/CSS/Containing_block) along the axis of the inset property on which the `anchor()` function is set.
+ - : The logical start of the anchor element's [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) along the axis of the inset property on which the `anchor()` function is set.
- `end`
- : The logical end of the anchor element's containing block along the axis of the inset property on which the `anchor()` function is set.
- `self-start`
diff --git a/files/en-us/web/css/angle-percentage/index.md b/files/en-us/web/css/angle-percentage/index.md
index 2c650e4d4e09310..414208895e912b6 100644
--- a/files/en-us/web/css/angle-percentage/index.md
+++ b/files/en-us/web/css/angle-percentage/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.angle-percentage
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref("angle")}} or a {{Cssxref("percentage")}}.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{Cssxref("angle")}} or a {{Cssxref("percentage")}}.
Where an `` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a {{Cssxref("calc", "calc()")}} expression.
@@ -29,6 +29,6 @@ Refer to the documentation for {{Cssxref("angle")}} and {{Cssxref("percentage")}
## See also
-- [CSS data types](/en-US/docs/Web/CSS/CSS_Types)
+- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types)
- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
- [`conic-gradient()`](/en-US/docs/Web/CSS/gradient/conic-gradient) and [`repeating-conic-gradient()`](/en-US/docs/Web/CSS/gradient/repeating-conic-gradient)
diff --git a/files/en-us/web/css/angle/index.md b/files/en-us/web/css/angle/index.md
index b156ce649a8864d..a50ccc1ded0f807 100644
--- a/files/en-us/web/css/angle/index.md
+++ b/files/en-us/web/css/angle/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.angle
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in {{cssxref("<gradient>")}}s and in some {{cssxref("transform")}} functions.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in {{cssxref("<gradient>")}}s and in some {{cssxref("transform")}} functions.
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
@@ -84,7 +84,7 @@ Optionally, it may be preceded by a single `+` or `-` sign. Positive numbers rep
## See also
-- [CSS data types](/en-US/docs/Web/CSS/CSS_Types)
+- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types)
- The [``](/en-US/docs/Web/CSS/gradient) type
- CSS rotation transforms: [`rotate()`](/en-US/docs/Web/CSS/transform-function/rotate), [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d), [`rotateX()`](/en-US/docs/Web/CSS/transform-function/rotateX), [`rotateY()`](/en-US/docs/Web/CSS/transform-function/rotateY), and [`rotateZ()`](/en-US/docs/Web/CSS/transform-function/rotateZ)
- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms)
diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/at-rule/index.md
index 45667a5ce8cb759..8421362f33f8e28 100644
--- a/files/en-us/web/css/at-rule/index.md
+++ b/files/en-us/web/css/at-rule/index.md
@@ -60,7 +60,7 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or
- {{cssxref("@position-try")}}
- : Defines custom position options which can be used to define fallback positioning and alignment options for anchor-positioned elements ([CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)).
- {{cssxref("@property")}}
- - : Defines a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)).
+ - : Defines a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)).
- {{cssxref("@scope")}}
- : Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)).
- {{cssxref("@starting-style")}}
@@ -104,5 +104,5 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or
- [CSSRule](/en-US/docs/Web/API/CSSRule) interface
- [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
-- [Specificity](/en-US/docs/Web/CSS/Specificity)
-- [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md
index 7a5723fe4c7fec4..7668c03a09a5eb5 100644
--- a/files/en-us/web/css/attr/index.md
+++ b/files/en-us/web/css/attr/index.md
@@ -57,7 +57,7 @@ The parameters are:
attr(data-name string, "stranger")
```
- - The `type()` function takes a `` as its argument that specifies what [data type](/en-US/docs/Web/CSS/CSS_Types) to parse the value into. The `` can be {{CSSxRef("<angle>")}}, {{CSSxRef("<color>")}}, {{CSSxRef("<custom-ident>")}}, {{CSSxRef("<image>")}}, {{CSSxRef("<integer>")}}, {{CSSxRef("<length>")}}, {{CSSxRef("<length-percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<resolution>")}}, {{CSSxRef("<string>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<transform-function>")}}, or a combination thereof.
+ - The `type()` function takes a `` as its argument that specifies what [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) to parse the value into. The `` can be {{CSSxRef("<angle>")}}, {{CSSxRef("<color>")}}, {{CSSxRef("<custom-ident>")}}, {{CSSxRef("<image>")}}, {{CSSxRef("<integer>")}}, {{CSSxRef("<length>")}}, {{CSSxRef("<length-percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<resolution>")}}, {{CSSxRef("<string>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<transform-function>")}}, or a combination thereof.
```css
attr(id type(), none)
diff --git a/files/en-us/web/css/background-image/index.md b/files/en-us/web/css/background-image/index.md
index 3deb7a9c179dd00..b6574d65cc85f02 100644
--- a/files/en-us/web/css/background-image/index.md
+++ b/files/en-us/web/css/background-image/index.md
@@ -28,7 +28,8 @@ background-image: linear-gradient(black, white);
background-image: url("cat-front.png");
/* multiple images */
-background-image: radial-gradient(circle, #0000 45%, #000f 48%),
+background-image:
+ radial-gradient(circle, #0000 45%, #000f 48%),
radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);
/* Global values */
@@ -55,7 +56,7 @@ To specify multiple background images, supply multiple values, separated by a co
Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
Additionally, it is important to ensure that the contrast ratio between the background image and the foreground text is high enough that people with low vision can read the page content.
diff --git a/files/en-us/web/css/background-origin/index.md b/files/en-us/web/css/background-origin/index.md
index a83c0c8ef760d84..504839f54e6b981 100644
--- a/files/en-us/web/css/background-origin/index.md
+++ b/files/en-us/web/css/background-origin/index.md
@@ -74,7 +74,8 @@ The `background-origin` property is specified as one of the keyword values liste
```css
div {
- background-image: url("logo.jpg"), url("main-back.png"); /* Applies two images to the background */
+ background-image:
+ url("logo.jpg"), url("main-back.png"); /* Applies two images to the background */
background-position:
top right,
0px 0px;
@@ -90,7 +91,8 @@ In this example the box has a thick dotted border. The first gradient uses the `
.box {
margin: 10px 0;
color: #fff;
- background: linear-gradient(
+ background:
+ linear-gradient(
90deg,
rgb(131 58 180 / 100%) 0%,
rgb(253 29 29 / 60%) 60%,
diff --git a/files/en-us/web/css/background/index.md b/files/en-us/web/css/background/index.md
index d6d97c288bba8e1..3c5748b883d4c23 100644
--- a/files/en-us/web/css/background/index.md
+++ b/files/en-us/web/css/background/index.md
@@ -101,7 +101,7 @@ background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
## Examples
diff --git a/files/en-us/web/css/basic-shape/ellipse/index.md b/files/en-us/web/css/basic-shape/ellipse/index.md
index d3c361ebb6b19ba..58d79cb91f8f211 100644
--- a/files/en-us/web/css/basic-shape/ellipse/index.md
+++ b/files/en-us/web/css/basic-shape/ellipse/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.ellipse
{{CSSRef}}
-The **`ellipse()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types).
+The **`ellipse()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types).
{{EmbedInteractiveExample("pages/css/function-ellipse.html")}}
diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md
index 359fd5b6834a603..bd3890485f28bce 100644
--- a/files/en-us/web/css/basic-shape/index.md
+++ b/files/en-us/web/css/basic-shape/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a shape used in the {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, and {{cssxref("offset-path")}} properties.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a shape used in the {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, and {{cssxref("offset-path")}} properties.
{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
diff --git a/files/en-us/web/css/basic-shape/inset/index.md b/files/en-us/web/css/basic-shape/inset/index.md
index 8bbf615b643abff..5610d99302aa97c 100644
--- a/files/en-us/web/css/basic-shape/inset/index.md
+++ b/files/en-us/web/css/basic-shape/inset/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.inset
{{CSSRef}}
-The **`inset()`** [CSS](/en-US/docs/Web/CSS) function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types).
+The **`inset()`** [CSS](/en-US/docs/Web/CSS) function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types).
{{EmbedInteractiveExample("pages/css/function-inset.html")}}
diff --git a/files/en-us/web/css/basic-shape/polygon/index.md b/files/en-us/web/css/basic-shape/polygon/index.md
index f7ff3db545766d2..18c9be2e3641d38 100644
--- a/files/en-us/web/css/basic-shape/polygon/index.md
+++ b/files/en-us/web/css/basic-shape/polygon/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.polygon
{{CSSRef}}
-The **`polygon()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types). It's used to draw a [polygon](https://en.wikipedia.org/wiki/Polygon) by providing one or more pairs of coordinates, each of which represents a vertex of the shape.
+The **`polygon()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). It's used to draw a [polygon](https://en.wikipedia.org/wiki/Polygon) by providing one or more pairs of coordinates, each of which represents a vertex of the shape.
{{EmbedInteractiveExample("pages/css/function-polygon.html")}}
diff --git a/files/en-us/web/css/basic-shape/rect/index.md b/files/en-us/web/css/basic-shape/rect/index.md
index 0cdecac039adf6e..e4216683ad89cb7 100644
--- a/files/en-us/web/css/basic-shape/rect/index.md
+++ b/files/en-us/web/css/basic-shape/rect/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.rect
{{CSSRef}}
-The **`rect()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Types). You can use the `rect()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region.
+The **`rect()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). You can use the `rect()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region.
## Syntax
diff --git a/files/en-us/web/css/basic-shape/xywh/index.md b/files/en-us/web/css/basic-shape/xywh/index.md
index 253247a636c289b..817ca98d2d5d43d 100644
--- a/files/en-us/web/css/basic-shape/xywh/index.md
+++ b/files/en-us/web/css/basic-shape/xywh/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.xywh
{{CSSRef}}
-The **`xywh()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Types). You can use the `xywh()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region.
+The **`xywh()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). You can use the `xywh()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region.
## Syntax
diff --git a/files/en-us/web/css/blend-mode/index.md b/files/en-us/web/css/blend-mode/index.md
index d350f0e4a56a222..59cff26034ea93f 100644
--- a/files/en-us/web/css/blend-mode/index.md
+++ b/files/en-us/web/css/blend-mode/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.blend-mode
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes how colors should appear when elements overlap. It is used in the {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}} properties.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) describes how colors should appear when elements overlap. It is used in the {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}} properties.
## Syntax
diff --git a/files/en-us/web/css/border-image/index.md b/files/en-us/web/css/border-image/index.md
index d3c1dc1cf5627ea..7aa30113c8d19f7 100644
--- a/files/en-us/web/css/border-image/index.md
+++ b/files/en-us/web/css/border-image/index.md
@@ -50,7 +50,7 @@ border-image: unset;
The `border-image` property may be specified with anywhere from one to five of the values listed below.
> [!NOTE]
-> If the [computed value](/en-US/docs/Web/CSS/computed_value) of {{cssxref("border-image-source")}} is `none`, or if the image cannot be displayed, the {{cssxref("border-style")}} will be displayed instead.
+> If the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of {{cssxref("border-image-source")}} is `none`, or if the image cannot be displayed, the {{cssxref("border-style")}} will be displayed instead.
### Values
@@ -70,7 +70,7 @@ The `border-image` property may be specified with anywhere from one to five of t
Assistive technology cannot parse border images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+- [Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
## Formal definition
@@ -163,8 +163,8 @@ To match the size of a single diamond, we will use a value of 81 divided by 3, o
border: 10px solid transparent;
padding: 20px;
border-radius: 20px;
- background-image: linear-gradient(white, white),
- linear-gradient(to right, cyan, lime);
+ background-image:
+ linear-gradient(white, white), linear-gradient(to right, cyan, lime);
background-origin: border-box;
background-clip: padding-box, border-box;
}
diff --git a/files/en-us/web/css/border/index.md b/files/en-us/web/css/border/index.md
index 564e9dbe3433e1f..c038978c0f82ab0 100644
--- a/files/en-us/web/css/border/index.md
+++ b/files/en-us/web/css/border/index.md
@@ -58,7 +58,7 @@ The `border` property may be specified using one, two, or three of the values li
## Description
-As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/initial_value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`.
+As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`.
The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.
diff --git a/files/en-us/web/css/calc-keyword/index.md b/files/en-us/web/css/calc-keyword/index.md
index 5cf6b27a8efbf7b..a764e26ee705156 100644
--- a/files/en-us/web/css/calc-keyword/index.md
+++ b/files/en-us/web/css/calc-keyword/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.calc-keyword
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents well-defined constants such as `e` and `pi`. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents well-defined constants such as `e` and `pi`. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.
## Syntax
diff --git a/files/en-us/web/css/calc-size/index.md b/files/en-us/web/css/calc-size/index.md
index d24a8e1e71d519e..5e8d942df9e3ade 100644
--- a/files/en-us/web/css/calc-size/index.md
+++ b/files/en-us/web/css/calc-size/index.md
@@ -68,7 +68,7 @@ The first `calc-size()` argument can be one of the following intrinsic values:
There are also a few special values that this argument can take:
-- A nested `calc-size()` value. This isn't something you'd be likely to do very often, but it is available ensuring using a [CSS variable](/en-US/docs/Web/CSS/Using_CSS_custom_properties) as the `` will always work, provided the variable is a valid value for the property `calc-size()` is being set on. So for example, this will work:
+- A nested `calc-size()` value. This isn't something you'd be likely to do very often, but it is available ensuring using a [CSS variable](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) as the `` will always work, provided the variable is a valid value for the property `calc-size()` is being set on. So for example, this will work:
```css
section {
diff --git a/files/en-us/web/css/calc-sum/index.md b/files/en-us/web/css/calc-sum/index.md
index d09cfead65cd35a..2dd23d7a07fde6c 100644
--- a/files/en-us/web/css/calc-sum/index.md
+++ b/files/en-us/web/css/calc-sum/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.calc-sum
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents an expression which performs a calculation in any [CSS math function](/en-US/docs/Web/CSS/CSS_Functions#math_functions). The expression executes a basic arithmetic operation of addition and subtraction between two values.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents an expression which performs a calculation in any [CSS math function](/en-US/docs/Web/CSS/CSS_Functions#math_functions). The expression executes a basic arithmetic operation of addition and subtraction between two values.
## Syntax
@@ -29,11 +29,11 @@ The `` type defines two numeric values and one of the following [arith
The operands in the expression may be any {{cssxref("<length>")}} syntax value. You can use {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, or {{cssxref("<integer>")}}.
-Different unit types can be used in a single expression. For example, subtracting `px` from `%`, as in `calc(100% - 10px)`, is a valid expression.
+The two operands' types must be consistent. For lengths, you can't use `0` to mean `0px` (or another length unit). Instead, you must add an explicit unit: `margin-top: calc(0px + 20px);` is valid, while `margin-top: calc(0 + 20px);` is invalid. Percentage value types are resolved based on the context. For example, `margin-top: calc(50% + 20px);` is valid because `margin-top` resolves percentages to lengths.
Including [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables) in `calc-sum` expressions is also allowed. The following code `calc(10px + var(--variable))`, is a valid expression.
-The `+` and `-` operators **must be surrounded by {{Glossary("whitespace")}}**. For instance, `calc(50% -8px)` will be parsed as a percentage followed by a negative length — an invalid expression — while `calc(50% - 8px)` is a percentage followed by a subtraction operator and a length. Likewise, `calc(8px + -50%)` is treated as a length followed by an addition operator and a negative percentage.
+The `+` and `-` operators **must be surrounded by {{Glossary("whitespace")}}**. For instance, `calc(50% -8px)` will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while `calc(50% - 8px)` is "a percentage followed by a subtraction operator and a length". Likewise, `calc(8px + -50%)` is treated as "a length followed by an addition operator and a negative percentage".
## Specifications
diff --git a/files/en-us/web/css/calc/index.md b/files/en-us/web/css/calc/index.md
index b7d5152687a44c9..8b48f4b71720d14 100644
--- a/files/en-us/web/css/calc/index.md
+++ b/files/en-us/web/css/calc/index.md
@@ -42,32 +42,45 @@ All operands, except those of type {{cssxref("<number>")}}, must be suffix
## Description
-There's a few points to keep in mind about `calc()`:
+There are a few points to note about `calc()`, which are detailed in the sections below.
-- Serializing the arguments inside `calc()` follows the IEEE-754 standard for floating point math, which means there's a few cases to be aware of regarding the `infinity` and `NaN` constants.
- For more details on how constants are serialized, see the [`calc-keyword`](/en-US/docs/Web/CSS/calc-keyword) page.
+### Resulting values
-- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables _may_ be treated as if `auto` is specified.
+The `calc()` function must stand in place of a full CSS value of one of the following types:
-- The `calc()` function cannot directly substitute the numeric value for percentage types; for instance `calc(100 / 4)%` is invalid, while `calc(100% / 4)` is valid.
+- {{cssxref("<length>")}}
+- {{cssxref("<frequency>")}}
+- {{cssxref("<angle>")}}
+- {{cssxref("<time>")}}
+- {{cssxref("flex_value", "<flex>")}}
+- {{cssxref("<resolution>")}}
+- {{cssxref("<percentage>")}}
+- {{cssxref("<number>")}}
+- {{cssxref("<integer>")}}
+- One of the mixed types like {{cssxref("<length-percentage>")}}
-- When `calc()` is used where an {{cssxref("<integer>")}} is expected, the value will be rounded to the nearest integer. So, `calc(1.4)` will result in a value of `1`. If the fractional part of the value is exactly `0.5`, the value will be rounded up. For example, `calc(1.5)` will result in a value of `2`, while `calc(-1.5)` will round to `-1`.
+`calc()` cannot only replace the numeric part of percentage values, length values, etc., without also replacing the unit after it. For example, `calc(100 / 4)%` is invalid, while `calc(100% / 4)` is valid.
-- `calc()` cannot perform calculations on [intrinsic size values](/en-US/docs/Glossary/Intrinsic_Size) such as {{cssxref("auto")}} and {{cssxref("fit-content")}}. Use the {{cssxref("calc-size()")}} function instead.
+The resulting value of `calc()` must be compatible with the context in which it is used. For example, `margin: calc(1px + 2px)` is valid, but `margin: calc(1 + 2)` is not: it is equivalent to specifying `margin: 3`, which results in the property being ignored.
+
+When an {{cssxref("<integer>")}} is expected, the `calc()` expression can also evaluate to a ``, which gets rounded to the nearest integer. So, `calc(1.4)` will result in a value of `1`. If the fractional part of the value is exactly `0.5`, the value is rounded towards positive infinity. For example, `calc(1.5)` will result in a value of `2`, while `calc(-1.5)` will round to `-1`.
-### Rules and best practices while using `calc()`
+`calc()` performs floating point math following the IEEE-754 standard, which results in some considerations concerning the `infinity` and `NaN` values. For more details on how constants are serialized, see the [`calc-keyword`](/en-US/docs/Web/CSS/calc-keyword) page.
-- The `+` and `-` operators **must be surrounded by {{Glossary("whitespace")}}**. For instance, `calc(50% -8px)` will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while `calc(50% - 8px)` is "a percentage followed by a subtraction operator and a length". Likewise, `calc(8px + -50%)` is treated as "a length followed by an addition operator and a negative percentage".
+### Input considerations
+
+- `calc()` cannot perform calculations on [intrinsic size values](/en-US/docs/Glossary/Intrinsic_Size) such as {{cssxref("auto")}} and {{cssxref("fit-content")}}. Use the {{cssxref("calc-size()")}} function instead.
- The `*` and `/` operators do not require whitespace, but adding it for consistency is recommended.
- It is permitted to nest `calc()` functions, in which case, the inner ones are treated as simple parentheses.
-- For lengths, you can't use `0` to mean `0px` (or another length unit); instead, you must use the version with the unit: `margin-top: calc(0px + 20px);` is valid, while `margin-top: calc(0 + 20px);` is invalid.
-- Current implementations require that for the `*` and `/` operators, one of the operands has to be unitless. For `/`, the right operand must be unitless. For example `font-size: calc(1.25rem / 1.25)` is valid but `font-size: calc(1.25rem / 125%)` is invalid.
+- Current implementations require that, when using the `*` and `/` operators, one of the operands must be unitless. For `/`, the right operand must be unitless. For example `font-size: calc(1.25rem / 1.25)` is valid but `font-size: calc(1.25rem / 125%)` is invalid.
+- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables _may_ be treated as if `auto` is specified.
+- See {{cssxref("calc-sum", "<calc-sum>")}} for more information on the syntax of `+` and `-` expressions.
### Support for computing color channels in relative colors
The `calc()` function can be used to manipulate color channels directly within the context of [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This allows for dynamic adjustments of color channels in color models such as [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), and [`lch()`](/en-US/docs/Web/CSS/color_value/lch).
-The relative color syntax defines a number of color-channel keywords, each of which represents the value of the color channel as a {{cssxref("<number>")}} (see [Channel values resolve to `` values](/en-US/docs/Web/CSS/CSS_colors/Relative_colors#channel_values_resolve_to_number_values) for more information). The `calc()` function can use these color-channel keywords to perform dynamic adjustments on the color channels, for example, `calc(r + 10)`.
+The relative color syntax defines several color-channel keywords, each of which represents the value of the color channel as a {{cssxref("<number>")}} (see [Channel values resolve to `` values](/en-US/docs/Web/CSS/CSS_colors/Relative_colors#channel_values_resolve_to_number_values) for more information). The `calc()` function can use these color-channel keywords to perform dynamic adjustments on the color channels, for example, `calc(r + 10)`.
## Formal syntax
@@ -116,7 +129,7 @@ This ensures that text size will scale if the page is zoomed.
### Automatically sizing form fields to fit their container
-Another use case for `calc()` is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
+Another use case for `calc()` is to help ensure that form fields fit in the available space, without extruding past the edge of their container while maintaining an appropriate margin.
Let's look at some CSS:
@@ -215,6 +228,7 @@ For another example of using the `calc()` function to derive relative colors, se
## See also
+- {{CSSxRef("<calc-sum>")}}
- {{CSSxRef("<calc-keyword>")}}
- [CSS functions](/en-US/docs/Web/CSS/CSS_Functions)
- [A Complete Guide to calc() in CSS](https://css-tricks.com/a-complete-guide-to-calc-in-css/) (CSS-Tricks)
diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md
index f05915a62b4ad8a..694946fb08638c0 100644
--- a/files/en-us/web/css/color-interpolation-method/index.md
+++ b/files/en-us/web/css/color-interpolation-method/index.md
@@ -8,7 +8,7 @@ spec-urls: https://drafts.csswg.org/css-color/#interpolation-space
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the [color space](/en-US/docs/Glossary/Color_space) used for interpolation between {{CSSXref("<color>")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents the [color space](/en-US/docs/Glossary/Color_space) used for interpolation between {{CSSXref("<color>")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}.
When interpolating `` values, the interpolation color space defaults to Oklab.
diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md
index f63c02f38fb8c0e..49dd8d8fa8117b6 100644
--- a/files/en-us/web/css/color_value/index.md
+++ b/files/en-us/web/css/color_value/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.color
{{CSSRef}}
-The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a color.
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a color.
A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Alpha_compositing) _transparency value_, indicating how the color should [composite](https://www.w3.org/TR/compositing-1/#simplealphacompositing) with its background.
> [!NOTE]
@@ -114,7 +114,7 @@ background-color: hsl(0deg 100% 50%);
Color interpolation happens with [gradients](/en-US/docs/Web/CSS/gradient), [transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), and [animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations).
-When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations.
+When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations.
### Interpolation with missing components
diff --git a/files/en-us/web/css/comments/index.md b/files/en-us/web/css/comments/index.md
index e54c41bf355f715..4e3aa4dd8b9a719 100644
--- a/files/en-us/web/css/comments/index.md
+++ b/files/en-us/web/css/comments/index.md
@@ -52,9 +52,9 @@ The `/* */` comment syntax is used for both single and multiline comments. There
- [Syntax](/en-US/docs/Web/CSS/Syntax) guide
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling)
-- [Specificity](/en-US/docs/Web/CSS/Specificity)
-- [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [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
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
diff --git a/files/en-us/web/css/contain/index.md b/files/en-us/web/css/contain/index.md
index b4d65d5c039aa95..20ef6ede3609b7c 100644
--- a/files/en-us/web/css/contain/index.md
+++ b/files/en-us/web/css/contain/index.md
@@ -22,7 +22,7 @@ Using the `contain` property is useful on pages with groups of elements that are
> [!NOTE]
> Using `layout`, `paint`, `strict` or `content` values for this property creates:
>
-> 1. A new [containing block](/en-US/docs/Web/CSS/Containing_block) (for the descendants whose {{cssxref("position")}} property is `absolute` or `fixed`).
+> 1. A new [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) (for the descendants whose {{cssxref("position")}} property is `absolute` or `fixed`).
> 2. A new [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
> 3. A new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context).
diff --git a/files/en-us/web/css/content/index.md b/files/en-us/web/css/content/index.md
index 6002e086eef2aee..5b003c03d2d1d20 100644
--- a/files/en-us/web/css/content/index.md
+++ b/files/en-us/web/css/content/index.md
@@ -136,7 +136,7 @@ If inserted content is not decorative, check that the information is provided to
- [Accessibility support for CSS generated content – Tink](https://tink.uk/accessibility-support-for-css-generated-content/) (2015)
- [WCAG, Guideline 1.3: Create content that can be presented in different ways](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_—_create_content_that_can_be_presented_in_different_ways)
- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
-- [Failure of Success Criterion 1.3.1: inserting non-decorative generated content](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F87) Techniques for WCAG 2.0
+- [Failure of Success Criterion 1.3.1: inserting non-decorative generated content](https://www.w3.org/TR/WCAG20-TECHS/F87) Techniques for WCAG 2.0
## Examples
diff --git a/files/en-us/web/css/cross-fade/index.md b/files/en-us/web/css/cross-fade/index.md
index 686f4d76195d0be..663de2969ad5ee2 100644
--- a/files/en-us/web/css/cross-fade/index.md
+++ b/files/en-us/web/css/cross-fade/index.md
@@ -97,7 +97,7 @@ If the image contains information critical to understanding the page's overall p
When using background images, make sure the contrast in color is great enough that any text is legible over the image as well as if the images are missing.
- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
## Formal syntax
diff --git a/files/en-us/web/css/css_anchor_positioning/using/index.md b/files/en-us/web/css/css_anchor_positioning/using/index.md
index 3274123c8b3e9d3..221c2c81838ccc7 100644
--- a/files/en-us/web/css/css_anchor_positioning/using/index.md
+++ b/files/en-us/web/css/css_anchor_positioning/using/index.md
@@ -306,7 +306,7 @@ The grid tiles are broken up into rows and columns:
- The three rows are represented by the physical values `top`, `center`, and `bottom`. They also have logical equivalents such as `start`, `center`, and `end`, and coordinate equivalents such as `y-start`, `center`, and `y-end`.
- The three columns are represented by the physical values `left`, `center`, and `right`. They also have logical equivalents such as `start`, `center`, and `end`, and coordinate equivalents such as `x-start`, `center`, and `x-end`.
-The dimensions of the center tile are defined by the [containing block](/en-US/docs/Web/CSS/Containing_block) of the anchor element, while the distance between the center tile and the grid's outer edge is defined by the positioned element's containing block.
+The dimensions of the center tile are defined by the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) of the anchor element, while the distance between the center tile and the grid's outer edge is defined by the positioned element's containing block.
`position-area` property values are composed of one or two values based on the row and column values described above, with spanning options available to define the region of the grid where the element should positioned.
@@ -469,7 +469,7 @@ Try selecting new `position-area` values from the `` menu to see the eff
In the above example, we did not explicitly size the positioned element in either dimension. We deliberately omitted sizing to allow you to observe the behavior this causes.
-When a positioned element is placed into `position-area` grid cells without explicit sizing, it aligns with the grid area specified and behaves as if {{cssxref("width")}} were set to {{cssxref("max-content")}}. It is sized according to its [containing block](/en-US/docs/Web/CSS/Containing_block) size, which is the width of its content. This size was imposed by setting `position: fixed`. Auto-sized absolutely and fixed-positioned elements are automatically sized, stretching as wide as needed to fit the text content, while constrained by the edge of the viewport. In this case, when placed on the left side of the grid with any `left` or `inline-start` value, the text wraps. If the anchored element's `max-content` size is narrower or shorter than its anchor, they won't grow to match the size of the anchor.
+When a positioned element is placed into `position-area` grid cells without explicit sizing, it aligns with the grid area specified and behaves as if {{cssxref("width")}} were set to {{cssxref("max-content")}}. It is sized according to its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) size, which is the width of its content. This size was imposed by setting `position: fixed`. Auto-sized absolutely and fixed-positioned elements are automatically sized, stretching as wide as needed to fit the text content, while constrained by the edge of the viewport. In this case, when placed on the left side of the grid with any `left` or `inline-start` value, the text wraps. If the anchored element's `max-content` size is narrower or shorter than its anchor, they won't grow to match the size of the anchor.
If the positioned element is centered vertically, such as with `position-area: bottom center`, it will align with the grid cell specified and the width will be the same as the anchor element. In this case, its minimum height is the anchor element's containing block size. It will not overflow, as the `min-width` is {{cssxref("min-content")}}, meaning it will be at least as wide as its longest word.
diff --git a/files/en-us/web/css/css_animations/index.md b/files/en-us/web/css/css_animations/index.md
index 0b7d55451fd256b..746081e4edd71ca 100644
--- a/files/en-us/web/css/css_animations/index.md
+++ b/files/en-us/web/css/css_animations/index.md
@@ -41,12 +41,8 @@ i {
border-radius: 50%;
animation: falling 3s linear 0s infinite backwards;
/* Snowflakes are made with CSS linear gradients (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) */
- background-image: linear-gradient(
- 180deg,
- transparent 40%,
- white 40% 60%,
- transparent 60%
- ),
+ background-image:
+ linear-gradient(180deg, transparent 40%, white 40% 60%, transparent 60%),
linear-gradient(90deg, transparent 40%, white 40% 60%, transparent 60%),
linear-gradient(45deg, transparent 43%, white 43% 57%, transparent 57%),
linear-gradient(135deg, transparent 43%, white 43% 57%, transparent 57%);
@@ -246,8 +242,11 @@ Click "Play" in the example above to see or edit the code for the animation in t
- {{cssxref("animation-iteration-count")}}
- {{cssxref("animation-name")}}
- {{cssxref("animation-play-state")}}
-- {{cssxref("animation-timing-function")}}
- {{cssxref("animation-timeline")}}
+- {{cssxref("animation-timing-function")}}
+
+> [!NOTE]
+> The CSS Animations Module Level 2 introduces the `animation-trigger`, `animation-trigger-exit-range`, `animation-trigger-exit-range-end`, `animation-trigger-exit-range-start`, `animation-trigger-range`, `animation-trigger-range-end`, `animation-trigger-range-start`, `animation-trigger-timeline`, and `animation-trigger-type` properties. These have not yet been implemented.
### At-rules
@@ -266,6 +265,7 @@ All animations, even those with 0 seconds duration, throw animation events.
- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
- {{domxref("AnimationEvent")}}
+- {{domxref("CSSAnimation")}}
- {{domxref("CSSKeyframeRule")}}
- {{domxref("CSSKeyframesRule")}}
@@ -289,8 +289,8 @@ All animations, even those with 0 seconds duration, throw animation events.
## See also
-- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
-- Properties in the [transitions](/en-US/docs/Web/CSS/CSS_transitions) CSS module to trigger animations based on user actions
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations) module.
+- Properties in the [transitions](/en-US/docs/Web/CSS/CSS_transitions) CSS module to trigger animations based on user actions.
- The {{cssxref("interpolate-size")}} property and {{cssxref("calc-size()")}} function for enabling animations to and from [intrinsic size values](/en-US/docs/Glossary/Intrinsic_Size).
-- The {{htmlelement("canvas")}} HTML element along with [canvas API](/en-US/docs/Web/API/Canvas_API) and [WebGL API](/en-US/docs/Web/API/WebGL_API) to draw graphics and animations
-- The {{domxref("SVGAnimationElement")}} interface for all the animation-related element interfaces, including {{domxref("SVGAnimateElement")}}, {{domxref("SVGSetElement")}}, {{domxref("SVGAnimateColorElement")}}, {{domxref("SVGAnimateMotionElement")}}, and {{domxref("SVGAnimateTransformElement")}}
+- The {{htmlelement("canvas")}} HTML element along with [canvas API](/en-US/docs/Web/API/Canvas_API) and [WebGL API](/en-US/docs/Web/API/WebGL_API) to draw graphics and animations.
+- The {{domxref("SVGAnimationElement")}} interface for all the animation-related element interfaces, including {{domxref("SVGAnimateElement")}}, {{domxref("SVGSetElement")}}, {{domxref("SVGAnimateColorElement")}}, {{domxref("SVGAnimateMotionElement")}}, and {{domxref("SVGAnimateTransformElement")}}.
diff --git a/files/en-us/web/css/css_backgrounds_and_borders/index.md b/files/en-us/web/css/css_backgrounds_and_borders/index.md
index 51fc2cfd04864bc..e9be434de16fc5a 100644
--- a/files/en-us/web/css/css_backgrounds_and_borders/index.md
+++ b/files/en-us/web/css/css_backgrounds_and_borders/index.md
@@ -2,7 +2,9 @@
title: CSS backgrounds and borders
slug: Web/CSS/CSS_backgrounds_and_borders
page-type: css-module
-spec-urls: https://drafts.csswg.org/css-backgrounds/
+spec-urls:
+ - https://drafts.csswg.org/css-backgrounds/
+ - https://drafts.csswg.org/css-backgrounds-4/
---
{{CSSRef}}
@@ -39,7 +41,8 @@ div {
margin: 10px;
border: dotted 15px; /* defaults to `currentcolor` */
border-radius: 100px 0;
- background-image: radial-gradient(
+ background-image:
+ radial-gradient(
circle,
transparent 60%,
currentcolor 60% 70%,
@@ -92,8 +95,6 @@ Click "Play" in the example above to see or edit the code for the animation in t
- {{cssxref("background")}} shorthand
- {{cssxref("background-position-x")}}
- {{cssxref("background-position-y")}}
-- {{cssxref("background-position-inline")}}
-- {{cssxref("background-position-block")}}
- {{cssxref("border-bottom-color")}}
- {{cssxref("border-bottom-style")}}
@@ -116,8 +117,6 @@ Click "Play" in the example above to see or edit the code for the animation in t
- {{cssxref("border-width")}} shorthand
- {{cssxref("border")}} shorthand
-- {{cssxref("border-collapse")}}
-
- {{cssxref("border-bottom-left-radius")}}
- {{cssxref("border-bottom-right-radius")}}
- {{cssxref("border-top-left-radius")}}
@@ -133,6 +132,9 @@ Click "Play" in the example above to see or edit the code for the animation in t
- {{cssxref("box-shadow")}}
+> [!NOTE]
+> The CSS Backgrounds Module Level 4 introduces the `background-position-block`, `background-position-inline`, `background-repeat-block`, `background-repeat-inline`, `background-repeat-x`, `background-repeat-y`, and `background-tbd` properties. These have not yet been implemented.
+
### Data types
- {{cssxref("line-style")}} enumerated type
diff --git a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 27fbe1b73647ec1..00578b0995ffaa3 100644
--- a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -37,7 +37,8 @@ In this example, three backgrounds are stacked: the Firefox logo, an image of bu
.multi-bg-example {
width: 100%;
height: 400px;
- background-image: url(firefox.png), url(bubbles.png),
+ background-image:
+ url(firefox.png), url(bubbles.png),
linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment/index.md b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
index a4e5fa1dffabb24..ca772622aac21b0 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -285,4 +285,4 @@ As the CSS box alignment properties are implemented differently depending on the
- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
-- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
index a272fcf9689d18c..a82492ee885bc78 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
@@ -74,4 +74,4 @@ The grid specification originally contained the definition for the properties {{
- [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout)
- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
-- [Alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Aligning items in CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md
index 92903b465e5ea0a..26cd6175a5e19e1 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -88,7 +88,7 @@ The alignment of text and inline-level content is defined in [CSS text module](/
- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
- [CSS display](/en-US/docs/Web/CSS/CSS_display) module
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
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 da102006462da51..0384576962ce448 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
@@ -40,23 +40,23 @@ 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)
+- [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
+- [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)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
- [Comments](/en-US/docs/Web/CSS/Comments)
- - [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+ - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+ - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
- Values
- - [Initial values](/en-US/docs/Web/CSS/initial_value)
- - [Computed values](/en-US/docs/Web/CSS/computed_value)
- - [Used values](/en-US/docs/Web/CSS/used_value)
- - [Actual values](/en-US/docs/Web/CSS/actual_value)
+ - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
+ - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
+ - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
+ - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md
index 03b889493cf0003..c4d8756587d3b32 100644
--- a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md
+++ b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md
@@ -76,16 +76,16 @@ p {
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
- [Comments](/en-US/docs/Web/CSS/Comments)
- - [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+ - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+ - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- Values
- - [Initial values](/en-US/docs/Web/CSS/initial_value)
- - [Computed values](/en-US/docs/Web/CSS/computed_value)
- - [Used values](/en-US/docs/Web/CSS/used_value)
- - [Actual values](/en-US/docs/Web/CSS/actual_value)
+ - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
+ - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
+ - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
+ - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
index 5020c26c6ef9ce2..e0c6a061899a841 100644
--- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
+++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
@@ -49,11 +49,8 @@ div {
line-height: 100px;
text-align: center;
float: left;
- background-image: repeating-linear-gradient(
- to right,
- black 0px 1px,
- transparent 1px 20px
- ),
+ background-image:
+ repeating-linear-gradient(to right, black 0px 1px, transparent 1px 20px),
repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
background-size:
181px 5px,
diff --git a/files/en-us/web/css/css_cascade/actual_value/index.md b/files/en-us/web/css/css_cascade/actual_value/index.md
new file mode 100644
index 000000000000000..50e2ba07bfccd00
--- /dev/null
+++ b/files/en-us/web/css/css_cascade/actual_value/index.md
@@ -0,0 +1,46 @@
+---
+title: Actual value
+slug: Web/CSS/CSS_cascade/actual_value
+page-type: guide
+spec-urls:
+ - https://www.w3.org/TR/CSS22/cascade.html#actual-value
+ - https://drafts.csswg.org/css-cascade-5/#actual-value
+---
+
+{{CSSRef}}
+
+The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of that property after any necessary approximations have been applied. For example, a {{glossary("user agent")}} that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.
+
+## Calculating a property's actual 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/CSS_cascade/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value).
+2. Next, the [computed value](/en-US/docs/Web/CSS/CSS_cascade/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/CSS_cascade/used_value).
+4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- CSS key concepts:
+ - [CSS syntax](/en-US/docs/Web/CSS/Syntax)
+ - [At-rules](/en-US/docs/Web/CSS/At-rule)
+ - [Comments](/en-US/docs/Web/CSS/Comments)
+ - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+ - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
+ - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+ - [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
+ - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
+ - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
+ - Values
+ - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
+ - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
+ - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
+ - [Resolved values](/en-US/docs/Web/CSS/resolved_value)
+ - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
+ - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
+ - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/cascade/index.md b/files/en-us/web/css/css_cascade/cascade/index.md
similarity index 96%
rename from files/en-us/web/css/cascade/index.md
rename to files/en-us/web/css/css_cascade/cascade/index.md
index eff21d3edbe617d..b81f48a7aa18a3d 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/
---
@@ -9,7 +9,7 @@ spec-urls: https://drafts.csswg.org/css-cascade/
The **cascade** is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one [origin](#origin_types), [cascade layer](/en-US/docs/Web/CSS/@layer), or {{CSSxRef("@scope")}} block set a value for a property on an element.
-The cascade lies at the core of CSS, as emphasized by the name: _**Cascading**_ Style Sheets. When a [selector](/en-US/docs/Web/CSS/CSS_selectors) matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater [specificity](/en-US/docs/Web/CSS/Specificity).
+The cascade lies at the core of CSS, as emphasized by the name: _**Cascading**_ Style Sheets. When a [selector](/en-US/docs/Web/CSS/CSS_selectors) matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
This article explains what the cascade is and the order in which {{Glossary("CSS")}} [declarations](/en-US/docs/Web/API/CSSStyleDeclaration) cascade, covering cascade layers and origin type. Understanding origin precedence is key to understanding the cascade.
@@ -27,7 +27,7 @@ Some browsers let users modify the user-agent stylesheet, but this is rare and n
Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude: that means some differences exist between browsers. To simplify the development process, Web developers may use a CSS reset stylesheet, such as [normalize.css](https://github.com/necolas/normalize.css), which sets common properties values to a known state for all browsers before beginning to make alterations to suit their specific needs.
-Unless the user-agent stylesheet includes an [`!important`](/en-US/docs/Web/CSS/Specificity#the_!important_exception) next to a property, making it "important", styles declared by author styles, including a reset stylesheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector.
+Unless the user-agent stylesheet includes an [`!important`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#the_!important_exception) next to a property, making it "important", styles declared by author styles, including a reset stylesheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector.
### Author stylesheets
@@ -61,7 +61,7 @@ The cascading algorithm determines how to find the value to apply for each prope
| 7 | user-agent (browser) | `!important` |
| 8 | CSS transitions | |
-3. **Specificity**: In case of equality with an origin, the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule is considered to choose one value or another. The specificity of the selectors are compared, and the declaration with the highest specificity wins.
+3. **Specificity**: In case of equality with an origin, the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of a rule is considered to choose one value or another. The specificity of the selectors are compared, and the declaration with the highest specificity wins.
4. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example.
5. **Order of appearance**: In the origin with precedence, if there are competing values for a property that are in style block matching selectors of equal specificity and scoping proximity, the last declaration in the style order is applied.
@@ -73,7 +73,7 @@ The cascade is in ascending order, meaning:
> **Note:** **Transitions and animations**
>
-> Property values set by animation {{cssxref('@keyframes')}} are more important than all normal styles (those with no [`!important`](/en-US/docs/Web/CSS/Specificity#the_!important_exception) set).
+> Property values set by animation {{cssxref('@keyframes')}} are more important than all normal styles (those with no [`!important`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#the_!important_exception) set).
>
> Property values being set in a {{cssxref('transition')}} take precedence over all other values set, even those marked with `!important`.
@@ -418,7 +418,7 @@ After your content has finished altering styles, it may find itself in a situati
- [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
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
-- [Specificity](/en-US/docs/Web/CSS/Specificity)
-- [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
diff --git a/files/en-us/web/css/computed_value/index.md b/files/en-us/web/css/css_cascade/computed_value/index.md
similarity index 77%
rename from files/en-us/web/css/computed_value/index.md
rename to files/en-us/web/css/css_cascade/computed_value/index.md
index 105a620d53c7361..c4c23b5f0084155 100644
--- a/files/en-us/web/css/computed_value/index.md
+++ b/files/en-us/web/css/css_cascade/computed_value/index.md
@@ -1,23 +1,25 @@
---
title: Computed value
-slug: Web/CSS/computed_value
+slug: Web/CSS/CSS_cascade/computed_value
page-type: guide
-spec-urls: https://www.w3.org/TR/CSS22/cascade.html#computed-value
+spec-urls:
+ - https://www.w3.org/TR/CSS22/cascade.html#computed-value
+ - https://drafts.csswg.org/css-cascade-5/#computed-value
---
{{CSSRef}}
-The **computed value** of a [CSS](/en-US/docs/Web/CSS) property is the value that is transferred from parent to child during inheritance. It is calculated from the [specified value](/en-US/docs/Web/CSS/specified_value) by:
+The **computed value** of a [CSS](/en-US/docs/Web/CSS) property is the value that is transferred from parent to child during inheritance. It is calculated from the [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) by:
1. Handling the special values {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}}.
2. Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table.
The computation needed to reach a property's computed value typically involves converting relative values (such as those in `em` units or percentages) to absolute values. For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size).
-However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the [used value](/en-US/docs/Web/CSS/used_value) is determined.
+However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) is determined.
> [!NOTE]
-> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the computed value or the [used value](/en-US/docs/Web/CSS/used_value), depending on the property.
+> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the computed value or the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value), depending on the property.
## Specifications
@@ -30,17 +32,17 @@ However, for some properties (those where percentages are relative to something
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
- [Comments](/en-US/docs/Web/CSS/Comments)
- - [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+ - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+ - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
- Values
- - [Initial values](/en-US/docs/Web/CSS/initial_value)
- - [Used values](/en-US/docs/Web/CSS/used_value)
+ - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
+ - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
- [Resolved values](/en-US/docs/Web/CSS/resolved_value)
- - [Actual values](/en-US/docs/Web/CSS/actual_value)
+ - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/css_cascade/index.md b/files/en-us/web/css/css_cascade/index.md
index 4123071e514048c..ab8fd4cf01db94b 100644
--- a/files/en-us/web/css/css_cascade/index.md
+++ b/files/en-us/web/css/css_cascade/index.md
@@ -46,48 +46,47 @@ The opposite also occurs. Sometimes there are no declarations defining the value
- {{DOMXRef("CSSLayerStatementRule")}}
- {{DOMXRef("CSSRule")}}
-### Key concepts and definitions
-
-- {{cssxref("Specificity")}}
-- [Cascade origin and importance](/en-US/docs/Web/CSS/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)
- - [initial value](/en-US/docs/Web/CSS/initial_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)
-- [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)
-- Glossary: {{glossary("style origin")}}
+### Glossary and definitions
+
+- [Actual value](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
+- [Anonymous layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_block_at-rule_for_named_and_anonymous_layers)
+- [Author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets)
+- [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade)
+- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
+- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
+- [Named layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_statement_at-rule_for_named_layers)
+- [Resolved value](/en-US/docs/Web/CSS/resolved_value)
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value)
+- {{glossary("style origin")}}
+- [Used value](/en-US/docs/Web/CSS/CSS_cascade/used_value)
+- [User origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets)
+- [User-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets)
## 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.
+- [CSS inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
+
+ - : A guide to CSS inheritance.
+
- [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)
- : 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/@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/Specificity).
-
-- [CSS inheritance](/en-US/docs/Web/CSS/Inheritance)
- - : A guide to CSS inheritance.
+ - : 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).
## 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)
+- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
## Specifications
diff --git a/files/en-us/web/css/inheritance/index.md b/files/en-us/web/css/css_cascade/inheritance/index.md
similarity index 81%
rename from files/en-us/web/css/inheritance/index.md
rename to files/en-us/web/css/css_cascade/inheritance/index.md
index dd27faecffc2b6a..5aaf88523fe2aed 100644
--- a/files/en-us/web/css/inheritance/index.md
+++ b/files/en-us/web/css/css_cascade/inheritance/index.md
@@ -1,7 +1,8 @@
---
title: Inheritance
-slug: Web/CSS/Inheritance
+slug: Web/CSS/CSS_cascade/Inheritance
page-type: guide
+spec-urls: https://drafts.csswg.org/css-cascade-5/#css-inheritance
---
{{CSSRef}}
@@ -10,14 +11,14 @@ In CSS, **inheritance** controls what happens when no value is specified for a p
CSS properties can be categorized in two types:
-- **inherited properties**, which by default are set to the [computed value](/en-US/docs/Web/CSS/computed_value) of the parent element
-- **non-inherited properties**, which by default are set to [initial value](/en-US/docs/Web/CSS/initial_value) of the property
+- **inherited properties**, which by default are set to the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of the parent element
+- **non-inherited properties**, which by default are set to [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of the property
Refer to [any CSS property](/en-US/docs/Web/CSS/Reference#index) definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").
## Inherited properties
-When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/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/initial_value) given in the property's summary.
+When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/CSS_cascade/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/CSS_cascade/initial_value) given in the property's summary.
A typical example of an inherited property is the [`color`](/en-US/docs/Web/CSS/color) property. Consider the following style rules and the markup:
@@ -37,7 +38,7 @@ The words "emphasized text" will appear green, since the `em` element has inheri
## Non-inherited properties
-When no value for a **non-inherited property** has been specified on an element, the element gets the [initial value](/en-US/docs/Web/CSS/initial_value) of that property (as specified in the property's summary).
+When no value for a **non-inherited property** has been specified on an element, the element gets the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of that property (as specified in the property's summary).
A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Consider the following style rules and the markup:
@@ -97,13 +98,13 @@ 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
- [CSS syntax](/en-US/docs/Web/CSS/Syntax) guide
- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module
- [At-rules](/en-US/docs/Web/CSS/At-rule)
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting)
diff --git a/files/en-us/web/css/initial_value/index.md b/files/en-us/web/css/css_cascade/initial_value/index.md
similarity index 56%
rename from files/en-us/web/css/initial_value/index.md
rename to files/en-us/web/css/css_cascade/initial_value/index.md
index 989ec4eae25c2ec..24e2f3a98093af8 100644
--- a/files/en-us/web/css/initial_value/index.md
+++ b/files/en-us/web/css/css_cascade/initial_value/index.md
@@ -1,16 +1,18 @@
---
title: Initial value
-slug: Web/CSS/initial_value
+slug: Web/CSS/CSS_cascade/initial_value
page-type: guide
-spec-urls: https://www.w3.org/TR/CSS22/cascade.html#specified-value
+spec-urls:
+ - https://www.w3.org/TR/CSS22/cascade.html#specified-value
+ - https://drafts.csswg.org/css-cascade-5/#specified-value
---
{{CSSRef}}
The **initial value** of a [CSS](/en-US/docs/Web/CSS) property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not:
-- For [inherited properties](/en-US/docs/Web/CSS/Inheritance#inherited_properties), the initial value is used on the _root element only_, as long as no [specified value](/en-US/docs/Web/CSS/specified_value) is supplied.
-- For [non-inherited properties](/en-US/docs/Web/CSS/Inheritance#non-inherited_properties), the initial value is used on _all elements_, as long as no [specified value](/en-US/docs/Web/CSS/specified_value) is supplied.
+- For [inherited properties](/en-US/docs/Web/CSS/CSS_cascade/Inheritance#inherited_properties), the initial value is used on the _root element only_, as long as no [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) is supplied.
+- For [non-inherited properties](/en-US/docs/Web/CSS/CSS_cascade/Inheritance#non-inherited_properties), the initial value is used on _all elements_, as long as no [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) is supplied.
You can explicitly specify the initial value by using the {{cssxref("initial")}} keyword.
@@ -28,17 +30,17 @@ You can explicitly specify the initial value by using the {{cssxref("initial")}}
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
- [Comments](/en-US/docs/Web/CSS/Comments)
- - [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+ - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+ - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
- Values
- - [Computed values](/en-US/docs/Web/CSS/computed_value)
- - [Used values](/en-US/docs/Web/CSS/used_value)
+ - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
+ - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
- [Resolved values](/en-US/docs/Web/CSS/resolved_value)
- - [Actual values](/en-US/docs/Web/CSS/actual_value)
+ - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/specificity/index.md b/files/en-us/web/css/css_cascade/specificity/index.md
similarity index 95%
rename from files/en-us/web/css/specificity/index.md
rename to files/en-us/web/css/css_cascade/specificity/index.md
index 1be420956ea0b83..1182ac98738ae77 100644
--- a/files/en-us/web/css/specificity/index.md
+++ b/files/en-us/web/css/css_cascade/specificity/index.md
@@ -1,6 +1,6 @@
---
title: Specificity
-slug: Web/CSS/Specificity
+slug: Web/CSS/CSS_cascade/Specificity
page-type: guide
spec-urls: https://drafts.csswg.org/selectors/#specificity-rules
---
@@ -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.
@@ -499,8 +499,8 @@ A few things to remember about specificity:
- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module
- [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
-- [Inheritance](/en-US/docs/Web/CSS/Inheritance)
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [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)
diff --git a/files/en-us/web/css/specified_value/index.md b/files/en-us/web/css/css_cascade/specified_value/index.md
similarity index 75%
rename from files/en-us/web/css/specified_value/index.md
rename to files/en-us/web/css/css_cascade/specified_value/index.md
index 1859321a2568085..375e644b69e416b 100644
--- a/files/en-us/web/css/specified_value/index.md
+++ b/files/en-us/web/css/css_cascade/specified_value/index.md
@@ -1,8 +1,10 @@
---
title: Specified value
-slug: Web/CSS/specified_value
+slug: Web/CSS/CSS_cascade/specified_value
page-type: guide
-spec-urls: https://www.w3.org/TR/CSS22/cascade.html#specified-value
+spec-urls:
+ - https://www.w3.org/TR/CSS22/cascade.html#specified-value
+ - https://drafts.csswg.org/css-cascade-5/#specified-value
---
{{CSSRef}}
@@ -11,7 +13,7 @@ The **specified value** of a [CSS](/en-US/docs/Web/CSS) property is the value it
1. If the document's style sheet explicitly specifies a value for the property, the given value will be used.
2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.
-3. If none of the above apply, the element's [initial value](/en-US/docs/Web/CSS/initial_value) will be used.
+3. If none of the above apply, the element's [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) will be used.
## Examples
@@ -57,15 +59,15 @@ p {
## See also
-- [Specificity](/en-US/docs/Web/CSS/Specificity)
-- [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
- [At-rules](/en-US/docs/Web/CSS/At-rule)
- [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/used_value/index.md b/files/en-us/web/css/css_cascade/used_value/index.md
similarity index 85%
rename from files/en-us/web/css/used_value/index.md
rename to files/en-us/web/css/css_cascade/used_value/index.md
index a8e0c12ed17deb9..87687b5b69be7a2 100644
--- a/files/en-us/web/css/used_value/index.md
+++ b/files/en-us/web/css/css_cascade/used_value/index.md
@@ -1,18 +1,20 @@
---
title: Used value
-slug: Web/CSS/used_value
+slug: Web/CSS/CSS_cascade/used_value
page-type: guide
-spec-urls: https://www.w3.org/TR/CSS22/cascade.html#used-value
+spec-urls:
+ - https://www.w3.org/TR/CSS22/cascade.html#used-value
+ - https://drafts.csswg.org/css-cascade-5/#used-value
---
{{CSSRef}}
-The **used value** of a [CSS](/en-US/docs/Web/CSS) property is its value after all calculations have been performed on the [computed value](/en-US/docs/Web/CSS/computed_value).
+The **used value** of a [CSS](/en-US/docs/Web/CSS) property is its value after all calculations have been performed on the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value).
After the {{glossary("user agent")}} has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., {{cssxref("width")}}, {{cssxref("line-height")}}) are in pixels. The used values of shorthand properties (e.g., {{cssxref("background")}}) are consistent with those of their component properties (e.g., {{cssxref("background-color")}} or {{cssxref("background-size")}}) and with {{cssxref("position")}} and {{cssxref("float")}}.
> [!NOTE]
-> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the [computed value](/en-US/docs/Web/CSS/computed_value) or the used value, depending on the property.
+> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) or the used value, depending on the property.
## Example
@@ -105,17 +107,17 @@ CSS 2.0 defined only _computed value_ as the last step in a property's calculati
- CSS key concepts:
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
- [Comments](/en-US/docs/Web/CSS/Comments)
- - [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+ - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+ - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
- Values
- - [Initial values](/en-US/docs/Web/CSS/initial_value)
- - [Computed values](/en-US/docs/Web/CSS/computed_value)
+ - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
+ - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
- [Resolved values](/en-US/docs/Web/CSS/resolved_value)
- - [Actual values](/en-US/docs/Web/CSS/actual_value)
+ - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/css_cascading_variables/index.md b/files/en-us/web/css/css_cascading_variables/index.md
index 254af62f8a3804d..c719a82355e9a09 100644
--- a/files/en-us/web/css/css_cascading_variables/index.md
+++ b/files/en-us/web/css/css_cascading_variables/index.md
@@ -109,7 +109,7 @@ As the slider's value changes from 0 up to 360, the value of the `--hue` [custom
## Guides
-- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)
- : Explains how to use custom properties in CSS and JavaScript, with hints on handling undefined and invalid values, fallbacks, and inheritance.
diff --git a/files/en-us/web/css/using_css_custom_properties/index.md b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md
similarity index 98%
rename from files/en-us/web/css/using_css_custom_properties/index.md
rename to files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md
index 830c704c8734847..3851ca341632f8e 100644
--- a/files/en-us/web/css/using_css_custom_properties/index.md
+++ b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md
@@ -1,6 +1,6 @@
---
title: Using CSS custom properties (variables)
-slug: Web/CSS/Using_CSS_custom_properties
+slug: Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
page-type: guide
---
@@ -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]
@@ -465,7 +465,7 @@ However, when the values of custom properties are parsed, the browser doesn't ye
Unfortunately, these valid values can be used, via the `var()` functional notation, in a context where they might not make sense.
Properties and custom variables can lead to invalid CSS statements, leading to the concept of _valid at computed time_.
-When the browser encounters an invalid `var()` substitution, then the [initial](/en-US/docs/Web/CSS/initial_value) or [inherited](/en-US/docs/Web/CSS/Inheritance) value of the property is used.
+When the browser encounters an invalid `var()` substitution, then the [initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value) or [inherited](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) value of the property is used.
This example is just like the last one, except we use a custom property.
The browser substitutes the value of `--text-color` in place of `var(--text-color)`, but `16px` is not a valid property value for {{cssxref("color")}}.
diff --git a/files/en-us/web/css/css_colors/relative_colors/index.md b/files/en-us/web/css/css_colors/relative_colors/index.md
index f28761fd670c689..298ec845f133f68 100644
--- a/files/en-us/web/css/css_colors/relative_colors/index.md
+++ b/files/en-us/web/css/css_colors/relative_colors/index.md
@@ -26,7 +26,7 @@ color(from origin-color colorspace channel1 channel2 channel3 / alpha)
Relative colors are created using the same [color functions](/en-US/docs/Web/CSS/CSS_colors#functions) as absolute colors, but with different parameters:
1. Include a basic color function (represented by _`color-function()`_ above) such as [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), etc. Which one you pick depends on the color model you want to use for the relative color you are creating (the **output color**).
-2. Pass in the **origin color** (represented above by _`origin-color`_) your relative color will be based on, preceded by the `from` keyword. This can be any valid {{cssxref("<color>")}} value using any available color model including a color value contained in a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties), system colors, `currentColor`, or even another relative color.
+2. Pass in the **origin color** (represented above by _`origin-color`_) your relative color will be based on, preceded by the `from` keyword. This can be any valid {{cssxref("<color>")}} value using any available color model including a color value contained in a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), system colors, `currentColor`, or even another relative color.
3. In the case of the [`color()`](/en-US/docs/Web/CSS/color_value/color) function, include the _[`colorspace`](/en-US/docs/Web/CSS/color_value/color#colorspace)_ of the output color.
4. Provide an output value for each individual channel. The output color is defined after the origin color — represented above by the _`channel1`_, _`channel2`_, and _`channel3`_ placeholders. The channels defined here depend on the [color function](/en-US/docs/Web/CSS/CSS_colors#functions) you are using for your relative color. For example, if you are using [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), you would need to define the values for hue, saturation, and lightness. Each channel value can be a new value, the same as the original value, or a value relative to the channel value of the origin color.
5. Optionally, an `alpha` channel value for the output color can be defined, preceded by a slash (`/`). If the `alpha` channel value is not explicitly specified, it defaults to the alpha channel value of the _`origin-color`_ (not 100%, which is the case for absolute color values).
@@ -173,7 +173,7 @@ It is worth mentioning again that the color system of the origin color doesn't n
## Using custom properties
-When creating a relative color, you can use values defined in [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) both for the origin color and within the output color channel value definitions. Let's look at an example.
+When creating a relative color, you can use values defined in [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) both for the origin color and within the output color channel value definitions. Let's look at an example.
In the below CSS we define two custom properties:
diff --git a/files/en-us/web/css/css_compositing_and_blending/index.md b/files/en-us/web/css/css_compositing_and_blending/index.md
index edb5c07cfe5b83c..576e75eac2d16e7 100644
--- a/files/en-us/web/css/css_compositing_and_blending/index.md
+++ b/files/en-us/web/css/css_compositing_and_blending/index.md
@@ -33,11 +33,8 @@ In this example, each box has a border, two striped background images, and a sol
div {
width: 200px;
height: 200px;
- background-image: repeating-linear-gradient(
- 45deg,
- red 0 15px,
- pink 15px 30px
- ),
+ background-image:
+ repeating-linear-gradient(45deg, red 0 15px, pink 15px 30px),
repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
background-size: 150px 150px;
background-repeat: no-repeat;
diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md
index b1793d6364aed84..8ff756dafaa3299 100644
--- a/files/en-us/web/css/css_conditional_rules/index.md
+++ b/files/en-us/web/css/css_conditional_rules/index.md
@@ -32,6 +32,7 @@ There are plans to further extend possible queries by adding the generalized con
### At-rules
+- {{cssxref("@container")}}
- {{cssxref("@media")}}
- {{cssxref("@supports")}}
@@ -40,6 +41,7 @@ There are plans to further extend possible queries by adding the generalized con
### Functions
+- [`style()`](/en-US/docs/Web/CSS/@container#container_style_queries)
- [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech)
- [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format)
- [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax)
@@ -50,6 +52,9 @@ There are plans to further extend possible queries by adding the generalized con
### data types
+- [``](/en-US/docs/Web/CSS/@container#values)
+- [``](/en-US/docs/Web/CSS/@container#container_style_queries)
+- [Container relative `` units](/en-US/docs/Web/CSS/length#container_query_length_units)
- [``](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntax)
- [``](/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_feature_support)
- `` (see [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition))
@@ -98,10 +103,6 @@ There are plans to further extend possible queries by adding the generalized con
- [``](/en-US/docs/Web/SVG/Attribute/media)
- [CSS logical operators](/en-US/docs/Web/CSS/@media#logical_operators) (`not`, `or`, and `and`)
-- [CSS containment](/en-US/docs/Web/CSS/CSS_containment)
-
- - {{cssxref("@container")}} at-rule
-
- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
- {{domxref("CSS")}} API
diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md
index 3c9aef59b3e9761..d06c79f1e9d2719 100644
--- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md
+++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md
@@ -265,7 +265,7 @@ Feature queries are a useful tool for progressively enhancing a site. They enabl
You don't need to use feature queries to start using new CSS features; CSS error handling means the browser simply ignores CSS it does not yet recognize. However, feature queries are a useful alternative to fallback declarations, and enable writing code once that can eventually be supported everywhere.
-### See also
+## See also
- [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module
- [Using CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
diff --git a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md
index 7a3471e99da8ecb..6545f8c6ab3db3c 100644
--- a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md
+++ b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md
@@ -24,7 +24,7 @@ There are two types of container queries: _container size queries_ and _containe
- : Size queries enable applying styles to elements based on the current [size](/en-US/docs/Web/CSS/@container#descriptors) of a containing element, including the orientation and {{glossary("aspect ratio")}}. The containing elements need to be explicitly declared as _size query containers_.
- **Container style queries**
- - : Style queries enable applying styles to elements based on a containing element's style features. Any non-empty element can be a style query container. Currently, the only style feature supported by style queries is CSS [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). In this case, the query returns true or false depending on the computed value of the containing element's custom properties. When container style queries are fully supported, they will enable you to apply styles to any element's descendants based on any property, declaration, or computed value — for example if the container is `display: inline flex` or has a non-transparent background color.
+ - : Style queries enable applying styles to elements based on a containing element's style features. Any non-empty element can be a style query container. Currently, the only style feature supported by style queries is CSS [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). In this case, the query returns true or false depending on the computed value of the containing element's custom properties. When container style queries are fully supported, they will enable you to apply styles to any element's descendants based on any property, declaration, or computed value — for example if the container is `display: inline flex` or has a non-transparent background color.
In this guide, we learn the basics of container queries by looking at:
@@ -164,7 +164,7 @@ Now, let's dive in and take a look at the different `` types.
### Style queries for custom properties
-Style queries for custom properties allow you to query the [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), also called "CSS variables", of a parent element. They are included within a `` just as you would include any regular CSS property within a feature query: either with or without a value.
+Style queries for custom properties allow you to query the [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), also called "CSS variables", of a parent element. They are included within a `` just as you would include any regular CSS property within a feature query: either with or without a value.
#### Standalone custom property queries
diff --git a/files/en-us/web/css/css_containment/index.md b/files/en-us/web/css/css_containment/index.md
index a01d20234dd1b73..4288ceeecc9b9c6 100644
--- a/files/en-us/web/css/css_containment/index.md
+++ b/files/en-us/web/css/css_containment/index.md
@@ -22,27 +22,6 @@ Container queries are similar to dimension [media queries](/en-US/docs/Web/CSS/C
- {{cssxref("contain")}}
- {{cssxref("content-visibility")}}
-### At-rules and descriptors
-
-- {{cssxref("@container")}}
-- [`@container` descriptors](/en-US/docs/Web/CSS/@container#descriptors):
- - `aspect-ratio`
- - `block-size`
- - `height`
- - `inline-size`
- - `orientation`
- - `width`
-
-### Functions
-
-- [`style()`](/en-US/docs/Web/CSS/@container#container_style_queries)
-
-### Data types
-
-- [``](/en-US/docs/Web/CSS/@container#values)
-- [``](/en-US/docs/Web/CSS/@container#container_style_queries)
-- [Container relative `` units](/en-US/docs/Web/CSS/length#container_query_length_units)
-
### Events
- {{domxref("Element.contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}}
@@ -71,11 +50,12 @@ Container queries are similar to dimension [media queries](/en-US/docs/Web/CSS/C
## Related concepts
-- [Layout and the containing block](/en-US/docs/Web/CSS/Containing_block)
+- [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
- [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
- [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module
+ - {{cssxref("@container")}} at-rule
- {{CSSxRef("container")}} property
- {{CSSxRef("container-name")}} property
- {{CSSxRef("container-type")}} property
diff --git a/files/en-us/web/css/css_containment/using_css_containment/index.md b/files/en-us/web/css/css_containment/using_css_containment/index.md
index 2e5768e2c4f24cf..4c99ae90c557427 100644
--- a/files/en-us/web/css/css_containment/using_css_containment/index.md
+++ b/files/en-us/web/css/css_containment/using_css_containment/index.md
@@ -62,13 +62,13 @@ article {
}
```
-Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using `contain: layout` you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, with the containing box establishing an independent [formatting context](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts).
+Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using `contain: layout` you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, with the containing box establishing an independent [formatting context](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts).
In addition:
- {{cssxref("float")}} layout will be performed independently inside the specified element.
- Margins won't collapse across a layout containment boundary.
-- The layout container is a [containing block](/en-US/docs/Web/CSS/Containing_block) for `absolute`- and `fixed`-positioned descendants.
+- The layout container is a [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) for `absolute`- and `fixed`-positioned descendants.
- The containing box creates a [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), therefore {{cssxref("z-index")}} can be used.
> [!NOTE]
diff --git a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/box-model.png b/files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/box-model.png
similarity index 100%
rename from files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/box-model.png
rename to files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/box-model.png
diff --git a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/index.md
similarity index 97%
rename from files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
rename to files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/index.md
index f8c566e335ba97c..d3dd13a52b8fa3b 100644
--- a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
+++ b/files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/index.md
@@ -1,6 +1,6 @@
---
title: Block and inline layout in normal flow
-slug: Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow
+slug: Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
page-type: guide
---
@@ -19,7 +19,7 @@ For elements with an inline formatting context:
> "In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box." - 9.4.2
-Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.
+Note that the CSS 2.1 specification describes documents as being in a horizontal, top-to-bottom writing mode. For example, by describing the vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode; we explore this in our [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes) guide.
## Elements participating in a block formatting context
diff --git a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/mdn-horizontal.png b/files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/mdn-horizontal.png
similarity index 100%
rename from files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/mdn-horizontal.png
rename to files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/mdn-horizontal.png
diff --git a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/mdn-vertical.png b/files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/mdn-vertical.png
similarity index 100%
rename from files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/mdn-vertical.png
rename to files/en-us/web/css/css_display/block_and_inline_layout_in_normal_flow/mdn-vertical.png
diff --git a/files/en-us/web/css/css_display/block_formatting_context/index.md b/files/en-us/web/css/css_display/block_formatting_context/index.md
index d286fb1811e5a07..8dc38c47e3b53d0 100644
--- a/files/en-us/web/css/css_display/block_formatting_context/index.md
+++ b/files/en-us/web/css/css_display/block_formatting_context/index.md
@@ -41,7 +41,7 @@ Let's have a look at a couple of these in order to see the effect creating a new
### Contain internal floats
-In the following example, we have float content that is the same height as the content alongside it. We have a floated element inside a `` with a `border` applied. The content of that `
` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the `
` now runs through the float. As explained in the [guide to in-flow and out of flow elements](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow), the float has been taken out of flow so the `background` and `border` of the `
` only contain the content and not the float.
+In the following example, we have float content that is the same height as the content alongside it. We have a floated element inside a `
` with a `border` applied. The content of that `
` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the `
` now runs through the float. As explained in the [guide to in flow and out of flow elements](/en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow), the float has been taken out of flow so the `background` and `border` of the `
` only contain the content and not the float.
**using `overflow: auto`**
@@ -228,12 +228,12 @@ In this example, we wrap the second `
` in an outer `
`, and create a ne
## See also
- [CSS syntax](/en-US/docs/Web/CSS/Syntax)
-- [Specificity](/en-US/docs/Web/CSS/Specificity)
-- [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance)
- [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used values](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used values](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
diff --git a/files/en-us/web/css/containing_block/box-model.png b/files/en-us/web/css/css_display/containing_block/box-model.png
similarity index 100%
rename from files/en-us/web/css/containing_block/box-model.png
rename to files/en-us/web/css/css_display/containing_block/box-model.png
diff --git a/files/en-us/web/css/containing_block/index.md b/files/en-us/web/css/css_display/containing_block/index.md
similarity index 97%
rename from files/en-us/web/css/containing_block/index.md
rename to files/en-us/web/css/css_display/containing_block/index.md
index b06a530e47fa143..5ac3346007e3a90 100644
--- a/files/en-us/web/css/containing_block/index.md
+++ b/files/en-us/web/css/css_display/containing_block/index.md
@@ -1,6 +1,6 @@
---
title: Layout and the containing block
-slug: Web/CSS/Containing_block
+slug: Web/CSS/CSS_display/Containing_block
page-type: guide
---
@@ -265,6 +265,6 @@ p {
- [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)
- [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
-- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values
+- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values
- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
- {{glossary("Intrinsic size")}}
diff --git a/files/en-us/web/css/css_flow_layout/index.md b/files/en-us/web/css/css_display/flow_layout/index.md
similarity index 57%
rename from files/en-us/web/css/css_flow_layout/index.md
rename to files/en-us/web/css/css_display/flow_layout/index.md
index 20402d3f88a3484..726f3f9ce36f590 100644
--- a/files/en-us/web/css/css_flow_layout/index.md
+++ b/files/en-us/web/css/css_display/flow_layout/index.md
@@ -1,14 +1,14 @@
---
title: CSS flow layout
-slug: Web/CSS/CSS_flow_layout
+slug: Web/CSS/CSS_display/Flow_layout
page-type: guide
---
{{CSSRef}}
-_Normal Flow_, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken _out of flow_ it works independently.
+_Normal Flow_, or Flow Layout, is the way that block and inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken _out of flow_ it works independently.
-In normal flow, **inline** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the [Writing Mode](/en-US/docs/Web/CSS/CSS_writing_modes) of the document. **Block** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
+In normal flow, **{{Glossary("Inline-level_content", "inline")}}** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the [Writing Mode](/en-US/docs/Web/CSS/CSS_writing_modes) of the document. **{{Glossary("Block/CSS", "block")}}** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
## Basic Example
@@ -49,16 +49,10 @@ span {
{{EmbedLiveSample("normal-flow", "", "250px")}}
-## Guides
+## See also
-- [Block and Inline Layout in Normal Flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
-- [In Flow and Out of Flow](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow)
-- [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)
-- [Flow Layout and Writing Modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
-- [Flow Layout and Overflow](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow)
-
-## Reference
-
-### Glossary Entries
-
-- {{Glossary("Block/CSS", "Block (CSS)")}}
+- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow)
+- [In flow and out of flow](/en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow)
+- [Formatting contexts explained](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts)
+- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes)
+- [Flow layout and overflow](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow)
diff --git a/files/en-us/web/css/css_flow_layout/flow_layout_and_overflow/index.md b/files/en-us/web/css/css_display/flow_layout_and_overflow/index.md
similarity index 94%
rename from files/en-us/web/css/css_flow_layout/flow_layout_and_overflow/index.md
rename to files/en-us/web/css/css_display/flow_layout_and_overflow/index.md
index 934628f499f198b..ed7e6995e0f426d 100644
--- a/files/en-us/web/css/css_flow_layout/flow_layout_and_overflow/index.md
+++ b/files/en-us/web/css/css_display/flow_layout_and_overflow/index.md
@@ -1,6 +1,6 @@
---
title: Flow layout and overflow
-slug: Web/CSS/CSS_flow_layout/Flow_layout_and_overflow
+slug: Web/CSS/CSS_display/Flow_layout_and_overflow
page-type: guide
---
@@ -207,7 +207,7 @@ body {
## Flow Relative Properties
-In the guide to [Writing Modes and Flow Layout](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes), we looked at the `block-size` and `inline-size` properties, which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The [CSS overflow module](/en-US/docs/Web/CSS/CSS_overflow) also includes flow relative properties for overflow - [`overflow-block`](/en-US/docs/Web/CSS/@media/overflow-block) and [`overflow-inline`](/en-US/docs/Web/CSS/@media/overflow-inline). These correspond to `overflow-x` and `overflow-y` but the mapping depends on the writing mode of the document.
+In the guide to [Writing Modes and Flow Layout](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes), we looked at the `block-size` and `inline-size` properties, which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The [CSS overflow module](/en-US/docs/Web/CSS/CSS_overflow) also includes flow relative properties for overflow - [`overflow-block`](/en-US/docs/Web/CSS/@media/overflow-block) and [`overflow-inline`](/en-US/docs/Web/CSS/@media/overflow-inline). These correspond to `overflow-x` and `overflow-y` but the mapping depends on the writing mode of the document.
## Indicating Overflow
diff --git a/files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md b/files/en-us/web/css/css_display/flow_layout_and_writing_modes/index.md
similarity index 97%
rename from files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md
rename to files/en-us/web/css/css_display/flow_layout_and_writing_modes/index.md
index 4ffab8b75c6f07a..eafacffd0e88498 100644
--- a/files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md
+++ b/files/en-us/web/css/css_display/flow_layout_and_writing_modes/index.md
@@ -1,12 +1,12 @@
---
title: Flow layout and writing modes
-slug: Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes
+slug: Web/CSS/CSS_display/Flow_layout_and_writing_modes
page-type: guide
---
{{CSSRef}}
-The CSS 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode. [Layout](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) properties should work in the same way in vertical writing modes. In this guide, we look at how flow layout behaves when used with different document writing modes.
+The CSS 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode. [Layout](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow) properties should work in the same way in vertical writing modes. In this guide, we look at how flow layout behaves when used with different document writing modes.
This is not a comprehensive guide to the use of writing modes in CSS, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways. The [See also](#see_also) section provides links to more writing modes resources.
diff --git a/files/en-us/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md b/files/en-us/web/css/css_display/in_flow_and_out_of_flow/index.md
similarity index 91%
rename from files/en-us/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md
rename to files/en-us/web/css/css_display/in_flow_and_out_of_flow/index.md
index c6c9029d10438f3..a31de8f3362512a 100644
--- a/files/en-us/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md
+++ b/files/en-us/web/css/css_display/in_flow_and_out_of_flow/index.md
@@ -1,12 +1,12 @@
---
title: In flow and out of flow
-slug: Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow
+slug: Web/CSS/CSS_display/In_flow_and_out_of_flow
page-type: guide
---
{{CSSRef}}
-The [previous guide](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) explained block and inline layout in normal flow. All elements that are in flow will be laid out using this method.
+The [previous guide](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow) explained block and inline layout in normal flow. All elements that are in flow will be laid out using this method.
## Example of elements in flow
@@ -212,7 +212,7 @@ When you do anything to remove or shift an item from where it would be placed in
## Summary
-In this guide, we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context), in [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts).
+In this guide, we have explained how to take an element out of flow to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context), in [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts).
## See also
diff --git a/files/en-us/web/css/css_display/index.md b/files/en-us/web/css/css_display/index.md
index ec471e505d6ce08..4f9183d9158f9b6 100644
--- a/files/en-us/web/css/css_display/index.md
+++ b/files/en-us/web/css/css_display/index.md
@@ -2,7 +2,7 @@
title: CSS display
slug: Web/CSS/CSS_display
page-type: css-module
-browser-compat: css.properties.display
+spec-urls: https://drafts.csswg.org/css-display/
---
{{CSSRef}}
@@ -26,52 +26,73 @@ The **CSS display** module defines how the CSS formatting box tree is generated
- {{CSSxRef("<display-internal>")}}
- {{CSSxRef("<display-legacy>")}}
+### Glossary and terms
+
+- {{glossary("block/css", "Block")}}
+- [Block formatting context (BFC)](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
+- {{glossary("Block-level content")}}
+- [Containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
+- {{glossary("Flex")}}
+- [Flow layout](/en-US/docs/Web/CSS/CSS_display/Flow_layout)
+- {{glossary("Grid")}}
+- [Inline formatting context](/en-US/docs/Web/CSS/Inline_formatting_context)
+- {{glossary("Inline-level content")}}
+- [Replaced element](/en-US/docs/Web/CSS/Replaced_element)
+- {{glossary("Ruby")}}
+
## Guides
-- [Using the multi-keyword syntax with CSS display](/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display)
+- [Using the multi-keyword syntax with CSS display](/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display)
- : Describes the multi-keyword syntax and compares this syntax with legacy single-keyword values.
+- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow)
+ - : The basics of how block and inline elements behave when they are part of the normal flow.
+- [Flow layout and overflow](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow)
+ - : How overflow works when working with normal flow.
+- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes)
+ - : How flow layout behaves when used with different document writing modes.
+- [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts)
+ - : Formatting contexts, including block, inline, and flex, their behaviors, and use.
+- [In flow and out of flow](/en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow)
+ - : What takes elements out of flow, and the effect of creating new Block Formatting Contexts.
+
+## Related Concepts
-### Flow layout (display: block, display: inline)
-
-- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
-- [Flow layout and overflow](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow)
-- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
-- [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)
-- [In flow and out of flow](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow)
-
-### Flexible box layout
-
-- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
-- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
-- [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
-- [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
-- [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)
-- [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)
-
-### Grid layout
-
-- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
-- [Relationship of grid layout to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
-- [Line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
-- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
-- [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
-- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)
-- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
-- [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
-- [CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)
-- [CSS grid layout and progressive enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement)
-- [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)
+### Properties
-## Specifications
+- {{cssxref("transition-behavior")}}
+- {{cssxref("overflow")}}
-{{Specifications}}
+### Guides
+
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
-## Browser compatibility
+ - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+ - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+ - [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+ - [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
+ - [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
+ - [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)
+ - [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)
-{{Compat}}
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
+ - [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+ - [Relationship of grid layout to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
+ - [Line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+ - [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
+ - [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
+ - [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)
+ - [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+ - [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
+ - [CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)
+ - [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)
+
+## Specifications
+
+{{Specifications}}
## See also
-- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
-- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
+- [CSS ruby layout](/en-US/docs/Web/CSS/CSS_ruby_layout) module
+- [CSS table](/en-US/docs/Web/CSS/CSS_table) module
+- [Visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model)
diff --git a/files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md b/files/en-us/web/css/css_display/introduction_to_formatting_contexts/index.md
similarity index 96%
rename from files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md
rename to files/en-us/web/css/css_display/introduction_to_formatting_contexts/index.md
index def116cc653023b..8023d616c2171f2 100644
--- a/files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md
+++ b/files/en-us/web/css/css_display/introduction_to_formatting_contexts/index.md
@@ -1,6 +1,6 @@
---
title: Introduction to formatting contexts
-slug: Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts
+slug: Web/CSS/CSS_display/Introduction_to_formatting_contexts
page-type: guide
---
@@ -39,7 +39,7 @@ This is useful because a new BFC will behave much like the outermost document in
Let's have a look at a couple of these in order to see the effect creating a new BFC.
-In the example below, we have a floated element inside a `
` with a border applied. The content of that `
` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the `
` now runs through the float. As explained in the [guide to in-flow and out of flow elements](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow), the float has been taken out of flow so the background and border of the div only contain the content and not the float.
+In the example below, we have a floated element inside a `
` with a border applied. The content of that `
` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the `
` now runs through the float. As explained in the [guide to in-flow and out of flow elements](/en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow), the float has been taken out of flow so the background and border of the div only contain the content and not the float.
```html live-sample___float
@@ -180,7 +180,7 @@ This guide covers flow layout and is therefore not referring to other possible f
## Summary
-In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (BFC). In the next guide, we will find out [how normal flow interacts with different writing modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes).
+In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (BFC). In the next guide, we will find out [how normal flow interacts with different writing modes](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes).
## See also
diff --git a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md b/files/en-us/web/css/css_display/multi-keyword_syntax_of_display/index.md
similarity index 99%
rename from files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md
rename to files/en-us/web/css/css_display/multi-keyword_syntax_of_display/index.md
index 4f7484e2e1415c6..dfba0e22f2871d1 100644
--- a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md
+++ b/files/en-us/web/css/css_display/multi-keyword_syntax_of_display/index.md
@@ -1,6 +1,6 @@
---
title: Using the multi-keyword syntax with CSS display
-slug: Web/CSS/display/multi-keyword_syntax_of_display
+slug: Web/CSS/CSS_display/multi-keyword_syntax_of_display
page-type: guide
---
diff --git a/files/en-us/web/css/css_flexible_box_layout/index.md b/files/en-us/web/css/css_flexible_box_layout/index.md
index 1cd2e2fa998f5e3..cfd0b540507ec96 100644
--- a/files/en-us/web/css/css_flexible_box_layout/index.md
+++ b/files/en-us/web/css/css_flexible_box_layout/index.md
@@ -123,4 +123,4 @@ body {
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
- [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module
-- [Using the multi-keyword syntax with CSS display](/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display)
+- [Using the multi-keyword syntax with CSS display](/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display)
diff --git a/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md b/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md
index deb9673dcfca8da..3833c7787859562 100644
--- a/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md
+++ b/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md
@@ -1113,7 +1113,7 @@ checkBox2.addEventListener("change", () => {
## Font feature settings
-{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) to set the values). Because of this, it's best to use the standard properties shown above wherever possible.
+{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to set the values). Because of this, it's best to use the standard properties shown above wherever possible.
There are a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.
diff --git a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
index 12f692b1c75bd1f..1d9b6c9a7017064 100644
--- a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
+++ b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
@@ -58,7 +58,7 @@ In this section we'll demonstrate the five registered axes defined with examples
`wght` (weight) is a registered axis, and `GRAD` (grade) is a custom one.
-2. If you have set values using `font-variation-settings` and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) (CSS variables) for the individual values, and modifying the value of an individual custom property. Example code follows at the end of the guide.
+2. If you have set values using `font-variation-settings` and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using [CSS Custom Properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) (CSS variables) for the individual values, and modifying the value of an individual custom property. Example code follows at the end of the guide.
### Weight
diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md
index 8f9ff12a86a3cc4..a0c4caef778be9a 100644
--- a/files/en-us/web/css/css_functions/index.md
+++ b/files/en-us/web/css/css_functions/index.md
@@ -6,7 +6,7 @@ page-type: guide
{{CSSRef}}
-**CSS value functions** are statements that invoke special data processing or calculations to return a [CSS](/en-US/docs/Web/CSS) [value](/en-US/docs/Web/CSS/CSS_Values_and_Units) for a CSS property. CSS value functions represent more complex [data types](/en-US/docs/Web/CSS/CSS_Types) and they may take some input arguments to calculate the return value.
+**CSS value functions** are statements that invoke special data processing or calculations to return a [CSS](/en-US/docs/Web/CSS) [value](/en-US/docs/Web/CSS/CSS_Values_and_Units) for a CSS property. CSS value functions represent more complex [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) and they may take some input arguments to calculate the return value.
## Syntax
@@ -25,7 +25,7 @@ Functions can take multiple arguments, which are formatted similarly to CSS prop
## Transform functions
-The {{CSSxRef("<transform-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represent appearance transformation. It is used as a value of {{CSSxRef("transform")}} property.
+The {{CSSxRef("<transform-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represent appearance transformation. It is used as a value of {{CSSxRef("transform")}} property.
### Translate functions
@@ -157,7 +157,7 @@ Each of the pages below contains detailed information about a math function's sy
## Filter functions
-The {{CSSxRef("<filter-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a graphical effect that can change the appearance of an input image. It is used in the {{CSSxRef("filter")}} and {{CSSxRef("backdrop-filter")}} properties.
+The {{CSSxRef("<filter-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a graphical effect that can change the appearance of an input image. It is used in the {{CSSxRef("filter")}} and {{CSSxRef("backdrop-filter")}} properties.
- {{CSSxRef("filter-function/blur", "blur()")}}
- : Increases the image gaussian blur.
@@ -182,7 +182,7 @@ The {{CSSxRef("<filter-function>")}} CSS [data type](/en-US/docs/Web/CSS/C
## Color functions
-The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) specifies different color representations.
+The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) specifies different color representations.
- {{CSSxRef("color_value/rgb", "rgb()")}}
- : Defines a given color according to its red, green, blue and alpha (transparency) components.
@@ -209,7 +209,7 @@ The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/C
## Image functions
-The {{CSSxRef("<image>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) provides graphical representation of images or gradients.
+The {{CSSxRef("<image>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) provides graphical representation of images or gradients.
### Gradient functions
@@ -252,7 +252,7 @@ CSS counter functions are generally used with the {{CSSxRef("content")}} propert
## Shape functions
-The {{CSSxRef("<basic-shape>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a graphical shape. It is used in the {{CSSxRef("clip-path")}}, {{CSSxRef("offset-path")}}, and {{CSSxRef("shape-outside")}} properties.
+The {{CSSxRef("<basic-shape>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a graphical shape. It is used in the {{CSSxRef("clip-path")}}, {{CSSxRef("offset-path")}}, and {{CSSxRef("shape-outside")}} properties.
- {{CSSxRef("basic-shape/circle","circle()")}}
- : Defines a circle shape.
@@ -316,7 +316,7 @@ CSS font functions are used with the {{CSSxRef("font-variant-alternates")}} prop
## Easing functions
-The {{CSSxRef("<easing-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a mathematical function. It is used in transition and animation properties:
+The {{CSSxRef("<easing-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a mathematical function. It is used in transition and animation properties:
- {{cssxref("easing-function/linear", "linear()")}}
- : Easing function that interpolates linearly between its points.
diff --git a/files/en-us/web/css/css_generated_content/index.md b/files/en-us/web/css/css_generated_content/index.md
index 4337fa4933a29c7..d3ea4987e6bb479 100644
--- a/files/en-us/web/css/css_generated_content/index.md
+++ b/files/en-us/web/css/css_generated_content/index.md
@@ -29,7 +29,8 @@ div {
position: relative;
width: 400px;
height: 400px;
- background-image: linear-gradient(
+ background-image:
+ linear-gradient(
115deg,
transparent 48%,
brown,
diff --git a/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
index 208f741e92c0492..89603a945b2bcd4 100644
--- a/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
@@ -6,11 +6,11 @@ page-type: guide
{{CSSRef}}
-In addition to the ability to place items accurately onto a created grid, the CSS grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. You can see auto-placement in action in the simplest of ways by creating a grid on a set of items.
+[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/) contains rules that control what happens when you create a grid and do not explicitly place some or all of the child items within the grid. When you don't need explicit control over content placement, this "auto-placement" is the simplest way of creating a grid for a set of items.
## Default placement
-If you give the items no placement information they will position themselves on the grid, one in each grid cell.
+If you don't give the items placement information, they automatically position themselves on the grid, placing one grid item in each grid cell.
```css hidden
body {
@@ -57,13 +57,13 @@ body {
## Default rules for auto-placement
-As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the `grid-template-rows` property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new _implicit_ rows will be created.
+As you can see with the above example, if you create a grid without placing any items, the child items will lay themselves out, with one grid item in each grid cell in source-code order. The default flow is to arrange items by row. Grid will lay an item out into each cell of the first row. If you have created additional rows using the {{cssxref("grid-template-rows")}} property, then grid will continue placing items in these rows. If the grid does not have enough rows in the [explicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#implicit_and_explicit_grids) to place all of the items new _implicit_ rows will be created.
### Sizing rows in the implicit grid
-The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.
+The default for automatically created rows in the implicit grid is for them to be _auto-sized_. This means that they will size themselves to contain the content added to them without causing an overflow.
-You can however control the size of these rows with the property `grid-auto-rows`. To cause all created rows to be 100 pixels tall for example you would use:
+The size of these rows can be controlled using the property {{cssxref("grid-auto-rows")}} property. For example, to make all rows 100px tall, you can use `grid-auto-rows: 100px;`:
```css hidden
body {
@@ -111,7 +111,7 @@ body {
### Sizing rows using minmax()
-You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
+The {{cssxref("minmax")}} function enables creating rows that have a minimum size, and can grow to fit content as needed when set as the `grid-auto-rows` value. By setting `grid-auto-rows: minmax(100px, auto);` we set each row to be at least 100px tall, while allowing each row to be as tall as needed:
```css hidden
body {
@@ -158,11 +158,11 @@ body {
}
```
-{{EmbedLiveSample('Sizing_rows_using_minmax', '500', '330')}}
+{{EmbedLiveSample('Sizing_rows_using_minmax', '500', '300')}}
### Sizing rows using a track listing
-You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as `200px`. This will continue for as long as content is added to the implicit grid.
+You can also pass in a track listing. This will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as `200px`. This will continue for as long as content is added to the implicit grid.
```css hidden
body {
@@ -213,9 +213,9 @@ body {
### Auto-placement by column
-You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of `column`. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.
+You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of `column`. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}. This works in the same way as {{cssxref("grid-auto-rows")}}.
-In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.
+In this example, we have a grid with three 200px high row tracks. We declare `grid-auto-flow: column;` to auto-place by column. With `grid-auto-columns: 300px 100px;`, the columns created will alternate between being `300px` wide and `100px` wide until there are enough column tracks to hold all of the items.
```css
.wrapper {
@@ -267,7 +267,7 @@ body {
## The order of auto placed items
-A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the [Grid item placement algorithm](https://drafts.csswg.org/css-grid/#auto-placement-algo), however for most of us we just need to remember a few simple rules for our items.
+A grid can contain a mixture of item placements. Some of the items may have a specifically defined position on the grid while others may be auto-placed. If you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the [Grid item placement algorithm](https://drafts.csswg.org/css-grid/#auto-placement-algo), however for most of us we just need to remember a few simple rules for our items.
### Order modified document order
@@ -475,7 +475,7 @@ body {
}
```
-{{EmbedLiveSample('Filling_in_the_gaps', '500', '730')}}
+{{EmbedLiveSample('Filling_in_the_gaps', '500', '680')}}
### Anonymous grid items
diff --git a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index a2dfa522f8e0844..ba9ae0feec6379b 100644
--- a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -6,7 +6,7 @@ page-type: guide
{{CSSRef}}
-[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS grid layout and the new terminology that is part of the CSS grid layout Level 1 specification. The features shown in this overview will then be explained in greater detail in the rest of this guide.
+[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This guide introduces the CSS grid layout and the terminology that is part of the CSS grid layout specification. The features shown in this overview will then be explained in greater detail in the other guides in this series.
## What is a grid?
@@ -14,7 +14,7 @@ A grid is a set of intersecting horizontal and vertical lines defining rows and
### Fixed and flexible track sizes
-You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages or with the `fr` unit designed for this purpose.
+You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages or with the [`fr`](#the_fr_unit) unit designed for this purpose.
### Item placement
@@ -22,23 +22,23 @@ You can place items into a precise location on the grid using line numbers, name
### Creation of additional tracks to hold content
-You can define an explicit grid with grid layout. The grid layout specification is flexible enough to add additional rows and columns when needed. Features such as adding "as many columns that will fit into a container" are included.
+You can define an explicit grid with grid layout. The features defined by the grid layout module provide the flexibility to add additional rows and columns when needed. Features such as adding "as many columns that will fit into a container" are included.
### Alignment control
-Grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned.
+CSS grid layout and [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) features enable us to control how the items align once placed into a grid area, and how the entire grid is aligned.
### Control of overlapping content
More than one item can be placed into a grid cell or area and they can partially overlap each other. This layering may then be controlled with the {{cssxref("z-index")}} property.
-Grid is a powerful specification that, when combined with other parts of CSS such as [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), can help you create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your **grid container**.
+Grid is a powerful layout method that, when combined with other parts of CSS such as [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), can help you create layouts that are responsive, flexible, and accessible. It all starts by creating a grid in your **{{glossary("grid container")}}**.
## Grid container
We create a _grid container_ by declaring `display: grid` or `display: inline-grid` on an element. As soon as we do this, all _direct children_ of that element become _grid items_.
-In this example, I have a containing div with a class of wrapper and, inside are five child elements.
+In this example, we have a containing div with a class of `wrapper`. Nested inside are five child elements.
```html
@@ -50,7 +50,7 @@ In this example, I have a containing div with a class of wrapper and, inside are
```
-I make the `.wrapper` a grid container.
+We make the `.wrapper` a grid container using `display: grid;`.
```css
.wrapper {
@@ -80,27 +80,27 @@ I make the `.wrapper` a grid container.
{{ EmbedLiveSample('The_Grid_container', '200', '330') }}
-All the direct children are now grid items. In a web browser, you won't see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work with the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html), available as part of Firefox's Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value `grid`. Click this and then the grid on this element will be overlaid in the browser window.
+All the direct children are now grid items. In a web browser, you won't see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. If you inspect the grid in your browsers developer tools, you may see a small icon next to the value `grid`. Click this and, in most browsers, the grid on this element will be overlaid in the browser window.
-
+
-As you learn and then work with the CSS grid layout, this tool will give you a better idea of what is happening with your grids visually.
+As you learn and then work with the CSS grid layout, your browser tools will give you a better idea of what is happening with your grids visually.
If we want to start making this more grid-like we need to add column tracks.
## Grid tracks
-We define rows and columns on our grid with the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties. These define grid tracks. A _grid track_ is the space between any two adjacent lines on the grid. The image below shows a highlighted track – this is the first-row track in our grid.
+We define rows and columns on our grid with the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties. These define {{glossary("grid tracks")}}. A _grid track_ is the space between any two adjacent lines on the grid. The image below shows a highlighted track – this is the first-row track in our grid.

-Grid tracks are defined in the explicit grid by using the `grid-template-columns` and `grid-template-rows` properties or the shorthand `grid` or `grid-template` properties. Tracks are also created in the implicit grid by positioning a grid item outside of the tracks created in the explicit grid.
+Grid tracks are defined in the [explicit grid](#implicit_and_explicit_grids) by using the `grid-template-columns` and `grid-template-rows` properties or the shorthand `grid` or `grid-template` properties. Tracks are also created in the implicit grid by positioning a grid item outside of the tracks created in the explicit grid.
### Basic example
-I can add to our earlier example by adding the `grid-template-columns` property, then defining the size of the column tracks.
+We can add to our earlier example by adding the `grid-template-columns` property, then defining the size of the column tracks.
-I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.
+We have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.
```html
@@ -143,7 +143,7 @@ I have now created a grid with three 200-pixel-wide column tracks. The child ite
### The fr unit
-Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new `fr` unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.
+Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The [`fr`](/en-US/docs/Web/CSS/flex_value) unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.
```html
@@ -186,7 +186,7 @@ Tracks can be defined using any length unit. Grid also introduces an additional
### Unequal sizes
-In this next example, we create a definition with a `2fr` track then two `1fr` tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.
+In this example, we create a definition with a `2fr` track then two `1fr` tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.
```html
@@ -229,7 +229,7 @@ In this next example, we create a definition with a `2fr` track then two `1fr` t
### Mixing flexible and absolute sizes
-In this final example, we mix absolute sized tracks with `fr` units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.
+In this final example, we mix absolute sized tracks with `fr` units. The first track is `500px`, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.
```html
@@ -272,7 +272,7 @@ In this final example, we mix absolute sized tracks with `fr` units. The first t
### Track listings with repeat() notation
-Large grids with many tracks can use the `repeat()` notation, to repeat all or a section of the track listing. For example the grid definition:
+Large grids with many tracks can use the [`repeat()`](/en-US/docs/Web/CSS/repeat) notation, to repeat all or a section of the list of grid tracks. For example the grid definition:
```css
.wrapper {
@@ -290,7 +290,7 @@ Can also be written as:
}
```
-Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-pixel track, then a repeating section of 6 `1fr` tracks then a final 20-pixel track.
+Repeat notation can be used for a part of the list of tracks. In this example, we create an 8-column grid; the initial track is `20px`, then a repeating section of 6 `1fr` tracks, and a final `20px` track.
```css
.wrapper {
@@ -299,7 +299,7 @@ Repeat notation can be used for a part of the track listing. In this next exampl
}
```
-Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will consist of 10 tracks, a `1fr` track, and then followed by a `2fr` track. This pattern will be repeated five times.
+Repeat notation (`repeat()`) uses the track listing to create a repeating pattern of tracks. In this example, the grid will have 10 tracks; a `1fr` track is followed by a `2fr` track, with this pattern being repeated five times.
```css
.wrapper {
@@ -310,13 +310,16 @@ Repeat notation takes the track listing, and uses it to create a repeating patte
### Implicit and explicit grids
-When creating our example grid we specifically defined our column tracks with the {{cssxref("grid-template-columns")}} property, but the grid also created rows on its own. These rows are part of the implicit grid. Whereas the explicit grid consists of any rows and columns defined with {{cssxref("grid-template-columns")}} or {{cssxref("grid-template-rows")}}.
+When creating our example grid, we specifically defined our column tracks with the {{cssxref("grid-template-columns")}} property, with the grid creating rows as needed to fit the content. The columns define the explicit grid while the rows are part of the implicit grid.
-If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.
+The _explicit grid_ consists of rows and columns defined with {{cssxref("grid-template-columns")}} or {{cssxref("grid-template-rows")}}. The
+_implicit grid_ extends the defined explicit grid when content is placed outside of that grid, such as into the rows by drawing additional grid lines.
+
+If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.
You can also define a set size for tracks created in the implicit grid with the {{cssxref("grid-auto-rows")}} and {{cssxref("grid-auto-columns")}} properties.
-In the below example, we use `grid-auto-rows` to ensure that tracks created in the implicit grid are 200 pixels tall.
+In this example, we set `grid-auto-rows: 200px`, ensuring the tracks created in this implicit grid are `200px` tall.
```html
@@ -360,9 +363,9 @@ In the below example, we use `grid-auto-rows` to ensure that tracks created in t
### Track sizing and minmax
-When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.
+When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, we may want our rows to never collapse smaller than 100 pixels, but if our content stretches to 300 pixels in height, then we would like the row to stretch to that height. This is solved by the {{cssxref("minmax", "minmax()")}} function.
-Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function. In this next example I am using `minmax()` in the value of {{cssxref("grid-auto-rows")}}. This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of `auto`. Using `auto` means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.
+In this example, we use `minmax()` within the `grid-auto-rows` property value. By setting `grid-auto-rows: minmax(100px, auto);`, automatically created rows will be a minimum of `100px` tall, and have a maximum of `auto`. Setting `auto` as the maximum value means the size will stretch to fit the content, sizing the row based on the cell with the tallest content.
```css
.wrapper {
@@ -392,12 +395,12 @@ Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function
}
```
-```html
+```html hidden
One
Two
-
I have some more content in.
+
We have some more content.
This makes me taller than 100 pixels.
Three
@@ -406,7 +409,7 @@ Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function
```
-{{ EmbedLiveSample('Track_sizing_and_minmax', '240', '470') }}
+{{ EmbedLiveSample('Track_sizing_and_minmax', '240', '270') }}
## Grid lines
@@ -414,15 +417,15 @@ It should be noted that when we define a grid we define the grid tracks, not the

-Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.
+Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, which is discussed in the [grid layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) guide.
### Positioning items against lines
-We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this in a simple way. When placing an item, we target the line – rather than the track.
+The following example demonstrates basic line-based placement; when placing an item, we target the line rather than the track. We explore this in greater detail in the [grid layout using line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) guide.
-In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.
+In this example, the first two items on our three column track grid are placed using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.
-The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.
+The second item starts on grid column line 1, and spans one track. This is the default, so we do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.
```html
@@ -477,12 +480,11 @@ The second item starts on grid column line 1, and spans one track. This is the d
{{ EmbedLiveSample('Positioning_items_against_lines', '230', '450') }}
-> [!NOTE]
-> Don't forget that you can use the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) in Firefox Developer Tools to see how the items are positioned against the lines of the grid.
+Use the grid inspector in your developer tools to see how the items are positioned against the lines of the grid.
### Line-positioning shorthands
-The longhand values used above can be compressed onto one line for columns with {{cssxref("grid-column")}}, and one line for rows with {{cssxref("grid-row")}}. The following example would give the same positioning as in the previous code, but with far less CSS. The value before the forward slash character (`/`) is the start line, the value after the end line.
+The longhand values used above can be compressed onto one line for columns with the {{cssxref("grid-column")}} shorthand, and one line for rows with the {{cssxref("grid-row")}} shorthand. The following example would give the same positioning as in the previous code, but with far less CSS. The value before the forward slash character (`/`) is the start line, the value after the end line.
You can omit the end value if the area only spans one track.
@@ -506,7 +508,7 @@ You can omit the end value if the area only spans one track.
## Grid cells
-A _grid cell_ is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I have highlighted the first cell of the grid.
+A _grid cell_ is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, the first cell of the grid is highlighted.

@@ -518,7 +520,7 @@ Items can span one or more cells both by row or by column, and this creates a _g
## Gutters
-_Gutters_ or _alleys_ between grid cells can be created using the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties, or the shorthand {{cssxref("gap")}}. In the below example, I am creating a 10-pixel gap between columns and a `1em` gap between rows.
+_Gutters_ or _alleys_ between grid cells can be created using the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties, or the shorthand {{cssxref("gap")}}. In the below example, we add a 10-pixel gap between columns and a `1em` gap between rows.
```css
.wrapper {
@@ -529,11 +531,6 @@ _Gutters_ or _alleys_ between grid cells can be created using the {{cssxref("col
}
```
-> [!NOTE]
-> When grid first shipped in browsers the {{cssxref("column-gap")}}, {{cssxref("row-gap")}} and {{cssxref("gap")}} were prefixed with the `grid-` prefix as `grid-column-gap`, `grid-row-gap` and `grid-gap` respectively.
->
-> Browsers all now support unprefixed values, however the prefixed versions will be maintained as aliases making them safe to use.
-
```html
One
@@ -568,17 +565,17 @@ _Gutters_ or _alleys_ between grid cells can be created using the {{cssxref("col
{{ EmbedLiveSample('Gutters') }}
-Any space used by gaps will be accounted for before space is assigned to the flexible length `fr` tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a thick line.
+Any space used by gaps will be accounted for before space is assigned to the flexible length `fr` tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a thick, transparent line.
## Nesting grids
-A grid item can become a grid container. In the following example, I have the three-column grid that I created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.
+A grid item can become a grid container. In the following example, we extend the three-column grid with two positioned items seen earlier, adding sub-items to the first grid item. As these nested items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.

### Nesting without subgrid
-If I set `box1` to `display: grid` I can give it a track definition and it too will become a grid. The items then lay out on this new grid.
+If we set `box1` to `display: grid`, we can give it a track definition and it too will become a grid. The items then lay out on this new grid.
```css
.box1 {
@@ -639,15 +636,15 @@ If I set `box1` to `display: grid` I can give it a track definition and it too w
}
```
-{{ EmbedLiveSample('Nesting_without_subgrid', '600', '340') }}
+{{ EmbedLiveSample('Nesting_without_subgrid', '600', '250') }}
In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.
### Subgrid
-In addition to regular grids, _subgrid_ lets us create nested grids that use the track definition of the parent grid.
+In addition to regular grids, we can create _subgrid_. The `subgrid` value lets us create nested grids that use the track definition of the parent grid.
-To use them, we edit the above nested grid example to change the track definition of `grid-template-columns: repeat(3, 1fr)`, to `grid-template-columns: subgrid`. The nested grid then use the parent grid tracks to lay out items.
+To use them, we edit the above nested grid example to change the track definition of `grid-template-columns: repeat(3, 1fr)`, to `grid-template-columns: subgrid`. The nested grid then uses the parent grid tracks to lay out items.
```css
.box1 {
@@ -780,8 +777,8 @@ We can control the order in which items stack up by using the `z-index` property
}
```
-{{ EmbedLiveSample('Controlling_the_order', '230', '460') }}
+{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}
## Next steps
-In this article, we took a very quick look at the possibilities of grid layouts. Explore and play with the code examples, and then move on to [the next part of this guide](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods), where we will really start to dig into the details of CSS grid layout.
+In this overview, we took a very quick look at the possibilities of grid layouts. Explore and play with the code examples, and then move on to the guide, [relationship of grid layout with other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods), where we will really start to dig into the details of CSS grid layout.
diff --git a/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
index edf190a839f2cc8..7a9c2837fef5db5 100644
--- a/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
@@ -1,44 +1,48 @@
---
-title: Box alignment in grid layout
+title: Aligning items in CSS grid layout
slug: Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout
page-type: guide
---
{{CSSRef}}
-CSS grid layout implements the specification [Box Alignment Level 3](https://drafts.csswg.org/css-align/) which is the same standard [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods. Layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints). While the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the CSS grid layout method has been widely adopted.
+[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) implements [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment), which is the same standard [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) uses for aligning items in its flex container. The alignment module details how alignment should work in all the layout methods.
-This guide presents demonstrations of how box alignment in grid layout works. You will see many similarities in how these properties and values work in flexbox. Due to grid being two-dimensional and flexbox one-dimensional there are some small differences that you should watch out for. So we will start by looking at the two axes that we deal with when aligning things in a grid.
+In this guide, we look at how the box alignment properties are used to align items in grid layout.
+
+You may notice similarities to how these properties and values work in flexbox. Due to grid being two-dimensional and flexbox one-dimensional, there are some small differences that you should watch out for. For this reason, we will start by looking at the two axes that we deal with when aligning things in a grid.
## The two axes of a grid layout
-When working with grid layout you have two axes available to align things against – the _block axis_ and the _inline axis_. The block axis is the axis upon which blocks are laid out in block layout. If you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.
+When working with grid layout you have two axes available to align things against – the _block axis_ and the _inline axis_. The [block axis](/en-US/docs/Glossary/Flow_relative_values#block_direction) is the axis upon which blocks are laid out in block layout. If you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.

-The _inline axis_ runs across the block axis, it is the direction in which text in regular inline flow runs.
+The [inline axis](/en-US/docs/Glossary/Flow_relative_values#inline_direction) runs across the block axis, it is the direction in which text in regular inline flow runs.

We are able to align the content inside grid areas, and the grid tracks themselves on these two axes.
-## Aligning items on the Block Axis
+## Aligning items on the block axis
The {{cssxref("align-self")}} and {{cssxref("align-items")}} properties control alignment on the block axis. When we use these properties, we are changing the alignment of the item within the grid area you have placed it.
### Using align-items
-In the following example, I have four grid areas within my grid. I can use the {{cssxref("align-items")}} property on the grid container, to align the items using one of the following values:
+In the following example, we have four {{glossary("grid areas")}} within our grid. We can use the {{cssxref("align-items")}} property on the {{glossary("grid container")}}, to align the items using `normal`, `stretch`, or {{cssxref("self-position")}} or {{cssxref("baseline-position")}} values:
-- `auto`
- `normal`
+- `stretch`
- `start`
- `end`
- `center`
-- `stretch`
- `baseline`
- `first baseline`
- `last baseline`
+- `auto` (`align-self` only)
+
+The default value is `normal`, which resolves to `stretch` for grid containers.
```css hidden
* {
@@ -98,13 +102,13 @@ In the following example, I have four grid areas within my grid. I can use the {
{{ EmbedLiveSample('Using_align-items', '500', '500') }}
-Keep in mind that once you set `align-items: start`, the height of each child `
` will be determined by the contents of the `
`. This is in contrast to omitting [`align-items`](/en-US/docs/Web/CSS/align-items) completely, in which case the height of each `
` stretches to fill its grid area.
+Keep in mind that once you set `align-items: start`, the height of each child `
` will be determined by the contents of the `
`. This is in contrast to omitting {{cssxref("align-items")}} completely, in which case the height of each `
` stretches to fill its grid area.
-The {{cssxref("align-items")}} property sets the {{cssxref("align-self")}} property for all of the child grid items. This means that you can set the property individually, by using `align-self` on a grid item.
+The `align-items` property sets the {{cssxref("align-self")}} property for all of the child grid items. This means that you can set the property individually, by using `align-self` directly on a grid item.
### Using align-self
-In this next example, I am using the `align-self` property, to demonstrate the different alignment values. The first area, is showing the default behavior of `align-self`, which is to stretch. The second item, has an `align-self` value of `start`, the third `end` and the fourth `center`.
+In this next example, we are using the `align-self` property, to demonstrate the different alignment values. The first area is showing the default behavior of `align-self`, which in this case resolves to `stretch`. The second item, has an `align-self` value of `start`, the third `end` and the fourth `center`.
```css hidden
* {
@@ -168,27 +172,27 @@ In this next example, I am using the `align-self` property, to demonstrate the d
### Items with an intrinsic aspect ratio
-The specification details that the default behavior in {{cssxref("align-self")}} is to stretch, except for items which have an intrinsic {{glossary("aspect ratio")}}, in this case they behave as `start`. The reason for this, is that if items with an aspect ratio are set to stretch, this default would distort them.
-
-This behavior has now been clarified in the specification, with browsers yet to implement the correct behavior. Until that happens, you can ensure that items do not stretch, such as images, which are direct children of the grid, by setting {{cssxref("align-self")}} and {{cssxref("justify-self")}} to start. This will mimic the correct behavior once implemented.
+The default behavior for {{cssxref("align-self")}} is to inherit from the grid container's `align-items` property, for which the `normal` default is to stretch, except for items which have an intrinsic {{glossary("aspect ratio")}}, in this case they behave as `start`. The reason for this, is that if items with an aspect ratio are made to stretch, they would be distorted.
-## Justifying Items on the Inline Axis
+## Justifying items on the inline axis
-As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for `align-self`.
+Whereas `align-items` and `align-self` align items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} aline items on the inline axis. The values you can choose from are similar to the `normal`, `stretch`, {{cssxref("self-position")}} and {{cssxref("baseline-position")}} values of the `align-self` property, along with `left` and `right`. Values include:
-- `auto`
- `normal`
- `start`
- `end`
+- `left`
+- `right`
- `center`
- `stretch`
- `baseline`
- `first baseline`
- `last baseline`
+- `auto` (`justify-self` only)
-You can see the same example as used for {{cssxref("align-items")}}, below. This time we are applying the {{cssxref("justify-self")}} property.
+You can see the same example as used for {{cssxref("align-items")}}, below. This time, we are applying the {{cssxref("justify-self")}} property.
-Once again the default is `stretch`, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:
+Once again, the default is `stretch` other than for items with an intrinsic aspect ratio. This means that grid items will cover their grid area by default, unless you change the alignment. In this example, the first item demonstrates the default `stretch` alignment value:
```css hidden
* {
@@ -250,15 +254,16 @@ Once again the default is `stretch`, other than for items with an intrinsic aspe
{{ EmbedLiveSample('Justifying_Items_on_the_Inline_Axis', '500', '500') }}
-As with {{cssxref("align-self")}} and {{cssxref("align-items")}}, you can apply {{cssxref("justify-items")}} to the grid container, to set the {{cssxref("justify-self")}} value for all items.
+As with `align-self` and `align-items`, you can apply `justify-items` to the grid container to set a `justify-self` value for all the grid items within the container.
-The {{cssxref("justify-self")}} and {{cssxref("justify-items")}} properties are not implemented in flexbox. This is due to the one-dimensional nature of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.
+> [!NOTE]
+> The `justify-self` and `justify-items` properties are not implemented in flexbox. This is due to the one-dimensional nature of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.
### Shorthand properties
-The {{CSSxRef("place-items")}} property is shorthand for {{CSSxRef("align-items")}} and {{CSSxRef("justify-items")}}.
+The {{CSSxRef("place-items")}} property is shorthand for `align-items` and `justify-items`.
-The {{CSSxRef("place-self")}} property is shorthand for {{CSSxRef("align-self")}} and {{CSSxRef("justify-self")}}.
+The {{CSSxRef("place-self")}} property is shorthand for `align-self` and `justify-self`.
## Center an item in the area
@@ -311,7 +316,11 @@ By combining the align and justify properties we can easily center an item insid
## Aligning the grid tracks on the block axis
-If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with {{cssxref("align-content")}} aligning tracks on the block axis, and {{cssxref("justify-content")}} performing alignment on the inline axis. The {{CSSxRef("place-content")}} property is shorthand for {{cssxref("align-content")}} and {{cssxref("justify-content")}}. The values for {{cssxref("align-content")}}, {{cssxref("justify-content")}} and {{cssxref("place-content")}} are:
+If you have a situation where your grid tracks use an area that is smaller than the grid container you can align the grid tracks themselves inside that container. The {{cssxref("align-content")}} aligns the tracks on the block axis and {{cssxref("justify-content")}} aligns on the inline axis. As with the `*-items` and `*-item` properties, the {{CSSxRef("place-content")}} property is shorthand for `align-content` and `justify-content.
+
+The values for `align-content`, `justify-content` and `place-content` all include the {{cssxref("content-distribution")}} and {{cssxref("content-position")}} values. The `align-content` property also accepts {{cssxref("baseline-position")}} values and, like the other `justify-*` properties, `justify-content` also accepts `left` and `right`.
+
+Valid keywords for `place-content` include:
- `normal`
- `start`
@@ -324,14 +333,16 @@ If you have a situation where your grid tracks use an area that is smaller than
- `baseline`
- `first baseline`
- `last baseline`
-
-In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.
+- `left`
+- `right`
The `align-content` property is applied to the grid container as it works on the entire grid.
### Default alignment
-The default behavior in grid layout is `start`, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:
+In this example, the 500px by 500px grid container has three row and three column 100px tracks with a 10px gutter. This means there is space inside the grid container in both the block and inline directions.
+
+By default, our grid tracks are in the top left corner of the grid, aligned against the start grid lines, as the default behavior in grid layout is `start`:
```css
* {
@@ -393,7 +404,13 @@ The default behavior in grid layout is `start`, which is why our grid tracks are
### Setting align-content: end
-If I add `align-content` to my container, with a value of `end`, the tracks all move to the end line of the grid container in the block dimension:
+Using the same CSS and HTML, in this example we add `align-content` with a value of `end` to the container, so the tracks all move to the end line of the grid container in the block dimension:
+
+```css
+.wrapper {
+ align-content: end;
+}
+```
```css hidden
* {
@@ -413,9 +430,7 @@ If I add `align-content` to my container, with a value of `end`, the tracks all
padding: 1em;
color: #d9480f;
}
-```
-```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
@@ -427,7 +442,6 @@ If I add `align-content` to my container, with a value of `end`, the tracks all
"a a b"
"a a b"
"c d d";
- align-content: end;
}
.item1 {
grid-area: a;
@@ -443,7 +457,7 @@ If I add `align-content` to my container, with a value of `end`, the tracks all
}
```
-```html
+```html hidden
Item 1
Item 2
@@ -456,7 +470,13 @@ If I add `align-content` to my container, with a value of `end`, the tracks all
### Setting align-content: space-between
-We can also use values for this property that you may be familiar with from flexbox; the space distribution values of `space-between`, `space-around` and `space-evenly`. If we update {{cssxref("align-content")}} to `space-between`, you can see how the elements on our grid space out:
+We can also apply the {{cssxref("content-distribution")}} space distribution values of `space-between`, `space-around`, `space-evenly`, and `stretch`. In this example, we set {{cssxref("align-content")}}, which aligns the tracks on the block axis, to `space-between`, which spaces out the tracks:
+
+```css
+.wrapper {
+ align-content: space-between;
+}
+```
```css hidden
* {
@@ -476,9 +496,7 @@ We can also use values for this property that you may be familiar with from flex
padding: 1em;
color: #d9480f;
}
-```
-```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
@@ -490,7 +508,6 @@ We can also use values for this property that you may be familiar with from flex
"a a b"
"a a b"
"c d d";
- align-content: space-between;
}
.item1 {
grid-area: a;
@@ -506,7 +523,7 @@ We can also use values for this property that you may be familiar with from flex
}
```
-```html
+```html hidden
Item 1
Item 2
@@ -517,17 +534,24 @@ We can also use values for this property that you may be familiar with from flex
{{ EmbedLiveSample('Setting_align-content_space-between', '500', '600') }}
-It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We're always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.
+If an item spans more than one grid track, using a space distribution value will likely cause items on your grid to become larger because the space that's added between the tracks is added to the spanning item. Therefore, if you use these values, make sure the content of the tracks can cope with the extra space or that you have used alignment properties on the items, so they move to the start or end rather than stretch.
-In the below image I have placed the grid with `align-content`, with a value of `start` alongside the grid when `align-content` has a value of `space-between`. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:
+In the below image, we placed the grid with two different `align-content` values to compare `start` and `space-between`. You can see how the first two items, which span two row tracks, have taken on extra height in the `space-between` example as they gain the space that exists because of the of the free space that was distributed _between_ the three rows:

## Justifying the grid tracks on the inline axis
-On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.
+We can use `justify-content` to perform the same type of alignment on the inline axis that we used `align-content` for in the block axis.
-Using the same example, I am setting {{cssxref("justify-content")}} to `space-around`. This once again causes tracks which span more than one column track to gain extra space:
+Using the same example, we set {{cssxref("justify-content")}} to `space-around`. This once again causes tracks which span more than one column track to gain extra space:
+
+```css
+.wrapper {
+ align-content: space-between;
+ justify-content: space-around;
+}
+```
```css hidden
* {
@@ -547,9 +571,7 @@ Using the same example, I am setting {{cssxref("justify-content")}} to `space-ar
padding: 1em;
color: #d9480f;
}
-```
-```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
@@ -561,8 +583,6 @@ Using the same example, I am setting {{cssxref("justify-content")}} to `space-ar
"a a b"
"a a b"
"c d d";
- align-content: space-between;
- justify-content: space-around;
}
.item1 {
grid-area: a;
@@ -578,7 +598,7 @@ Using the same example, I am setting {{cssxref("justify-content")}} to `space-ar
}
```
-```html
+```html hidden
Item 1
Item 2
@@ -591,9 +611,9 @@ Using the same example, I am setting {{cssxref("justify-content")}} to `space-ar
## Alignment and auto margins
-Another way to align items inside their area is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to `auto`, you know that an auto margin absorbs all of the available space. By setting the margin to `auto` on both sides, it pushes the block into the middle as both margins attempt to take all of the space.
+Another way to align items inside their area is to use auto margins. If you have ever centered a layout in the viewport, or any block level element within its parent, you may have done so by setting the right and left margin of element you wanted to center to `auto`. The auto margin absorbs all of the available space. Setting the margin to `auto` on both sides pushes the block-level element into the middle as both margins attempt to take all of the space.
-In this next example, I have given item 1 a left margin of `auto`. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:
+In this next example, item 1 has its {{cssxref("margin-left")}} property set to `auto`. This pushes the content over to the right side of the area, as the auto margin takes up the available space that remained after space needed for the content has been assigned:
```css hidden
* {
@@ -654,14 +674,24 @@ In this next example, I have given item 1 a left margin of `auto`. You can see h
{{ EmbedLiveSample('Alignment_and_auto_margins', '500', '550') }}
-You can see how the item is aligned by using the [Firefox grid highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html):
+Use the grid inspector in your browser developer tools to see how the item is aligned:
+
+
+
+## Alignment and writing modes
-
+All these examples were in English, a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.
-## Alignment and Writing Modes
+CSS grid layout and CSS box alignment work with writing modes in CSS. When displaying a right to left language, such as Arabic, the start of the grid is the top right, so the default of `justify-content: start` would be for grid tracks to start on the right-hand side of the grid.
-In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.
+Setting {{glossary("physical properties")}}, such as setting auto margins using {{cssxref("margin-right")}} or {{cssxref("margin-left")}}, or absolutely positioning items using the {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} offsets, does not honor writing modes. In the [grids, logical values, and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.
-CSS grid layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of `justify-content: start` would be for grid tracks to start on the right-hand side of the grid.
+## See also
-Setting auto margins, using `margin-right` or `margin-left` however, or absolutely positioning items using the `top`, `right`, `bottom` and `left` offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.
+- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+- [Relationship of grid layout with other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
+- [Grid layout using line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
+- [Grid layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
+- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md
index 0f13888c67cd515..2d58fc9b3d03a05 100644
--- a/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md
+++ b/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md
@@ -6,33 +6,31 @@ page-type: guide
{{CSSRef}}
-Those of us who have been doing web development for more years than we care to remember might consider that CSS grid is a little bit like using "tables for layout". Back in the early days of web design, the way we constructed page layout was to use HTML tables, then fragment our design into the cells of those tables in order to create a layout. This had some advantages over the "CSS Positioning" that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the markup, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.
+HTML is the content layer of a website where we create semantic, well-structured documents. CSS is the presentation layer; we apply CSS to create, among other things, the desired layout for our content. Two-dimensional grid structures are defined using [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
-In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the [CSS Zen Garden](https://www.csszengarden.com/) showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.
-
-[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) does not have the same issues that tables did, our grid structure is defined in CSS rather than in the markup. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from markup, however is it possible to go too far with this idea? Is it possible that we could _create_ an accessibility issue through our use of grids?
+Even though modern HTML and CSS are designed to enable the creation of semantic, accessible content and designs, there are ways to _create_ accessibility issues with grids. This article looks at the potential issues that can arise, and how to avoid them.
## Re-ordering content in CSS grid layout
-We've already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use `grid-auto-flow: dense` which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.
+We've already seen in these guides that CSS grid layout gives us the power to re-order our page content by positioning items using [line-based placement of grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement). This placement can be done without considering the item's location in the source. There is also the {{cssxref("order")}} property, which can change how items auto-place. The {{cssxref("grid-auto-flow")}} property has a `dense` value, which can take items visually out of the DOM order.
-The [specification](https://drafts.csswg.org/css-grid/#order-accessibility) includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using grid layout.
+The CSS grid layout specification includes a [Reordering and Accessibility](https://drafts.csswg.org/css-grid/#order-accessibility) section. The introduction to that section details what browsers should do when content is visually reordered using grid layout:
-> Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. [tabindex](/en-US/docs/Web/HTML/Global_attributes/tabindex) HTML5).
+> Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The `order` property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex)).
-If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.
+If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in the tab order.
The specification warns authors (the CSSWG term for web developers) not to do this reordering.
-> Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.
+> Authors must use `order` and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.
What does this mean for designing with grid layout in practice?
### Visual not logical re-ordering
-Any time you reorder things with grid layout – or with flexbox – you only perform _visual reordering_. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.
+Any time you reorder things with grid layout – or with flexbox – you only perform _visual reordering_. The underlying source is what controls things like text to speech, and the tab order of the document. We can see how this works with an example.
-In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.
+In this example, we have a grid containing five items, each containing a link. The items are placed with line-based placement properties. We've positioned box 1 on the second row of the grid so it visually appears as the fourth item in the list. If we navigate through the links with the tab key, the tab order still begins with box 1, as it comes first in the source.
```css hidden
* {
@@ -77,33 +75,31 @@ In this example I have used grid to lay out a set of boxes that contain links. I
```
-{{ EmbedLiveSample('Visual_not_logical_re-ordering', '500', '330') }}
+{{ EmbedLiveSample('Visual_not_logical_re-ordering', '500', '230') }}
-The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.
+The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our HTML source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering; logical ordering is important for the meaning and structure of our document and we should make sure that we preserve that structure.
## How should we approach accessibility for grid layout?
From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?
- Start with a structured and accessible document
- - : A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS grid layout specification, this is quite often going to give you a good structure for _your smallest screen devices too_. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.
+ - : A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. This is quite often going to give you a good structure for _your smallest screen devices too_. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.
- Create a responsive, and responsible grid
- - : With a solid document you can begin to add your layout, it is likely you will be using [media queries](/en-US/docs/Web/CSS/CSS_media_queries) to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to _tab around the document_. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.
+ - : With a solid document structure defined in your HTML, you can use CSS to add your layout on top. You will likely use [media queries](/en-US/docs/Web/CSS/CSS_media_queries) to make changes for different screen sizes and devices, including creating additional columns for larger screens. Grid can be very useful here. For example, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout. The key here is to keep testing. A good test is to _tab around the document_. Does the order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. That is a sign that you need to address something about the layout.
- Returning to the source
- - : If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS grid layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.
+ - : If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS grid layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. The onus is on us as developers to remember to go back to our source and update it to maintain logical order.
## Grid and the danger of markup flattening
Another issue to be aware of in CSS grid layout and to a lesser extent in CSS flexbox, is the temptation to _flatten_ markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, _that_ `ul` becomes a grid item – the child {{HTMLElement("li")}} elements do not.
-The [subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) value of `grid-template-columns` and `grid-template-rows` will solve this problem once widely implemented. It will allow the grid to be inherited by grid items and passed down the tree.
-
-Given that interoperable support for subgrid is limited, there is a definite temptation when developing a site using CSS grid layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to `display: grid`. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!
-
-## Further reading
+The [`subgrid`](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) value of `grid-template-columns` and `grid-template-rows` solves this problem. It allows the grid to be inherited by grid items and passed down the tree. Alternatively, setting `display: contents` on a grid item causes the element's children to become grid items. If you set an item to `display: contents`, the box it would normally create disappears and the boxes of the child elements appear as if they have risen up a level.
-There is not a lot of existing material regarding accessibility and CSS grid layout. Many of the issues are similar to those raised regarding CSS flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property.
+Starting out with a well-structured document is a very good way to avoid accessibility problems.
-The concept of visual display following document source order is detailed in the _WCAG Techniques for Success Criteria – [Technique C27](https://www.w3.org/TR/WCAG20-TECHS/C27.html)_.
+## See also
-As a way to start thinking about these issues, as you use CSS grid layout I would suggest reading _[Flexbox & the Keyboard Navigation Disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)_ from Léonie Watson. Also [the video of Léonie's presentation from ffconf](https://www.youtube.com/watch?v=spxT2CmHoPk) is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding [tab order in various browsers](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) – although this was prior to grid support being fully implemented in Firefox.
+- [Flexbox & the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) and [(Human After All): Accessibility remix video](https://www.youtube.com/watch?v=spxT2CmHoPk) via Léonie Watson (2016)
+- [Grid, content re-ordering and accessibility](https://css-tricks.com/grid-content-re-ordering-and-accessibility/) via CSS-tricks (2019)
+- [`display: contents` is not a CSS reset](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) via Adrian Roselli (2024)
diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md
deleted file mode 100644
index b25e5c0036be058..000000000000000
--- a/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md
+++ /dev/null
@@ -1,386 +0,0 @@
----
-title: CSS grid layout and progressive enhancement
-slug: Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement
-page-type: guide
----
-
-{{CSSRef}}
-
-In Spring of 2017, we saw for the first time a major specification like grid being shipped into browsers almost simultaneously, and we now have CSS grid layout support in the public versions of Firefox, Chrome, Opera, Safari and Edge. However, while evergreen browsers mean that many of us are going to see the majority of users having grid layout support very quickly, there are also old or non-supporting browsers to contend with. In this guide we will walk through a variety of strategies for support.
-
-## The supporting browsers
-
-CSS grid layout is unprefixed in all modern browsers. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some grid layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production.
-
-## Is it safe to use CSS grids for my layout?
-
-Yes. As with any front-end technology choice, the decision to use CSS grid layout will come down to the browsers your site visitors are typically using.
-
-## Starting to use grid in production
-
-It is worth noting that you do not have to use grid in an _all or nothing_ way. Start by enhancing elements in your design with grid, that could otherwise display using an older method. Overwriting of legacy methods with grid layout works surprisingly well, due to the way grid interacts with these other methods.
-
-### Floats
-
-[Floats](/en-US/docs/Learn_web_development/Core/CSS_layout/Floats) used to be used to create multiple column layouts. If you're supporting an old codebase with floated layouts, there will be no conflict. Grid items ignore the float property; the fact is that _a grid item takes precedence._ In the example below, I have a simple media object. If the {{cssxref("float")}} is not removed from legacy CSS, as the container is a grid container, it's OK. We can use the alignment properties that are implemented in CSS grids.
-
-The {{cssxref("float")}} no longer applies, and I can use the CSS Box Alignment property {{cssxref("align-self")}} to align my content to the end of the container:
-
-```css
-* {
- box-sizing: border-box;
-}
-img {
- max-width: 100%;
- display: block;
-}
-.media {
- border: 2px solid #f76707;
- border-radius: 5px;
- background-color: #fff4e6;
- max-width: 400px;
- display: grid;
- grid-template-columns: 1fr 2fr;
- grid-template-areas: "img content";
- margin-bottom: 1em;
-}
-.media::after {
- content: "";
- display: block;
- clear: both;
-}
-.media .text {
- padding: 10px;
- align-self: end;
-}
-
-/* old code we can't remove */
-.media .image {
- float: left;
- width: 150px;
- margin-right: 20px;
-}
-```
-
-```html
-
-```
-
-{{ EmbedLiveSample('Floats', '500', '200') }}
-
-The image below shows the media object in a non-supporting browser on the left, and a supporting one on the right:
-
-
-
-### Using feature queries
-
-The above example is very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers. However, things are not always so simple.
-
-#### A more complex example
-
-In this next example, I have a set of floated cards. I have given the cards a {{cssxref("width")}}, in order to {{cssxref("float")}} them. To create gaps between the cards, I use a {{cssxref("margin")}} on the items, and then a negative margin on the container:
-
-```css hidden
-* {
- box-sizing: border-box;
-}
-
-.wrapper {
- border: 2px solid #f76707;
- border-radius: 5px;
- background-color: #fff4e6;
- max-width: 600px;
- margin: 0 auto;
-}
-.wrapper li {
- border: 2px solid #ffa94d;
- border-radius: 5px;
- background-color: #ffd8a8;
- padding: 1em;
- color: #d9480f;
-}
-```
-
-```css
-.wrapper ul {
- overflow: hidden;
- margin: 0 -10px;
- padding: 0;
- list-style: none;
-}
-.wrapper li {
- float: left;
- width: calc(33.333333% - 20px);
- margin: 0 10px 20px 10px;
-}
-```
-
-```html
-
-
-
- One
- We can use CSS grid to overwrite older methods.
-
-
- Two
- We can use CSS grid to overwrite older methods.
-
-
- Three
- We can use CSS grid to overwrite older methods.
-
-
- Four
- We can use CSS grid to overwrite older methods.
-
-
- Five
- We can use CSS grid to overwrite older methods.
-
-
- Six
- We can use CSS grid to overwrite older methods.
-
-
-
-```
-
-{{ EmbedLiveSample('A_more_complex_example', '550', '450') }}
-
-The example demonstrates the typical problem that we have with floated layouts: if additional content is added to any one card, the layout breaks.
-
-
-
-As a concession for older browsers, I have set a {{cssxref("min-height")}} on the items, and hope that my content editors won't add too much content and make a mess of the layout!
-
-I then enhance the layout using grid. I can turn my {{HTMLElement("ul")}} into a grid container with three column tracks. However, the width I have assigned to the list items themselves still applies, and it now makes those items a third of the width of the track:
-
-
-
-If I reset the width to `auto`, then this will stop the float behavior happening for older browsers. I need to be able to define the width for older browsers, and remove the width for grid supporting browsers. Thanks to [CSS Feature Queries](/en-US/docs/Web/CSS/@supports) I can do this, right in my CSS.
-
-#### A solution using feature queries
-
-_Feature queries_ will look very familiar if you have ever used a [media query](/en-US/docs/Web/CSS/CSS_media_queries) to create a responsive layout. Rather than checking a {{glossary("viewport")}} width, or some feature of the browser or device, we check for support of a CSS property and value pair using an {{cssxref("@supports")}} rule. Inside the feature query, we can then write any CSS we need to apply our modern layout, and remove anything required for the older layout.
-
-```css
-@supports (display: grid) {
- .wrapper {
- /* do anything for grid supporting browsers here. */
- }
-}
-```
-
-Feature queries have excellent browser support, and all of the browsers that support the updated grid specification support feature queries too. You can use them to deal with the issue we have with our enhanced: floated layout.
-
-I use an `@supports` rule to check for support of `display: grid`. I then do my grid code on the {{HTMLElement("ul")}}, set my width and {{cssxref("min-height")}} on the {{HTMLElement("li")}} to `auto`. I also remove the margins and negative margins, and replace the spacing with the {{cssxref("gap")}} property. This means I don't get a final margin on the last row of boxes. The layout now works, even if there is more content in one of the cards, than the others:
-
-```css hidden
-* {
- box-sizing: border-box;
-}
-
-.wrapper {
- border: 2px solid #f76707;
- border-radius: 5px;
- background-color: #fff4e6;
- max-width: 600px;
- margin: 0 auto;
-}
-.wrapper li {
- border: 2px solid #ffa94d;
- border-radius: 5px;
- background-color: #ffd8a8;
- padding: 1em;
- color: #d9480f;
-}
-```
-
-```css
-.wrapper ul {
- overflow: hidden;
- margin: 0 -10px;
- padding: 0;
- list-style: none;
-}
-.wrapper li {
- float: left;
- width: calc(33.333333% - 20px);
- margin: 0 10px 20px 10px;
-}
-@supports (display: grid) {
- .wrapper ul {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 20px;
- margin: 0;
- }
- .wrapper li {
- width: auto;
- min-height: auto;
- margin: 0;
- }
-}
-```
-
-```html
-
-
-
- One
- We can use CSS grid to overwrite older methods.
-
-
- Two
- We can use CSS grid to overwrite older methods.
- We can use CSS grid to overwrite older methods.
-
-
- Three
- We can use CSS grid to overwrite older methods.
-
-
- Four
- We can use CSS grid to overwrite older methods.
-
-
- Five
- We can use CSS grid to overwrite older methods.
-
-
- Six
- We can use CSS grid to overwrite older methods.
-
-
-
-```
-
-{{ EmbedLiveSample('A_solution_using_feature_queries', '550', '480') }}
-
-## Overwriting other values of `display`
-
-Due to the problems of creating grids of items using floats, many of us would use a different method to the floated method shown above to lay out a set of cards. Using `display: inline-block` is an alternate method.
-
-Once again I can use feature queries to overwrite a layout that uses `display: inline-block`, and again I don't need to overwrite everything. An item that is set to `inline-block` becomes a grid item, and so the behavior of `inline-block` no longer applies. I have used the {{cssxref("vertical-align")}} property on my item when in the `inline-block` display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item:
-
-```css hidden
-* {
- box-sizing: border-box;
-}
-
-.wrapper {
- border: 2px solid #f76707;
- border-radius: 5px;
- background-color: #fff4e6;
- max-width: 600px;
- margin: 0 auto;
-}
-
-.wrapper li {
- border: 2px solid #ffa94d;
- border-radius: 5px;
- background-color: #ffd8a8;
- padding: 1em;
- color: #d9480f;
-}
-```
-
-```css
-.wrapper ul {
- margin: 0 -10px;
- padding: 0;
- list-style: none;
-}
-
-.wrapper li {
- display: inline-block;
- vertical-align: top;
- width: calc(33.333333% - 20px);
- margin: 0 10px 20px 10px;
-}
-@supports (display: grid) {
- .wrapper ul {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 20px;
- margin: 0;
- }
- .wrapper li {
- width: auto;
- margin: 0;
- }
-}
-```
-
-```html
-
-
-
- One
- We can use CSS grid to overwrite older methods.
-
-
- Two
- We can use CSS grid to overwrite older methods.
- We can use CSS grid to overwrite older methods.
-
-
- Three
- We can use CSS grid to overwrite older methods.
-
-
- Four
- We can use CSS grid to overwrite older methods.
-
-
- Five
- We can use CSS grid to overwrite older methods.
-
-
- Six
- We can use CSS grid to overwrite older methods.
-
-
-
-```
-
-{{ EmbedLiveSample('Overwriting_other_values_of_display', '500', '480') }}
-
-Once again it is the width on the item we need to address, and then any other properties we want to enhance. In this example I have again used `gap`, rather than margins and negative margins to create my gutters.
-
-## How does the specification define these overrides?
-
-The CSS grid layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. The key sections of the specification are:
-
-- [Establishing grid containers](https://drafts.csswg.org/css-grid/#grid-containers)
-- [Grid items](https://drafts.csswg.org/css-grid/#grid-items)
-- [Grid item display](https://drafts.csswg.org/css-grid/#grid-item-display)
-
-As this behavior is detailed in the specification, you are safe to rely on using these overrides in your support for older browsers. Nothing described here should be seen as a "hack". Rather, we are taking advantage of the fact that the grid specification details the interaction between different layout methods.
-
-### Other values of display
-
-When an element has a parent set to `display: grid` it is _blockified_, as defined in the [CSS display specification](https://drafts.csswg.org/css-display-3/#blockify). In the case of our item set to `inline-block`, this is why `display: inline-block` no longer applied.
-
-If you are using `display: table` for your legacy layout, an item set to `display: table-cell` generates anonymous boxes. Therefore, if you use `display: table-cell` without any parent element set to `display-table`, an anonymous table wrapper is created around any adjacent cells, just as if you had wrapped them in a div or other element set to `display: table`. If you have an item set to `display: table-cell`, and then in a feature query change the parent to `display: grid`, this anonymous box creation will not happen. This means you can overwrite `display: table` based layouts, without having additional anonymous boxes.
-
-### Floated elements
-
-As we have already seen, {{cssxref("float")}} and also {{cssxref("clear")}} have no effect on a grid item. Therefore you do not need to explicitly set items to `float: none`.
-
-### Vertical alignment
-
-The alignment property {{cssxref("vertical-align")}} has no effect on a grid item. In layouts using `display: inline-block` or `display: table`, you might use the `vertical-align` property to perform basic alignment. In your grid layout you then have the far more powerful box alignment properties.
-
-### Multiple-column layout
-
-You can also use multiple column layout as your legacy browser plan, as the `column-*` properties do not apply when applied to a grid container.
diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
index 170513a3047883b..4e2b69dbdadaab3 100644
--- a/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
+++ b/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
@@ -6,17 +6,13 @@ page-type: guide
{{CSSRef}}
-In the [article covering the basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout), we started to look at how to position items on a grid using line numbers. In this article, we will fully explore how this fundamental feature of the specification works.
+In the [basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) guide, we took a brief look at positioning items on a grid using line numbers. In this guide, we will fully explore how this fundamental feature of the specification works.
-Starting your exploration of grid with numbered lines is the most logical place to begin because when you use grid layout, you always have numbered lines. The lines are numbered for columns and rows, and are indexed from 1. Note that grid is indexed according to the writing mode of the document. In a left to right language such as English line 1 is on the left-hand side of the grid. If you are working in a right-to-left language such as Arabic then line 1 will be the far right of the grid. We will learn more about the interaction between writing modes and grids in a later guide.
+Starting your exploration of grid with numbered lines is the most logical place to begin because when you use grid layout, you always have numbered lines. The lines are numbered for columns and rows, and are indexed from `1`. Note that grid is indexed according to the writing mode of the document. In a left to right language, such as English, line 1 is on the left-hand side of the grid. If you are working in a right-to-left language, such as Arabic, then line 1 will on the right-hand of the grid. We will learn more about the interaction between writing modes and grids in the [grids, logical values, and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) guide.
## A basic example
-As a very simple example we can take a grid with 3 column tracks and 3 row tracks. This gives us 4 lines in each dimension.
-
-Inside our grid container, we have four child elements. If we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. If you use the [Firefox grid highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) you can see how the grid has defined columns and rows.
-
-
+As a basic example, we create a grid with 3 column tracks and 3 row tracks. This gives us 4 lines in each dimension.
```css hidden
* {
@@ -46,6 +42,8 @@ Inside our grid container, we have four child elements. If we do not place these
}
```
+Inside our grid container, we include four child elements.
+
```html
One
@@ -57,9 +55,13 @@ Inside our grid container, we have four child elements. If we do not place these
{{ EmbedLiveSample('A_basic_example', '300', '330') }}
+If we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. You can inspect the grid with your browser developer tools to see how the grid defines columns and rows.
+
+
+
## Positioning items by line number
-We can use line-based placement to control where these items sit on the grid. We would like the first item to start on the far left of the grid and span a single column track. It should also start on the first row line, at the top of the grid and span to the fourth row line.
+We can use line-based placement to control where these items sit on the grid. We can use the {{cssxref("grid-column-start")}} and {{cssxref("grid-column-end")}} properties to make the first item start on the far left of the grid and span a single column track. With {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}}, we make the item start on the first row line at the top of the grid, and span to the fourth row line.
```css
.box1 {
@@ -70,9 +72,9 @@ We can use line-based placement to control where these items sit on the grid. We
}
```
-As you position some items, other items on the grid will continue to be laid out using the auto-placement rules. We will take a proper look at how these work in a later guide but you can see as you work that grid is laying out un-placed items into empty cells of the grid.
+As you position some items, other items on the grid will continue to be laid out using the auto-placement rules. This behavior is explained in the [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) guide. For now, observe how the grid is laying out un-placed items into empty cells of the grid.
-Addressing each item individually we can place all four items spanning row and column tracks. Note that we can leave cells empty if we wish. One of the very nice things about grid layout is the ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left.
+Addressing each item individually using the same properties but with different values, we place all four items, spanning row and column tracks.
```css hidden
* {
@@ -135,9 +137,11 @@ Addressing each item individually we can place all four items spanning row and c
{{ EmbedLiveSample('Positioning_items_by_line_number', '300', '330') }}
+Note that we can leave cells empty if we wish. One of the very nice things about grid layout is the ability to have white space in our designs without any hacks.
+
## The `grid-column` and `grid-row` shorthands
-We have quite a lot of code here to position each item. It should come as no surprise to know there is a [shorthand](/en-US/docs/Web/CSS/Shorthand_properties). The {{cssxref("grid-column-start")}} and {{cssxref("grid-column-end")}} properties can be combined into {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} into {{cssxref("grid-row")}}.
+The previous example had quite a lot of code to position each item. It should come as no surprise to know there is a [shorthand](/en-US/docs/Web/CSS/Shorthand_properties). The {{cssxref("grid-column-start")}} and {{cssxref("grid-column-end")}} properties can be combined into {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} into {{cssxref("grid-row")}}. In this example, we replicate the above example using these shorthand properties:
```css hidden
* {
@@ -315,12 +319,12 @@ Our shorthand would look like the following code, with no forward slash and seco
## The `grid-area` property
-We can take things a step further and define each area with a single property – {{cssxref("grid-area")}}. The order of the values for grid-area are as follows.
+We can take things a step further and define each area with a single property – {{cssxref("grid-area")}}. The order of the values for `grid-area` is as follows.
-- grid-row-start
-- grid-column-start
-- grid-row-end
-- grid-column-end
+– {{cssxref("grid-row-start")}}
+– {{cssxref("grid-column-start")}}
+– {{cssxref("grid-row-end")}}
+– {{cssxref("grid-column-end")}}
```css hidden
* {
@@ -371,20 +375,22 @@ We can take things a step further and define each area with a single property
{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}
-This order of values for `grid-area` can seem a little strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example. It may help to realize that this is due to grid using the flow-relative directions defined in the CSS Writing Modes specification. We will explore how grids work with writing modes in a later article however we have the concept of four flow-relative directions:
+This order of values for `grid-area` can seem a little strange — it is the opposite of the direction in which we specify margins and padding as a shorthand, for example. It may help to realize that this is due to CSS grid layout using the flow-relative directions defined in [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes). We explore how grids work with writing modes in [grids, logical values, and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes). For now, consider the concept of four {{glossary("Flow relative values", "flow-relative")}} directions:
-- block-start
-- block-end
-- inline-start
-- inline-end
+- `block-start`
+- `block-end`
+- `inline-start`
+- `inline-end`
-We are working in English, a left-to-right language. Our block-start is the top row line of the grid container, block-end is the final row line of the container. Our inline-start is the left-hand column line as inline-start is always the point from which text would be written in the current writing mode, inline-end is the final column line of our grid.
+We are working in English, a left-to-right language. Our `block-start` is the top row line of the grid container, `block-end` is the final row line of the container. Our `inline-start` is the left-hand column line as `inline-start` is always the point from which text would be written in the current writing mode, while `inline-end` is the final column line of our grid.
-When we specify our grid area using the `grid-area` property we first define both start lines `block-start` and `inline-start`, then both end lines `block-end` and `inline-end`. This seems unusual at first as we are used to the physical properties of top, right, bottom and left but makes more sense if you start to think of websites as being multi-directional in writing mode.
+When we specify our grid area using the `grid-area` property we first define both start lines `block-start` and `inline-start`, then both end lines `block-end` and `inline-end`. This seems unusual at first as we are used to the {{glossary("physical properties")}} of `top`, `right`, `bottom`, and `left`, but it makes more sense if you start to think of websites as being multi-directional in different writing modes.
## Counting backwards
-We can also count backwards from the block and inline end of the grid, for English that would be the right-hand column line and final row line. These lines can be addressed as `-1`, and you can count back from there – so the second last line is `-2`. It is worth noting that the final line is the final line of the _explicit grid_, the grid defined by `grid-template-columns` and `grid-template-rows`, and does not take into account any rows or columns added in the _implicit grid_ outside of that.
+We can also count backwards from the block and inline ends of the grid, for English that would be the right-hand column line and final row line. The last lines of the explicit grid can be addressed as `-1`, and you can count back from there – so the second to last line is `-2`.
+
+Do note that negative values are relevant only to the explicit grid. The final line is the final line of the grid defined by `grid-template-columns` and `grid-template-rows`, and does not take into account any rows or columns added in the _implicit grid_ outside of that.
In this next example, we have flipped the layout we were working with by working from the right and bottom of our grid when placing the items.
@@ -461,12 +467,7 @@ Being able to address the start and end lines of the grid is useful as you can t
## Gutters or Alleys
-The CSS grid specification includes the ability to add gutters between column and row tracks with the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties. These specify a gap that acts much like the {{cssxref("column-gap")}} property in multi-column layout.
-
-> [!NOTE]
-> When grid first shipped in browsers the {{cssxref("column-gap")}}, {{cssxref("row-gap")}} and {{cssxref("gap")}} properties were prefixed with the `grid-` prefix as `grid-column-gap`, `grid-row-gap` and `grid-gap` respectively.
->
-> Browsers are updating their rendering engines to remove this prefix, however the prefixed versions will be maintained as aliases, making them safe to use.
+CSS grid includes the ability to add gutters between column and row tracks with the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties, or {{cssxref("gap")}} shorthand.
Gaps only appear between tracks of the grid, they do not add space to the top and bottom, left or right of the container. We can add gaps to our earlier example by using these properties on the grid container.
@@ -543,11 +544,11 @@ The two properties can also be expressed as a shorthand, {{cssxref("gap")}}. If
}
```
-In terms of line-based positioning of items, the gap acts as if the line has gained extra width. Anything starting at that line starts after the gap and you cannot address the gap or place anything into it. If you want gutters that act more like regular tracks you can of course define a track for the purpose instead.
+In terms of line-based positioning of items, the gap acts as if the line has gained extra width. Anything starting at that line starts after the gap and you cannot address the gap or place anything into it. If you want gutters that act more like regular tracks you can define a track for that purpose.
## Using the `span` keyword
-In addition to specifying the start and end lines by number, you can specify a start line and then the number of tracks you would like the area to span.
+In addition to specifying the start and end lines by number, you can specify a start line and then the number of tracks you would like the area to span using the `span` keyword.
```css hidden
* {
@@ -622,6 +623,6 @@ In the second example, we specify the end row line we want the item to finish at
}
```
-To become familiar with line based positioning in grid try to build a few common layouts by placing items onto grids with varying numbers of columns. Remember that if you do not place all of the items, any leftover items will be placed according to auto-placement rules. This may result in the layout you want, but if something is appearing somewhere unexpected, check that you have set a position for it.
+To become familiar with line based positioning in grid, try to build a few common layouts by placing items onto grids with varying numbers of columns. Remember that if you do not place all of the items, any leftover items will be placed according to auto-placement rules. This may result in the layout you want, but if something is appearing somewhere unexpected, check that you have set a position for it.
-Also, remember that items on the grid can overlap each other when you place them explicitly like this. That can create some nice effects, however you can also end up with things overlapping incorrectly if you specify the wrong start or end line. The [Firefox grid highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) can be very useful as you learn, especially if your grid is quite complicated.
+Also, remember that items on the grid can overlap when you place them explicitly like this. Overlapping items can create some nice effects, however, you can also end up with incorrect overlapping if you specify the wrong start or end line. Inspecting grids with your browser developer tools can be very helpful for identifying such problems as you learn, especially if your grid is quite complicated.
diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
index 2f676d9f9164d2a..241e33afa30d701 100644
--- a/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
+++ b/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
@@ -6,11 +6,13 @@ page-type: guide
{{CSSRef}}
-In previous guides, we've looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas. In this guide, we are going to look at how these two things work together when we use named lines. Line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track sizes. Once you work through some examples, it should become clearer and easier to work with.
+In previous guides, we've looked at placing items on the lines created by [defining grid tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) and also how to place items [using named template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas). In this guide, we look at how these two things work together when we use named lines.
+
+Line naming is incredibly useful, but some of the more confusing grid syntax comes from this combination of names and track sizes. Once you work through some examples, it should become clearer and easier to work with.
## Naming lines when defining a grid
-You can assign some or all of the lines in your grid a name when you define your grid with the `grid-template-rows` and `grid-template-columns` properties. To demonstrate I'll use the simple layout created in the guide on line-based placement. This time I'll create the grid using named lines.
+You can assign some or all of the lines in your grid a name when you define your grid with the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties. To demonstrate, we'll use the basic layout created in the guide on [line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement). This time, we'll create the grid using named lines.
```css hidden
* {
@@ -32,7 +34,7 @@ You can assign some or all of the lines in your grid a name when you define your
}
```
-When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the center block of the grid as `content-start` and `content-end` again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.
+When defining the grid, we name our lines inside square brackets (`[]`). Those names can be anything you like. We define a name for the start and end of the container, both for rows and columns. In this case, the grid center block's start rows and columns are both named `content-start`, and its end rows and columns are both named `content-end`.
```css
.wrapper {
@@ -42,7 +44,9 @@ When defining the grid, I name my lines inside square brackets. Those names can
}
```
-Once the lines have names, we can use the name to place the item rather than the line number.
+We don't need to name all of the lines in our grids; you may choose to name just the key lines of your layout.
+
+Once the lines have names, we can use the name we defined, rather than the line number, to place the grid items.
```css
.box1 {
@@ -80,7 +84,7 @@ Once the lines have names, we can use the name to place the item rather than the
{{ EmbedLiveSample('Naming_lines_when_defining_a_grid', '500', '330') }}
-Everything else about line-based placement still works in the same way and you can mix named lines and line numbers. Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.
+Everything else about line-based placement still works in the same way. In our grid layout, we provided each numeric line with an alias name. In our grid items, we reference a name rather than a number. Naming lines in this way is useful — when creating a responsive design, we can update the container's grid properties rather than updating the grid items within each [media query](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
### Giving lines multiple names
@@ -88,9 +92,9 @@ You may want to give a line more than one name, perhaps it denotes the sidebar-e
## Implicit grid areas from named lines
-When naming the lines, I mentioned that you can name these anything you like. The name is a [custom ident](https://drafts.csswg.org/css-values-4/#custom-idents), an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as `span`. Idents are not quoted.
+When naming the lines, we mentioned that you can name these anything you like. The name is a {{cssxref("custom-ident")}}, an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as `span`. Idents are not quoted.
-While you can choose any name, if you append `-start` and `-end` to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have `content-start` and `content-end` both for rows and for columns. This means I get a grid area named `content`, and could place something in that area should I wish to.
+While you can choose any name, if you append `-start` and `-end` to the lines around an area, as we have in the example above, grid will create a named area of the main name used. Taking the above example, we have `content-start` and `content-end` both for rows and for columns. This means we get a grid area named `content`, and could place something in that area should we wish to.
```css hidden
* {
@@ -112,7 +116,7 @@ While you can choose any name, if you append `-start` and `-end` to the lines ar
}
```
-I'm using the same grid definitions as above, however this time I am going to place a single item into the named area `content`.
+We use the same grid definitions as above, placing a single item into the named area `content`.
```css
.wrapper {
@@ -133,13 +137,13 @@ I'm using the same grid definitions as above, however this time I am going to pl
{{ EmbedLiveSample('Implicit_grid_areas_from_named_lines', '500', '330') }}
-We don't need to define where our areas are with `grid-template-areas` as our named lines have created an area for us.
+We don't need to define where our areas are with {{cssxref("grid-template-areas")}} as our named lines have created an area for us.
## Implicit grid lines from named areas
-We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to grid template Areas, we can use the lines created by our areas to see how this works.
+We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to [grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas), we can use the lines created by our areas to see how this works.
-In this example I have added an extra div with a class of `overlay`. We have named areas created using the `grid-area` property, then a layout created in `grid-template-areas`. The area names are:
+In this example, we have added an extra `
` with a class of `overlay`. We have named areas created using the {{cssxref("grid-area")}} property, then a layout created in `grid-template-areas`. The area names are:
- `hd`
- `ft`
@@ -157,11 +161,11 @@ This gives us column and row lines:
- `ft-start`
- `ft-end`
-You can see the named lines in the image, note that some lines have two names - for example `sd-end` and `main-start` refer to the same column line.
+You can see the named lines in the image. Note that some lines have two names - for example, `sd-end` and `main-start` refer to the same column line.

-To position `overlay` using these implicit named lines is the same as positioning an item using lines that we have named.
+Positioning `overlay` using these implicit named lines is the same as positioning an item using named lines.
```css hidden
* {
@@ -233,15 +237,15 @@ To position `overlay` using these implicit named lines is the same as positionin
{{ EmbedLiveSample('Implicit_Grid_lines_from_named_areas', '500', '330') }}
-Given that we have this ability to position created lines from named areas and areas from named lines, it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. By selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily.
+Given that we have this ability to position created lines from named areas and areas from named lines, it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. Selecting names that make sense to you and your team will make your layouts more intuitive.
## Multiple lines with the same name with repeat()
-If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.
+If you want to give all your grid lines a unique name, you need to define the track definition with long-hand properties rather than using the repeat syntax, as the names need to be added in square brackets when defining tracks. If you do use the repeat syntax, you will get multiple lines that have the same name, which can be useful or confusing, depending on your layout requirements.
### Twelve-column grid using repeat()
-In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of `[col-start]`. This means that we will end up with a grid that has 12 column lines all named `col-start` before a `1fr` width column.
+In this example, we create a grid with 12 equal-width columns. Before defining the `1fr` size of the column track, we define a line named `[col-start]`. This means we will have a grid with 12 column lines all named `col-start` before a `1fr` width column.
```css hidden
* {
@@ -270,38 +274,42 @@ In this next example I am creating a grid with twelve equal width columns. Befor
}
```
-Once you have created the grid you can place items onto it. As we have multiple lines named `col-start` if you place an item to start after line `col-start` grid uses the first line named `col-start`, in our case that will be the far left line. To address another line use the name, plus the number for that line. To place our item from the first line named col-start to the 5th, we can use:
+Once you have created the grid you can place items onto it. As we have multiple lines named `col-start` if you place an item to start after line `col-start`, the first line named `col-start` will be used. In our case, this is the far left line. To address another line, use the name with the number for that line.
+
+To place an item spanning from the first line named `col-start` to the 5th line with that name, we can use:
```css
-.item1 {
+.item1to5 {
grid-column: col-start / col-start 5;
}
```
-You can also use the `span` keyword here. My next item will be placed from the 7th line named `col-start` and span 3 lines.
+You can also use the `span` keyword. This item will span 3 lines starting from the 7th line named `col-start`:
```css
-.item2 {
+.item7to9 {
grid-column: col-start 7 / span 3;
}
```
```html
-
I am placed from col-start line 1 to col-start 5
-
I am placed from col-start line 7 spanning 3 lines
+
I am placed from col-start line 1 to col-start 5
+
I am placed from col-start line 7 spanning 3 lines
```
-{{ EmbedLiveSample('Twelve-column_grid_using_repeat', '500', '330') }}
+{{ EmbedLiveSample('Twelve-column_grid_using_repeat', '500', '120') }}
-If you take a look at this layout in the Firefox grid highlighter you can see how the column lines are shown, and how our items are placed against these lines.
+If you look at this layout in your browser's developer tools, you will see how the column lines are shown, and how our items are placed against these lines.
-
+
### Defining named lines with a track list
-The repeat syntax can also take a track list, it doesn't just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower `1fr` width column named `col1-start` followed by a wider `3fr` column named `col2-start`.
+The `repeat()` syntax can also take a track list; it is not just single track sizes that can be repeated.
+
+This CSS creates an eight track grid, with a narrower `1fr` width column named `col1-start` followed by a wider `3fr` column named `col2-start`.
```css
.wrapper {
@@ -309,7 +317,7 @@ The repeat syntax can also take a track list, it doesn't just need to be a singl
}
```
-If your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition. The following definition, creates four `1fr` tracks, which each have a start and end line.
+If your repeating syntax puts two lines next to each other then they will be merged and create the same result as giving a line multiple names in a non-repeating track definition. The following definition creates four `1fr` tracks, each with a start and end line.
```css
.wrapper {
@@ -317,7 +325,7 @@ If your repeating syntax puts two lines next to each other then they will be mer
}
```
-If we write this definition out without using repeat notation it would look like this.
+If we write this declaration without using repeat notation, it looks like this:
```css
.wrapper {
@@ -325,7 +333,7 @@ If we write this definition out without using repeat notation it would look like
}
```
-If you have used a track list then you can use the `span` keyword not just to span a number of lines but also to span a number of lines of a certain name.
+Using a track list, we can use the `span` keyword to span a number of lines, including lines of a certain name:
```css hidden
* {
@@ -374,13 +382,13 @@ If you have used a track list then you can use the `span` keyword not just to sp
```
-{{ EmbedLiveSample('Defining_named_lines_with_a_track_list', '500', '330') }}
+{{ EmbedLiveSample('Defining_named_lines_with_a_track_list', '500', '230') }}
### Twelve-column grid framework
-Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don't need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.
+Having learned about numeric and named line-based placement and [grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas), we now know there are several ways to place items using CSS grid layout. This may seem overly complex, but you don't need to use all of them. In practice, using named template areas works well for straightforward layouts as this method gives a good visual representation of what your layout looks like, and makes it more intuitive to move things around on the grid. For example, when working with a strict multiple-column layout, the named lines demonstration in the last part of this guide works well.
-If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid "framework" is:
+Legacy grid systems such as Foundation or Bootstrap are based on a 12-column grid. These frameworks import code to do calculations that ensure the columns add up to 100%. Frameworks aren't needed! The only CSS we need for a 12-column grid "framework" is:
```css
.wrapper {
@@ -390,7 +398,9 @@ If working with a strict multiple column layout for example the named lines demo
}
```
-We can then use that framework to lay out our page. For example, to create a three column layout with a header and footer, I might have the following markup.
+We can then use this "framework" to lay out our page.
+
+For example, to create a three-column layout with a header and footer, we can use the following markup.
```css hidden
* {
@@ -422,7 +432,7 @@ We can then use that framework to lay out our page. For example, to create a thr
```
-I could then place this on my grid layout framework like this.
+We can place this on our grid layout framework:
```css
.main-header,
@@ -446,10 +456,12 @@ I could then place this on my grid layout framework like this.
}
```
-{{ EmbedLiveSample('Twelve-column_grid_framework', '500', '330') }}
+{{ EmbedLiveSample('Twelve-column_grid_framework', '500', '220') }}
-Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.
+Once again, the developer tool's grid highlighter is helpful to show us how the grid we have placed our items on works.

-That's all I need. I don't need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the `1fr` column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!
+That's all we need. We don't need to do any calculations! CSS grid layout automatically removed our 10-pixel gutter track before assigning the space to the `1fr` column tracks.
+
+Up next, we will look at how CSS grid layout can position items for us without requiring placement properties at all, in the [auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) guide.
diff --git a/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md b/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md
index 095b48e372152c8..4bdf03a0a3404dd 100644
--- a/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md
+++ b/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md
@@ -6,7 +6,7 @@ page-type: guide
{{CSSRef}}
-In the [previous guide](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement), we looked at grid lines and how to position items against those lines. When you use CSS grid layout, you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our items using named template areas, and we will find out exactly how this method works. You will see very quickly why we sometimes call this the ascii-art method of grid layout!
+In the [grid layout using line-based placement guide](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement), we looked at grid lines and how to position items against those lines. When you use CSS grid layout, you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our items using named template areas. You will see very quickly why we sometimes call this the ascii-art method of grid layout!
## Naming a grid area
@@ -22,7 +22,7 @@ What we are doing here when defining all four lines, is defining the area by spe

-We can also define an area by giving it a name and then specify the location of that area in the value of the {{cssxref("grid-template-areas")}} property. You can choose what you would like to name your area. For example, if I wish to create the layout shown below I can identify four main areas.
+We can also define an area by giving it a name and then specify the location of that area in the value of the {{cssxref("grid-template-areas")}} property. You can choose what you would like to name your area. For example, if we wish to create the layout shown below we can identify four main areas.
- a header
- a footer
@@ -31,7 +31,7 @@ We can also define an area by giving it a name and then specify the location of

-With the {{cssxref("grid-area")}} property I can assign each of these areas a name. This will not yet create any layout, but we now have named areas to use in a layout.
+With the {{cssxref("grid-area")}} property we can assign each of these areas a name. By itself, this does not create any layout. Rather, it provides named areas to use in a layout.
```css
.header {
@@ -48,7 +48,7 @@ With the {{cssxref("grid-area")}} property I can assign each of these areas a na
}
```
-Having defined these names I then create my layout. This time, instead of placing my items using line numbers specified on the items themselves, I create the whole layout on the grid container.
+Having defined these names, we then create the layout. This time, instead of placing items using line numbers specified on the items themselves, we create the whole layout on the grid container. Here we create a 9-column grid and specify that the `hd` and `ft` areas span all 9 columns, while `sd` spans three and `main` spans six. Each area spans only one row.
```css
.wrapper {
@@ -99,7 +99,7 @@ Using this method we do not need to specify anything at all on the individual gr
## Leaving a grid cell empty
-We have completely filled our grid with areas in this example, leaving no white space. However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop character, `.`. If I want to only display the footer directly under the main content I would need to leave the three cells underneath the sidebar empty.
+We have completely filled our grid with areas in this example, leaving no white space. However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop character, `.`. If we want to only display the footer directly under the main content we would need to leave the three cells underneath the sidebar empty.
```css
.header {
@@ -161,11 +161,11 @@ We have completely filled our grid with areas in this example, leaving no white
{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}
-In order to make the layout neater I can use multiple `.` characters. As long as there is at least one white space between the full stops it will be counted as one cell. For a complex layout there is a benefit to having the rows and columns neatly aligned. It means that you can actually see, right there in the CSS, what this layout looks like.
+In order to make the layout neater we can use multiple `.` characters. As long as there is at least one white space between the full stops it will be counted as one cell. For a complex layout there is a benefit to having the rows and columns neatly aligned. It means that you can actually see, right there in the CSS, what this layout looks like.
## Spanning multiple cells
-In our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. You can add extra white space in order to keep your columns neatly lined up in the value of `grid-template-areas`. You can see that I have done this in order that the `hd` and `ft` line up with `main`.
+In our example, each area spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. You can add extra white space to keep your columns neatly lined up in the value of `grid-template-areas`. You can see that we have done this so that the `hd` and `ft` areas line up with `main`.
The area that you create by chaining the area names must be rectangular, at this point there is no way to create an L-shaped area. The specification does note that a future level might provide this functionality. You can however span rows just as easily as columns. For example we could make our sidebar span down to the end of the footer by replacing the `.` with `sd`.
@@ -237,7 +237,7 @@ As our layout is now contained in one part of the CSS, this makes it very easy t
When doing this, define the names for your areas outside of any media queries. That way the content area would always be called `main` no matter where on the grid it is placed.
-For our layout above, we might like to have a very simple layout at narrow widths, defining a single column grid and stacking up our items.
+For our layout above, we might like to have a very simple layout at narrow widths, defining a single column grid and stacking our four items into four rows.
```css hidden
* {
@@ -287,10 +287,10 @@ For our layout above, we might like to have a very simple layout at narrow width
}
```
-We can then redefine that layout inside media queries to go to our two columns layout, and perhaps take it to a three column layout if the available space is even wider. Note that for the wide layout I keep my nine column track grid, I redefine where items are placed using `grid-template-areas`.
+We can then redefine that layout inside [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to go to our two columns layout, and perhaps take it to a three column layout if the available space is even wider. Note that for the wide layout, we keep the nine-column track grid, redefining where items are placed using `grid-template-areas`.
```css
-@media (min-width: 500px) {
+@media (min-width: 30em) {
.wrapper {
grid-template-columns: repeat(9, 1fr);
grid-template-areas:
@@ -299,7 +299,7 @@ We can then redefine that layout inside media queries to go to our two columns l
"sd sd sd ft ft ft ft ft ft";
}
}
-@media (min-width: 700px) {
+@media (min-width: 60em) {
.wrapper {
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
@@ -325,7 +325,7 @@ Many of the grid examples you will find online make the assumption that you will
### Media object example
-As a very simple example we can create a "media object". This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box.
+As a very simple example we can create a "[media object](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects)". This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box.

@@ -370,7 +370,7 @@ We give the image area a grid area name of `img` and the text area `content`, th
```
-{{ EmbedLiveSample('Media_object_example', '300', '200') }}
+{{ EmbedLiveSample('Media_object_example', '300', '105') }}
### Displaying the image on the other side of the box
@@ -418,7 +418,7 @@ We might want to be able to display our box with the image the other way around.
```
-{{ EmbedLiveSample('Displaying_the_image_on_the_other_side_of_the_box', '300', '200') }}
+{{ EmbedLiveSample('Displaying_the_image_on_the_other_side_of_the_box', '300', '105') }}
## Grid definition shorthands
@@ -426,19 +426,19 @@ Having looked at various ways of placing items on our grids and many of the prop
These can quickly become difficult to read for other developers, or even your future self. However they are part of the specification and it is likely you will come across them in examples or in use by other developers, even if you choose not to use them.
-Before using any shorthand it is worth remembering that shorthands not only enable the setting of many properties in one go, they also act to **reset things** to their initial values that you do not, or cannot set in the shorthand. Therefore if you use a shorthand, be aware that it may reset things you have applied elsewhere.
+Before using any shorthand it is worth remembering that shorthands not only enable the setting of many properties in one go, but they also **reset** everything that you do not (or cannot) set in the shorthand to their initial values. Therefore if you use a shorthand, be aware that it may reset things you have applied elsewhere.
-The two shorthands for the grid container are the Explicit grid shorthand `grid-template` and the grid definition shorthand `grid`.
+The two shorthands for the grid container are the explicit grid shorthand {{cssxref("grid-template")}} and the grid definition shorthand {{cssxref("grid")}} .
### `grid-template`
-The {{cssxref("grid-template")}} property sets the following properties:
+The {{cssxref("grid-template")}} shorthand property sets the following longhand properties:
- {{cssxref("grid-template-rows")}}
- {{cssxref("grid-template-columns")}}
- {{cssxref("grid-template-areas")}}
-The property is referred to as the Explicit grid shorthand because it is setting those things that you control when you define an explicit grid, and not those which impact any implicit row or column tracks that might be created.
+The property is referred to as the _explicit grid shorthand_ because it sets values that you control when you define an explicit grid, and not those that impact any implicit row or column tracks that might be created.
The following code creates a layout using {{cssxref("grid-template")}} that is the same as the layout created earlier in this guide.
@@ -468,7 +468,7 @@ The {{cssxref("grid")}} shorthand goes a step further and also sets properties u
- {{cssxref("grid-auto-columns")}}
- {{cssxref("grid-auto-flow")}}
-You can use this syntax in the exact same way as the {{cssxref("grid-template")}} shorthand, just be aware than when doing so you will reset the other values set by the property.
+You can use this syntax in the exact same way as the {{cssxref("grid-template")}} shorthand. Just be aware than when doing so you will reset the other values set by the property.
```css
.wrapper {
@@ -481,6 +481,8 @@ You can use this syntax in the exact same way as the {{cssxref("grid-template")}
}
```
-We will revisit the other functionality offered by this shorthand later in these guides when we take a look at auto placement and the `grid-auto-flow` property.
+We will revisit the other functionality offered by this shorthand when we take a look at [auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) and the `grid-auto-flow` property.
-If you have worked through these initial guides you now should be in a position to create grid layouts using line-based placement or named areas. Take some time to build some common layout patterns using grid, while there are lots of new terms to learn, the syntax is relatively straightforward. As you develop examples, you are likely to come up with some questions and use cases for things we haven't covered yet. In the rest of these guides we will be looking at some more of the detail included in the specification – in order that you can begin to create advanced layouts with it.
+## Next steps
+
+If you've been working along the [grid guides](/en-US/docs/Web/CSS/CSS_grid_layout#guides), you should be in a position to create grid layouts using [line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) or [named areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines). Now let's take a look at creating [grid layouts using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines).
diff --git a/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
index 11b307bf9e03ef7..4a2bcb68c789460 100644
--- a/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
+++ b/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
@@ -6,11 +6,11 @@ page-type: guide
{{CSSRef}}
-In these guides, I have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification. For this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so.
+One of the most important features of CSS grid layout is the support for different writing modes built into the specification. In this guide, we look at this feature of CSS grid layout and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so.
## Logical and physical properties and values
-CSS is full of **physical** positioning keywords – left and right, top and bottom. If we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. In the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container:
+CSS is full of **physical** positioning properties and keywords – `left` and `right`, `top` and `bottom`. In the code snippet below, we position an item using absolute positioning and use the physical {{glossary("inset properties")}} as offset values to push the item around. The item is placed 20 pixels from the top and 30 pixels from the left of the container:
```css
.container {
@@ -29,13 +29,15 @@ CSS is full of **physical** positioning keywords – left and right, top and bot
```
-Another place you might see physical keywords in use, is when using `text-align: right` to align text to the right. There are also physical **properties** in CSS. We add margins, padding, and borders using these physical properties of {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, and so on.
+This example uses the {{cssxref("left")}} and {{cssxref("right")}} properties; these are just two of the many **{{glossary("physical properties")}}** in CSS. We can also add margins, padding, and borders using physical properties, for example {{cssxref("margin-left")}} and {{cssxref("padding-left")}}. You might also see physical keywords in use, such as when using `text-align: right` to align text to the right.
We call these keywords and properties _physical_ because they relate to the screen you are looking at. Left is always left, no matter what direction your text is running.
### Issues with physical properties
-This can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. Browsers are pretty good at dealing with text direction, and you don't even need to be working in a {{glossary("rtl")}} language to take a look. In the example below, I have two paragraphs. The first paragraph has {{cssxref("text-align")}} set to `left`, the second has no `text-align` property set. I have added `dir="rtl"` to the `html` element, which switches the writing mode from the default for an English language document of `ltr`. You can see that the first paragraph remains left to right, due to the `text-align` value being `left`. The second however, switches direction and the text runs from right to left.
+Physical properties can cause issues when developing a site that has to work in multiple languages, including languages where the text flows from right to left, or top to bottom. Browsers are designed to correctly display content regardless of the language. Some CSS features can override browser defaults and cause content to display less than optimally.
+
+In this example, the {{cssxref("direction")}} property has been set to {{glossary("rtl")}}, which switches the writing mode from the default for an English language document of `ltr`. We have two paragraphs. These should both flow from right to left because of the `direction` value set on an ancestor element (``). The first paragraph has {{cssxref("text-align")}} set to `left`, so it aligns with the left of its container. The second paragraph aligns with the right and flows from right to left.
```html hidden
@@ -46,11 +48,16 @@ This can become an issue when developing a site that has to work in multiple lan
I have no alignment set and use the direction set in the document.
```
-```css hidden
+```css
body {
direction: rtl;
}
+.left {
+ text-align: left;
+}
+```
+```css hidden
p {
border: 2px solid #ffa94d;
border-radius: 5px;
@@ -59,33 +66,29 @@ p {
margin: 1em;
color: #d9480f;
}
-
-.left {
- text-align: left;
-}
```
-{{EmbedLiveSample("Issues with physical properties","",200)}}
+{{EmbedLiveSample("Issues with physical properties","",170)}}
-This is a very simple example of the problem with physical values and properties being used in CSS. They prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom.
+This is a basic demonstration of the problems that can arise when using physical values and properties in CSS. If we write CSS using physical properties and keywords, we tell the browser our assumption as to how the text will flow and prevent it from handling alternative writing modes.
### Logical properties and values
-Logical properties and values do not make an assumption about text direction. Which is why in grid layout we use the keyword `start` when aligning something to the start of the container. For me, working in English, `start` may well be on the left, however it doesn't have to be, and the word `start` infers no physical location.
+**{{glossary("Logical properties")}} and values** do not assume a text direction. This is why we use the keyword `start` in CSS grid layout to align something with the start of a container. When working with English content, `start` will be on the left, however, it doesn't have to be. The word `start` infers no physical location, which enables websites to start the content on the right when right-to-left languages, such as Arabic, are used.
## Block and Inline
-Once we begin dealing with logical, rather than physical properties, we stop seeing the world as left to right, and top to bottom. We need a new reference point, and this is where understanding the _block_ and _inline_ axes, that we met previously in the guide to _alignment_, becomes very useful. If you can start to see layout in terms of block and inline, the way things work in grid start to make a lot more sense.
+When using logical rather than physical properties, we don't see the world as left to right, and top to bottom. We have a different reference point. This is where understanding the _block_ and _inline_ axes, introduced in the [grid alignment guide](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout), becomes very useful. If you think about layout in terms of block and inline, the way things work in CSS grid layout makes a lot of sense.
-
+
## CSS writing modes
-I'm going to introduce another specification here, that I will be using in my examples: the CSS Writing Modes specification. This spec details how we can use these different writing modes in CSS, not just for the support of languages that have a different writing mode to English, but also for creative purposes. I'll be using the {{cssxref("writing-mode")}} property to make changes to the writing mode applied to our grid, in order to demonstrate how the logical values work. If you want to dig into writing modes further, however, then I would recommend that you read Jen Simmons excellent article on [CSS Writing Modes](https://24ways.org/2016/css-writing-modes/). This goes into more depth on that specification than we will touch upon here.
+The [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module specifies how writing modes work in CSS. These features are not just for supporting languages with a different writing mode to English; they can also be used for creative purposes. The examples in this section make use of the {{cssxref("writing-mode")}} property to make changes to the writing mode applied to our grid, demonstrating how logical values work in the process.
### `writing-mode`
-Writing Modes are more than just left to right and right to left text, and the `writing-mode` property helps us display text running in other directions. The {{cssxref("writing-mode")}} property can have values of:
+Writing modes are more than just left to right and right to left text, and the `writing-mode` property helps us display text running in other directions. The {{cssxref("writing-mode")}} property can have values of:
- `horizontal-tb`
- `vertical-rl`
@@ -93,7 +96,9 @@ Writing Modes are more than just left to right and right to left text, and the `
- `sideways-rl`
- `sideways-lr`
-The value `horizontal-tb` is the default for text on the web. It is the direction in which you are reading this guide. The other properties will change the way that text flows in our document, matching the different writing modes found around the world. As a simple example, I have two paragraphs below. The first uses the default `horizontal-tb`, and the second uses `vertical-rl`. In the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom.
+The value `horizontal-tb`, which stands for "horizontal, top to bottom", is the default for text on the web. It is the direction in which you are reading this guide. The other values change how text flows in our document, matching the different writing modes found worldwide.
+
+As an example, we have two paragraphs below. The first uses the default `horizontal-tb` value, and the second uses `vertical-rl`. In the second writing mode, text still runs left to right, however the direction of the text is vertical — inline text now runs down the page, from top to bottom.
```css hidden
.wrapper > p {
@@ -122,11 +127,11 @@ The value `horizontal-tb` is the default for text on the web. It is the directio
## Writing modes in grid layouts
-If we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of where the Block and Inline Axis are.
+Applying this to a grid layout example, we can see how changing the writing mode means changing our idea of where the block and inline axes are.
### Default writing mode
-The grid in this example has three columns and two row tracks. This means there are three tracks running down the block axis. In default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. It then moves onto the next line, creating a new Row track, and fills in more items:
+In this example, the grid has three columns and two row tracks. This means there are three tracks running down the block axis. In default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. It then moves to the next line, creating a new row track, and fills in more items:
```css hidden
* {
@@ -171,7 +176,7 @@ The grid in this example has three columns and two row tracks. This means there
### Setting writing mode
-If we add `writing-mode: vertical-lr` to the grid container, we can see that the block and inline Axis are now running in a different direction. The block or _column_ axis now runs across the page from left to right, Inline runs down the page, creating rows from top to bottom.
+If we add `writing-mode: vertical-lr` to the grid container in the previous example, we can see that the block and inline axes now run in a different direction. The block or _column_ axis now runs across the page from left to right, while the inline axis runs down the page, creating rows from top to bottom.
```css hidden
* {
@@ -191,11 +196,7 @@ If we add `writing-mode: vertical-lr` to the grid container, we can see that the
padding: 1em;
color: #d9480f;
}
-```
-
-```css
.wrapper {
- writing-mode: vertical-lr;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
@@ -203,7 +204,13 @@ If we add `writing-mode: vertical-lr` to the grid container, we can see that the
}
```
-```html
+```css
+.wrapper {
+ writing-mode: vertical-lr;
+}
+```
+
+```html hidden
Item 1
Item 2
@@ -219,7 +226,7 @@ If we add `writing-mode: vertical-lr` to the grid container, we can see that the
With the block and inline axis able to change direction, the logical values for the alignment properties start to make more sense.
-In this next example, I am using alignment to align items inside a grid that is set to `writing-mode: vertical-lr`. The `start` and `end` properties work in exactly the same way that they do in the default writing mode, and remain logical in a way that using left and right, top and bottom to align items would not do. This occurs once we've flipped the grid onto the side, like this:
+In this example, we use alignment (the {{cssxref("align-self")}} and {{cssxref("justify-self")}} properties) to align items inside a grid that is set to `writing-mode: vertical-lr`. The `start` and `end` properties work in exactly the same way that they do in the default writing mode, and remain logical in a way that using left and right, top and bottom to align items would not do. This occurs once we've flipped the grid onto the side, like this:
```css hidden
* {
@@ -281,17 +288,17 @@ In this next example, I am using alignment to align items inside a grid that is
If you want to see how these work, with a right to left as well as top to bottom writing mode, switch `vertical-lr` to `vertical-rl`, which is a vertical writing mode running from right to left.
-## Auto-placement and Writing Modes
+## Auto-placement and writing modes
-In the example already shown, you can see how writing mode changes the direction in which items place themselves onto the grid. Items will, by default, place themselves along the Inline axis then move onto a new row. However, that inline axis may not always run from left to right.
+As we've seen in the previous examples, writing mode can change the visual direction in which items place themselves onto the grid. Items will, by default, place themselves along the inline axis, adding new rows in the block direction. We've now seen that the inline axis does not always run from left to right, and the block axis does not always run from top to bottom.
## Line-based placement and Writing Modes
-The key thing to remember when placing items by line number, is that line 1 is the start line, no matter which writing mode you are in. Line -1 is the end line, no matter which writing mode you are in.
+The key thing to remember when placing items by line number, is that line 1 is the start line and line -1 is the end line, no matter which writing mode you are in.
### Line-based placement with left to right text
-In this next example, I have a grid which is in the default `ltr` direction. I have positioned three items using line-based placement.
+In this example, we have a grid laid out in the default `ltr` direction, with three items positioned using line-based placement.
- Item 1 starts at column line 1, spanning one track.
- Item 2 starts at column line -1, spanning to -3.
@@ -348,7 +355,7 @@ In this next example, I have a grid which is in the default `ltr` direction. I h
### Line-based placement with right to left text
-If I now add the {{cssxref("direction")}} property with a value of `rtl` to the grid container, line 1 becomes the right-hand side of the grid, and line -1 on the left.
+If we add the {{cssxref("direction")}} property with a value of `rtl` to the grid container in the previous example, line 1 is placed on the right-hand side of the grid, and line -1 on the left.
```css hidden
* {
@@ -368,29 +375,35 @@ If I now add the {{cssxref("direction")}} property with a value of `rtl` to the
padding: 1em;
color: #d9480f;
}
-```
-```css
.wrapper {
- direction: rtl;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
+
.item1 {
grid-column: 1;
}
+
.item2 {
grid-column: -1 / -3;
}
+
.item3 {
grid-column: 1 / 3;
grid-row: 2;
}
```
-```html
+```css
+.wrapper {
+ direction: rtl;
+}
+```
+
+```html hidden
Item 1
Item 2
@@ -400,11 +413,11 @@ If I now add the {{cssxref("direction")}} property with a value of `rtl` to the
{{ EmbedLiveSample('Line-based_placement_with_right_to_left_text', '500', '240') }}
-What this demonstrates, is that if you are switching the direction of your text, either for entire pages or for parts of pages, and are using lines: you may want to name your lines, if you do not want the layout to completely switch direction. For some things, for example, where a grid contains text content, this switching may be exactly what you want. For other usage it may not.
+If you are switching the direction of your text, either for entire pages or for parts of pages, and are using lines, you may want to [name your lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) to avoid the layout completely switching direction. For some things, for example, where a grid contains text content, this switching may be exactly what you want. For other uses it may not.
### The strange order of values in the `grid-area` property
-You can use the {{cssxref("grid-area")}} property to specify all four lines of a grid area as one value. When people first encounter this, they are often surprised that the values do not follow the same order as the shorthand for margin – which runs clockwise: top, right, bottom, left.
+You can use the {{cssxref("grid-area")}} property to specify all four lines of a grid area as one value. When people first encounter this, they are often surprised that the values do not follow the same order as the shorthand for {{cssxref("margin")}} – which runs clockwise: top, right, bottom, left.
The order of `grid-area` values is:
@@ -420,11 +433,11 @@ Which for English, in left-to-right means the order is:
- `bottom`
- `right`
-This is anti-clockwise! So the reverse of what we do for margins and padding. Once you realize that `grid-area` sees the world as "block and inline", you can remember that we are setting the two starts, then the two ends. It becomes much more logical once you know!
+This is counter-clockwise! It's the reverse of what we do for margins and padding. If we remember that `grid-area` sees the world as "block and inline", you'll notice we are setting the two starts, then the two ends, which is much more logical once you know!
## Mixed writing modes and grid layout
-In addition to displaying documents, using the correct writing mode for the language, writing modes can be used creatively within documents that are otherwise `ltr`. In this next example I have a grid layout with a set of links down one side. I've used writing modes to turn these on their side in the column track:
+In addition to displaying documents using the correct writing mode for the language, writing modes can be used creatively within documents that are otherwise `ltr`. In this example, we have a grid layout with a set of links down one side. We use writing modes (`writing-mode: vertical-lr`) to turn these on their side in the column track:
```css
.wrapper {
@@ -436,17 +449,17 @@ In addition to displaying documents, using the correct writing mode for the lang
Arial,
sans-serif;
}
-.wrapper nav {
+nav {
writing-mode: vertical-lr;
}
-.wrapper ul {
+nav ul {
list-style: none;
margin: 0;
padding: 1em;
display: flex;
justify-content: space-between;
}
-.wrapper a {
+nav a {
text-decoration: none;
}
```
@@ -484,14 +497,8 @@ In addition to displaying documents, using the correct writing mode for the lang
{{ EmbedLiveSample('Mixed_writing_modes_and_grid_layout', '500', '280') }}
-## Physical values and grid layout
-
-We encounter physical properties frequently when building websites, and while the grid placement and alignment properties and values respect writing modes, there are things you may want to do with grid that force you to use physical properties and values. In the guide to [Box alignment and grids](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout), I demonstrated how auto margins work in a grid area. Using an auto margin to push one item away from the others is a common flexbox trick too, however this also ties the layout to the physical space.
-
-If you use absolute positioning within a grid area, then you will again be using physical offsets to push the item around inside the grid area. The key thing is to be aware of, is the tension between physical and logical properties and values. For example, be aware that you may need to make changes to your CSS to cope with a switch from `ltr` to `rtl`.
-
-### Logical properties for everything!
+## Physical values and logical properties
-Our new layout methods give us the ability to use these logical values to place items, however, as soon as we start to combine them with the physical properties used for margins and padding, we need to remember that those physical properties will not change according to writing mode.
+If you combine logical grid properties with physical properties, remember that physical properties will not change according to writing mode. In our [Aligning items in CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) guide, we use auto margins to push one item away from the others; this employs physical properties. There are logical property equivalents for most physical properties, which respect writing modes in the same way as grid placement and alignment properties and values.
-The [CSS Logical Properties specification](https://drafts.csswg.org/css-logical/) means that you can use the [logical equivalents](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) for properties, such as {{cssxref("margin-left")}} and {{cssxref("margin-right")}}, in your CSS. These properties and values have good support in modern browsers. Your understanding of block and inline through grid will help you to understand how to use these too.
+Similarly, when using absolute positioning within a grid area, you can use logical {{glossary("inset properties")}} to place items inside the grid area. When mixing logical and physical properties or values, be aware of the tension between them. For example, you may need to change your CSS to cope with a switch from `ltr` to `rtl`. Your understanding of block and inline through grid will help you to understand [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
diff --git a/files/en-us/web/css/css_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/index.md
index e40162913b22179..d55eaca2ebb0938 100644
--- a/files/en-us/web/css/css_grid_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/index.md
@@ -7,13 +7,24 @@ spec-urls: https://drafts.csswg.org/css-grid/
{{CSSRef}}
-The **CSS grid layout** module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
+The **CSS grid layout** module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layering between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
-## Basic example
+## Grid layout in action
-The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
+The example shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
+
+```html hidden
+
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
+```
```css hidden
* {
@@ -23,7 +34,6 @@ The example below shows a three-column track grid with new rows created at a min
max-width: 940px;
margin: 0 auto;
}
-
.wrapper > div {
border: 2px solid rgb(233 171 88);
border-radius: 5px;
@@ -31,24 +41,6 @@ The example below shows a three-column track grid with new rows created at a min
padding: 1em;
color: #d9480f;
}
-```
-
-### HTML
-
-```html
-
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
-```
-
-### CSS
-
-```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -81,28 +73,29 @@ The example below shows a three-column track grid with new rows created at a min
}
```
-{{EmbedLiveSample("Basic_example", "100%", "460")}}
+{{EmbedLiveSample("Grid_layout_in_action", "100%", "460")}}
+
+This sample animation uses {{cssxref("display")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("gap")}} to create the grid, and {{cssxref("grid-column")}} and {{cssxref("grid-row")}} to position items within in the grid. To view and edit the HTML and CSS used, click the 'Play' at the top right of the example.
## Reference
### Properties
-- {{CSSxRef("display")}}
+- {{CSSxRef("grid-auto-columns")}}
+- {{CSSxRef("grid-auto-flow")}}
+- {{CSSxRef("grid-auto-rows")}}
- {{CSSxRef("grid-template-columns")}}
- {{CSSxRef("grid-template-rows")}}
- {{CSSxRef("grid-template-areas")}}
-- {{CSSxRef("grid-template")}}
-- {{CSSxRef("grid-auto-columns")}}
-- {{CSSxRef("grid-auto-rows")}}
-- {{CSSxRef("grid-auto-flow")}}
-- {{CSSxRef("grid")}}
-- {{CSSxRef("grid-row-start")}}
+- {{CSSxRef("grid-template")}} shorthand
+- {{CSSxRef("grid")}} shorthand
- {{CSSxRef("grid-column-start")}}
-- {{CSSxRef("grid-row-end")}}
- {{CSSxRef("grid-column-end")}}
-- {{CSSxRef("grid-row")}}
-- {{CSSxRef("grid-column")}}
-- {{CSSxRef("grid-area")}}
+- {{CSSxRef("grid-column")}} shorthand
+- {{CSSxRef("grid-row-start")}}
+- {{CSSxRef("grid-row-end")}}
+- {{CSSxRef("grid-row")}} shorthand
+- {{CSSxRef("grid-area")}} shorthand
### Functions
@@ -110,49 +103,125 @@ The example below shows a three-column track grid with new rows created at a min
- {{CSSxRef("minmax", "minmax()")}}
- {{CSSxRef("fit-content_function", "fit-content()")}}
-### Data types
+### Data types and values
+
+- {{CSSxRef("<flex>")}} (`fr` unit)
-- {{CSSxRef("<flex>")}}
+### Terms and glossary definitions
+
+- {{glossary("Grid")}}
+- {{glossary("Grid areas")}}
+- {{glossary("Grid axis")}}
+- {{glossary("Grid cell")}}
+- {{glossary("Grid column")}}
+- {{glossary("Grid container")}}
+- {{glossary("Grid lines")}}
+- {{glossary("Grid row")}}
+- {{glossary("Grid tracks")}}
+- {{glossary("Gutters")}}
## Guides
- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+
+ - : An overview of the various features provided in the CSS grid layout module.
+
- [Relationship of grid layout with other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
-- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
+
+ - : How grid layout fits together with other CSS features including flexbox, absolutely positioned elements, and `display: contents`.
+
- [Grid layout using line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+
+ - : Grid lines and how to position items against those lines, including the `grid-area` properties, negative line numbers, spanning multiple cells, and creating grid gutters.
+
+- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
+
+ - : Placing grid items using named template areas.
+
- [Grid layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
+
+ - : Combining names and track sizes; placing grid items by defining named grid lined and template areas.
+
- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)
-- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+
+ - : How grid positions items that don't have any placement properties declared.
+
+- [Aligning items in CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+
+ - : Aligning, justifying, and centering grid items along the two axes of a grid layout.
+
- [Grids, logical values, and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
+
+ - : A look at the interaction between CSS grid layout, box alignment and writing modes, along with CSS logical and physical properties and values.
+
- [Grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)
+
+ - : A look at how CSS grid layout can both help and harm accessibility.
+
- [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)
+
+ - : A few different layouts demonstrating different techniques you can use when designing with CSS grid layouts, including using {{cssxref("grid-template-areas")}}, a 12-column flexible grid system, and a product listing using auto-placement.
+
- [Subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid)
+
+ - : What subgrid does with use cases and design patterns that subgrid solves.
+
- [Masonry layout](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout)
+ - : Details what masonry layout is and it is used.
+
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
+
+ - : How box alignment works in the context of grid layout.
+
+## Related features
+
+[CSS display](/en-US/docs/Web/CSS/CSS_display) module
+
+- {{CSSxRef("display")}}
+- {{CSSxRef("order")}}
+
+[CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+
+- {{cssxref("align-content")}}
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("place-content")}}
+- {{cssxref("place-items")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
+
+[CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module
+
+- {{cssxref("aspect-ratio")}}
+- {{cssxref("box-sizing")}}
+- {{cssxref("height")}}
+- {{cssxref("max-height")}}
+- {{cssxref("max-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("min-width")}}
+- {{cssxref("width")}}
+- {{cssxref("ratio")}} data type
+- {{cssxref("min-content")}} value
+- {{cssxref("max-content")}} value
+- {{cssxref("fit-content")}} value
+- {{cssxref("fit-content_function", "fit-content()")}} function
+
## Specifications
{{Specifications}}
## See also
-- Glossary:
- - [Grid](/en-US/docs/Glossary/Grid)
- - [Grid lines](/en-US/docs/Glossary/Grid_Lines)
- - [Grid tracks](/en-US/docs/Glossary/Grid_Tracks)
- - [Grid cell](/en-US/docs/Glossary/Grid_Cell)
- - [Grid area](/en-US/docs/Glossary/Grid_Areas)
- - [Gutters](/en-US/docs/Glossary/Gutters)
- - [Grid axis](/en-US/docs/Glossary/Grid_Axis)
- - [Grid row](/en-US/docs/Glossary/Grid_Row)
- - [Grid column](/en-US/docs/Glossary/Grid_Column)
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
- - {{CSSxRef("row-gap")}}
- - {{CSSxRef("column-gap")}}
- - {{CSSxRef("gap")}}
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS display](/en-US/docs/Web/CSS/CSS_display) module
- [Grid by example](https://gridbyexample.com/)
- [CSS grid reference](https://tympanus.net/codrops/css_reference/grid/) via Codrops
-- [CSS grid inspector - Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)
+- [Firefox DevTools: grid inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)
- [CSS grid playground](https://mozilladevelopers.github.io/playground/css-grid/)
- [CSS grid garden](https://cssgridgarden.com/) - A game for learning CSS grid
diff --git a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md
index daff502831e5ee5..863ac4ec8410ffc 100644
--- a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md
@@ -114,7 +114,7 @@ It is also possible to create a masonry layout with items loading into rows.
}
```
-{{EmbedLiveSample("inline-axis", "", "350px")}}
+{{EmbedLiveSample("inline-axis", "", "450px")}}
## Controlling the grid axis
@@ -168,7 +168,7 @@ In this example two of the items span two tracks, and the masonry items work aro
}
```
-{{EmbedLiveSample("spanners", "", "220px")}}
+{{EmbedLiveSample("spanners", "", "270px")}}
This example includes an item which has positioning for columns. Items with definite placement are placed before the masonry layout happens.
@@ -225,7 +225,7 @@ body {
}
```
-{{EmbedLiveSample("positioned", "", "260px")}}
+{{EmbedLiveSample("positioned", "", "290px")}}
## Fallbacks for masonry layout
@@ -238,4 +238,4 @@ In browsers [that do not support masonry](#browser_compatibility), regular grid
## See also
- {{cssxref("grid-auto-flow")}} for controlling grid auto-placement
-- [Native CSS masonry layout in CSS grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/)
+- [Native CSS masonry layout in CSS grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/) via Smashing Magazine (2020)
diff --git a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
index e42134c7bafa3f4..b6adab7ddc5fc65 100644
--- a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
+++ b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
@@ -6,15 +6,15 @@ page-type: guide
{{CSSRef}}
-To round off this set of guides to CSS grid layout, we're going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using [grid-template-areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas), a typical 12-column flexible grid system, and also a product listing using auto-placement. As you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. Choose the method you find most helpful for the problems that you are solving and the designs that you need to implement.
+To round off this [set of CSS grid layout guides](/en-US/docs/Web/CSS/CSS_grid_layout#guides), we're going to walk through a few different layouts, which demonstrate some of the techniques you can use when designing with grid layout. We will look at an example using {{cssxref("grid-template-areas")}}, a 12-column flexible grid system, and also a product listing using auto-placement. As you can see from this set of examples, there is often more than one way to get the results you want with CSS grid layout. Choose the method you find most helpful for the problems that you are solving and the designs that you need to implement.
## A responsive layout with 1 to 3 fluid columns using `grid-template-areas`
Many websites are a variation of this type of layout, with content, sidebars, a header and a footer. In a responsive design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens.
-
+
-We're going to create this layout using the _named template areas_ that we learned about in the guide _[Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)_.
+We're going to create this layout using the _named template areas_ that we learned about in the [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) guide.
The markup is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block to place advertising.
@@ -23,7 +23,7 @@ The markup is a container with elements inside for a header, footer, main conten
box-sizing: border-box;
}
.wrapper {
- max-width: 1024px;
+ max-inline-size: 1024px;
margin: 0 auto;
font:
1.2em Helvetica,
@@ -70,7 +70,7 @@ nav ul {
```
-As we are using {{cssxref("grid-template-areas")}} to create the layout. Outside of any media queries we need to name the areas. We name areas using the {{cssxref("grid-area")}} property.
+As we are using {{cssxref("grid-template-areas")}} to create the layout, we need to name the areas outside of any [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). We name areas using the {{cssxref("grid-area")}} property.
```css
.main-head {
@@ -93,7 +93,7 @@ As we are using {{cssxref("grid-template-areas")}} to create the layout. Outside
}
```
-This will not create any layout, however the items now have names we can use to do so. Staying outside of any media queries we're now going to set up the layout for the mobile width. Here we're keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide _[Grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)_. We've not defined any column or row tracks but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid.
+This does not create a layout. Rather, the items now have names we can use to do so. Staying outside of any media queries we're now going to set up the layout for the mobile width. Here we're keeping everything in source order to avoid any disconnect between the source and display as described in the [Grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) guide. We've not explicitly defined any column or row tracks; this layout dictates a single column and creates rows as needed for each item in the implicit grid.
```css
.wrapper {
@@ -109,10 +109,10 @@ This will not create any layout, however the items now have names we can use to
}
```
-With our mobile layout in place, we can now proceed to add a [media query](/en-US/docs/Web/CSS/CSS_media_queries) to adapt this layout for bigger screens with enough real estate to display two columns.
+With our mobile layout in place, we can now proceed to add a {{cssxref("@media")}} query to adapt this layout for bigger screens with enough real estate to display two columns.
```css
-@media (min-width: 500px) {
+@media (min-inline-size: 500px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
@@ -128,12 +128,12 @@ With our mobile layout in place, we can now proceed to add a [media query](/en-U
}
```
-You can see the layout taking shape in the value of {{cssxref("grid-template-areas")}}. The `header` spans over two column tracks, as does the `nav`. In the third row track we have the `sidebar` alongside the `content`. In the fourth row track I have chosen to place my `ad` content – so it appears under the sidebar, then the `footer` next to it under the content. We're using a flexbox on the navigation to display it in a row spaced out.
+You can see the layout taking shape in the value of {{cssxref("grid-template-areas")}}. The `header` spans over two column tracks, as does the `nav`. In the third row track, we place the `sidebar` alongside the `content`. We place the `ad` content in the fourth row track so it appears under the sidebar. The `footer` is next to it under the content. We use [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) on the navigation to evenly space the navigation items in a row.
-We can now add a final breakpoint to move to a three-column layout.
+We can now add a final breakpoint for wider screens able to display a three-column layout.
```css
-@media (min-width: 700px) {
+@media (min-inline-size: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
@@ -148,21 +148,21 @@ We can now add a final breakpoint to move to a three-column layout.
}
```
-The three-column layout has two `1fr` unit side columns and a middle column that has `4fr` as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.
+The three-column layout has two `1fr` unit side columns and a middle column that has `4fr` as the track size. This means the available space in the container is split into six parts and assigned in proportion to our three tracks – one part each to the side columns and four parts to the center.
-In this layout we're displaying the `nav` in the left column, alongside the `content`. In the right column we have the `sidebar` and underneath it the advertisements (`ad`). The `footer` now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.
+In this layout, we're displaying the `nav` in the left column, alongside the `content`. In the right column we have the `sidebar` and underneath it the advertisements (`ad`). The `footer` now spans across the entire bottom of the layout. Again, we use flexbox to display the navigation, but this time we display it as a column instead of a row.
-{{ EmbedLiveSample('A_responsive_layout_with_1_to_3_fluid_columns_using_grid-template-areas', '800', '500') }}
+{{ EmbedLiveSample('A_responsive_layout_with_1_to_3_fluid_columns_using_grid-template-areas', '800', '570') }}
-This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular we're changing the location of that `ad` block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can't rely on it fully in production due to the browsers that visit your site.
+This basic example demonstrates how to rearrange a grid layout across different breakpoints. In particular, we're changing the location of the `ad` block as appropriate in our different column setups. This named areas method can be very helpful, especially at the prototyping stage. You may find it easier to use names rather than numbers when playing with the location of elements on the grid.
## A flexible 12-column layout
-If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS grid layout. As a simple example, let's create a 12-column flexible grid that has 12 `1fr`-unit column tracks, they all have a start line named `col-start`. This means that we will have twelve grid lines named `col-start`.
+CSS frameworks and grid systems commonly use 12- or 16-column flexible grids. We can create this type of system using CSS grid layout. As an example, let's create a 12-column flexible grid with 12 `1fr`-unit column tracks, each with a start line named `col-start`. This means that we will have twelve grid lines named `col-start`.
```css hidden
.wrapper {
- max-width: 1024px;
+ max-inline-size: 1024px;
margin: 0 auto;
font:
1.2em Helvetica,
@@ -185,7 +185,7 @@ If you have been working with one of the many frameworks or grid systems you may
}
```
-To demonstrate how this grid system works I have four child elements inside my wrapper.
+To demonstrate how this grid system works, we have four child elements inside a wrapper.
```html
@@ -200,7 +200,7 @@ To demonstrate how this grid system works I have four child elements inside my w
```
-We can then place these on the grid using the named lines, and also the span keyword.
+We can then place these on the grid using the named lines, and also the `span` keyword.
```css
.item1 {
@@ -222,24 +222,24 @@ We can then place these on the grid using the named lines, and also the span key
{{ EmbedLiveSample('A_flexible_12-column_layout', '800', '400') }}
-As described in the [guide to named lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines), we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.
+As described in the [using named grid lines guide](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines), we are using the named lines to place our items. As we have 12 lines all with the same name, we use the name and the index of the line. If you prefer, you can use the line index itself and avoid using named lines.
-Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the `span` keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the [Firefox grid inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html). It clearly demonstrates how our items are placed.
+Rather than setting the end line number, we define how many tracks this element should span using the `span` keyword. When working with a multiple-column layout system, this method may be more intuitive for those who think of blocks in terms of the number of tracks of the grid they span, then adjusting for different breakpoints. To see how the blocks align themselves to the tracks, use the grid inspector in your browser developer tools; it likely clearly demonstrates how the items are placed.
-
+
-There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS grid layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this _strict_ column and row placement we can also easily leave white space in our layout. We also don't need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.
+We don't need to add any markup to create a row. CSS framework grid systems often did this to stop elements popping up into the row above for browsers that don't support CSS grid layout. However, this point is now moot — all modern browsers have supported CSS grid layout for a long time. CSS grids allow us to place items into rows, with no danger of them rising up into the row above if it is left empty. Due to this _strict_ column and row placement, we can also easily leave white space in our layout. We also don't need special classes to indent items into the grid. All we need to do is specify the start and end line for the item.
## Building a layout using the 12-column system
-To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. Let's start with the same markup as used for the grid template areas example.
+To see how this layout method works in practice, we can create the same layout we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. Let's start with the same markup as used for the grid template areas example.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
- max-width: 1024px;
+ max-inline-size: 1024px;
margin: 0 auto;
font:
1.2em Helvetica,
@@ -286,7 +286,7 @@ nav ul {
```
-We can then set up our grid, as for the example 12-column layout above.
+We set up our grid as we did for the 12-column layout example above.
```css
.wrapper {
@@ -296,9 +296,9 @@ We can then set up our grid, as for the example 12-column layout above.
}
```
-We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.
+We are again going to make this a responsive layout, this time using named lines. Every breakpoint will use a 12-column grid. However, the number of tracks items will span will change depending on the size of the screen.
-We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.
+We start {{glossary("mobile first")}}. For the narrowest screens, we want the items to remain in source order and all span across the entire grid.
```css
.wrapper > * {
@@ -306,12 +306,12 @@ We start mobile first, and all we want for the narrowest screens is for the item
}
```
-At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.
+At the next breakpoint, we want a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named `col-start`, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.
-The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.
+The `ad` panel is below the sidebar, starting at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning nine tracks, taking both to the end of the grid.
```css
-@media (min-width: 500px) {
+@media (min-inline-size: 500px) {
.side {
grid-column: col-start / span 3;
grid-row: 3;
@@ -331,10 +331,10 @@ The ad panel is below the sidebar, so starts at grid row line 4. Then we have th
}
```
-Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.
+Finally, for screens larger than our largest breakpoint, we define a three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.
```css
-@media (min-width: 700px) {
+@media (min-inline-size: 700px) {
.main-nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
@@ -360,19 +360,21 @@ Finally we go to the three-column version of this layout. The header continues t
}
```
-{{ EmbedLiveSample('Building_a_layout_using_the_12-column_system', '800', '450') }}
+{{ EmbedLiveSample('Building_a_layout_using_the_12-column_system', '800', '570') }}
-Once again the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) is useful to help us see how our layout has taken shape.
+Once again, check the grid inspector in your browser developer tools to see how the layout has taken shape.

-Something to note as we create this layout is that we haven't needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working "mobile first". We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.
+Something to note as we created this layout is that we didn't need to explicitly position every element on the grid at each breakpoint. We inherited the placement set up for earlier breakpoints – an advantage of working "mobile first". We also took advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid.
## A product listing with auto-placement
-Many layouts are essentially sets of "cards" – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add [media queries](/en-US/docs/Web/CSS/CSS_media_queries) to make it so. In this next example I'm combining CSS grid and flexbox layouts to make a simple product listing layout.
+In this last example in this guide, we create a layout that entirely relies on auto-placement.
-The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.
+Many layouts are essentially sets of "cards" – product listings, image galleries, and so on. A grid enables creating these listings in a way that is responsive without needing to add [media queries](/en-US/docs/Web/CSS/CSS_media_queries). In this example, we combine CSS grid and flexbox layouts to make a basic product listing layout.
+
+The markup for the listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.
```html
@@ -432,7 +434,7 @@ The markup for my listing is an unordered list of items. Each item contains a he
box-sizing: border-box;
}
img {
- max-width: 100%;
+ max-inline-size: 100%;
display: block;
}
body {
@@ -456,7 +458,7 @@ h2 {
}
```
-We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the `minmax()` function in our repeat notation for track sizing.
+We create a grid with a flexible number of flexible columns. We want them to be at least 200 pixels wide and share any available remaining space equally – so we always get equal-width column tracks. We achieve this with the {{cssxref("minmax()")}} function in our {{cssxref("repeat")}} notation for track sizing.
```css
.listing {
@@ -468,9 +470,9 @@ We are going to create a grid with a flexible number of flexible columns. I want
}
```
-As soon as we add this CSS, the items start to lay out as a grid. If we make the window smaller or wider the number of column tracks changes – without us needing to add breakpoints using media queries and redefine the grid.
+When we add this CSS, the items will be laid out as a grid. If we make the window smaller or wider, the number of column tracks changes – without media queries adding breakpoints and without needing to redefine the grid.
-We can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to `display: flex` and the `flex-direction` to `column`. We can then use an auto margin on the `.cta` to push this bar down to the bottom of the box.
+We can tidy up the internals of the boxes using a touch of flexbox. We set the list item to `display: flex` and the {{cssxref("flex-direction")}} to `column`. We can then use an auto margin on the `.cta` to push this bar down to the bottom of the box.
```css
.listing li {
@@ -480,8 +482,8 @@ We can then tidy up the internals of the boxes using a little touch of flexbox.
flex-direction: column;
}
.listing .cta {
- margin-top: auto;
- border-top: 1px solid #ffe066;
+ margin-block-start: auto;
+ border-block-start: 1px solid #ffe066;
padding: 10px;
text-align: center;
}
@@ -490,17 +492,17 @@ We can then tidy up the internals of the boxes using a little touch of flexbox.
}
```
-This is really one of the key reasons someone would use flexbox rather than grid, if he/she's just aligning or distributing something in a single dimension, that's a flexbox use case.
+This is one of the key reasons to use flexbox rather than CSS grid layout. If you're aligning or distributing content in a single dimension, that's a flexbox use case.
{{ EmbedLiveSample('A_product_listing_with_auto-placement', '800', '900') }}
## Preventing gaps with the dense keyword
-This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won't be so tall. We have a class of `wide` on my larger item, and we add a rule {{cssxref("grid-column-end")}} with a value of `span 2`. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn't space to lay out a two-track item.
+This is all looking fairly complete now. However, we sometimes have cards that contain far more content than the others. It might be nice to make those span two tracks, then they won't be so tall. We add a `wide` class on the larger item, and add a rule giving it a {{cssxref("grid-column-end")}} with a value of `span 2`. When this item is encountered, it will be assigned to two tracks. This means that, at some breakpoints, we'll get a gap in the grid – where there isn't enough space to lay out a two-track item.

-We can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow", "grid-auto-flow: dense")}} on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the [issues](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility#visual_not_logical_re-ordering) of the tab order following the source and not your reordered display.
+We can make the grid backfill those gaps by setting {{cssxref("grid-auto-flow", "grid-auto-flow: dense")}} on the grid container. Take care when doing this as it can cause items to be taken out of their logical source order. You should only do this if your items do not have a set order. Additionally, be aware of the [accessibility and re-ordering issues](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility#visual_not_logical_re-ordering) resulting from the tab order following the source and not your reordered display.
```html hidden
@@ -572,8 +574,8 @@ h2 {
flex-direction: column;
}
.listing .cta {
- margin-top: auto;
- border-top: 1px solid #ffe066;
+ margin-block-start: auto;
+ border-block-start: 1px solid #ffe066;
padding: 10px;
text-align: center;
}
@@ -598,11 +600,11 @@ h2 {
{{ EmbedLiveSample('Preventing_gaps_with_the_dense_keyword', '800', '900') }}
-This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.
+Using auto-placement with some rules applied to certain items is very useful and can help with content you can't control, such as CMS output, where you have repeated items and can use [structural pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes) to target them.
## Further exploration
-The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don't forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don't need to be tied to the same old layouts to use it.
+CSS grid layout provides so many possibilities. The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick a layout from a responsive site you like and see if you can build it using grid. You can even take inspiration from magazines or other non-web sources.
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout)
- [CSS Layout: Grids](/en-US/docs/Learn_web_development/Core/CSS_layout/Grids)
diff --git a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
index cc02bd8e0ca039a..229ac66ef767fbf 100644
--- a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
+++ b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
@@ -6,19 +6,19 @@ page-type: guide
{{CSSRef}}
-CSS grid layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.
+[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) is designed to work alongside other parts of CSS, as part of a complete system for doing the layout. This guide explains grid layout fits together with other techniques.
## Grid and flexbox
-The basic difference between CSS grid layout and [CSS flexbox layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is that flexbox was designed for layout in one dimension - either a row _or_ a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with grid.
+The basic difference between CSS grid layout and [CSS flexbox layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is that flexbox was designed for layout in one dimension - either a row _or_ a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications both use [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) features. If you have already learned how to use flexbox, the similarities should help you get to grips with grid.
### One-dimensional versus two-dimensional layout
-A simple example can demonstrate the difference between one- and two-dimensional layouts.
+A basic example can demonstrate the difference between one- and two-dimensional layouts.
-In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels.
+In this first example, we use flexbox to lay out a set of boxes. We have five child items in our container, and we have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels.
-I have also set the {{cssxref("flex-wrap")}} property to `wrap`, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.
+We also set the {{cssxref("flex-wrap")}} property to `wrap`, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.
```css hidden
* {
@@ -61,7 +61,7 @@ I have also set the {{cssxref("flex-wrap")}} property to `wrap`, so that if the
}
```
-{{ EmbedLiveSample('One-dimensional_versus_two-dimensional_layout', '500', '230') }}
+{{ EmbedLiveSample('One-dimensional_versus_two-dimensional_layout', '500', '170') }}
In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when working by column) is an independent flex line in the flex container. Space distribution happens across the flex line.
@@ -69,7 +69,7 @@ A common question then is how to make those items line up. This is where you wan
### The same layout with CSS grids
-In this next example, I create the same layout using grid. This time we have three `1fr` column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.
+In this next example, we create the same layout using grid. This time we have three `1fr` column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see, they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.
```css hidden
* {
@@ -110,10 +110,10 @@ In this next example, I create the same layout using grid. This time we have thr
{{ EmbedLiveSample('The_same_layout_with_CSS_grids', '300', '170') }}
-A simple question to ask yourself when deciding between grid or flexbox is:
+An important question to ask yourself when deciding between grid or flexbox is:
-- do I only need to control the layout by row _or_ column – use a flexbox
-- do I need to control the layout by row _and_ column – use a grid
+- Do we only need to control the layout by row _or_ column? If yes, use flexbox.
+- Do we need to control the layout by row _and_ column? If yes, use grid layout.
### Content out or layout in?
@@ -121,17 +121,15 @@ In addition to the one-dimensional versus two-dimensional distinction, there is
Grid works from the layout in. When you use CSS grid layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.
-If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS grid layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.
+If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS grid layout. For example, if you are setting a width on a flex item to make it line up with other items in a row above, a grid is likely a better choice.
### Box alignment
-The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually.
+Most grid alignment features were originally defined is the [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout). These features provided proper alignment control for the first time and made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These properties are now defined in the [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module, and are used in multiple layout modes, including grid layout.
-The alignment properties from the flexbox specification have been added to a new specification called [Box Alignment Level 3](https://drafts.csswg.org/css-align/). This means that they can be used in other specifications, including grid layout. In the future, they may well apply to other layout methods as well.
+We will be taking a proper look at [Aligning items in CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) later. For now, here is a comparison between simple examples of flexbox and grid.
-In a later guide in this series, I'll be taking a proper look at Box Alignment and how it works in grid layout. For now, here is a comparison between simple examples of flexbox and grid.
-
-In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to `flex-end` so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on `box1` so it will override the default and stretch to the height of the container and on `box2` so it aligns to the start of the flex container.
+In the first example, which uses flexbox, we have a container with three items inside. The container's {{cssxref("min-height")}} is set, so it defines the height of the flex container. We have set {{cssxref("align-items")}} on the flex container to `flex-end` so the items will line up at the end of the flex container. We have also set the {{cssxref("align-self")}} property on `box1` so it will override the default and stretch to the height of the container and on `box2` so it aligns to the start of the flex container.
```css hidden
* {
@@ -179,7 +177,7 @@ In the first example, which uses flexbox, I have a container with three items in
### Alignment in CSS grids
-This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to `start` and `end` rather than `flex-start` and `flex-end`. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.
+This example uses a grid to create the same layout. We use the box alignment properties as they apply to a grid layout. We align to `start` and `end`. (We could have used the {{cssxref("content-position")}} synonyms `flex-start` and `flex-end`.) In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.
```css hidden
* {
@@ -224,13 +222,13 @@ This second example uses a grid to create the same layout. This time we are usin
}
```
-{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}
+{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '240') }}
### The `fr` unit and `flex-basis`
We have already seen how the `fr` unit works to assign a proportion of available space in the grid container to our grid tracks. The `fr` unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the `flex` properties in flexbox while still enabling the creation of a layout in two dimensions.
-If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way that the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.
+If we look back at the example where we demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way that the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.
In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.
@@ -238,7 +236,7 @@ In comparison, the grid version always has three column tracks. The tracks thems
We can use grid to create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the `auto-fill` and `auto-fit` properties.
-In this next example, I have used the `auto-fill` keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.
+In this next example, we have used the `auto-fill` keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.
```css hidden
* {
@@ -275,11 +273,13 @@ In this next example, I have used the `auto-fill` keyword in place of an integer
}
```
-{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}
+{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '70') }}
### A flexible number of tracks
-This isn't quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining `auto-fit` and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with `minmax`. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be `1fr`. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the `1fr` maximum as an instruction to share out the remaining space between the items.
+This isn't quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining `auto-fit` and the {{cssxref("minmax", "minmax()")}} function.
+
+In this example, we create auto filled tracks with `minmax`. We want our tracks to be a minimum of 200 pixels, so we set the maximum to be `1fr`. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the `1fr` maximum as an instruction to share out the remaining space between the items.
```css hidden
* {
@@ -316,19 +316,19 @@ This isn't quite the same as flexbox. In the flexbox example, the items are larg
}
```
-{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}
+{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '70') }}
With grid layout, we can create a grid with a dynamic number of flexible tracks and have the items laid out on the grid aligned by rows and columns.
## Grid and absolutely positioned elements
-Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.
+Grid interacts with [absolutely positioned](/en-US/docs/Web/CSS/position#absolute_positioning) elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.
### A grid container as containing block
-To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item `position: absolute` it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.
+To make the grid container a [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block), you need to add the {{cssxref("position")}} property to the container with a value of `relative`, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item `position: absolute` it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.
-In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has `position: relative` and so becomes the positioning context of this item.
+In the below example we have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has `position: relative` and so becomes the positioning context of this item.
```css hidden
* {
@@ -382,25 +382,25 @@ In the below example I have a wrapper containing four child items. Item three is
}
```
-{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}
+{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '270') }}
You can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usual for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn't cause the additional row to be created to span to row line 3.
-If we remove `position: absolute` from the rules for `.box3` you can see how it would display without the positioning.
+If we remove `position: absolute` from the rules for `.box3`, you can see how it would display without the positioning.
### A grid container as parent
-If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove `position: relative` from the wrapper above, positioning context is from the viewport, as shown in this image.
+If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The _positioning context_ is the element the absolutely positioned element is positioned relative to. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove `position: relative` from the wrapper above, positioning context is from the viewport, as shown in this image.

-Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.
+Once again, the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.
### With a grid area as the parent
-If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside `.box3` of the grid.
+If the absolutely positioned item is nested inside a grid area, then you can create a positioning context on that area. In this example, we have our grid as before, but this time we have nested an item inside `.box3` of the grid.
-I have given `.box3` position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.
+We have given `.box3` position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.
```css hidden
* {
@@ -467,15 +467,13 @@ I have given `.box3` position relative and then positioned the sub-item with the
## Grid and display: contents
-A final interaction with another layout specification that is worth noting is the interaction between CSS grid layout and `display: contents`. The `contents` value of the display property is a new value that is described in the [Display specification](https://drafts.csswg.org/css-display/#box-generation) as follows:
-
-> "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree."
+A final interaction worth noting is the interaction between CSS grid layout and `display: contents`, defined in the [CSS display](/en-US/docs/Web/CSS/CSS_display) module. When the {{cssxref("display")}} property is set to `contents`, the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. This means that, for the purposes of box generation and layout, the element is treated as if it had been replaced with its children and pseudo-elements in the document tree.
-If you set an item to `display: contents`, the box it would normally create disappears and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example.
+If you set an item to `display: contents`, the box it would normally create disappears and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is an example.
### Grid layout with nested child elements
-In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don't become part of the grid layout and so display using regular block layout.
+In this example, first item of our grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don't become part of the grid layout and so display using regular block layout.
```css hidden
* {
@@ -533,7 +531,7 @@ In the following markup, I have a grid and the first item on the grid is set to
### Using display: contents
-If I now add `display: contents` to the rules for `box1`, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.
+If we now add `display: contents` to the rules for `box1`, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.
```css hidden
* {
@@ -590,7 +588,7 @@ If I now add `display: contents` to the rules for `box1`, the box for that item
{{ EmbedLiveSample('Using_display_contents', '400', '350') }}
-This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use `display: contents` in a similar way with flexbox to enable nested items to become flex items.
+This can be a way to get items nested into the grid to act as if they are part of the grid. You can also use `display: contents` in a similar way with flexbox to enable nested items to become flex items.
As you can see from this guide, CSS grid layout is just one part of your toolkit. Don't be afraid to mix it with other methods of doing layout to get the different effects you need.
diff --git a/files/en-us/web/css/css_grid_layout/subgrid/index.md b/files/en-us/web/css/css_grid_layout/subgrid/index.md
index a20c5fbfb60b9e2..a97d105179ed661 100644
--- a/files/en-us/web/css/css_grid_layout/subgrid/index.md
+++ b/files/en-us/web/css/css_grid_layout/subgrid/index.md
@@ -7,25 +7,25 @@ browser-compat: css.properties.grid-template-columns.subgrid
{{CSSRef}}
-Level 2 of the CSS grid layout specification includes a `subgrid` value for {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. This guide details what subgrid does and gives some use cases and design patterns that the feature solves.
+The [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module includes a `subgrid` value for {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. This guide details what subgrid does and gives some use cases and design patterns that the feature solves.
## Introduction to subgrid
-When you add `display: grid` to a grid container, only the direct children become grid items and can then be placed on the grid you created. The children of these items display in normal flow.
+When you add [`display: grid`](/en-US/docs/Web/CSS/display) to a grid container, only the direct children become grid items, which can then be placed on the grid you created. The children of these items display in normal flow.
You can "nest" grids by making a grid item a grid container. These grids, however, are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid.
-If you set the value `subgrid` on `grid-template-columns`, `grid-template-rows` or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent.
+If you set the value `subgrid` on `grid-template-columns`, `grid-template-rows` or both, instead of creating a new track listing, the nested grid uses the tracks defined on the parent.
-For example, if you use `grid-template-columns: subgrid` and the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same size as the parent grid. Gaps are inherited but can also be overridden with a different {{cssxref("gap")}} value. Line names can be passed from the parent into the subgrid, and the subgrid can also declare its own line names.
+For example, if you use `grid-template-columns: subgrid` and the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same size as the parent grid. While [gaps](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters) are inherited, they can be overridden with a different {{cssxref("gap")}} value. [Line names](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) can be passed from the parent into the subgrid, and the subgrid can also declare its own line names.
## Subgrid for columns
-In the example below, I have a grid layout with nine `1fr` column tracks and four rows that are a minimum of 100px tall.
+In the example below, the grid layout has nine `1fr` column tracks and four rows that are a minimum of `100px` tall.
-I place `.item` from column lines 2 to 7 and rows 2 to 4. I then make this grid item into a grid, giving it column tracks that are a subgrid and defining rows as normal. As the item spans five column tracks, this means that the subgrid has five-column tracks. I can then place `.subitem` on this grid.
+The `.item` is placed between column lines 2 to 7 and rows 2 to 4. This grid item is itself specified as a grid using `display: grid` and then defined as a subgrid by giving it column tracks that are a subgrid (`grid-template-columns: subgrid`) and normally defined rows. The subgrid has five-column tracks as it spans five column tracks.
-The rows in this example are not a subgrid, and so behave as a nested grid does normally. The grid area on the parent expands to be large enough for this nested grid.
+Because the `.item` is a subgrid, even though the `.subitem` is not a direct child of the outer `.grid`, it can be placed on that outer grid, with its columns aligned with the outer grid's columns. The rows are not a subgrid, so behave as a nested grid normally does. The grid area on the parent expands to be large enough for this nested grid.
```html live-sample___columns
@@ -79,15 +79,15 @@ The rows in this example are not a subgrid, and so behave as a nested grid does
}
```
-{{EmbedLiveSample("columns", "", "450px")}}
-
Note that line numbering restarts inside the subgrid — column line 1, when inside the subgrid, is the first line of the subgrid. The subgridded element doesn't inherit the line numbers of the parent grid. This means that you can safely lay out a component that may be placed in different positions on the main grid, knowing that the line numbers on the component will always be the same.
+{{EmbedLiveSample("columns", "", "450px")}}
+
## Subgrid for rows
-The next example is the same setup; however, we are using `subgrid` as the value of `grid-template-rows` and defining explicit column tracks. So, the column tracks behave as a regular nested grid, but the rows are tied to the two tracks that the child spans.
+This example uses the same HTML as above, but here the `subgrid` is applied as the value of `grid-template-rows` instead, with explicitly defined column tracks. In this case, the column tracks behave as a regular nested grid, but the rows are tied to the two tracks that the `.item` spans.
-```html live-sample___rows
+```html live-sample___rows hidden
@@ -143,9 +143,9 @@ The next example is the same setup; however, we are using `subgrid` as the value
## A subgrid in both dimensions
-You can define both rows and columns as a subgrid, as in the example below. This means that your subgrid is tied in both dimensions to the number of tracks on the parent.
+In this example, both rows and columns are defined as a subgrid, tying the subgrid to the parent grid's tracks in both dimensions.
-```html live-sample___both
+```html live-sample___both hidden
@@ -203,7 +203,7 @@ You can define both rows and columns as a subgrid, as in the example below. This
If you need to autoplace items and do not know how many items you will have, take care when creating a subgrid, as it will prevent additional rows from being created to hold those items.
-Take a look at the next example — it uses the same parent and child grid as in the example above. However, I have twelve items inside the subgrid trying to autoplace into ten grid cells. As the subgrid is on both dimensions, there is nowhere for the extra two items to go, so they go into the last track of the grid, as defined in the specification.
+Take a look at the next example — it uses the same parent and child grid as in the example above. There are twelve items inside the subgrid trying to autoplace themselves into ten grid cells. As the subgrid is on both dimensions, there is nowhere for the extra two items to go, so they go into the last track of the grid. This is the behavior defined in the specification.
```html live-sample___no-implicit
@@ -269,7 +269,7 @@ body {
{{EmbedLiveSample("no-implicit", "", "440px")}}
-If we remove the `grid-template-rows` value, we enable regular creation of implicit tracks and although these won't line up with the tracks of the parent, as many as are required will be created.
+By removing the `grid-template-rows` value, the regular creation of implicit tracks is enabled, creating as many rows as required. These won't line up with the tracks of the parent.
```html live-sample___implicit
@@ -337,9 +337,9 @@ body {
## The gap properties and subgrid
-If you have a {{cssxref("gap")}}, {{cssxref("column-gap")}}, or {{cssxref("row-gap")}} specified on the parent, this will be passed into the subgrid, so it will have the same spacing between tracks as the parent. In some situations, however, you may wish the subgrid tracks to have a different gap or no gap. This can be achieved by using the `gap-*` properties on the grid container of the subgrid.
+Any {{cssxref("gap")}}, {{cssxref("column-gap")}}, or {{cssxref("row-gap")}} values specified on the parent are passed into the subgrid, creating the same spacing between tracks as the parent. This default behavior can be overridden by applying `gap-*` properties on the subgrid container.
-You can see this in the example below. The parent grid has a gap of 20px for rows and columns. The subgrid has `row-gap` set to `0`.
+In this example, the parent grid has a gap of `20px` for rows and columns and the subgrid has `row-gap` set to `0`.
```html live-sample___gap
@@ -404,13 +404,13 @@ You can see this in the example below. The parent grid has a gap of 20px for row
{{EmbedLiveSample("gap", "", "500px")}}
-If you inspect this in the Firefox grid inspector, you can see how the line of the grid is in the correct place down the center of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item.
+If you inspect this in your developer tools grid inspector, you will note that the subgrid line is at the center of the gap. Setting the gap to `0` acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item.
-
+
## Named grid lines
-When using CSS grid, you can name lines on your grid and then position items based on those names rather than the line number. The line names on the parent grid are passed into the subgrid, and you can place items using them. In the example below, I named lines on the parent `col-start` and `col-end` and then used those to place the subitem.
+When using CSS grid, you can [name lines on your grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) and then position items based on those names rather than the line number. The line names on the parent grid are passed into the subgrid, and you can place items using them. In the example below, the named lines of the parent `col-start` and `col-end` are used to place the subitem.
```html live-sample___line-names
@@ -467,9 +467,9 @@ When using CSS grid, you can name lines on your grid and then position items bas
{{EmbedLiveSample("line-names", "", "500px")}}
-You can also specify line names on the subgrid. This is achieved by adding a list of line names enclosed in square brackets after the `subgrid` keyword. If you have four lines in your subgrid, to name them all, you could use the syntax `grid-template-columns: subgrid [line1] [line2] [line3] [line4]`
+You can also specify line names on the subgrid. This is achieved by adding a list of line names enclosed in square brackets after the `subgrid` keyword. For example, if you have four lines in your subgrid, to name them all, you could use the syntax `grid-template-columns: subgrid [line1] [line2] [line3] [line4]`
-Lines specified on the subgrid are added to any lines specified on the parent, so you can use either or both. To demonstrate this, I have positioned one item in the example below using the parent lines and one using the subgrid lines.
+Lines specified on the subgrid are added to any lines specified on the parent, so you can use either or both. In this example, one item is placed below using the parent lines and one using the subgrid lines.
```html live-sample___adding-line-names
@@ -535,7 +535,7 @@ Lines specified on the subgrid are added to any lines specified on the parent, s
## Using subgrids
-Other than needing to take care of items that do not fit in your subgrid, a subgrid acts very similarly to any nested grid; the only difference is that the track sizing of the subgrid is set on the parent grid. As with any nested grid, however, the size of the content in the subgrid can change the track sizing, assuming a track sizing method is used that allows content to affect the size. In such a case, auto-sized row tracks, for example, will grow to fit content in the main grid and content in the subgrid.
+A subgrid acts very similarly to any nested grid; the only difference is that the track sizing of the subgrid is set on the parent grid. As with any nested grid, however, the size of the content in the subgrid can change the track sizing, assuming a track sizing method is used that allows content to affect the size. In such a case, auto-sized row tracks will grow to fit content in the main grid and content in the subgrid.
As the subgrid value acts in much the same way as a regular nested grid, it is easy to switch between the two. For example, if you realize that you need an implicit grid for rows, you would need to remove the `subgrid` value of `grid-template-rows` and perhaps give a value for `grid-auto-rows` to control the implicit track sizing.
@@ -549,5 +549,6 @@ As the subgrid value acts in much the same way as a regular nested grid, it is e
## See also
-- Videos: [Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) and [Don't wait to use subgrid for better card layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4)
-- [Hello subgrid!](https://noti.st/rachelandrew/i6gUcF/hello-subgrid) A presentation from CSSConf.eu
+- [Video: Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) (2019)
+- [Video: Don't wait to use subgrid for better card layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4) (2019)
+- [Video: Hello subgrid!](https://www.youtube.com/watch?v=vxOj7CaWiPU) presentation from CSSConf.eu (2019)
diff --git a/files/en-us/web/css/css_images/using_css_gradients/index.md b/files/en-us/web/css/css_images/using_css_gradients/index.md
index ef2dd546ecde037..b769d9ad6811643 100644
--- a/files/en-us/web/css/css_images/using_css_gradients/index.md
+++ b/files/en-us/web/css/css_images/using_css_gradients/index.md
@@ -327,8 +327,8 @@ div {
```css
.layered-image {
- background: linear-gradient(to right, transparent, mistyrose),
- url("critters.png");
+ background:
+ linear-gradient(to right, transparent, mistyrose), url("critters.png");
}
```
@@ -351,11 +351,8 @@ div {
```css
.stacked-linear {
- background: linear-gradient(
- 217deg,
- rgb(255 0 0 / 80%),
- rgb(255 0 0 / 0%) 70.71%
- ),
+ background:
+ linear-gradient(217deg, rgb(255 0 0 / 80%), rgb(255 0 0 / 0%) 70.71%),
linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
}
@@ -386,7 +383,8 @@ div {
```css
div {
- background: linear-gradient(to top, red, blue),
+ background:
+ linear-gradient(to top, red, blue),
linear-gradient(to right, #5500ff, #00ff55);
}
@@ -792,7 +790,8 @@ div {
```css
.multi-repeating-linear {
- background: repeating-linear-gradient(
+ background:
+ repeating-linear-gradient(
190deg,
rgb(255 0 0 / 50%) 40px,
rgb(255 153 0 / 50%) 80px,
@@ -847,7 +846,8 @@ div {
```css
.plaid-gradient {
- background: repeating-linear-gradient(
+ background:
+ repeating-linear-gradient(
90deg,
transparent,
transparent 50px,
@@ -892,7 +892,8 @@ div {
rgb(143 77 63 / 25%) 10px
);
- background: repeating-linear-gradient(
+ background:
+ repeating-linear-gradient(
90deg,
transparent 0 50px,
rgb(255 127 0 / 25%) 50px 56px,
@@ -1037,7 +1038,8 @@ div {
```css
.multi-repeating-conic {
- background: repeating-conic-gradient(
+ background:
+ repeating-conic-gradient(
from 0deg at 80% 50%,
#5691f580 0% 8.25%,
#b338ff80 8.25% 16.5%,
diff --git a/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
index 130234cfdd21641..ce7290d26ad8c31 100644
--- a/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
+++ b/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
@@ -93,7 +93,7 @@ This diagram shows block and inline in a vertical writing mode:
## See also
-- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
- [Box alignment in flex layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
-- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
+- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes)
- [Understanding logical properties and values](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/) on Smashing Magazine (2018)
diff --git a/files/en-us/web/css/css_logical_properties_and_values/index.md b/files/en-us/web/css/css_logical_properties_and_values/index.md
index c9ab3673e660738..e8d1ad4d2189707 100644
--- a/files/en-us/web/css/css_logical_properties_and_values/index.md
+++ b/files/en-us/web/css/css_logical_properties_and_values/index.md
@@ -182,6 +182,6 @@ CSS was initially designed with only physical coordinates. The logical propertie
## See also
-- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
+- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes)
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/css_media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md
index 679494afe79cc79..38debfdf00d05fe 100644
--- a/files/en-us/web/css/css_media_queries/index.md
+++ b/files/en-us/web/css/css_media_queries/index.md
@@ -125,6 +125,8 @@ When designing reusable HTML components, you may also use [container queries](/e
- {{DOMxRef("MediaList")}} interface
- {{DOMxRef("MediaList.mediaText", "mediaText")}} property
- {{DOMxRef("MediaQueryListEvent")}} object
+- [Device Posture API](/en-US/docs/Web/API/Device_Posture_API)
+ - {{cssxref("@media/device-posture", "device-posture")}} descriptor
- HTML
- `sizes` attribute for [`
`](/en-US/docs/Web/HTML/Element/img#sizes), [`
`](/en-US/docs/Web/HTML/Element/link#sizes), and [`
`](/en-US/docs/Web/HTML/Element/source#sizes) for {{HTMLElement("picture")}}
- `media` attribute for [` `](/en-US/docs/Web/HTML/Element/link#media), [``](/en-US/docs/Web/HTML/Element/source#media), and [`