Merge branch 'main' into patch-1

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

@@ -6,7 +6,7 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-An **aspect ratio** is the proportional relationship between an element or {{glossary("viewport")}}'s width and height, and is represented as a ratio or two numbers.
+An **aspect ratio** is the proportional relationship between an element or {{glossary("viewport")}}'s width and height. It is represented as a {{cssxref("ratio")}} of two numbers.
 
 Having an aspect ratio, whether it's an inherent aspect ratio like with images and videos or if it's extrinsically set, maintains the intended proportions of an element. You can also query an element or viewport's aspect, which is useful in developing flexible components and layouts.
 

files/en-us/web/css/@media/aspect-ratio/index.md

@@ -15,39 +15,43 @@ The `aspect-ratio` feature is specified as a {{cssxref("<ratio>")}} value
 
 ## Examples
 
-The example below is contained in an {{htmlElement("iframe")}}, which creates its own viewport. Resize the `<iframe>` to see `aspect-ratio` in action.
+In the example below, a {{HTMLElement("div")}} element is contained in an {{HTMLElement("iframe")}}. The iframe creates its own viewport. Resize the `<iframe>` to see `aspect-ratio` in action.
 
 Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the `<div>` inside the `<iframe>`. See if you can find which width and height values trigger this!
 
 ### HTML
 
 ```html
-<div id="inner">
-  Watch this element as you resize your viewport's width and height.
-</div>
+<iframe id="outer">
+  <div id="inner">
+    Watch this element as you resize iframe viewport's width and height.
+  </div>
+</iframe>
 ```
 
 ### CSS
 
 ```css
-/* Minimum aspect ratio */
+/* Minimum allowed aspect ratio */
+/* Select aspect ratios 8/5 = 1.6 and above */
 @media (min-aspect-ratio: 8/5) {
   div {
-    background: #9af; /* blue */
+    background: #99f; /* blue */
   }
 }
 
-/* Maximum aspect ratio */
+/* Maximum allowed aspect ratio */
+/* Select aspect ratios 3/2 = 1.5 and below */
 @media (max-aspect-ratio: 3/2) {
   div {
-    background: #9ff; /* cyan */
+    background: #9f9; /* green */
   }
 }
 
-/* Exact aspect ratio, put it at the bottom to avoid override*/
+/* Exact aspect ratio, put it at the bottom to avoid override */
 @media (aspect-ratio: 1/1) {
   div {
-    background: #f9a; /* red */
+    background: #f99; /* red */
   }
 }
 ```
@@ -59,34 +63,47 @@ Note that, when none of the media query conditions are true, the background will
 <input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
 <label id="hf" for="w">height:165</label>
 <input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />
+<label id="ratio">aspect-ratio: 165/165 = 1</label>
 
 <iframe
   id="outer"
