Merge branch 'main' into 36653-accept-encoding

.github/CODEOWNERS

@@ -40,6 +40,10 @@
 # MDN Firefox Release Notes
 /files/en-us/mozilla/firefox @mdn/core-yari-content
 
+# New templates and sidebars
+/files/jsondata/L10n-Template.json @mdn/core-dev
+/files/sidebars @mdn/core-dev
+
 # ============================= CONTROL FILES ============================= #
 # The CODEOWNERS file must end with these matches: Any pull request changing
 # one or more of these files should be escalated to the owners specified here.

.nvmrc

@@ -1 +1 @@
-v18
+v20

.vscode/dictionaries/code-entities.txt

@@ -214,6 +214,7 @@ ehtml
 EISU
 elementname
 elementtiming
+emailtracking
 emcc
 emconfigure
 emmake

.vscode/dictionaries/ignore-list.txt

@@ -54,6 +54,7 @@ bologi
 bookinst
 BOOKINSTANCE
 bookinstances
+Bookmarksgrove
 boooo
 booooed
 borderify
@@ -79,6 +80,7 @@ coegdfgfddffbgning
 Confecta
 consectetuer
 consetetur
+Consonantia
 constructio
 cooluser
 crashextensions
@@ -106,6 +108,7 @@ Donnalidon
 draft-ietf-httpbis
 DSWbdfnrstvw
 dubby
+Duden
 dXNlcm5hbWU6cGFzc3dvcmQ
 eirmod
 elitr
@@ -145,6 +148,7 @@ GNF576746573fhdg4737dh4
 gogerychwyrndrobwllllantysiliogogogoch
 Graece
 gubergren
+harborside
 hellonode
 HEXDIG
 hexdigit
@@ -222,6 +226,7 @@ opensas
 opensesame
 OPQRTUVXYZ
 Owww
+paradisematic
 pdfs
 Pelientesque
 plep
@@ -239,6 +244,7 @@ quaxxor
 quickbrownfox
 quxyz
 rebum
+regelialia
 rheeeeet
 ricebean
 s3pPLMBiTxaQ9kYGzzhZRbK
@@ -269,6 +275,8 @@ todomvc
 tomatillo
 topsecretpassword
 traa
+TURO
+TUROPC
 Tweety
 UCCE
 ultricied
@@ -283,6 +291,7 @@ verticillata
 Vivie
 vobis
 vocant
+Vokalia
 voluptua
 wakame
 wanderview

.vscode/dictionaries/proper-names.txt

@@ -406,6 +406,7 @@ Nyquist
 Nystrom
 OASYS
 octocat
+Oddbird
 Odelola
 Odenwald
 Oeschger
@@ -500,6 +501,7 @@ Shireen
 sideshowbarker
 Silverlight
 Sintel
+Siouxsie
 Siri
 Sitepoint
 Sivonen

files/en-us/_redirects.txt

@@ -7692,6 +7692,7 @@
 /en-US/docs/Web/API/CSSUnitValue/CSSUnitValue()	/en-US/docs/Web/API/CSSUnitValue/CSSUnitValue
 /en-US/docs/Web/API/CSSUnitValue/CSSUnitValue.CSSUnitValue	/en-US/docs/Web/API/CSSUnitValue/CSSUnitValue
 /en-US/docs/Web/API/CSSValueList/CSSValueList.length	/en-US/docs/Web/API/CSSValueList/length
+/en-US/docs/Web/API/CSS_Counter_Styles	/en-US/docs/Web/CSS/CSS_counter_styles
 /en-US/docs/Web/API/CSS_Properties_and_Values_API/_Using_the_CSS_properties_and_values_API	/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide
 /en-US/docs/Web/API/CSS_Typed_Object_Model_API	/en-US/docs/Web/API/CSS_Object_Model#CSS_Typed_Object_Model
 /en-US/docs/Web/API/Cache/Cache.addAll()	/en-US/docs/Web/API/Cache/addAll

files/en-us/_wikihistory.json

@@ -23275,10 +23275,6 @@
     "modified": "2020-10-15T22:15:39.291Z",
     "contributors": ["sideshowbarker", "mfuji09", "jpmedley"]
   },
