From 60135afae7e48e55957c417f5701a7f6e06b7bac Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Thu, 9 Jan 2025 19:31:12 +0100 Subject: [PATCH 1/4] chore(js): Glossary for JIT compilation (#37569) --- files/en-us/web/javascript/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/index.md b/files/en-us/web/javascript/index.md index c16bb79a030e219..27d4180a6cf2f14 100644 --- a/files/en-us/web/javascript/index.md +++ b/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)). From aeb74a6e798af00abd2c759939adea1029e94473 Mon Sep 17 00:00:00 2001 From: Jacob Cassidy Date: Fri, 10 Jan 2025 03:50:33 +0700 Subject: [PATCH 2/4] Update box model Module to contain the correct properties (#37536) --- files/en-us/web/css/css_box_model/index.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 33da9a05e3d9975..58b089d0432abf7 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -9,7 +9,7 @@ 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. @@ -17,30 +17,23 @@ Each box has a rectangular content area, inside which any text, images, and othe ![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")}} From 2d224eaced39c113bfa6b8d94212570bbba37d6c Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 10 Jan 2025 02:21:38 +0530 Subject: [PATCH 3/4] fix(css): update opacity example from ::placeholder (#37480) * fix(css): update opacity example from ::placeholder * make it a note * Apply suggestions from code review Co-authored-by: Estelle Weyl --------- Co-authored-by: Estelle Weyl --- .../web/css/_doublecolon_placeholder/index.md | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/_doublecolon_placeholder/index.md b/files/en-us/web/css/_doublecolon_placeholder/index.md index ace5ca8d97f121a..6ed455ad0e8df6a 100644 --- a/files/en-us/web/css/_doublecolon_placeholder/index.md +++ b/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 - - + + + ``` #### 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 From 9e7260485703694d47aa360e2db97aae2ea5ae42 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 10 Jan 2025 02:22:10 +0530 Subject: [PATCH 4/4] fix(css): explain CSS aspect ratio comparison (#37509) * fix(css): explain CSS aspect ratio comparison * review comments * show live aspect ratio * update div text * Apply suggestions from code review Co-authored-by: Estelle Weyl * remove from glossary --------- Co-authored-by: Estelle Weyl --- files/en-us/glossary/aspect_ratio/index.md | 2 +- .../web/css/@media/aspect-ratio/index.md | 41 +++++++++++++------ files/en-us/web/css/ratio/index.md | 4 +- 3 files changed, 33 insertions(+), 14 deletions(-) diff --git a/files/en-us/glossary/aspect_ratio/index.md b/files/en-us/glossary/aspect_ratio/index.md index c292b90ccdf8da4..d79062177906315 100644 --- a/files/en-us/glossary/aspect_ratio/index.md +++ b/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. diff --git a/files/en-us/web/css/@media/aspect-ratio/index.md b/files/en-us/web/css/@media/aspect-ratio/index.md index 300ba28d7db7c4e..77a5986b90b1eb6 100644 --- a/files/en-us/web/css/@media/aspect-ratio/index.md +++ b/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 ` ``` ### 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 + ``` ```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) diff --git a/files/en-us/web/css/ratio/index.md b/files/en-us/web/css/ratio/index.md index 5aa4894c51ba7de..bd0ab8aaf7da196 100644 --- a/files/en-us/web/css/ratio/index.md +++ b/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 **``** [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 **``** [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 `` 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 `` data type is a {{cssxref("<number>")}} followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second {{cssxref("<number>")}}. 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("<number>")}} 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 |