-  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9af; } } @media (max-aspect-ratio: 3/2) { div { background: #9ff; } } @media (aspect-ratio: 1/1) { div { background: #f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
+  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #99f; } } @media (max-aspect-ratio: 3/2) { div { background: #9f9; } } @media (aspect-ratio: 1/1) { div { background: #f99; } }</style><div id='inner'> Watch this element as you resize iframe viewport's width and height.</div>">
 </iframe>
 ```
 
 ```css hidden
 iframe {
   display: block;
+  border: 1px dashed black;
 }
 ```
 
 ```js hidden
 outer.style.width = outer.style.height = "165px";
 
+const updateRatio = () => {
+  ratio.textContent = `aspect-ratio: ${w.value}/${h.value} = ${(w.value / h.value).toFixed(2)}`;
+};
+
 w.onchange = w.oninput = () => {
   outer.style.width = `${w.value}px`;
   wf.textContent = `width: ${w.value}`;
+  updateRatio();
 };
+
 h.onchange = h.oninput = () => {
   outer.style.height = `${h.value}px`;
   hf.textContent = `height: ${h.value}`;
+  updateRatio();
 };
 ```
 
 {{ EmbedLiveSample('Result', '300px', '350px') }}
 
+Note the `min-aspect-ratio: 8/5` sets the _lower_ bound to 1.6, so this media query selects elements with aspect ratios 1.6 and above. The `max-aspect-ratio: 3/2` sets the _upper_ bound, so this media query selects elements with aspect ratios 1.5 and below. The `aspect-ratio: 1/1` overrides the max aspect ratio rule because it has been declared after and selects elements with aspect ratios exactly `1`.
+
+From the initial state, as you reduce height, the aspect ratio starts increasing from one. So the div's background color goes from red(1) < green(1.5) < white < blue(1.6).
+
 ## Specifications
 
 {{Specifications}}
@@ -97,6 +114,6 @@ h.onchange = h.oninput = () => {
 
 ## See also
 
+- [Understanding `aspect-ratio`](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)
 - [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 - [@media](/en-US/docs/Web/CSS/@media)
-- [Understanding `aspect-ratio`](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)

files/en-us/web/css/_doublecolon_placeholder/index.md

@@ -89,6 +89,7 @@ input::placeholder {
   color: red;
   font-size: 1.2em;
   font-style: italic;
+  opacity: 0.5;
 }
 ```
 
@@ -98,30 +99,41 @@ input::placeholder {
 
 ### Opaque text
 
-Some browsers (such as Firefox) set the default {{cssxref("opacity")}} of placeholders to something less than 100%. If you want fully opaque placeholder text, set `opacity` to `1`.
+Some browsers make placeholder text less opaque. If you want fully opaque text, then set the {{CSSXref("color")}} property value explicitly. The [`currentColor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) value can be used to have the same color as the corresponding input element.
 
 #### HTML
 
 ```html
-<input placeholder="Default opacity" />
-<input placeholder="Full opacity" class="force-opaque" />
+<input placeholder="Color set by browser" />
+<input placeholder="Same color as input" class="explicit-color" />
+<input placeholder="Semi-opaque text color" class="opacity-change" />
 ```
 
 #### CSS
 
 ```css
-::placeholder {
+input {
+  font-weight: bold;
   color: green;
 }
 
-.force-opaque::placeholder {
-  opacity: 1;
+.explicit-color::placeholder {
+  /* use the same color as input element to avoid the browser set default color */
+  color: currentColor;
+}
+
+.opacity-change::placeholder {
+  /* less opaque text */
+  color: color-mix(in srgb, currentColor 70%, transparent);
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample("Opaque_text", 200, 60)}}
+{{EmbedLiveSample("default_color", 200, 60)}}
+
+> [!NOTE]
+> Note that browsers use different default colors for placeholder text. For example, Firefox uses the input element's color with 54% opacity, and Chrome uses `darkgray` color. If you want consistent placeholder text color across the browsers, then set the `color` explicitly.
 
 ## Specifications
 

files/en-us/web/css/css_box_model/index.md

@@ -9,38 +9,31 @@ spec-urls:
 
 {{CSSRef}}
 
-The **CSS box model** module defines the `height`, `width`, `margin`, and `padding` properties, which along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model).
+The **CSS box model** module defines the `margin` and `padding` properties, which along with the [height](/en-US/docs/Web/CSS/CSS_box_sizing), [width](/en-US/docs/Web/CSS/CSS_box_sizing) and [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model).
 
 Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define their size, position, and stacking level, with the box model properties (and others) defining the extrinsic size of each box, and the space around them.
 
 Each box has a rectangular content area, inside which any text, images, and other content is displayed. The content may be surrounded by padding, a border, and a margin, on one or more sides. The padding is around the content, the border is around the padding, and the margin sits outside the border. The box model describes how these features — the content, padding, border, and margin — work together to create a box as displayed by CSS.
 
 ![The components of the CSS box model](boxmodel.png)
 
-The CSS box model module defines physical (or "page relative") properties such as `width` and `margin-top`. Flow-relative properties such as `inline-size` and `margin-block-start` (which relate to text direction) are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces the {{glossary("intrinsic size")}} value and enables defining {{glossary("aspect ratio")}}s for elements that are auto-sized in at least one dimension.
+The CSS box model module defines physical (or "page relative") properties such as `margin-top` and `padding-top`. Flow-relative properties such as `margin-block-start` and `margin-inline-start` (which relate to text direction) are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces the {{glossary("intrinsic size")}} value and enables defining {{glossary("aspect ratio")}} for elements that are auto-sized in at least one dimension.
 
 ## Reference
 
 ### Properties
 
-- {{cssxref("box-sizing")}}
-- {{cssxref("height")}}
-- {{cssxref("margin")}}
+- {{cssxref("margin")}} shorthand
 - {{cssxref("margin-bottom")}}
 - {{cssxref("margin-left")}}
 - {{cssxref("margin-right")}}
 - {{cssxref("margin-top")}}
 - {{cssxref("margin-trim")}}
-- {{cssxref("max-height")}}
-- {{cssxref("max-width")}}
-- {{cssxref("min-height")}}
-- {{cssxref("min-width")}}
-- {{cssxref("padding")}}
+- {{cssxref("padding")}} shorthand
 - {{cssxref("padding-bottom")}}
 - {{cssxref("padding-left")}}
 - {{cssxref("padding-right")}}
 - {{cssxref("padding-top")}}
-- {{cssxref("width")}}
 
 ### Data types
 
@@ -107,15 +100,18 @@ The CSS box model module defines physical (or "page relative") properties such a
   - {{CSSxRef("border-inline-width")}}
 - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module
   - {{cssxref("aspect-ratio")}}
+  - {{cssxref("box-sizing")}}
   - {{cssxref("contain-intrinsic-block-size")}}
   - {{cssxref("contain-intrinsic-height")}}
   - {{cssxref("contain-intrinsic-inline-size")}}
   - {{cssxref("contain-intrinsic-size")}}
   - {{cssxref("contain-intrinsic-width")}}
+  - {{cssxref("height")}}
   - {{cssxref("max-height")}}
   - {{cssxref("max-width")}}
   - {{cssxref("min-height")}}
   - {{cssxref("min-width")}}
+  - {{cssxref("width")}}
 - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module
   - {{CSSxRef("overflow")}} shorthand
   - {{CSSxRef("overflow-block")}}

files/en-us/web/css/ratio/index.md

@@ -8,12 +8,14 @@ spec-urls: https://drafts.csswg.org/css-values-4/#ratio-value
 
 {{CSSRef}}
 
-The **`<ratio>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the proportional relationship between a width and height. It is used as a value for the `aspect-ratio` media feature in {{cssxref("@media")}} media queries, the `aspect-ratio` size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property.
+The **`<ratio>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the `<ratio>` is used as a value for the `aspect-ratio` media feature in {{cssxref("@media")}} media queries, the `aspect-ratio` size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property.
 
 ## Syntax
 
 The `<ratio>` data type is a {{cssxref("&lt;number&gt;")}} followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second {{cssxref("&lt;number&gt;")}}. Both numbers must be positive. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height. In addition a single {{cssxref("&lt;number&gt;")}} as a value is allowable.
 
+Two ratios are compared using the quotients' numeric values. For example, 16/16 is less than 16/9 because it resolves to 1 while the second resolves to 1.7. This means a tall screen's aspect ratio is smaller than a wide screen's, and portrait images have smaller aspect ratios than landscape images.
+
 ### Common aspect ratios
 
 | Ratio                 |                                                                              | Usage                                           |

files/en-us/web/javascript/index.md

@@ -6,7 +6,7 @@ page-type: landing-page
 
 {{jsSidebar}}
 
-**JavaScript** (**JS**) is a lightweight interpreted (or [just-in-time](https://en.wikipedia.org/wiki/Just-in-time_compilation) compiled) programming language with {{Glossary("First-class Function", "first-class functions")}}. While it is most well-known as the scripting language for Web pages, [many non-browser environments](https://en.wikipedia.org/wiki/JavaScript#Other_usage) also use it, such as {{Glossary("Node.js")}}, [Apache CouchDB](https://couchdb.apache.org/) and [Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/). JavaScript is a [prototype-based](/en-US/docs/Glossary/Prototype-based_programming), multi-paradigm, [single-threaded](/en-US/docs/Glossary/Thread), [dynamic](/en-US/docs/Glossary/Dynamic_typing) language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
+**JavaScript** (**JS**) is a lightweight interpreted (or {{Glossary("Just_In_Time_Compilation", "just-in-time compiled")}}) programming language with {{Glossary("First-class Function", "first-class functions")}}. While it is most well-known as the scripting language for Web pages, [many non-browser environments](https://en.wikipedia.org/wiki/JavaScript#Other_usage) also use it, such as {{Glossary("Node.js")}}, [Apache CouchDB](https://couchdb.apache.org/) and [Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/). JavaScript is a [prototype-based](/en-US/docs/Glossary/Prototype-based_programming), multi-paradigm, [single-threaded](/en-US/docs/Glossary/Thread), [dynamic](/en-US/docs/Glossary/Dynamic_typing) language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
 
 JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via [`eval`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)), object introspection (via [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) and [`Object` utilities](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#static_methods)), and source-code recovery (JavaScript functions store their source text and can be retrieved through [`toString()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString)).