-  "Web/API/CSS_Counter_Styles": {
-    "modified": "2020-10-15T21:49:22.666Z",
-    "contributors": ["wbamberg", "fscholz", "Sebastianz"]
-  },
   "Web/API/CSS_Font_Loading_API": {
     "modified": "2020-12-13T22:13:07.232Z",
     "contributors": [

files/en-us/glossary/baseline/typography/index.md

@@ -6,11 +6,14 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-The **baseline** is a term used in European and West Asian typography meaning an imaginary line upon which the most characters of a font rest.
+A **baseline** is an imaginary line along the inline axis of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font and the alignment of glyphs from different fonts or font sizes when typesetting.
 
-East Asian scripts have no baseline; each glyph sits in a square box, with neither ascenders nor descenders. When mixed with scripts with a low baseline, East Asian characters should be set so that the bottom of the character is between the baseline and the descender height.
+The **alphabetic baseline** is the value of the CSS `baseline` keyword. The bottom of most alphabetic glyphs typically align with the alphabetic baseline; most characters of European and West Asian fonts rest _on top_ of the alphabetic baseline.
+
+Other writing systems have different baselines. For example, Tibetan and similar unicameral scripts with a strong but not absolute top edge are aligned to the bottom of a "hanging" baseline. East Asian scripts have no baseline; each glyph sits in a square box, with neither ascenders nor descenders. When mixed with scripts with a low baseline, East Asian characters should be set so that the bottom of the character is between the baseline and the descender height.
 
 ## See also
 
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment#types_of_alignment)
+- [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module
 - [Baseline (Typography)](<https://en.wikipedia.org/wiki/Baseline_(typography)>) on Wikipedia

files/en-us/glossary/browsing_context/index.md

@@ -6,11 +6,19 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-A **browsing context** is an environment in which a browser displays a {{domxref("Document")}}. In modern browsers, it usually is a _tab_, but can be a _window_ or even only parts of a page, like a _frame_ or an _iframe_.
+A **browsing context** is an environment in which a browser displays a {{domxref("Document")}}.
+In modern browsers, it usually is a _tab_, but it can be a _window_, a _popup_, a [web application](/en-US/docs/Web/Progressive_web_apps), or even a part of a page such as a _frame_ or an _iframe_.
 
 Each browsing context has an origin (that of the active document) and an ordered history of previously displayed documents.
+Communication and resource sharing between browsing contexts is constrained, in particular between cross-origin contexts.
+For example, a {{domxref("BroadcastChannel")}} can only be opened and used to communicate between same origin-contexts.
 
-Communication between browsing contexts is severely constrained. Between browsing contexts of the same origin, a {{domxref("BroadcastChannel")}} can be opened and used.
+A browsing context may be part of a **browsing context group**, which is a set of **browsing contexts** that share common context like history, cookies, storage mechanisms and so on.
+The browsing contexts within a group retain references to each other and can therefore inspect each other's global objects and post each other messages.
+
+By default a document opened from a browser context group is opened in the same group whether or not it is cross-origin or same-origin.
+The {{httpheader("Cross-Origin-Opener-Policy")}} can be used to control whether the document is instead opened in its own new browsing context group and {{domxref("Window.crossOriginIsolated","cross-origin isolated","","no code")}} from other contexts (in particular cross-origin contexts).
+The can mitigate the risk of cross-origin attacks and the side-channel attacks referred to as [XS-Leaks](https://xsleaks.dev/).
 
 ## See also
 

files/en-us/glossary/color_space/index.md

@@ -40,7 +40,7 @@ The `rgb()` color function is not the only color function that can represent the
 
 - `display-p3` color space
 
-  - : Defined by Apple, the **Display P3** color space combines the DCI-P3 color gamut, the D65 whitepoint, and sRGB gamma curve. It is a wide gamut space typical of current wide-gamut monitors, enabling more vibrant greens and reds than the sRGB color gamut. The `display-p3` is based on `r`, `g`, and `b`, with in-gamut values ranging from `0` to `1`. The whitepoint is D65.
+  - : Defined by Apple, the [**Display P3**](https://www.color.org/chardata/rgb/DisplayP3.xalter), color space combines the DCI-P3 color gamut, the D65 whitepoint, and sRGB gamma curve. It is a wide gamut space typical of current wide-gamut monitors, enabling more vibrant greens and reds than the sRGB color gamut. The `display-p3` is based on `r`, `g`, and `b`, with in-gamut values ranging from `0` to `1`. The whitepoint is D65.
 
 - `a98-rgb` color space
 

files/en-us/glossary/gamut/index.md

@@ -12,7 +12,7 @@ No display or printer can represent the whole range of colors that a human eye c
 
 Traditionally, in web development, the only gamut used was _[sRGB](https://en.wikipedia.org/wiki/SRGB)_ (Standard Red-Green-Blue), where each color is described using three bytes, one for each primary color. However, "wide-color" monitors and professional printers support a wider range of colors, that can't be represented using this gamut.
 
-Since 2021, browsers have started to provide functionality for other gamuts, like _[P3](https://en.wikipedia.org/wiki/DCI-P3)_, widely used in the movie industry, and _[rec2020](https://en.wikipedia.org/wiki/Rec._2020)_.
+Since 2021, browsers have started to provide functionality for other gamuts, like _[Display-P3](/en-US/docs/Glossary/Color_space#display-p3)_, widely used in the movie industry, and _[rec2020](/en-US/docs/Glossary/Color_space#rec2020)_.
 
 Developers can define different sets of colors for devices supporting larger gamuts using the [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). They can describe colors outside the RGB gamut using specific CSS functions like [`lch()`](/en-US/docs/Web/CSS/color_value/lch) for the LCH cylindrical coordinate system, or [`lab()`](/en-US/docs/Web/CSS/color_value/lab) for the Lab coordinate system.
 

files/en-us/learn/accessibility/html/index.md

@@ -511,7 +511,8 @@ Any personal knowledge or extra description shouldn't be included here, as it is
 One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for `alt` attribute (see [Empty alt attributes](#empty_alt_attributes)) or to just include them in the page as CSS background images.
 
 > [!NOTE]
-> Read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) and [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for a lot more information about image implementation and best practices.
+> Read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) and [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for more information about image implementation and best practices.
+> You can also check [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an alt attribute for images in various situations.
 
 If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a `title` attribute, as shown above. In this case, most screen readers will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.
 

files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md

@@ -89,7 +89,7 @@ The _box model_ view visually represents the current element's box model, so you
 
 In some browsers, the JavaScript details of the selected element can also be viewed in this panel. In Safari, these are unified under the _Node_ tab, but are in separate tabs in Chrome, Opera, and Edge.
 
-- _Properties_: The {{Glossary("Property (JavaScript)", "properties")}} of the element object.
+- _Properties_: The {{Glossary("Property/JavaScript", "properties")}} of the element object.
 - _Event Listeners_: The [events](/en-US/docs/Web/API/Event) associated with the element.
 
 ### Find out more