From 3b39e41fb9393a13b16aaf58ba25174a62205041 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 17 Jan 2024 20:49:19 +0800 Subject: [PATCH 001/113] Move Web/API/Houdini to Web/API/Houdini_APIs | fix the reference bug (#31677) * move files * fix api summary title * fix redirects * fix broken link * Apply suggestions from code review Co-authored-by: Chris Mills --------- Co-authored-by: Chris Mills --- files/en-us/_redirects.txt | 5 +++-- files/en-us/_wikihistory.json | 2 +- files/en-us/glossary/houdini/index.md | 2 +- files/en-us/web/api/css/paintworklet_static/index.md | 2 +- files/en-us/web/api/css_object_model/index.md | 2 +- files/en-us/web/api/css_painting_api/index.md | 4 ++-- .../web/api/css_properties_and_values_api/guide/index.md | 2 +- files/en-us/web/api/css_properties_and_values_api/index.md | 4 ++-- files/en-us/web/api/css_typed_om_api/index.md | 2 +- files/en-us/web/api/{houdini => houdini_apis}/index.md | 4 ++-- .../api/paintworkletglobalscope/devicepixelratio/index.md | 2 +- files/en-us/web/api/paintworkletglobalscope/index.md | 2 +- .../web/api/paintworkletglobalscope/registerpaint/index.md | 2 +- files/en-us/web/css/@property/index.md | 4 ++-- files/en-us/web/css/@property/inherits/index.md | 2 +- files/en-us/web/css/@property/initial-value/index.md | 2 +- files/en-us/web/css/@property/syntax/index.md | 2 +- files/en-us/web/css/css_properties_and_values_api/index.md | 2 +- 18 files changed, 24 insertions(+), 23 deletions(-) rename files/en-us/web/api/{houdini => houdini_apis}/index.md (99%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 8d5e3bf1fad3185..0a79542b5b1b436 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8611,6 +8611,7 @@ /en-US/docs/Web/API/Headers/getAll /en-US/docs/Web/API/Headers/get /en-US/docs/Web/API/History.length /en-US/docs/Web/API/History/length /en-US/docs/Web/API/History_API/Example /en-US/docs/Web/API/History_API/Working_with_the_History_API +/en-US/docs/Web/API/Houdini /en-US/docs/Web/API/Houdini_APIs /en-US/docs/Web/API/IDBCursor.advance /en-US/docs/Web/API/IDBCursor/advance /en-US/docs/Web/API/IDBCursor.continue /en-US/docs/Web/API/IDBCursor/continue /en-US/docs/Web/API/IDBCursor.delete /en-US/docs/Web/API/IDBCursor/delete @@ -12156,7 +12157,7 @@ /en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /en-US/docs/Web/HTML/Element/Heading_Elements /en-US/docs/Web/Guide/HTML/Using_data_attributes /en-US/docs/Learn/HTML/Howto/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 +/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/Introduction_to_Web_development /en-US/docs/Learn /en-US/docs/Web/Guide/Mobile /en-US/docs/Learn/CSS/CSS_layout/Responsive_Design @@ -12336,7 +12337,7 @@ /en-US/docs/Web/HTTP/X-Frame-Options /en-US/docs/Web/HTTP/Headers/X-Frame-Options /en-US/docs/Web/HTTP/data_URIs /en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs /en-US/docs/Web/HTTP/www_and_non-www_URLs /en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs -/en-US/docs/Web/Houdini /en-US/docs/Web/API/Houdini +/en-US/docs/Web/Houdini /en-US/docs/Web/API/Houdini_APIs /en-US/docs/Web/Houdini/CSS_Painting_API /en-US/docs/Web/API/CSS_Painting_API/Guide /en-US/docs/Web/Houdini/CSS_Typed_OM /en-US/docs/Web/API/CSS_Typed_OM_API /en-US/docs/Web/Houdini/Learn/CSS_Painting_API /en-US/docs/Web/API/CSS_Painting_API/Guide diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 6539125f5784c6f..4b583f788b7fc0d 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -42340,7 +42340,7 @@ "modified": "2019-03-18T20:56:26.488Z", "contributors": ["wbamberg", "chrisdavidmills", "rugk"] }, - "Web/API/Houdini": { + "Web/API/Houdini_APIs": { "modified": "2020-07-16T03:51:08.991Z", "contributors": [ "Wind1808", diff --git a/files/en-us/glossary/houdini/index.md b/files/en-us/glossary/houdini/index.md index 73de2c60770de53..d1f9db5c290f1a4 100644 --- a/files/en-us/glossary/houdini/index.md +++ b/files/en-us/glossary/houdini/index.md @@ -14,7 +14,7 @@ While many of the features Houdini enables can be created with JavaScript, inter ## See also -- [Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) - [CSSOM](/en-US/docs/Web/API/CSS_Object_Model) - [CSS Paint API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed OM](/en-US/docs/Web/API/CSS_Typed_OM_API) diff --git a/files/en-us/web/api/css/paintworklet_static/index.md b/files/en-us/web/api/css/paintworklet_static/index.md index 7b6be4f40046130..b8f64ebd175c001 100644 --- a/files/en-us/web/api/css/paintworklet_static/index.md +++ b/files/en-us/web/api/css/paintworklet_static/index.md @@ -40,4 +40,4 @@ if ("paintWorklet" in CSS) { ## See also - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) -- [Houdini APIs](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/api/css_object_model/index.md b/files/en-us/web/api/css_object_model/index.md index c7a9ff7781aba4d..ed6fff98f999481 100644 --- a/files/en-us/web/api/css_object_model/index.md +++ b/files/en-us/web/api/css_object_model/index.md @@ -108,4 +108,4 @@ All these features have been added little by little over the years to the differ ## See also - [Document Object Model (DOM)](/en-US/docs/Web/API/Document_Object_Model) -- [Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/api/css_painting_api/index.md b/files/en-us/web/api/css_painting_api/index.md index ce08b2a7a423968..b75e7c3ea83e92b 100644 --- a/files/en-us/web/api/css_painting_api/index.md +++ b/files/en-us/web/api/css_painting_api/index.md @@ -9,7 +9,7 @@ browser-compat: api.PaintWorkletGlobalScope {{DefaultAPISidebar("CSS Painting API")}}{{SeeCompatTable}} -The CSS Painting API — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini) umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content. +The CSS Painting API — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content. ## Concepts and usage @@ -157,4 +157,4 @@ While you can't play with the worklet's script, you can alter the custom propert - [Using the CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API/Guide) - [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Typed_OM_API) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/api/css_properties_and_values_api/guide/index.md b/files/en-us/web/api/css_properties_and_values_api/guide/index.md index b9a638ef3e005f3..678e062159a8161 100644 --- a/files/en-us/web/api/css_properties_and_values_api/guide/index.md +++ b/files/en-us/web/api/css_properties_and_values_api/guide/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSS.registerProperty_static {{DefaultAPISidebar("CSS Properties and Values API")}} -The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini) umbrella of APIs — allows the registration of {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value. +The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows the registration of {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value. ## Registering a custom property diff --git a/files/en-us/web/api/css_properties_and_values_api/index.md b/files/en-us/web/api/css_properties_and_values_api/index.md index a2101291a6f1e27..49bcf838a66e674 100644 --- a/files/en-us/web/api/css_properties_and_values_api/index.md +++ b/files/en-us/web/api/css_properties_and_values_api/index.md @@ -9,7 +9,7 @@ browser-compat: {{DefaultAPISidebar("CSS Properties and Values API")}} -The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini) umbrella of APIs — allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value. +The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value. ## Interfaces @@ -54,4 +54,4 @@ The same registration can take place in [CSS](/en-US/docs/Web/CSS) using the {{c - [Using the CSS properties and values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide) - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/api/css_typed_om_api/index.md b/files/en-us/web/api/css_typed_om_api/index.md index ee84bff5bd09ebc..28b6b88ed8d7fbb 100644 --- a/files/en-us/web/api/css_typed_om_api/index.md +++ b/files/en-us/web/api/css_typed_om_api/index.md @@ -119,4 +119,4 @@ CSSStyleValue is the base class through which all CSS values are expressed. Subc - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [Using the CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API/Guide) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/api/houdini/index.md b/files/en-us/web/api/houdini_apis/index.md similarity index 99% rename from files/en-us/web/api/houdini/index.md rename to files/en-us/web/api/houdini_apis/index.md index 299d2103e7f6b7c..c5697f71d4e08d5 100644 --- a/files/en-us/web/api/houdini/index.md +++ b/files/en-us/web/api/houdini_apis/index.md @@ -1,6 +1,6 @@ --- -title: Houdini -slug: Web/API/Houdini +title: Houdini APIs +slug: Web/API/Houdini_APIs page-type: guide --- diff --git a/files/en-us/web/api/paintworkletglobalscope/devicepixelratio/index.md b/files/en-us/web/api/paintworkletglobalscope/devicepixelratio/index.md index 45942cdd8a9f1b8..df838646521f9aa 100644 --- a/files/en-us/web/api/paintworkletglobalscope/devicepixelratio/index.md +++ b/files/en-us/web/api/paintworkletglobalscope/devicepixelratio/index.md @@ -29,5 +29,5 @@ A double-precision integer. - [CSS.paintWorklet](/en-US/docs/Web/API/CSS/paintWorklet_static) - [Worklet](/en-US/docs/Web/API/Worklet) - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) -- [Houdini APIs](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) - [window.devicePixelRatio](/en-US/docs/Web/API/Window/devicePixelRatio) diff --git a/files/en-us/web/api/paintworkletglobalscope/index.md b/files/en-us/web/api/paintworkletglobalscope/index.md index c41235717fe5d36..1cb820fa7923ecc 100644 --- a/files/en-us/web/api/paintworkletglobalscope/index.md +++ b/files/en-us/web/api/paintworkletglobalscope/index.md @@ -110,4 +110,4 @@ You can also use the {{cssxref('@supports')}} at-rule. ## See also - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) -- [Houdini APIs](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/api/paintworkletglobalscope/registerpaint/index.md b/files/en-us/web/api/paintworkletglobalscope/registerpaint/index.md index 6da2e5181b02581..c8778788a67aff0 100644 --- a/files/en-us/web/api/paintworkletglobalscope/registerpaint/index.md +++ b/files/en-us/web/api/paintworkletglobalscope/registerpaint/index.md @@ -100,4 +100,4 @@ li { ## See also - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) -- [Houdini APIs](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md index 55af414736f9f60..2d892887a402fbd 100644 --- a/files/en-us/web/css/@property/index.md +++ b/files/en-us/web/css/@property/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.property {{CSSRef}} -The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini) umbrella of APIs. It allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not. +The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs. It allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not. The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if {{domxref('CSS.registerProperty_static', 'registerProperty()')}} had been called with equivalent parameters. @@ -136,6 +136,6 @@ For item three, the `--item-size` value gets set to `1000px`. While `1000px` is - [CSS Properties and Values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API) - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) - [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/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/@property/inherits/index.md b/files/en-us/web/css/@property/inherits/index.md index 0fbd8a73026b46b..34838c249e7e147 100644 --- a/files/en-us/web/css/@property/inherits/index.md +++ b/files/en-us/web/css/@property/inherits/index.md @@ -78,4 +78,4 @@ window.CSS.registerProperty({ - [CSS Properties and Values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API) - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/css/@property/initial-value/index.md b/files/en-us/web/css/@property/initial-value/index.md index ed41fff4ce6935f..c889c9fdf4ed2fd 100644 --- a/files/en-us/web/css/@property/initial-value/index.md +++ b/files/en-us/web/css/@property/initial-value/index.md @@ -77,4 +77,4 @@ window.CSS.registerProperty({ - [CSS Properties and Values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API) - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/css/@property/syntax/index.md b/files/en-us/web/css/@property/syntax/index.md index 9b9c4006feb7c11..111aa7cace078e3 100644 --- a/files/en-us/web/css/@property/syntax/index.md +++ b/files/en-us/web/css/@property/syntax/index.md @@ -102,4 +102,4 @@ window.CSS.registerProperty({ - [CSS Properties and Values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API) - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API) -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) diff --git a/files/en-us/web/css/css_properties_and_values_api/index.md b/files/en-us/web/css/css_properties_and_values_api/index.md index d0c0e626553b82f..fdbdbb06a513d94 100644 --- a/files/en-us/web/css/css_properties_and_values_api/index.md +++ b/files/en-us/web/css/css_properties_and_values_api/index.md @@ -84,7 +84,7 @@ The value of `--stop-color` is set to `cornflowerblue` at first, but when you ho - : Explains how to register custom properties in CSS and JavaScript, with hints on handling undefined and invalid values, fallbacks, and inheritance. -- [CSS Houdini](/en-US/docs/Web/API/Houdini) +- [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) - : Explains what CSS Houdini is and its advantages, along with a list of available APIs and their statuses. ## Related concepts From 8f12033ede9a4b4a2e3d477ec8582ef94c500b17 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 17 Jan 2024 14:21:16 +0000 Subject: [PATCH 002/113] Bump prettier from 3.2.2 to 3.2.4 (#31761) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 3aa0b0c67722fee..ed620e2e478223f 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "lint-staged": "15.2.0", "markdownlint-cli2": "0.12.1", "markdownlint-rule-search-replace": "1.2.0", - "prettier": "3.2.2" + "prettier": "3.2.4" }, "devDependencies": { "jest": "^29.7.0" diff --git a/yarn.lock b/yarn.lock index 0f2aed77a9bf86f..b5bb6291b63ad05 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6249,10 +6249,10 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA== -prettier@3.2.2: - version "3.2.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.2.tgz#96e580f7ca9c96090ad054616c0c4597e2844b65" - integrity sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A== +prettier@3.2.4: + version "3.2.4" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.4.tgz#4723cadeac2ce7c9227de758e5ff9b14e075f283" + integrity sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ== pretty-format@^29.7.0: version "29.7.0" From 57970dc6d2221079f08b71a36df1a9f0305da4ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Fatih=20Y=C4=B1ld=C4=B1r=C4=B1m?= Date: Wed, 17 Jan 2024 19:15:48 +0300 Subject: [PATCH 003/113] Fix reference to another page (#31763) The item talks about formatting the date but the reference is related to formatting the time part. --- .../reference/global_objects/date/todatestring/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/global_objects/date/todatestring/index.md b/files/en-us/web/javascript/reference/global_objects/date/todatestring/index.md index 3069a136101bc95..ebb0b53c31c0315 100644 --- a/files/en-us/web/javascript/reference/global_objects/date/todatestring/index.md +++ b/files/en-us/web/javascript/reference/global_objects/date/todatestring/index.md @@ -39,7 +39,7 @@ For example: "Thu Jan 01 1970". - If you only want to get the _time_ part, use {{jsxref("Date/toTimeString", "toTimeString()")}}. - If you want to get both the date and time, use {{jsxref("Date/toString", "toString()")}}. - If you want to make the date interpreted as UTC instead of local timezone, use {{jsxref("Date/toUTCString", "toUTCString()")}}. -- If you want to format the date in a more user-friendly format (e.g. localization), use {{jsxref("Date/toLocaleTimeString", "toLocaleTimeString()")}}. +- If you want to format the date in a more user-friendly format (e.g. localization), use {{jsxref("Date/toLocaleDateString", "toLocaleDateString()")}}. ## Examples From 5bc94b37f9a65396a9c673f1de082ca5ef98e196 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Wed, 17 Jan 2024 20:37:26 +0100 Subject: [PATCH 004/113] feat(svg): Add usage note on deprecation of data URIs in use href attr (#31684) * feat(svg): Add usage note on deprecation of data URIs in use href attr * relnote(122): Improve language based on reviewer feedback, link to usage notes * Update files/en-us/web/svg/element/use/index.md Co-authored-by: Dipika Bhattacharya --------- Co-authored-by: Dipika Bhattacharya --- files/en-us/web/svg/element/use/index.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/svg/element/use/index.md b/files/en-us/web/svg/element/use/index.md index cd6ce905ccb4767..855e008bf886abf 100644 --- a/files/en-us/web/svg/element/use/index.md +++ b/files/en-us/web/svg/element/use/index.md @@ -36,7 +36,7 @@ svg { ## Attributes - {{SVGAttr("href")}} - - : The URL to an element/fragment that needs to be duplicated.
_Value type_: [**``**](/en-US/docs/Web/SVG/Content_type#url) ; _Default value_: none; _Animatable_: **yes** + - : The URL to an element/fragment that needs to be duplicated. See [Usage notes](#usage_notes) for details on common pitfalls.
_Value type_: [**``**](/en-US/docs/Web/SVG/Content_type#url) ; _Default value_: none; _Animatable_: **yes** - {{SVGAttr("xlink:href")}} {{Deprecated_Inline}} - : An [``](/en-US/docs/Web/SVG/Content_type#iri) reference to an element/fragment that needs to be duplicated. If both {{SVGAttr("href")}} and {{SVGAttr("xlink:href")}} are present, the value given by {{SVGAttr("href")}} is used.
_Value type_: [**``**](/en-US/docs/Web/SVG/Content_type#iri) ; _Default value_: none; _Animatable_: **yes** - {{SVGAttr("x")}} @@ -78,9 +78,13 @@ Since the cloned nodes are not exposed, care must be taken when using [CSS](/en- For security reasons, browsers may apply the [same-origin policy](/en-US/docs/Web/Security/Same-origin_policy) on `use` elements and may refuse to load a cross-origin URL in the {{SVGAttr("href")}} attribute. There is currently no defined way to set a cross-origin policy for `use` elements. +> **Warning:** Loading resources with data URIs in the `href` attribute is deprecated for security reasons. +> This applies to ` **Warning:** Since SVG 2, the {{SVGAttr("xlink:href")}} attribute is deprecated in favor of {{SVGAttr("href")}}. See {{SVGAttr("xlink:href")}} page for more information. -{{svginfo}} +{{SVGInfo}} ## Specifications From 01947c79eccd23f1f4ab1217760edf1014f0958e Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Wed, 17 Jan 2024 20:51:02 -0500 Subject: [PATCH 005/113] fix(docs): add selecteditem keywords to system-color list (#31751) * fix(docs): add selecteditem keywords to system-color list Adds two missing system colors from the CSS Color Module Level 4 specification: SelectedItem and SelectedItemText. The description is directly from the specification. * Update files/en-us/web/css/system-color/index.md --------- Co-authored-by: Estelle Weyl --- files/en-us/web/css/system-color/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/files/en-us/web/css/system-color/index.md b/files/en-us/web/css/system-color/index.md index 6f32e7757a072cb..8f8834dcc350c85 100644 --- a/files/en-us/web/css/system-color/index.md +++ b/files/en-us/web/css/system-color/index.md @@ -53,6 +53,10 @@ Note that these keywords are _case insensitive_, but are listed here with mixed - : Background of text that has been specially marked (such as by the HTML `mark` element) - `MarkText` - : Text that has been specially marked (such as by the HTML `mark` element) +- `SelectedItem` + - : Background of selected items, for example, a selected checkbox +- `SelectedItemText` + - : Text of selected items - `VisitedText` - : Text of visited links From 328b6b07216cd7588dd63272a5005f709b8d501a Mon Sep 17 00:00:00 2001 From: George Raptis Date: Thu, 18 Jan 2024 03:52:06 +0200 Subject: [PATCH 006/113] Replace 'attribute' with 'property' for 'indeterminate' (#31737) * Replace 'attribute' with 'property' to reflect 'indeterminate' is a JavaScript property - Replace 'attribute' with 'property' to accurately reflect that `indeterminate` is a JavaScript property (IDL attribute) of the element, not an HTML attribute. - Fix a broken link in the "See also" section. * Apply suggestion - Clarification on how indeterminate state is set on an element. - Explanation on what indeterminate means for progress element. Co-authored-by: Estelle Weyl --------- Co-authored-by: Estelle Weyl --- files/en-us/web/css/_colon_indeterminate/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/_colon_indeterminate/index.md b/files/en-us/web/css/_colon_indeterminate/index.md index 92eb8c17952d6af..3e4cf35810e756a 100644 --- a/files/en-us/web/css/_colon_indeterminate/index.md +++ b/files/en-us/web/css/_colon_indeterminate/index.md @@ -7,7 +7,7 @@ browser-compat: css.selectors.indeterminate {{CSSRef}} -The **`:indeterminate`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any form element whose state is indeterminate, such as checkboxes which have their HTML [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) attribute set to `true`, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate {{HTMLElement("progress")}} elements. +The **`:indeterminate`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any form element whose state is indeterminate, such as checkboxes that have been set to an [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and {{HTMLElement("progress")}} elements with no `value` attribute. ```css /* Selects any whose state is indeterminate */ @@ -131,6 +131,6 @@ progress:indeterminate { - [Web forms — Working with user data](/en-US/docs/Learn/Forms) - [Styling web forms](/en-US/docs/Learn/Forms/Styling_web_forms) -- The [``](/en-US/docs/Web/HTML/Element/input/checkbox) element's [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxe) attribute +- The [``](/en-US/docs/Web/HTML/Element/input/checkbox) element's [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) property - {{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it. - The {{cssxref(":checked")}} CSS selector lets you style checkboxes based on whether they're checked or not From 41495e1d370abfc1b59e31459e52c60bd82feb41 Mon Sep 17 00:00:00 2001 From: Tom Wolf Date: Thu, 18 Jan 2024 01:33:47 -0600 Subject: [PATCH 007/113] Added missing full stop in HTTP Messages guide (#31771) Added missing full stop --- files/en-us/web/http/messages/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/messages/index.md b/files/en-us/web/http/messages/index.md index 37a89abc9c0bc6f..bd7e4733faa7057 100644 --- a/files/en-us/web/http/messages/index.md +++ b/files/en-us/web/http/messages/index.md @@ -78,7 +78,7 @@ Bodies can be broadly divided into two categories: The start line of an HTTP response, called the _status line_, contains the following information: 1. The _protocol version_, usually `HTTP/1.1`. -2. A _status code_, indicating success or failure of the request. Common status codes are {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, or {{HTTPStatus("302")}} +2. A _status code_, indicating success or failure of the request. Common status codes are {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, or {{HTTPStatus("302")}}. 3. A _status text_. A brief, purely informational, textual description of the status code to help a human understand the HTTP message. A typical status line looks like: `HTTP/1.1 404 Not Found`. From 46a16cc28c5da14b45a6f65e478d032532764122 Mon Sep 17 00:00:00 2001 From: Tom Wolf Date: Thu, 18 Jan 2024 01:38:41 -0600 Subject: [PATCH 008/113] Unpluralize "servers" when referring to a class of response codes (#31772) --- files/en-us/web/http/session/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/session/index.md b/files/en-us/web/http/session/index.md index 08e2bf823df7822..6ef074a3aa0a97f 100644 --- a/files/en-us/web/http/session/index.md +++ b/files/en-us/web/http/session/index.md @@ -147,7 +147,7 @@ X-Cache: Error from cloudfront ### Response status codes -[HTTP response status codes](/en-US/docs/Web/HTTP/Status) indicate if a specific HTTP request has been successfully completed. Responses are grouped into five classes: informational responses, successful responses, redirects, client errors, and servers errors. +[HTTP response status codes](/en-US/docs/Web/HTTP/Status) indicate if a specific HTTP request has been successfully completed. Responses are grouped into five classes: informational responses, successful responses, redirects, client errors, and server errors. - {{HTTPStatus(200)}}: OK. The request has succeeded. - {{HTTPStatus(301)}}: Moved Permanently. This response code means that the URI of requested resource has been changed. From 55e17a00141f989da36f481737fa6011b686500f Mon Sep 17 00:00:00 2001 From: c0lt <9382537+c0lt@users.noreply.github.com> Date: Thu, 18 Jan 2024 08:41:46 +0100 Subject: [PATCH 009/113] Remove redundant word in SVG Attribute Reference: fill (#31766) Update index.md removed redundant word --- files/en-us/web/svg/attribute/fill/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/attribute/fill/index.md b/files/en-us/web/svg/attribute/fill/index.md index 08e6c393a585550..38d370c20652f41 100644 --- a/files/en-us/web/svg/attribute/fill/index.md +++ b/files/en-us/web/svg/attribute/fill/index.md @@ -335,7 +335,7 @@ For {{SVGElement('set')}}, `fill` defines the final state of the animation. ## text -For {{SVGElement('text')}}, `fill` is a presentation attribute that defines what the color of the text. +For {{SVGElement('text')}}, `fill` is a presentation attribute that defines the color of the text. From e073b48b4ba97b3afa7b583624d686811491bd91 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Thu, 18 Jan 2024 13:21:05 +0530 Subject: [PATCH 010/113] document for HTMLMapElement.name (#31714) * initial document * content * example * live example removed * typos * content correction * typo * Update files/en-us/web/api/htmlmapelement/name/index.html Co-authored-by: Jean-Yves Perrier * Update files/en-us/web/api/htmlmapelement/name/index.html Co-authored-by: Jean-Yves Perrier * Update files/en-us/web/api/htmlmapelement/name/index.html * Update files/en-us/web/api/htmlmapelement/name/index.html --------- Co-authored-by: Jean-Yves Perrier --- .../web/api/htmlmapelement/name/index.html | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 files/en-us/web/api/htmlmapelement/name/index.html diff --git a/files/en-us/web/api/htmlmapelement/name/index.html b/files/en-us/web/api/htmlmapelement/name/index.html new file mode 100644 index 000000000000000..30202941033d0ab --- /dev/null +++ b/files/en-us/web/api/htmlmapelement/name/index.html @@ -0,0 +1,43 @@ +--- +title: "HTMLMapElement: name property" +short-title: name +slug: Web/API/HTMLMapElement/name +page-type: web-api-instance-property +browser-compat: api.HTMLMapElement.name +--- + +{{ApiRef("HTML DOM")}} + +The **`name`** property of the {{domxref("HTMLMapElement")}} represents the unique name `` element. +Its value can be used with the `useMap` attribute of the {{HTMLElement("img")}} element to reference a `` element. +If `id` is given to a {{HTMLElement("map")}} element then `name` property should be same as `id`. + +## Value + +A non-empty string without whitespaces. + +## Example + +```html + + + +``` + +```js +const mapElement = document.getElementsByName("image-map")[0]; +console.log(mapElement.name); // output: "image-map" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLImageElement.useMap")}} property +- {{domxref("HTMLAreaElement")}} element From 55f04dd25ceec85201f1fc44f80b879c1d72bfb0 Mon Sep 17 00:00:00 2001 From: Hong Xu Date: Thu, 18 Jan 2024 00:32:12 -0800 Subject: [PATCH 011/113] Use the mimeType property in the dataavailable example (#31777) --- files/en-us/web/api/mediarecorder/dataavailable_event/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/mediarecorder/dataavailable_event/index.md b/files/en-us/web/api/mediarecorder/dataavailable_event/index.md index 3a3f7f90a15efd5..54e9107979ec1df 100644 --- a/files/en-us/web/api/mediarecorder/dataavailable_event/index.md +++ b/files/en-us/web/api/mediarecorder/dataavailable_event/index.md @@ -62,7 +62,7 @@ mediaRecorder.onstop = (e) => { const audio = document.createElement("audio"); audio.controls = true; - const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" }); + const blob = new Blob(chunks, { type: mediaRecorder.mimeType }); const audioURL = window.URL.createObjectURL(blob); audio.src = audioURL; console.log("recorder stopped"); From 1c10fa4dceafb471c270306360e359852428b37f Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:28:34 +0530 Subject: [PATCH 012/113] document for HTMLAreaElement.target (#31756) * initial document * example * HTMLHyperlinkElementUtils mixin * value correction * typo * end new line * lint Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * lint * removed hyperlink mixin * value section modifications * typo * Update index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/htmlareaelement/index.md | 2 +- .../web/api/htmlareaelement/target/index.md | 47 +++++++++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/htmlareaelement/target/index.md diff --git a/files/en-us/web/api/htmlareaelement/index.md b/files/en-us/web/api/htmlareaelement/index.md index 905125c92a2a8cf..cd63124209318b9 100644 --- a/files/en-us/web/api/htmlareaelement/index.md +++ b/files/en-us/web/api/htmlareaelement/index.md @@ -13,7 +13,7 @@ The **`HTMLAreaElement`** interface provides special properties and methods (bey ## Instance properties -_Inherits properties from its parent, {{domxref("HTMLElement")}}._ +_Inherits properties from its parent {{domxref("HTMLElement")}}._ - {{domxref("HTMLAreaElement.alt")}} - : A string that reflects the [`alt`](/en-US/docs/Web/HTML/Element/area#alt) HTML attribute, containing alternative text for the element. diff --git a/files/en-us/web/api/htmlareaelement/target/index.md b/files/en-us/web/api/htmlareaelement/target/index.md new file mode 100644 index 000000000000000..66ab7f5cec11784 --- /dev/null +++ b/files/en-us/web/api/htmlareaelement/target/index.md @@ -0,0 +1,47 @@ +--- +title: "HTMLAreaElement: target property" +short-title: target +slug: Web/API/HTMLAreaElement/target +page-type: web-api-instance-property +browser-compat: api.HTMLAreaElement.target +--- + +{{ApiRef("HTML DOM")}} + +The **`target`** property of the {{domxref("HTMLAreaElement")}} interface is a string that indicates where to display the linked resource. + +It reflects the [`target`](/en-US/docs/Web/HTML/Element/area#target) attribute of the {{HTMLElement("area")}} element. + +## Value + +A string representing the target. Its value can be: + +- The name of a {{HTMLElement("frame")}}. +- One of the [keyword with specific values](/en-US/docs/Web/HTML/Element/area#target):`_blank`, `_self`, `_parent`, or `_top`. + +## Example + +```html + + left + +``` + +```js +const areaElement = document.getElementsByName("image-map")[0].areas[0]; +console.log(areaElement.target); // Output: "_top" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLBaseElement.target")}} property +- {{domxref("HTMLFormElement.target")}} property +- {{domxref("HTMLAnchorElement.target")}} property From e11da3d92f7f54582f5f472b16d9d2d3b98d6d0b Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:33:18 +0530 Subject: [PATCH 013/113] Document for HTMLAnchorElement.target (#31561) * intial document for HTMLAnchorElement.target * example * Update files/en-us/web/api/htmlanchorelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * typo * content updated * see also update * Adding macros in see also section * random testing * random testing * Update files/en-us/web/api/htmlanchorelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * example correction * target values * target value example * example discription * lint * lint * lint * example * Update index.md * link to target values * value section modified * Update files/en-us/web/api/htmlanchorelement/target/index.md * Update files/en-us/web/api/htmlanchorelement/target/index.md Co-authored-by: Jean-Yves Perrier --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jean-Yves Perrier --- .../web/api/htmlanchorelement/target/index.md | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 files/en-us/web/api/htmlanchorelement/target/index.md diff --git a/files/en-us/web/api/htmlanchorelement/target/index.md b/files/en-us/web/api/htmlanchorelement/target/index.md new file mode 100644 index 000000000000000..90b17546658ef25 --- /dev/null +++ b/files/en-us/web/api/htmlanchorelement/target/index.md @@ -0,0 +1,45 @@ +--- +title: "HTMLAnchorElement: target property" +short-title: target +slug: Web/API/HTMLAnchorElement/target +page-type: web-api-instance-property +browser-compat: api.HTMLAnchorElement.target +--- + +{{ApiRef("HTML DOM")}} + +The **`target`** property of the {{domxref("HTMLAnchorElement")}} interface is a string that indicates where to display the linked resource. + +It reflects the [`target`](/en-US/docs/Web/HTML/Element/a#target) attribute of the {{HTMLElement("a")}} element. + +## Value + +A string representing the target. Its value can be: + +- The name of a {{HTMLElement("frame")}}. +- One of the [keyword with specific values](/en-US/docs/Web/HTML/Element/a#target):`_blank`, `_self`, `_parent`, or `_top`. + +## Example + +```html +example1 +``` + +```js +const link = document.querySelector(".link1"); +console.log(link.target); // output: "_blank" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLBaseElement.target")}} property +- {{domxref("HTMLFormElement.target")}} property +- {{domxref("HTMLAreaElement.target")}} property From 5beafc97972d39b543ca88d8814fc8cfdf93e3a5 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 18 Jan 2024 10:08:45 +0100 Subject: [PATCH 014/113] chore(ci): Disable XL comment on PRs (#31765) While we're evaluating this workflow, we can disable adding comments to `size/xl` PRs. --- .github/workflows/pr-labeler.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 2c6de75d26b0e40..530cd629c5c94ef 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -42,9 +42,7 @@ jobs: l_max_size: "100" xl_label: "size/xl" fail_if_xl: "false" - # message_if_xl: > - # This PR exceeds the recommended size of 1000 lines. - # ... + message_if_xl: "" files_to_ignore: | "files/en-us/_redirects.txt" "files/en-us/_wikihistory.json" From c2441279b7956925d28373345838436b1fa2c78c Mon Sep 17 00:00:00 2001 From: Jean-Yves Perrier Date: Thu, 18 Jan 2024 10:39:08 +0100 Subject: [PATCH 015/113] Rename file from .html to .md (#31778) * Improving sentence * Rename file --- .../web/api/htmlmapelement/name/{index.html => index.md} | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) rename files/en-us/web/api/htmlmapelement/name/{index.html => index.md} (82%) diff --git a/files/en-us/web/api/htmlmapelement/name/index.html b/files/en-us/web/api/htmlmapelement/name/index.md similarity index 82% rename from files/en-us/web/api/htmlmapelement/name/index.html rename to files/en-us/web/api/htmlmapelement/name/index.md index 30202941033d0ab..38228a646f3a36f 100644 --- a/files/en-us/web/api/htmlmapelement/name/index.html +++ b/files/en-us/web/api/htmlmapelement/name/index.md @@ -8,9 +8,10 @@ {{ApiRef("HTML DOM")}} -The **`name`** property of the {{domxref("HTMLMapElement")}} represents the unique name `` element. +The **`name`** property of the {{domxref("HTMLMapElement")}} represents the unique name `` element. Its value can be used with the `useMap` attribute of the {{HTMLElement("img")}} element to reference a `` element. -If `id` is given to a {{HTMLElement("map")}} element then `name` property should be same as `id`. + +If an `id` attribute is set on the {{HTMLElement("map")}} element, then this `name` property should be the same as this `id`. ## Value @@ -21,7 +22,7 @@ ```html - + ``` ```js From 4b91b93f7f37a1dba73fcccbe48819d640afaea7 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Thu, 18 Jan 2024 15:16:34 +0530 Subject: [PATCH 016/113] document for HTMLBaseElement.target (#31652) * initial document * definition and values added * use case added * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * test * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * examples added * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * typo * link to target values * typo * removed use case * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: Jean-Yves Perrier * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: Jean-Yves Perrier * Update files/en-us/web/api/htmlbaseelement/target/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * typo * Update files/en-us/web/api/htmlbaseelement/target/index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jean-Yves Perrier --- .../web/api/htmlbaseelement/target/index.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 files/en-us/web/api/htmlbaseelement/target/index.md diff --git a/files/en-us/web/api/htmlbaseelement/target/index.md b/files/en-us/web/api/htmlbaseelement/target/index.md new file mode 100644 index 000000000000000..2d11ebdfcac40ea --- /dev/null +++ b/files/en-us/web/api/htmlbaseelement/target/index.md @@ -0,0 +1,47 @@ +--- +title: "HTMLBaseElement: target property" +short-title: target +slug: Web/API/HTMLBaseElement/target +page-type: web-api-instance-property +browser-compat: api.HTMLBaseElement.target +--- + +{{ApiRef("HTML DOM")}} + +The `target` property of the {{domxref("HTMLBaseElement")}} interface is a string that represents the default target tab to show the resulting output for hyperlinks and form elements. + +It reflects the [`target`](/en-US/docs/Web/HTML/Element/base#target) attribute of the {{HTMLElement("base")}} element. + +## Value + +A string representing the target. Its value can be: + +- The name of a {{HTMLElement("frame")}}. +- One of the [keyword with specific values](/en-US/docs/Web/HTML/Element/base#target):`_blank`, `_self`, `_parent`, or `_top`. + +## Example + +```html + + + +``` + +```js +const baseElement = document.getElementsByTagName("base")[0]; +console.log(baseElement.target); // Output: '_top' +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLAnchorElement.target")}} property +- {{domxref("HTMLAreaElement.target")}} property +- {{domxref("HTMLFormElement.target")}} property From a837e88a4cf0b9eb927bb1b2f3853c29ed9a39c1 Mon Sep 17 00:00:00 2001 From: Tom Wolf Date: Thu, 18 Jan 2024 04:48:24 -0600 Subject: [PATCH 017/113] Correct reference to non-existent header (#31769) In the HTTP Messages Guide, correct the reference to the "If-None" header (which doesn't exist), replacing it with "If-None-Match" (which does). --- files/en-us/web/http/messages/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/messages/index.md b/files/en-us/web/http/messages/index.md index bd7e4733faa7057..34c5fafd98a6fca 100644 --- a/files/en-us/web/http/messages/index.md +++ b/files/en-us/web/http/messages/index.md @@ -57,7 +57,7 @@ HTTP requests are messages sent by the client to initiate an action on the serve Many different headers can appear in requests. They can be divided in several groups: - {{glossary("General header", "General headers")}}, like {{HTTPHeader("Via")}}, apply to the message as a whole. -- {{glossary("Request header", "Request headers")}}, like {{HTTPHeader("User-Agent")}} or {{HTTPHeader("Accept")}}, modify the request by specifying it further (like {{HTTPHeader("Accept-Language")}}), by giving context (like {{HTTPHeader("Referer")}}), or by conditionally restricting it (like {{HTTPHeader("If-None")}}). +- {{glossary("Request header", "Request headers")}}, like {{HTTPHeader("User-Agent")}} or {{HTTPHeader("Accept")}}, modify the request by specifying it further (like {{HTTPHeader("Accept-Language")}}), by giving context (like {{HTTPHeader("Referer")}}), or by conditionally restricting it (like {{HTTPHeader("If-None-Match")}}). - {{glossary("Representation header", "Representation headers")}} like {{HTTPHeader("Content-Type")}} that describe the original format of the message data and any encoding applied (only present if the message has a body). ![Example of headers in an HTTP request](http_request_headers3.png) From b9a41e258e656b57f41e8aaf88f93e51bb27974d Mon Sep 17 00:00:00 2001 From: Gautam Sharma <55221455+gautam-sharma1@users.noreply.github.com> Date: Thu, 18 Jan 2024 05:57:25 -0500 Subject: [PATCH 018/113] Update WASM link (#31744) * Update index.md WasmFiddle link was broken. I created a brand new website (wasmgen.vercel.app) that compiles cpp code to JS and wasm using emscripten and thought it might be useful to share it with the users * Update files/en-us/webassembly/concepts/index.md Co-authored-by: Brian Thomas Smith --------- Co-authored-by: Brian Thomas Smith --- files/en-us/webassembly/concepts/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/webassembly/concepts/index.md b/files/en-us/webassembly/concepts/index.md index 232841e53fb4f47..4c316abdc01cc8b 100644 --- a/files/en-us/webassembly/concepts/index.md +++ b/files/en-us/webassembly/concepts/index.md @@ -79,7 +79,6 @@ Let's talk about these options: Two of the many options for creating Wasm code are an online Wasm assembler or [Emscripten](https://emscripten.org/). There are a number of online Wasm assembler choices, such as: -- [WasmFiddle](https://wasdk.github.io/WasmFiddle/) - [WasmFiddle++](https://anonyco.github.io/WasmFiddlePlusPlus/) - [WasmExplorer](https://mbebenita.github.io/WasmExplorer/) From 61fd6d4169f2db488c914720277d39bbbb916380 Mon Sep 17 00:00:00 2001 From: Charlie Harding Date: Thu, 18 Jan 2024 13:05:46 +0100 Subject: [PATCH 019/113] Fix DOM structure in Shadow DOM page (#31780) --- files/en-us/web/api/web_components/using_shadow_dom/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/web_components/using_shadow_dom/index.md b/files/en-us/web/api/web_components/using_shadow_dom/index.md index 05e6a04a1226b8b..2c765ecd0d5690f 100644 --- a/files/en-us/web/api/web_components/using_shadow_dom/index.md +++ b/files/en-us/web/api/web_components/using_shadow_dom/index.md @@ -46,7 +46,7 @@ This fragment produces the following DOM structure (excluding whitespace-only te - P - #text: Here we will add a link to the - A href="https://www.mozilla.org/" - - #text: Mozilla homepage + - #text: Mozilla homepage ``` _Shadow_ DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM. From 976dcf4abfb88e81a2fbc9e7c43072983c34f1d4 Mon Sep 17 00:00:00 2001 From: Tom Wolf Date: Thu, 18 Jan 2024 06:09:36 -0600 Subject: [PATCH 020/113] Clarify HTTP request types that do or do not use a body (#31770) * Clarify HTTP request types using bodies Clarify the types of HTTP requests which require bodies as part of the HTTP Messages guide by reducing the number of examples and making them clearer. * Switch 'which' for 'that' * Wording tweak Co-authored-by: Brian Thomas Smith --------- Co-authored-by: Brian Thomas Smith --- files/en-us/web/http/messages/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/messages/index.md b/files/en-us/web/http/messages/index.md index 34c5fafd98a6fca..82fbf6e5e4a9c13 100644 --- a/files/en-us/web/http/messages/index.md +++ b/files/en-us/web/http/messages/index.md @@ -64,7 +64,7 @@ Many different headers can appear in requests. They can be divided in several gr ### Body -The final part of the request is its body. Not all requests have one: requests fetching resources, like `GET`, `HEAD`, `DELETE`, or `OPTIONS`, usually don't need one. Some requests send data to the server in order to update it: as often the case with `POST` requests (containing HTML form data). +The final part of the request is its body. Not all requests have one: requests fetching resources like `GET` or `HEAD` usually don't need a body. Requests that send data to the server to create a resource, such as `PUT` or `POST` requests, typically require a body with the data used to fulfill the request (for instance, HTML form data). Bodies can be broadly divided into two categories: From 9ff83eb7950a8d4e2d55d61fcf9b06cf82eae6bf Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 18 Jan 2024 04:49:38 -0800 Subject: [PATCH 021/113] New glossary term: media query (#31754) * New glossary: media query * New glossary: media query --- files/en-us/glossary/media_query/index.md | 24 +++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 files/en-us/glossary/media_query/index.md diff --git a/files/en-us/glossary/media_query/index.md b/files/en-us/glossary/media_query/index.md new file mode 100644 index 000000000000000..6535a1398369a47 --- /dev/null +++ b/files/en-us/glossary/media_query/index.md @@ -0,0 +1,24 @@ +--- +title: Media query +slug: Glossary/Media_query +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +A **media query** is a logical expression that is a method for CSS, JavaScript, HTML, and other web languages, to check aspects of the user agent or device that the document is being displayed in, independent of the document contents, to determine whether the associated code block or feature should be applied. + +Media queries are used to conditionally apply CSS styles with the CSS {{cssxref("@media")}} and {{cssxref("@import")}} at-rules and in JavaScript to test and monitor media states such as with the {{DOMxRef("Window.matchMedia", "matchMedia()")}} method, {{DOMxRef("MediaQueryList.matches", "matches")}} property, and {{DOMxRef("MediaQueryList.change_event", "change")}} event. Media queries are used as values of the [``](/en-US/docs/Web/HTML/Element/link#media), [``](/en-US/docs/Web/HTML/Element/source#media), and [` +

Hello world!

+

This is a test.

+ + + + + + +``` + +#### CSS + +```css +body { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 5px; +} + +textarea { + grid-column: 1 / span 3; +} +``` + +#### JavaScript + +```js +const copyButton = document.getElementById("copy"); +const pasteButton = document.getElementById("paste_normal"); +const pasteUnsanitizedButton = document.getElementById("paste_unsanitized"); +const sourceTextarea = document.getElementById("source"); +const destinationTextarea = document.getElementById("destination"); + +copyButton.addEventListener("click", async () => { + const text = sourceTextarea.value; + const type = "text/html"; + const blob = new Blob([text], { type }); + const data = [new ClipboardItem({ [type]: blob })]; + + try { + await navigator.clipboard.write(data); + } catch (error) { + destinationTextarea.value = `Clipboard write failed: ${error}`; + } +}); + +async function getHTMLFromClipboardContents(clipboardContents) { + for (const item of clipboardContents) { + if (item.types.includes("text/html")) { + const blob = await item.getType("text/html"); + const blobText = await blob.text(); + return blobText; + } + } + + return null; +} + +pasteButton.addEventListener("click", async () => { + try { + const clipboardContents = await navigator.clipboard.read(); + const html = await getHTMLFromClipboardContents(clipboardContents); + destinationTextarea.value = + html || "Could not find HTML data in the clipboard."; + } catch (error) { + destinationTextarea.value = `Clipboard read failed: ${error}`; + } +}); + +pasteUnsanitizedButton.addEventListener("click", async () => { + try { + const clipboardContents = await navigator.clipboard.read({ + unsanitized: ["text/html"], + }); + const html = await getHTMLFromClipboardContents(clipboardContents); + destinationTextarea.value = + html || "Could not find HTML data in the clipboard."; + } catch (error) { + destinationTextarea.value = `Clipboard read failed: ${error}`; + } +}); +``` + +#### Result + +First click the "Copy HTML" button to write the HTML code from the first textarea to the clipboard. Then either click the "Paste HTML" button or the "Paste unsanitized HTML" button to paste the sanitized or unsanitized HTML code into the second textarea. + +{{EmbedLiveSample("Reading unsanitized HTML from the clipboard", "100%", "220")}} + ## Specifications {{Specifications}} @@ -251,7 +358,8 @@ Notes: ## See also - [Clipboard API](/en-US/docs/Web/API/Clipboard_API) -- [Image support for Async Clipboard article](https://web.dev/articles/async-clipboard) +- [Unblocking clipboard access](https://web.dev/articles/async-clipboard) on web.dev +- [Unsanitized HTML in the Async Clipboard API](https://developer.chrome.com/docs/web-platform/unsanitized-html-async-clipboard) on developer.chrome.com - {{domxref("Clipboard.readText()")}} - {{domxref("Clipboard.writeText()")}} - {{domxref("Clipboard.write()")}} From d952a1d0f2debc42a611ea5855f3d66d88c33335 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 20 Jan 2024 01:06:34 +0800 Subject: [PATCH 035/113] init docs for `ServiceWorkerGlobalScope.cookieStore` (#30934) * init * Update files/en-us/web/api/serviceworkerglobalscope/cookiestore/index.md Co-authored-by: wbamberg --------- Co-authored-by: wbamberg --- .../cookiestore/index.md | 25 +++++++++++++++++++ .../web/api/serviceworkerglobalscope/index.md | 2 ++ 2 files changed, 27 insertions(+) create mode 100644 files/en-us/web/api/serviceworkerglobalscope/cookiestore/index.md diff --git a/files/en-us/web/api/serviceworkerglobalscope/cookiestore/index.md b/files/en-us/web/api/serviceworkerglobalscope/cookiestore/index.md new file mode 100644 index 000000000000000..1368cb040674b3c --- /dev/null +++ b/files/en-us/web/api/serviceworkerglobalscope/cookiestore/index.md @@ -0,0 +1,25 @@ +--- +title: "ServiceWorkerGlobalScope: cookieStore property" +short-title: cookieStore +slug: Web/API/ServiceWorkerGlobalScope/cookieStore +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ServiceWorkerGlobalScope.cookieStore +--- + +{{APIRef("Cookie Store API")}}{{SeeCompatTable}} + +The **`cookieStore`** read-only property of the {{domxref("ServiceWorkerGlobalScope")}} interface returns a reference to the {{domxref("CookieStore")}} object associated with this service worker. + +## Value + +A {{domxref("CookieStore")}} object instance. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/serviceworkerglobalscope/index.md b/files/en-us/web/api/serviceworkerglobalscope/index.md index eeb66da7395de02..5a012d3a1e94da7 100644 --- a/files/en-us/web/api/serviceworkerglobalscope/index.md +++ b/files/en-us/web/api/serviceworkerglobalscope/index.md @@ -25,6 +25,8 @@ _This interface inherits properties from the {{domxref("WorkerGlobalScope")}} in - {{domxref("ServiceWorkerGlobalScope.clients")}} {{ReadOnlyInline}} - : Contains the {{domxref("Clients")}} object associated with the service worker. +- {{domxref("ServiceWorkerGlobalScope.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns a reference to the {{domxref("CookieStore")}} object associated with the service worker. - {{domxref("ServiceWorkerGlobalScope.registration")}} {{ReadOnlyInline}} - : Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration. - {{domxref("ServiceWorkerGlobalScope.serviceWorker")}} {{ReadOnlyInline}} From fb6d05866d57baf66770dfa30bc88b7b967cba9e Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 20 Jan 2024 01:07:45 +0800 Subject: [PATCH 036/113] init docs for `Window.cookieStore` (#30935) * init * Update files/en-us/web/api/window/cookiestore/index.md Co-authored-by: wbamberg --------- Co-authored-by: wbamberg --- .../en-us/web/api/window/cookiestore/index.md | 25 +++++++++++++++++++ files/en-us/web/api/window/index.md | 2 ++ 2 files changed, 27 insertions(+) create mode 100644 files/en-us/web/api/window/cookiestore/index.md diff --git a/files/en-us/web/api/window/cookiestore/index.md b/files/en-us/web/api/window/cookiestore/index.md new file mode 100644 index 000000000000000..a82097afd2f5312 --- /dev/null +++ b/files/en-us/web/api/window/cookiestore/index.md @@ -0,0 +1,25 @@ +--- +title: "Window: cookieStore property" +short-title: cookieStore +slug: Web/API/Window/cookieStore +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.Window.cookieStore +--- + +{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}} + +The **`cookieStore`** read-only property of the {{domxref("Window")}} interface returns a reference to the {{domxref("CookieStore")}} object for the current document context. This is an entry point for the [Cookie Store API](/en-US/docs/Web/API/Cookie_Store_API). + +## Value + +A {{domxref("CookieStore")}} object instance. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md index bdcddb1af42f00b..4234cf2b1df90b0 100644 --- a/files/en-us/web/api/window/index.md +++ b/files/en-us/web/api/window/index.md @@ -33,6 +33,8 @@ Note that properties which are objects (e.g., for overriding the prototype of bu - : 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}} + - : 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. - {{domxref("crossOriginIsolated", "Window.crossOriginIsolated")}} {{ReadOnlyInline}} From 75407e9584b69fde97b551b5ff5641a2d01bcaaa Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 20 Jan 2024 01:09:08 +0800 Subject: [PATCH 037/113] init documentation for `ServiceWorkerRegistration.cookies` (#30932) * init docs * Update files/en-us/web/api/serviceworkerregistration/cookies/index.md Co-authored-by: wbamberg --------- Co-authored-by: wbamberg --- .../cookies/index.md | 25 +++++++++++++++++++ .../api/serviceworkerregistration/index.md | 2 ++ 2 files changed, 27 insertions(+) create mode 100644 files/en-us/web/api/serviceworkerregistration/cookies/index.md diff --git a/files/en-us/web/api/serviceworkerregistration/cookies/index.md b/files/en-us/web/api/serviceworkerregistration/cookies/index.md new file mode 100644 index 000000000000000..cdbb99a1848e1c5 --- /dev/null +++ b/files/en-us/web/api/serviceworkerregistration/cookies/index.md @@ -0,0 +1,25 @@ +--- +title: "ServiceWorkerRegistration: cookies property" +short-title: cookies +slug: Web/API/ServiceWorkerRegistration/cookies +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ServiceWorkerRegistration.cookies +--- + +{{APIRef("Cookie Store API")}}{{SeeCompatTable}} + +The **`cookies`** read-only property of the {{domxref("ServiceWorkerRegistration")}} interface returns a reference to the {{domxref("CookieStoreManager")}} interface, which enables a web app to subscribe to and unsubscribe from cookie change events in a [service worker](/en-US/docs/Web/API/Service_Worker_API). This is an entry point for the [Cookie Store API](/en-US/docs/Web/API/Cookie_Store_API). + +## Value + +A {{domxref("CookieStoreManager")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/serviceworkerregistration/index.md b/files/en-us/web/api/serviceworkerregistration/index.md index cf865bd10ab0d51..e983ca90fba597b 100644 --- a/files/en-us/web/api/serviceworkerregistration/index.md +++ b/files/en-us/web/api/serviceworkerregistration/index.md @@ -23,6 +23,8 @@ _Also inherits properties from its parent interface,_ {{domxref("EventTarget")}} - : Returns a service worker whose state is `activating` or `activated`. This is initially set to `null`. An active worker will control a {{domxref("Client")}} if the client's URL falls within the scope of the registration (the `scope` option set when {{domxref("ServiceWorkerContainer.register")}} is first called.) - {{domxref("ServiceWorkerRegistration.backgroundFetch")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns a reference to a {{domxref("BackgroundFetchManager")}} object, which manages background fetch operations. +- {{domxref("ServiceWorkerRegistration.cookies")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns a reference to the {{domxref("CookieStoreManager")}} interface, which allows subscribe and unsubscribe to cookie change events. - {{domxref("ServiceWorkerRegistration.index")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns a reference to the {{domxref("ContentIndex")}} interface, for managing indexed content for offline viewing. - {{domxref("ServiceWorkerRegistration.installing")}} {{ReadOnlyInline}} From fffaf01b3968b14820cdefdd988daecaf58fb286 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 20 Jan 2024 01:33:46 +0800 Subject: [PATCH 038/113] init documentation for `ContactAddress` members (#30218) * init * update * fix * fix * fix * fix * update group data * fix * fix * Update files/en-us/web/api/contactaddress/index.md Co-authored-by: wbamberg --------- Co-authored-by: Brian Thomas Smith Co-authored-by: wbamberg --- .../api/contactaddress/addressline/index.md | 42 +++++++++++++++++++ .../web/api/contactaddress/city/index.md | 25 +++++++++++ .../web/api/contactaddress/country/index.md | 27 ++++++++++++ .../contactaddress/dependentlocality/index.md | 27 ++++++++++++ files/en-us/web/api/contactaddress/index.md | 28 +++++++++++-- .../api/contactaddress/organization/index.md | 25 +++++++++++ .../web/api/contactaddress/phone/index.md | 25 +++++++++++ .../api/contactaddress/postalcode/index.md | 31 ++++++++++++++ .../web/api/contactaddress/recipient/index.md | 25 +++++++++++ .../web/api/contactaddress/region/index.md | 29 +++++++++++++ .../api/contactaddress/sortingcode/index.md | 25 +++++++++++ .../web/api/contactaddress/tojson/index.md | 31 ++++++++++++++ files/jsondata/GroupData.json | 3 +- 13 files changed, 338 insertions(+), 5 deletions(-) create mode 100644 files/en-us/web/api/contactaddress/addressline/index.md create mode 100644 files/en-us/web/api/contactaddress/city/index.md create mode 100644 files/en-us/web/api/contactaddress/country/index.md create mode 100644 files/en-us/web/api/contactaddress/dependentlocality/index.md create mode 100644 files/en-us/web/api/contactaddress/organization/index.md create mode 100644 files/en-us/web/api/contactaddress/phone/index.md create mode 100644 files/en-us/web/api/contactaddress/postalcode/index.md create mode 100644 files/en-us/web/api/contactaddress/recipient/index.md create mode 100644 files/en-us/web/api/contactaddress/region/index.md create mode 100644 files/en-us/web/api/contactaddress/sortingcode/index.md create mode 100644 files/en-us/web/api/contactaddress/tojson/index.md diff --git a/files/en-us/web/api/contactaddress/addressline/index.md b/files/en-us/web/api/contactaddress/addressline/index.md new file mode 100644 index 000000000000000..1fd9ba889e36e5a --- /dev/null +++ b/files/en-us/web/api/contactaddress/addressline/index.md @@ -0,0 +1,42 @@ +--- +title: "ContactAddress: addressLine property" +short-title: addressLine +slug: Web/API/ContactAddress/addressLine +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.addressLine +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`addressLine`** read-only property of the {{domxref("ContactAddress")}} interface is an array of strings, each specifying a line of the address that is not covered by one of the other properties of `ContactAddress`. The array may include the street name, the house number, apartment number, the rural delivery route, descriptive instructions, or the post office box. + +## Value + +An array of strings, each containing one line of the address. For example, the `addressLine` property for the Mozilla Space in London would have the following entries: + +| Index | addressLine[] value | +| ----- | ------------------------- | +| 0 | Metal Box Factory | +| 1 | Suite 441, 4th floor | +| 2 | 30 Great Guildford Street | + +These, combined with additional values for other properties of the {{domxref("ContactAddress")}}, would represent the full address, which is: + +```plaintext +Mozilla +Metal Box Factory +Suite 441, 4th floor +30 Great Guildford Street +London SE1 0HS +United Kingdom +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/city/index.md b/files/en-us/web/api/contactaddress/city/index.md new file mode 100644 index 000000000000000..b53c236aa2884b0 --- /dev/null +++ b/files/en-us/web/api/contactaddress/city/index.md @@ -0,0 +1,25 @@ +--- +title: "ContactAddress: city property" +short-title: city +slug: Web/API/ContactAddress/city +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.city +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`city`** read-only property of the {{domxref("ContactAddress")}} interface returns a string containing the city or town portion of the address. + +## Value + +A string indicating the city or town portion of the address described by the {{domxref("ContactAddress")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/country/index.md b/files/en-us/web/api/contactaddress/country/index.md new file mode 100644 index 000000000000000..96a0f75a6820706 --- /dev/null +++ b/files/en-us/web/api/contactaddress/country/index.md @@ -0,0 +1,27 @@ +--- +title: "ContactAddress: country property" +short-title: country +slug: Web/API/ContactAddress/country +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.country +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`country`** read-only property of the {{domxref("ContactAddress")}} interface is a string identifying the address's country using the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) standard. The string is always in its canonical upper-case form. + +Some examples of valid `country` values: `"US"`, `"GB"`, `"CN"`, or `"JP"`. + +## Value + +A string which contains the ISO3166-1 alpha-2 code identifying the country in which the address is located, or an empty string if no country is available, which frequently can be assumed to mean "same country as the site owner." + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/dependentlocality/index.md b/files/en-us/web/api/contactaddress/dependentlocality/index.md new file mode 100644 index 000000000000000..9b1e7572747836f --- /dev/null +++ b/files/en-us/web/api/contactaddress/dependentlocality/index.md @@ -0,0 +1,27 @@ +--- +title: "ContactAddress: dependentLocality property" +short-title: dependentLocality +slug: Web/API/ContactAddress/dependentLocality +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.dependentLocality +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The read-only **`dependentLocality`** property of the {{domxref("ContactAddress")}} interface is a string containing a locality or sublocality designation within a city, such as a neighborhood, borough, district, or, in the United Kingdom, a dependent locality. Also known as a _post town_. + +## Value + +A string indicating the sublocality portion of the address. This may be an empty string if no sublocality is available or required. It's used to provide disambiguation when a city may include areas that duplicate street names. + +A sublocality is an area within a city, such as a neighborhood, borough, or district. In the United Kingdom, this is used to indicate the **post town** in the United Kingdom (known officially by the Royal Mail as the **dependent locality**). This is a disambiguating feature of addresses in places where a city may have areas that duplicate street names. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/index.md b/files/en-us/web/api/contactaddress/index.md index f2119ed365d398e..53924954facef7e 100644 --- a/files/en-us/web/api/contactaddress/index.md +++ b/files/en-us/web/api/contactaddress/index.md @@ -7,19 +7,39 @@ status: browser-compat: api.ContactAddress --- -{{securecontext_header}}{{APIRef("")}}{{SeeCompatTable}} +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} -The **`ContactAddress`** interface of the {{domxref('contact_picker_api','Contact Picker API','','true')}} represents a physical address. Instances of this interface are retrieved from the `address` property of the objects returned by {{domxref("ContactsManager.getProperties()")}}. +The **`ContactAddress`** interface of the [Contact Picker API](/en-US/docs/Web/API/Contact_Picker_API) represents a physical address. Instances of this interface are retrieved from the `address` property of the objects returned by {{domxref("ContactsManager.getProperties()")}}. It may be useful to refer to the Universal Postal Union website's [Addressing S42 standard](https://www.upu.int/en/Postal-Solutions/Programmes-Services/Addressing-Solutions#addressing-s42-standard) materials, which provide information about international standards for postal addresses. ## Instance properties -_Inherits properties from its parent, {{domxref("PaymentAddress")}}_. +- {{domxref('ContactAddress.addressLine')}} {{ReadOnlyInline}} + - : An array of strings providing each line of the address not included among the other properties. The exact size and content varies by country or location and can include, for example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number. +- {{domxref('ContactAddress.country')}} {{ReadOnlyInline}} + - : A string specifying the country in which the address is located, using the [ISO-3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) standard. The string is always given in its canonical upper-case form. Some examples of valid `country` values: `"US"`, `"GB"`, `"CN"`, or `"JP"`. +- {{domxref('ContactAddress.city')}} {{ReadOnlyInline}} + - : A string which contains the city or town portion of the address. +- {{domxref('ContactAddress.dependentLocality')}} {{ReadOnlyInline}} + - : A string giving the dependent locality or sublocality within a city, for example, a neighborhood, borough, district, or UK dependent locality. +- {{domxref('ContactAddress.organization')}} {{ReadOnlyInline}} + - : A string specifying the name of the organization, firm, company, or institution at the address. +- {{domxref('ContactAddress.phone')}} {{ReadOnlyInline}} + - : A string specifying the telephone number of the recipient or contact person. +- {{domxref('ContactAddress.postalCode')}} {{ReadOnlyInline}} + - : A string specifying a code used by a jurisdiction for mail routing, for example, the ZIP code in the United States or the PIN code in India. +- {{domxref('ContactAddress.recipient')}} {{ReadOnlyInline}} + - : A string giving the name of the recipient, purchaser, or contact person at the address. +- {{domxref('ContactAddress.region')}} {{ReadOnlyInline}} + - : A string containing the top level administrative subdivision of the country, for example a state, province, oblast, or prefecture. +- {{domxref('ContactAddress.sortingCode')}} {{ReadOnlyInline}} + - : A string providing a postal sorting code such as is used in France. ## Instance methods -_Inherits methods from its parent, {{domxref("PaymentAddress")}}_. +- {{domxref('ContactAddress.toJSON()')}} + - : A standard serializer that returns a JSON representation of the `ContactAddress` object's properties. ## Examples diff --git a/files/en-us/web/api/contactaddress/organization/index.md b/files/en-us/web/api/contactaddress/organization/index.md new file mode 100644 index 000000000000000..42586b4f295777d --- /dev/null +++ b/files/en-us/web/api/contactaddress/organization/index.md @@ -0,0 +1,25 @@ +--- +title: "ContactAddress: organization property" +short-title: organization +slug: Web/API/ContactAddress/organization +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.organization +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`organization`** read-only property of the {{domxref("ContactAddress")}} interface returns a string containing the name of the organization, firm, company, or institution at the address. + +## Value + +A string whose value is the name of the organization or company located at the address described by the `ContactAddress` object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/phone/index.md b/files/en-us/web/api/contactaddress/phone/index.md new file mode 100644 index 000000000000000..97e155c2d72b146 --- /dev/null +++ b/files/en-us/web/api/contactaddress/phone/index.md @@ -0,0 +1,25 @@ +--- +title: "ContactAddress: phone property" +short-title: phone +slug: Web/API/ContactAddress/phone +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.phone +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The read-only **`phone`** property of the {{domxref("ContactAddress")}} interface returns a string containing the telephone number of the recipient or contact person at the address. + +## Value + +A string containing the telephone number for the recipient of the shipment. If no phone number is available, this value is an empty string. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/postalcode/index.md b/files/en-us/web/api/contactaddress/postalcode/index.md new file mode 100644 index 000000000000000..92573d4839010af --- /dev/null +++ b/files/en-us/web/api/contactaddress/postalcode/index.md @@ -0,0 +1,31 @@ +--- +title: "ContactAddress: postalCode property" +short-title: postalCode +slug: Web/API/ContactAddress/postalCode +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.postalCode +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`postalCode`** read-only property of the {{domxref("ContactAddress")}} interface returns a string containing a code used by a jurisdiction for mail routing, for example, the [ZIP Code](https://en.wikipedia.org/wiki/ZIP_Code) in the United States or the [Postal Index Number](https://en.wikipedia.org/wiki/Postal_Index_Number) (PIN code) in India. + +## Value + +A string which contains the postal code portion of the address. A postal code is a string (either numeric or alphanumeric) which is used by a postal service to optimize mail routing and delivery. + +Various countries use different terms for this. In most of the world, it's known as the "post code" or "postal code". In the United States, the ZIP code is used. India uses PIN codes. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Universal Postal Union: [Universal Post\*Code® Database](https://www.upu.int/en/Postal-Solutions/Programmes-Services/Addressing-Solutions) diff --git a/files/en-us/web/api/contactaddress/recipient/index.md b/files/en-us/web/api/contactaddress/recipient/index.md new file mode 100644 index 000000000000000..c1ff75ee5945449 --- /dev/null +++ b/files/en-us/web/api/contactaddress/recipient/index.md @@ -0,0 +1,25 @@ +--- +title: "ContactAddress: recipient property" +short-title: recipient +slug: Web/API/ContactAddress/recipient +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.recipient +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The read-only **`recipient`** property of the {{domxref("ContactAddress")}} interface returns a string containing the name of the recipient, purchaser, or contact person at the address. + +## Value + +A string giving the name of the person=, or the name of a contact person in other contexts. If no name is available, this string is empty. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/region/index.md b/files/en-us/web/api/contactaddress/region/index.md new file mode 100644 index 000000000000000..e7dc789167b4ccf --- /dev/null +++ b/files/en-us/web/api/contactaddress/region/index.md @@ -0,0 +1,29 @@ +--- +title: "ContactAddress: region property" +short-title: region +slug: Web/API/ContactAddress/region +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.region +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The read-only **`region`** property of the {{domxref("ContactAddress")}} interface returns a string containing the top-level administrative subdivision of the country in which the address is located. This may be a state, province, oblast, or prefecture. + +## Value + +A string specifying the top-level administrative subdivision within the country in which the address is located. This region has different names in different countries, such as: state, province, oblast, prefecture, or county. + +## Usage notes + +In some countries, like Belgium, it's uncommon for people to provide a region as part of their postal address. In such cases, the browser returns an empty string as the value of `region`. However, the address should still be acceptable to use for its intended purpose (e.g., to ship a product). However, always verify addresses to make sure what the user provides is usable. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/sortingcode/index.md b/files/en-us/web/api/contactaddress/sortingcode/index.md new file mode 100644 index 000000000000000..ed59de2063e7d7f --- /dev/null +++ b/files/en-us/web/api/contactaddress/sortingcode/index.md @@ -0,0 +1,25 @@ +--- +title: "ContactAddress: sortingCode property" +short-title: sortingCode +slug: Web/API/ContactAddress/sortingCode +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.ContactAddress.sortingCode +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`sortingCode`** read-only property of the {{domxref("ContactAddress")}} interface returns a string containing a postal sorting code such as is used in France. + +## Value + +A string containing the sorting code portion of the address. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/contactaddress/tojson/index.md b/files/en-us/web/api/contactaddress/tojson/index.md new file mode 100644 index 000000000000000..83002d2dc6e0b38 --- /dev/null +++ b/files/en-us/web/api/contactaddress/tojson/index.md @@ -0,0 +1,31 @@ +--- +title: "ContactAddress: toJSON() method" +short-title: toJSON() +slug: Web/API/ContactAddress/toJSON +page-type: web-api-instance-method +status: + - experimental +browser-compat: api.ContactAddress.toJSON +--- + +{{securecontext_header}}{{APIRef("Contact Picker API")}}{{SeeCompatTable}} + +The **`toJSON()`** method of the {{domxref("ContactAddress")}} interface is a standard serializer that returns a JSON representation of the `ContactAddress` object's properties. + +## Syntax + +```js-nolint +toJSON() +``` + +### Return value + +A JSON object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 79d28627d5513ec..32a98185ec1ff8e 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -156,7 +156,8 @@ }, "Contact Picker API": { "overview": ["Contact Picker API"], - "interfaces": ["ContactsManager"], + "interfaces": ["ContactAddress", "ContactsManager"], + "methods": [], "properties": ["Navigator.contacts"], "events": [] }, From 5618162541ceee82aaba4865f56c07ba93f4c1fc Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 20 Jan 2024 01:35:12 +0800 Subject: [PATCH 039/113] Cookie Store API | update API summary page and update API GroupData (#31579) * add * update front matter key * add AvailableInWorkers * add Extensions to other interfaces section * fix event name * add Experimental_Inline mark * update text * update See also section * small style fix * update * Update files/en-us/web/api/cookie_store_api/index.md Co-authored-by: wbamberg * Apply suggestions from code review Co-authored-by: wbamberg --------- Co-authored-by: wbamberg --- files/en-us/web/api/cookie_store_api/index.md | 32 +++++++++++++++---- files/jsondata/GroupData.json | 8 +++-- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/api/cookie_store_api/index.md b/files/en-us/web/api/cookie_store_api/index.md index 0c1a9eb897f85ac..33552aedb08cc7c 100644 --- a/files/en-us/web/api/cookie_store_api/index.md +++ b/files/en-us/web/api/cookie_store_api/index.md @@ -4,12 +4,17 @@ slug: Web/API/Cookie_Store_API page-type: web-api-overview status: - experimental -browser-compat: api.CookieStore +browser-compat: + - api.CookieStore + - api.CookieStoreManager +spec-urls: https://wicg.github.io/cookie-store/ --- {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}{{SeeCompatTable}} -The _**Cookie Store API**_ provides an asynchronous API for managing cookies, while also exposing cookies to [Service Worker API](/en-US/docs/Web/API/Service_Worker_API), +The **Cookie Store API** is an asynchronous API for managing cookies, available in windows and also [service workers](/en-US/docs/Web/API/Service_Worker_API). + +{{AvailableInWorkers}} ## Concepts and Usage @@ -21,14 +26,25 @@ The _Cookie Store API_ provides an updated method of managing cookies. It is {{G ## Interfaces -- {{domxref("CookieStore")}} +- {{domxref("CookieStore")}} {{Experimental_Inline}} - : The `CookieStore` interface enables getting and setting cookies. -- {{domxref("CookieStoreManager")}} +- {{domxref("CookieStoreManager")}} {{Experimental_Inline}} - : The `CookieStoreManager` interface provides a service worker registration to enable service workers to subscribe to cookie change events. -- {{domxref("CookieChangeEvent")}} +- {{domxref("CookieChangeEvent")}} {{Experimental_Inline}} - : A `CookieChangeEvent` named `change` is dispatched against `CookieStore` objects in {{domxref("Window")}} contexts when any script-visible cookies changes occur. - {{domxref("ExtendableCookieChangeEvent")}} - - : An `ExtendableCookieChangeEvent` named `change` is dispatched against {{domxref("ServiceWorkerGlobalScope")}} events when any script-visible cookie changes occur that match the service worker's cookie change subscription list. + - : An `ExtendableCookieChangeEvent` named `cookiechange` is dispatched in {{domxref("ServiceWorkerGlobalScope")}} contexts when any script-visible cookie changes occur that match the service worker's cookie change subscription list. + +### Extensions to other interfaces + +- {{domxref("ServiceWorkerGlobalScope.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns a reference to the {{domxref("CookieStore")}} object associated with the service worker. +- {{domxref("ServiceWorkerRegistration.cookies")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns a reference to the {{domxref("CookieStoreManager")}} interface, which enables a web app to subscribe to and unsubscribe from cookie change events. +- {{domxref("Window.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns a reference to the {{domxref("CookieStore")}} object for the current document context. +- {{domxref("ServiceWorkerGlobalScope/cookiechange_event", "cookiechange")}} event {{Experimental_Inline}} + - : Fired when any cookie changes have occurred which match the service worker's cookie change subscription list. ## Specifications @@ -37,3 +53,7 @@ The _Cookie Store API_ provides an updated method of managing cookies. It is {{G ## Browser compatibility {{Compat}} + +## See also + +- [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 32a98185ec1ff8e..03eec4a4f7252a7 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -197,8 +197,12 @@ "ExtendableCookieChangeEvent" ], "methods": [], - "properties": [], - "events": [] + "properties": [ + "Window.cookieStore", + "ServiceWorkerGlobalScope.cookieStore", + "ServiceWorkerRegistration.cookies" + ], + "events": ["ServiceWorkerGlobalScope: cookiechange"] }, "Credential Management API": { "overview": ["Credential Management API"], From 82560eedf6bb115d764f46f4d5367101645512b2 Mon Sep 17 00:00:00 2001 From: Henrik Skupin Date: Fri, 19 Jan 2024 18:39:46 +0100 Subject: [PATCH 040/113] Firefox 122 release notes for WebDriver conformance (#31792) * Firefox 122 release notes for WebDriver conformance. * Update files/en-us/mozilla/firefox/releases/122/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/mozilla/firefox/releases/122/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/mozilla/firefox/releases/122/index.md Co-authored-by: Julian Descottes * Update files/en-us/mozilla/firefox/releases/122/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Julian Descottes --- files/en-us/mozilla/firefox/releases/122/index.md | 12 ++++++++++++ files/en-us/mozilla/firefox/releases/123/index.md | 2 ++ 2 files changed, 14 insertions(+) diff --git a/files/en-us/mozilla/firefox/releases/122/index.md b/files/en-us/mozilla/firefox/releases/122/index.md index ffebc1e907cfc2e..81e1a98b8cd2d28 100644 --- a/files/en-us/mozilla/firefox/releases/122/index.md +++ b/files/en-us/mozilla/firefox/releases/122/index.md @@ -67,10 +67,22 @@ This article provides information about the changes in Firefox 122 that affect d ### WebDriver conformance (WebDriver BiDi, Marionette) +#### General + +- Fixed a bug that prevented [Perform Actions](https://w3c.github.io/webdriver/#perform-actions) to correctly synthesize double and other multi-click events for the `mouse` input source ([Firefox bug 1864614](https://bugzil.la/1864614)). Additionally, these events will only be emitted when the actual mouse position has not changed since the last click action ([Firefox bug 1681076](https://bugzil.la/1681076)). +- The definitions for the `Pause` and `Equal` (Numpad block) keys have been updated to align with the WebDriver specification ([Firefox bug 1863687](https://bugzil.la/1863687)). + #### WebDriver BiDi +- The serialization of `WindowProxy` remote objects now also works correctly for out-of-process iframes ([Firefox bug 1867667](https://bugzil.la/1867667)). +- The [browsingContext.setViewport](https://w3c.github.io/webdriver-bidi/#command-browsingContext-setViewport) command now distinguishes between `undefined` and `null` as values for the `viewport` argument. If set to `undefined`, it signifies that the viewport should remain unchanged, while using `null` will reset it to its original dimensions ([Firefox bug 1865618](https://bugzil.la/1865618)). +- Support for the [browsingContext.traverseHistory](https://w3c.github.io/webdriver-bidi/#command-browsingContext-traverseHistory) command has been introduced, enabling navigations backward and forward in the browser history ([Firefox bug 1841018](https://bugzil.la/1841018)). +- Fixed a bug in all supported network events where the `context` id consistently reported the top-level browsing context, even when the navigation occurred within an iframe ([Firefox bug 1869735](https://bugzil.la/1869735)). + #### Marionette +- Fixed a bug with [Get Element Text](https://w3c.github.io/webdriver/#dfn-get-element-text), where the command was incorrectly returning an empty text when the element was located within a ShadowRoot's slot ([Firefox bug 1824664](https://bugzil.la/1824664)). + ## Changes for add-on developers ### Removals diff --git a/files/en-us/mozilla/firefox/releases/123/index.md b/files/en-us/mozilla/firefox/releases/123/index.md index 6db537a1a42e612..f7c23e1d1c2e1ba 100644 --- a/files/en-us/mozilla/firefox/releases/123/index.md +++ b/files/en-us/mozilla/firefox/releases/123/index.md @@ -50,6 +50,8 @@ This article provides information about the changes in Firefox 123 that affect d ### WebDriver conformance (WebDriver BiDi, Marionette) +#### General + #### WebDriver BiDi #### Marionette From 67a5e464f835677f78c744fc69a84cc83186b988 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 20 Jan 2024 03:27:34 +0800 Subject: [PATCH 041/113] Speculation Rules | add {{experimental_inline}} mark & prefer macros than md link (#31244) * style pretty * add {{experimental_inline}} * style pretty * update spec-urls and browser-compat * style pretty * style pretty * revert --- .../web/api/document/prerendering/index.md | 2 +- .../prerenderingchange_event/index.md | 2 +- .../web/api/speculation_rules_api/index.md | 46 +++++++++++-------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/files/en-us/web/api/document/prerendering/index.md b/files/en-us/web/api/document/prerendering/index.md index f98af5c2b919675..d655e09206ab242 100644 --- a/files/en-us/web/api/document/prerendering/index.md +++ b/files/en-us/web/api/document/prerendering/index.md @@ -10,7 +10,7 @@ browser-compat: api.Document.prerendering {{ APIRef("Speculation Rules API") }}{{seecompattable}} -The `prerendering` read-only property of the {{domxref("Document")}} interface returns `true` if the document is currently in the process of prerendering, as initiated via the [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API). +The **`prerendering`** read-only property of the {{domxref("Document")}} interface returns `true` if the document is currently in the process of prerendering, as initiated via the [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API). ## Value diff --git a/files/en-us/web/api/document/prerenderingchange_event/index.md b/files/en-us/web/api/document/prerenderingchange_event/index.md index 7224ef277c01492..affe9ca920e271f 100644 --- a/files/en-us/web/api/document/prerenderingchange_event/index.md +++ b/files/en-us/web/api/document/prerenderingchange_event/index.md @@ -10,7 +10,7 @@ browser-compat: api.Document.prerenderingchange_event {{ APIRef("Speculation Rules API") }}{{seecompattable}} -The `prerenderingchange` event is fired on a prerendered document when it is activated (i.e. the user views the page). +The **`prerenderingchange`** event is fired on a prerendered document when it is activated (i.e. the user views the page). ## Syntax diff --git a/files/en-us/web/api/speculation_rules_api/index.md b/files/en-us/web/api/speculation_rules_api/index.md index 415c11f9e45f7f8..db2a9c4bc807592 100644 --- a/files/en-us/web/api/speculation_rules_api/index.md +++ b/files/en-us/web/api/speculation_rules_api/index.md @@ -4,7 +4,13 @@ slug: Web/API/Speculation_Rules_API page-type: web-api-overview status: - experimental -browser-compat: html.elements.script.type.speculationrules +browser-compat: + - api.Document.prerendering + - api.Document.prerenderingchange_event + - html.elements.script.type.speculationrules +spec-urls: + - https://wicg.github.io/nav-speculation/speculation-rules.html + - https://wicg.github.io/nav-speculation/prerendering.html --- {{SeeCompatTable}}{{DefaultAPISidebar("Speculation Rules API")}} @@ -42,11 +48,11 @@ For example: ``` -You specify a different array to contain the rules for each speculative loading type (for example `"prerender"` or `"prefetch"`). Each rule is contained in an object that specifies for example a list of resources to be fetched, plus options such as an explicit [`Referrer-Policy`](/en-US/docs/Web/HTTP/Headers/Referrer-Policy) setting for each rule. Note that prerendered URLs are also prefetched. +You specify a different array to contain the rules for each speculative loading type (for example `"prerender"` or `"prefetch"`). Each rule is contained in an object that specifies for example a list of resources to be fetched, plus options such as an explicit {{httpheader("Referrer-Policy")}} setting for each rule. Note that prerendered URLs are also prefetched. See [``](/en-US/docs/Web/HTML/Element/script/type/speculationrules) +- [``](/en-US/docs/Web/HTML/Element/script/type/speculationrules) {{experimental_inline}} - : Used to define a set of prefetch and/or prerender speculation rules on the current document. ## Examples From 3214a3e918ae71cc29290b689306db37ca2dbf6a Mon Sep 17 00:00:00 2001 From: Sam Feldstein <106436328+seldstein@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:01:04 -0600 Subject: [PATCH 042/113] Edit index.md for clarity (#31814) Update index.md Edit for clarity. --- files/en-us/web/css/top/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/top/index.md b/files/en-us/web/css/top/index.md index f01cc8eb42fa7ad..855715091e9dc77 100644 --- a/files/en-us/web/css/top/index.md +++ b/files/en-us/web/css/top/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.top {{CSSRef}} -The **`top`** [CSS](/en-US/docs/Web/CSS) property participates in specifying the vertical position of a [positioned element](/en-US/docs/Web/CSS/position). It has no effect on non-positioned elements. +The **`top`** [CSS](/en-US/docs/Web/CSS) property sets the vertical position of a [positioned element](/en-US/docs/Web/CSS/position). It does not effect non-positioned elements. {{EmbedInteractiveExample("pages/css/top.html")}} From ebf153213b41f315eb9e6aa5f1978c08b16ca1f5 Mon Sep 17 00:00:00 2001 From: Frances Cornwall <113309999+francescorn@users.noreply.github.com> Date: Fri, 19 Jan 2024 12:12:08 -0800 Subject: [PATCH 043/113] Update index.md including each root font-relative length (#31811) * Update index.md * Update index.md * Update files/en-us/web/css/css_values_and_units/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix lint issue --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl --- files/en-us/web/css/css_values_and_units/index.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_values_and_units/index.md b/files/en-us/web/css/css_values_and_units/index.md index e518c289b9758b3..ba878aa90ab0aa1 100644 --- a/files/en-us/web/css/css_values_and_units/index.md +++ b/files/en-us/web/css/css_values_and_units/index.md @@ -137,7 +137,7 @@ Where a distance unit, also known as a length, is allowed as a value for a prope There are two types of relative lengths: font-relative lengths and viewport-percentage lengths. These both come in two types. Font-relative length units are either local font-relative or root font-relative. Viewport percentage lengths are either relative to the viewport height or width size or, as defined in the [CSS Containment module](/en-US/docs/Web/CSS/CSS_containment), relative to a [container](/en-US/docs/Web/CSS/CSS_container_queries#container_query_length_units). -##### Font-relative lengths +##### Local font-relative lengths Local font-relative lengths are relative to the "local" font size or line height, specifying a length in relation to a computed size of a feature of the [element](/en-US/docs/Web/HTML/Element) itself, or relative to the element's inherited value in the case of a circular reference, such as the `em` value for a {{cssxref("font-size")}} property or a `lh` value for a {{cssxref("line-height")}} property. For example, `em` is relative to the font size on the element and `ex` is relative to the x-height of the element's font. @@ -151,9 +151,20 @@ For example, `em` is relative to the font size on the element and `ex` is relati | `ic` | Average character advance of a full-width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph. | | `lh` | Line height of the element. | +##### Root font-relative lengths + Root font-relative lengths specify a length in relation to the element's {{CSSxRef(":root", "root element")}} ancestor, such as {{HTMLElement("HTML")}} or {{SVGElement("SVG")}}. For example, `rem` is relative to the font size on the root element and `rex` is the x-height of the root element's font. +| Unit | Relative to | +| ------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `rcap` | Cap height (the nominal height of capital letters) of the root element's font. | +| `rch` | Average character advance of a narrow glyph in the root element's font, as represented by the "0" (ZERO, U+0030) glyph. | +| `rem` | Font size of the root element's font. | +| `rex` | x-height of the root element's font. | +| `ric` | Average character advance of a full-width glyph in the root element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph. | +| `rlh` | Line height of the root element. | + ##### Viewport units Viewport unit lengths specify a length relative to the dimensions of the [viewport](/en-US/docs/Glossary/Viewport). @@ -189,6 +200,7 @@ For example, `cqw` is relative to the width of the query container and `cqh` is | `cqw` | 1% of a query container's width | #### Absolute length units + Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, `mm` is a physical millimeter, 1/10th of a centimeter. | Unit | Name | Equivalent to | From fd4a5c3107826fe3689a0432ba56b3eba00a5f90 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 19 Jan 2024 15:14:33 -0500 Subject: [PATCH 044/113] docs(css): Add module landing page for overscroll behavior (#30981) * add new overscroll module * fix typo * fix flaws * fix flaw, add links to modules * fixes scroll chaining feedback * adds link to the scroll chaining glossary page * fixes review comments, wip * updates related concepts and see also * adds intro paras * fixes review feedback * adds edits from feedback * updates related concepts from feedback --- files/en-us/glossary/scroll_boundary/index.md | 28 +++++++ files/en-us/glossary/scroll_chaining/index.md | 20 +++++ .../web/css/css_overscroll_behavior/index.md | 80 +++++++++++++++++++ .../css/overscroll-behavior-block/index.md | 2 +- .../css/overscroll-behavior-inline/index.md | 2 +- .../web/css/overscroll-behavior-x/index.md | 2 +- .../web/css/overscroll-behavior-y/index.md | 2 +- .../web/css/overscroll-behavior/index.md | 4 +- 8 files changed, 134 insertions(+), 6 deletions(-) create mode 100644 files/en-us/glossary/scroll_boundary/index.md create mode 100644 files/en-us/glossary/scroll_chaining/index.md create mode 100644 files/en-us/web/css/css_overscroll_behavior/index.md diff --git a/files/en-us/glossary/scroll_boundary/index.md b/files/en-us/glossary/scroll_boundary/index.md new file mode 100644 index 000000000000000..2c22bfa67e96faf --- /dev/null +++ b/files/en-us/glossary/scroll_boundary/index.md @@ -0,0 +1,28 @@ +--- +title: Scroll boundary +slug: Glossary/Scroll_boundary +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +A **scroll boundary** is the point at which a scrollable element cannot be scrolled any further in a particular direction, either at the top or bottom (or left/right for horizontal scrolling). This typically is the edge of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport). + +When the content of a {{Glossary("Scroll_container", "scroll container")}} does not exceed the container size in the scrolling direction, the container is considered to be at its scroll boundary at all times. This is because there's no extra content to scroll through. If the content is prevented from scrolling, such as when {{cssxref("overflow", "overflow: hidden")}} is set, the element is not a scroll container, and therefore, there is no scroll boundary. + +When the scroll boundary of the scrollport is reached by a user scrolling the content, a visual effect such as a bounce or a functional action like pull-to-refresh on mobile devices may occur. This default browser behavior is called the **boundary default action**. + +For example, on mobile devices, dragging a page downward when already at the top causes a bounce effect and sometimes triggers a page refresh. This bounce or refresh is the boundary default action. + +Boundary default actions can be local or non-local. + +- A **local boundary default** is the action that occurring at the boundary of a specific scrollable area confined to that element. This action is considered _local_ as it does not affect any ancestor containers or the rest of the webpage. + +- A **non-local boundary default action** is when reaching the scroll boundary of a scroll container has effects beyond the specific element being scrolled. An example of this is {{Glossary("Scroll_chaining", "scroll chaining")}}, where reaching the scroll boundary of one element triggers scrolling in a parent or ancestor element, and possibly even initiating a page-wide action, such as navigation. + +## See also + +- {{CSSxRef("overscroll-behavior")}} CSS property +- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module +- [CSS overscroll behavior](/en-US/docs/Web/CSS/CSS_overscroll_behavior) module +- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module diff --git a/files/en-us/glossary/scroll_chaining/index.md b/files/en-us/glossary/scroll_chaining/index.md new file mode 100644 index 000000000000000..65c6c1fa131e02c --- /dev/null +++ b/files/en-us/glossary/scroll_chaining/index.md @@ -0,0 +1,20 @@ +--- +title: Scroll chaining +slug: Glossary/Scroll_chaining +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Scroll chaining** refers to the behavior observed when a user scrolls past the {{Glossary("Scroll_boundary", "Scroll boundary")}} of a scrollable element, causing scrolling on an ancestor element. + +When a user scrolls within a scrollable element such as a `
` or `

- +

diff --git a/files/en-us/web/html/element/input/checkbox/index.md b/files/en-us/web/html/element/input/checkbox/index.md index b64f82f4947891d..62ed6a39a544676 100644 --- a/files/en-us/web/html/element/input/checkbox/index.md +++ b/files/en-us/web/html/element/input/checkbox/index.md @@ -41,7 +41,7 @@ If the `value` attribute was omitted, the default value for the checkbox is `on` ## Additional attributes -In addition to the common attributes shared by all {{HTMLElement("input")}} elements, "`checkbox`" inputs support the following attributes. +In addition to the [common attributes](/en-US/docs/Web/HTML/Element/input#attributes) shared by all {{HTMLElement("input")}} elements, "`checkbox`" inputs support the following attributes. - `checked` From 893fa1f55fe2ae8366d0ac85f936c0ee228d9a63 Mon Sep 17 00:00:00 2001 From: Emily Rohrbough Date: Tue, 23 Jan 2024 01:40:20 -0600 Subject: [PATCH 081/113] fix: correct CSS.escape() example results (#31637) --- files/en-us/web/api/css/escape_static/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/css/escape_static/index.md b/files/en-us/web/api/css/escape_static/index.md index 5b482974b4e8b70..e13fb4de1d1134e 100644 --- a/files/en-us/web/api/css/escape_static/index.md +++ b/files/en-us/web/api/css/escape_static/index.md @@ -32,10 +32,10 @@ The escaped string. ### Basic results ```js-nolint -CSS.escape(".foo#bar"); // "\.foo\#bar" -CSS.escape("()[]{}"); // "\(\)\[\]\\{\\}" +CSS.escape(".foo#bar"); // "\\.foo\\#bar" +CSS.escape("()[]{}"); // "\\(\\)\\[\\]\\{\\}" CSS.escape('--a'); // "--a" -CSS.escape(0); // "\30 ", the Unicode code point of '0' is 30 +CSS.escape(0); // "\\30 ", the Unicode code point of '0' is 30 CSS.escape('\0'); // "\ufffd", the Unicode REPLACEMENT CHARACTER ``` From 430d8e64a95e538a6483f9e02a114216f0b82f24 Mon Sep 17 00:00:00 2001 From: Tristan Fraipont Date: Tue, 23 Jan 2024 16:42:58 +0900 Subject: [PATCH 082/113] Remove misleading note about reflow in createDocumentFragment (#30650) --- files/en-us/web/api/document/createdocumentfragment/index.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/document/createdocumentfragment/index.md b/files/en-us/web/api/document/createdocumentfragment/index.md index 81006df0d9acc0e..95a7864d4269d24 100644 --- a/files/en-us/web/api/document/createdocumentfragment/index.md +++ b/files/en-us/web/api/document/createdocumentfragment/index.md @@ -34,9 +34,8 @@ elements to the document fragment and then append the document fragment to the D In the DOM tree, the document fragment is replaced by all its children. Since the document fragment is _in memory_ and not part of the main DOM tree, -appending children to it does not cause page [reflow](https://developers.google.com/speed/docs/insights/browser-reflow?csw=1) -(computation of element's position and geometry). Historically, using document fragments -could result in [better performance](https://johnresig.com/blog/dom-documentfragments/). +using document fragments could result in [better performance](https://johnresig.com/blog/dom-documentfragments/) +in some older engines. You can also use the `DocumentFragment` constructor to create a new fragment: From 4feae65415aa62ec68a73fa0a28e9def845f5657 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 23 Jan 2024 17:11:39 +0800 Subject: [PATCH 083/113] init documentation for `HTMLVideoElement.{width,height}` (#31664) * add docs * update * adjust property order * add links * Update files/en-us/web/api/htmlvideoelement/index.md Co-authored-by: Jean-Yves Perrier * feat: add example * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update desc --------- Co-authored-by: Jean-Yves Perrier Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/api/htmlcanvaselement/height/index.md | 3 ++ .../web/api/htmlcanvaselement/width/index.md | 3 ++ .../web/api/htmlimageelement/height/index.md | 6 +++ .../web/api/htmlimageelement/width/index.md | 6 +++ .../web/api/htmlobjectelement/height/index.md | 6 +++ .../web/api/htmlobjectelement/width/index.md | 6 +++ .../web/api/htmlvideoelement/height/index.md | 40 +++++++++++++++++++ files/en-us/web/api/htmlvideoelement/index.md | 4 +- .../web/api/htmlvideoelement/width/index.md | 40 +++++++++++++++++++ 9 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/htmlvideoelement/height/index.md create mode 100644 files/en-us/web/api/htmlvideoelement/width/index.md diff --git a/files/en-us/web/api/htmlcanvaselement/height/index.md b/files/en-us/web/api/htmlcanvaselement/height/index.md index 4fd1f08c2ecd40f..a1f9f07d7e937ba 100644 --- a/files/en-us/web/api/htmlcanvaselement/height/index.md +++ b/files/en-us/web/api/htmlcanvaselement/height/index.md @@ -48,3 +48,6 @@ 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("HTMLImageElement.width")}} +- {{domxref("HTMLObjectElement.width")}} +- {{domxref("HTMLVideoElement.width")}} diff --git a/files/en-us/web/api/htmlcanvaselement/width/index.md b/files/en-us/web/api/htmlcanvaselement/width/index.md index 1913135358aaac7..48d7fb6c156f830 100644 --- a/files/en-us/web/api/htmlcanvaselement/width/index.md +++ b/files/en-us/web/api/htmlcanvaselement/width/index.md @@ -48,3 +48,6 @@ console.log(canvas.width); // 300 - {{domxref("HTMLCanvasElement")}}: Interface used to define the `HTMLCanvasElement.width` property - {{domxref("HTMLCanvasElement.height")}}: Other property used to control the size of the canvas +- {{domxref("HTMLImageElement.width")}} +- {{domxref("HTMLObjectElement.width")}} +- {{domxref("HTMLVideoElement.width")}} diff --git a/files/en-us/web/api/htmlimageelement/height/index.md b/files/en-us/web/api/htmlimageelement/height/index.md index 9b479bc9f6c4f1a..28d749a0c39e79c 100644 --- a/files/en-us/web/api/htmlimageelement/height/index.md +++ b/files/en-us/web/api/htmlimageelement/height/index.md @@ -79,3 +79,9 @@ This example may be easier to try out {{LiveSampleLink('Examples', 'in its own w ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLCanvasElement.height")}} +- {{domxref("HTMLObjectElement.height")}} +- {{domxref("HTMLVideoElement.height")}} diff --git a/files/en-us/web/api/htmlimageelement/width/index.md b/files/en-us/web/api/htmlimageelement/width/index.md index c27d2ce70114985..7567d40b8a2c6fb 100644 --- a/files/en-us/web/api/htmlimageelement/width/index.md +++ b/files/en-us/web/api/htmlimageelement/width/index.md @@ -82,3 +82,9 @@ This example may be easier to try out {{LiveSampleLink('Examples', 'in its own w ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLCanvasElement.width")}} +- {{domxref("HTMLObjectElement.width")}} +- {{domxref("HTMLVideoElement.width")}} diff --git a/files/en-us/web/api/htmlobjectelement/height/index.md b/files/en-us/web/api/htmlobjectelement/height/index.md index 3df5f9bf0cee7b3..45dfcbd8948d4aa 100644 --- a/files/en-us/web/api/htmlobjectelement/height/index.md +++ b/files/en-us/web/api/htmlobjectelement/height/index.md @@ -24,3 +24,9 @@ A string. ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLCanvasElement.height")}} +- {{domxref("HTMLImageElement.height")}} +- {{domxref("HTMLVideoElement.height")}} diff --git a/files/en-us/web/api/htmlobjectelement/width/index.md b/files/en-us/web/api/htmlobjectelement/width/index.md index 3fde8261a4165b7..878e1bc741dacdd 100644 --- a/files/en-us/web/api/htmlobjectelement/width/index.md +++ b/files/en-us/web/api/htmlobjectelement/width/index.md @@ -24,3 +24,9 @@ A string. ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLCanvasElement.width")}} +- {{domxref("HTMLImageElement.width")}} +- {{domxref("HTMLVideoElement.width")}} diff --git a/files/en-us/web/api/htmlvideoelement/height/index.md b/files/en-us/web/api/htmlvideoelement/height/index.md new file mode 100644 index 000000000000000..4ee4a8021185e59 --- /dev/null +++ b/files/en-us/web/api/htmlvideoelement/height/index.md @@ -0,0 +1,40 @@ +--- +title: "HTMLVideoElement: height property" +short-title: height +slug: Web/API/HTMLVideoElement/height +page-type: web-api-instance-property +browser-compat: api.HTMLVideoElement.height +--- + +{{APIRef("HTML DOM")}} + +The **`height`** property of the {{domxref("HTMLVideoElement")}} interface returns an integer that reflects the `height` attribute of the {{HTMLElement("video")}} element, specifying the displayed height of the resource in CSS pixels. + +## Value + +A positive integer or 0. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("media"); +console.log(el.height); // Output: 600 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLCanvasElement.height")}} +- {{domxref("HTMLImageElement.height")}} +- {{domxref("HTMLObjectElement.height")}} diff --git a/files/en-us/web/api/htmlvideoelement/index.md b/files/en-us/web/api/htmlvideoelement/index.md index f87645d755dd6fb..3442dc2634e8585 100644 --- a/files/en-us/web/api/htmlvideoelement/index.md +++ b/files/en-us/web/api/htmlvideoelement/index.md @@ -17,6 +17,8 @@ The list of [supported media formats](/en-US/docs/Web/Media/Formats) varies from _Inherits properties from its parent interface, {{domxref("HTMLMediaElement")}}, and {{domxref("HTMLElement")}}._ +- {{DOMxRef("HTMLVideoElement.disablePictureInPicture")}} + - : Indicates if the user agent should suggest the picture-in-picture to users, or not. - {{domxref("HTMLVideoElement.height")}} - : A string that reflects the [`height`](/en-US/docs/Web/HTML/Element/video#height) HTML attribute, which specifies the height of the display area, in CSS pixels. - {{domxref("HTMLVideoElement.poster")}} @@ -27,8 +29,6 @@ _Inherits properties from its parent interface, {{domxref("HTMLMediaElement")}}, - : Returns an unsigned integer value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet. - {{domxref("HTMLVideoElement.width")}} - : A string that reflects the [`width`](/en-US/docs/Web/HTML/Element/video#width) HTML attribute, which specifies the width of the display area, in CSS pixels. -- {{DOMxRef("HTMLVideoElement.disablePictureInPicture")}} - - : The `disablePictureInPicture` property will hint the user agent to not suggest the picture-in-picture to users or to request it automatically ### Gecko-specific properties diff --git a/files/en-us/web/api/htmlvideoelement/width/index.md b/files/en-us/web/api/htmlvideoelement/width/index.md new file mode 100644 index 000000000000000..c203cd255bcccd6 --- /dev/null +++ b/files/en-us/web/api/htmlvideoelement/width/index.md @@ -0,0 +1,40 @@ +--- +title: "HTMLVideoElement: width property" +short-title: width +slug: Web/API/HTMLVideoElement/width +page-type: web-api-instance-property +browser-compat: api.HTMLVideoElement.width +--- + +{{APIRef("HTML DOM")}} + +The **`width`** property of the {{domxref("HTMLVideoElement")}} interface returns an integer that that reflects the `width` attribute of the {{HTMLElement("video")}} element, specifying the displayed width of the resource in CSS pixels. + +## Value + +A positive integer or 0. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("media"); +console.log(el.width); // Output: 800 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLCanvasElement.width")}} +- {{domxref("HTMLImageElement.width")}} +- {{domxref("HTMLObjectElement.width")}} From 95161dc9c55b00492fbfff1f92bf478ab900d475 Mon Sep 17 00:00:00 2001 From: Emma <48389529+emjogale@users.noreply.github.com> Date: Tue, 23 Jan 2024 09:31:25 +0000 Subject: [PATCH 084/113] Change code block language from pug to js (#31851) Update index.md Change file type to js from PUG in model-virtual due back date --- .../express_nodejs/forms/create_bookinstance_form/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md b/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md index c86179cb11e3cf5..b6a94a3b9aefb91 100644 --- a/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md +++ b/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md @@ -163,7 +163,7 @@ The `due_back_yyyy_mm_dd()` method is added to the `BookInstance` model in the n Open the file where you defined the `BookInstanceSchema` model (**models/bookinstance.js**). Add the `due_back_yyyy_mm_dd()` virtual function shown below (after the `due_back_formatted()` virtual function): -```pug +```js BookInstanceSchema.virtual("due_back_yyyy_mm_dd").get(function () { return DateTime.fromJSDate(this.due_back).toISODate(); // format 'YYYY-MM-DD' }); From f73eb97bdbdf8866f1c1e0168af2e1f1a99209ed Mon Sep 17 00:00:00 2001 From: Jimmy Ho Date: Tue, 23 Jan 2024 17:36:56 +0800 Subject: [PATCH 085/113] Update css var sample (#31855) Update index.md remove the error sample Co-authored-by: Chris Mills --- files/en-us/web/css/var/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/css/var/index.md b/files/en-us/web/css/var/index.md index 3f523e0bd84f69d..a6499d91e35212c 100644 --- a/files/en-us/web/css/var/index.md +++ b/files/en-us/web/css/var/index.md @@ -23,7 +23,6 @@ var(--custom-prop); var(--custom-prop,); /* empty value as fallback */ var(--custom-prop, initial); /* initial value of the property as fallback */ var(--custom-prop, #FF0000); -var(--my-background, linear-gradient(transparent, aqua), pink); var(--custom-prop, var(--default-value)); var(--custom-prop, var(--default-value, red)); ``` From 40b5a5bf991ce577be605e76fb2b3706342ed357 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 23 Jan 2024 17:45:45 +0800 Subject: [PATCH 086/113] Channel Messaging API | Add {{AvailableInWorkers}} tag & fix apiref (#31807) * move section * fix macros * update using macros * fix apiref * content update * add {{AvailableInWorkers}} * specific spec-urls * update api summary title --- .../en-us/web/api/channel_messaging_api/index.md | 5 +++-- files/en-us/web/api/messagechannel/index.md | 16 ++++++++-------- .../api/messagechannel/messagechannel/index.md | 8 ++++---- .../en-us/web/api/messagechannel/port1/index.md | 4 ++-- .../en-us/web/api/messagechannel/port2/index.md | 6 +++--- files/en-us/web/api/messageport/close/index.md | 2 +- files/en-us/web/api/messageport/index.md | 4 +++- .../web/api/messageport/message_event/index.md | 6 ++++-- .../api/messageport/messageerror_event/index.md | 6 ++++-- .../web/api/messageport/postmessage/index.md | 2 +- files/en-us/web/api/messageport/start/index.md | 2 +- 11 files changed, 34 insertions(+), 27 deletions(-) diff --git a/files/en-us/web/api/channel_messaging_api/index.md b/files/en-us/web/api/channel_messaging_api/index.md index 6ae3b9fd6114564..901e5168e9ddce6 100644 --- a/files/en-us/web/api/channel_messaging_api/index.md +++ b/files/en-us/web/api/channel_messaging_api/index.md @@ -5,6 +5,7 @@ page-type: web-api-overview browser-compat: - api.MessageChannel - api.MessagePort +spec-urls: https://html.spec.whatwg.org/multipage/web-messaging.html#channel-messaging --- {{DefaultAPISidebar("Channel Messaging API")}} @@ -13,7 +14,7 @@ The **Channel Messaging API** allows two separate scripts running in different b {{AvailableInWorkers}} -## Channel messaging concepts and usage +## Concepts and usage A message channel is created using the {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} constructor. Once created, the two ports of the channel can be accessed through the {{domxref("MessageChannel.port1")}} and {{domxref("MessageChannel.port2")}} properties (which both return {{domxref("MessagePort")}} objects.) The app that created the channel uses `port1`, and the app at the other end of the port uses `port2` — you send a message to `port2`, and transfer the port over to the other browsing context using {{domxref("window.postMessage")}} along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.) @@ -25,7 +26,7 @@ When you want to stop sending messages down the channel, you can invoke {{domxre Find out more about how to use this API in [Using channel messaging](/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging). -## Channel messaging interfaces +## Interfaces - {{domxref("MessageChannel")}} - : Creates a new message channel to send messages across. diff --git a/files/en-us/web/api/messagechannel/index.md b/files/en-us/web/api/messagechannel/index.md index ee18b3e35a9b70b..9ed1a480fc7ca9d 100644 --- a/files/en-us/web/api/messagechannel/index.md +++ b/files/en-us/web/api/messagechannel/index.md @@ -5,12 +5,17 @@ page-type: web-api-interface browser-compat: api.MessageChannel --- -{{APIRef("HTML DOM")}} +{{APIRef("Channel Messaging API")}} The **`MessageChannel`** interface of the [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API) allows us to create a new message channel and send data through it via its two {{domxref("MessagePort")}} properties. {{AvailableInWorkers}} +## Constructor + +- {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} + - : Returns a new `MessageChannel` object with two new {{domxref("MessagePort")}} objects. + ## Instance properties - {{domxref("MessageChannel.port1")}} {{ReadOnlyInline}} @@ -18,16 +23,11 @@ The **`MessageChannel`** interface of the [Channel Messaging API](/en-US/docs/We - {{domxref("MessageChannel.port2")}} {{ReadOnlyInline}} - : Returns port2 of the channel. -## Constructor - -- {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} - - : Returns a new `MessageChannel` object with two new {{domxref("MessagePort")}} objects. - ## Example -In the following example, you can see a new channel being created using the {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} constructor. +In the following example, you can see a new channel being created using the {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} constructor. -When the IFrame has loaded, we register an `onmessage` handler for {{domxref("MessageChannel.port1")}} and transfer {{domxref("MessageChannel.port2")}} to the IFrame using the {{domxref("window.postMessage")}} method along with a message. +When the IFrame has loaded, we register an {{domxref("MessagePort/message_event","onmessage")}} handler for {{domxref("MessageChannel.port1")}} and transfer {{domxref("MessageChannel.port2")}} to the IFrame using the {{domxref("window.postMessage")}} method along with a message. When a message is received back from the IFrame, the `onMessage` function outputs the message to a paragraph. diff --git a/files/en-us/web/api/messagechannel/messagechannel/index.md b/files/en-us/web/api/messagechannel/messagechannel/index.md index 18d757ae60c3730..2e9fd7a3b5d8bd0 100644 --- a/files/en-us/web/api/messagechannel/messagechannel/index.md +++ b/files/en-us/web/api/messagechannel/messagechannel/index.md @@ -6,9 +6,9 @@ page-type: web-api-constructor browser-compat: api.MessageChannel.MessageChannel --- -{{APIRef("HTML DOM")}} +{{APIRef("Channel Messaging API")}} -The `MessageChannel()` constructor of the {{domxref("MessageChannel")}} +The **`MessageChannel()`** constructor of the {{domxref("MessageChannel")}} interface returns a new {{domxref("MessageChannel")}} object with two new {{domxref("MessagePort")}} objects. @@ -31,9 +31,9 @@ A new {{domxref("MessageChannel")}} object. ## Examples In the following code block, you can see a new channel being created using the -{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} constructor. +`MessageChannel()` constructor. When the {{HTMLElement("iframe")}} has loaded, -we pass `port2` to the ` +``` + +```js +const el = document.getElementById("el"); +console.log(el.name); // Output: "example" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} From f7c186696980fee97e72261370d7b5a8c1cd9302 Mon Sep 17 00:00:00 2001 From: James <36278229+FormularSumo@users.noreply.github.com> Date: Wed, 24 Jan 2024 07:31:47 +0000 Subject: [PATCH 103/113] Update remaining `rgba()`/`hsla()` occurences to use latest syntax (#31827) * Update remaining rgba() functions to use new sntax * Update all rgb() / hsl() occurrences to use latest syntax --- .../create_the_canvas_and_draw_on_it/index.md | 6 +++--- files/en-us/glossary/alpha/index.md | 2 +- .../building_blocks/events/index.md | 18 ++++++++--------- .../drawing_graphics/index.md | 20 +++++++++---------- .../fetching_data/fetch-update.svg | 2 +- .../first_steps/what_is_javascript/index.md | 8 ++++---- .../objects/object_building_practice/index.md | 2 +- .../html_and_css/index.md | 12 +++++------ .../code_style_guide/index.md | 4 ++-- .../action/setbadgebackgroundcolor/index.md | 2 +- .../api/action/setbadgetextcolor/index.md | 2 +- .../setbadgebackgroundcolor/index.md | 2 +- .../browseraction/setbadgetextcolor/index.md | 2 +- .../manifest.json/theme/index.md | 16 +++++++-------- files/en-us/related/imsc/basics/index.md | 4 ++-- 15 files changed, 51 insertions(+), 51 deletions(-) diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index bffb99ff63ef1a1..0b724bcf528da05 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -86,19 +86,19 @@ As you can see we're using the {{domxref("CanvasRenderingContext2D.beginPath()", - start angle and end angle (what angle to start and finish drawing the circle, in radians) - direction of drawing (`false` for clockwise, the default, or `true` for anti-clockwise.) This last parameter is optional. -The {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} property looks different than before. This is because, just as with CSS, color can be specified as a hexadecimal value, a color keyword, the `rgba()` function, or any of the other available color methods. +The {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} property looks different than before. This is because, just as with CSS, color can be specified as a hexadecimal value, a color keyword, the `rgb()` function, or any of the other available color methods. Instead of using {{domxref("CanvasRenderingContext2D.fill()","fill()")}} and filling the shapes with colors, we can use {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} to only color the outer stroke. Try adding this code to your JavaScript too: ```js ctx.beginPath(); ctx.rect(160, 10, 100, 40); -ctx.strokeStyle = "rgba(0, 0, 255, 0.5)"; +ctx.strokeStyle = "rgb(0 0 255 / 50%)"; ctx.stroke(); ctx.closePath(); ``` -The code above prints a blue-stroked empty rectangle. Thanks to the alpha channel in the `rgba()` function, the blue color is semi transparent. +The code above prints a blue-stroked empty rectangle. Thanks to the alpha channel in the `rgb()` function, the blue color is semi transparent. ## Compare your code diff --git a/files/en-us/glossary/alpha/index.md b/files/en-us/glossary/alpha/index.md index 82e5c2874f91add..a977201ce7405ff 100644 --- a/files/en-us/glossary/alpha/index.md +++ b/files/en-us/glossary/alpha/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition The **alpha channel** specifies to opacity of a ({{CSSxRef("<color>")}}). Colors are represented in digital form as a collection of numbers, each representing the strength or intensity level of a given component of the color. Each of these components is called a **channel**. In a typical image file, the color channels describe how much red, green, and blue are used to make up the final color. To represent a color through which the background can be seen to some extent, a fourth channel is added to the color: the alpha channel. -For example, the color `#8921F2` (also described as `rgb(137 33 242)` or `hsl(270 89% 54)`) is a nice shade of purple. Below you see a small box of that color in the top-left corner and a box of the _same_ color but with an alpha channel set at 0.5 (50% opacity), `#8921F280`, where `80` is the hexadecimal equivalent of 50%. This color is also described as `rgb(137 33 242 / 0.5)` or `hsl(270 89% 54 / 0.5)`. The two boxes are drawn on top of a paragraph of text. +For example, the color `#8921F2` (also described as `rgb(137 33 242)` or `hsl(270 89% 54)`) is a nice shade of purple. Below you see a small box of that color in the top-left corner and a box of the _same_ color but with an alpha channel set at 50% (or 0.5) opacity, `#8921F280`, where `80` is the hexadecimal equivalent of 50%. This color is also described as `rgb(137 33 242 / 50%)` or `hsl(270 89% 54 / 50%)`. The two boxes are drawn on top of a paragraph of text. ![Image showing the effect of an alpha channel on a color.](alpha-channel-example.png) diff --git a/files/en-us/learn/javascript/building_blocks/events/index.md b/files/en-us/learn/javascript/building_blocks/events/index.md index 5165d80e8292742..0afb7c1294e6cf1 100644 --- a/files/en-us/learn/javascript/building_blocks/events/index.md +++ b/files/en-us/learn/javascript/building_blocks/events/index.md @@ -83,7 +83,7 @@ function random(number) { } btn.addEventListener("click", () => { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; }); ``` @@ -106,7 +106,7 @@ function random(number) { } btn.addEventListener("click", () => { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; }); ``` @@ -126,7 +126,7 @@ function random(number) { } function changeBackground() { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; } @@ -163,7 +163,7 @@ const controller = new AbortController(); btn.addEventListener("click", () => { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; }, { signal: controller.signal } // pass an AbortSignal to this handler @@ -215,7 +215,7 @@ function random(number) { } btn.onclick = () => { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; }; ``` @@ -230,7 +230,7 @@ function random(number) { } function bgChange() { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; } @@ -261,7 +261,7 @@ You might also see a pattern like this in your code: ```js function bgChange() { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; document.body.style.backgroundColor = rndCol; } ``` @@ -310,7 +310,7 @@ function random(number) { } function bgChange(e) { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; e.target.style.backgroundColor = rndCol; console.log(e); } @@ -736,7 +736,7 @@ function random(number) { } function bgChange() { - const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; + const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`; return rndCol; } diff --git a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md index 735b56d2b0d7cd2..6bc845ea72ad4b2 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -124,7 +124,7 @@ So that's it — our canvas is now primed and ready for drawing on! The `ctx` va Let's do one last thing before we move on. We'll color the canvas background black to give you a first taste of the canvas API. Add the following lines at the bottom of your JavaScript: ```js -ctx.fillStyle = "rgb(0, 0, 0)"; +ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); ``` @@ -148,7 +148,7 @@ Let's start with some simple rectangles. 2. Next, add the following lines to the bottom of your JavaScript: ```js - ctx.fillStyle = "rgb(255, 0, 0)"; + ctx.fillStyle = "rgb(255 0 0)"; ctx.fillRect(50, 50, 100, 150); ``` @@ -157,7 +157,7 @@ Let's start with some simple rectangles. 3. Let's add another rectangle into the mix — a green one this time. Add the following at the bottom of your JavaScript: ```js - ctx.fillStyle = "rgb(0, 255, 0)"; + ctx.fillStyle = "rgb(0 255 0)"; ctx.fillRect(75, 75, 100, 100); ``` @@ -179,7 +179,7 @@ So far we've looked at drawing filled rectangles, but you can also draw rectangl 1. Add the following to the previous example, again below the previous JavaScript lines: ```js - ctx.strokeStyle = "rgb(255, 255, 255)"; + ctx.strokeStyle = "rgb(255 255 255)"; ctx.strokeRect(25, 25, 175, 200); ``` @@ -212,7 +212,7 @@ We'll be using some common methods and properties across all of the below sectio A typical, simple path-drawing operation would look something like so: ```js -ctx.fillStyle = "rgb(255, 0, 0)"; +ctx.fillStyle = "rgb(255 0 0)"; ctx.beginPath(); ctx.moveTo(50, 50); // draw your path @@ -234,7 +234,7 @@ Let's draw an equilateral triangle on the canvas. 2. Next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. That's where we'll start drawing our triangle. ```js - ctx.fillStyle = "rgb(255, 0, 0)"; + ctx.fillStyle = "rgb(255 0 0)"; ctx.beginPath(); ctx.moveTo(50, 50); ``` @@ -274,7 +274,7 @@ Now let's look at how to draw a circle in canvas. This is accomplished using the 1. Let's add an arc to our canvas — add the following to the bottom of your code: ```js - ctx.fillStyle = "rgb(0, 0, 255)"; + ctx.fillStyle = "rgb(0 0 255)"; ctx.beginPath(); ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false); ctx.fill(); @@ -658,7 +658,7 @@ When the "Clear canvas" button is pressed, we run a simple function that clears ```js clearBtn.addEventListener("click", () => { - ctx.fillStyle = "rgb(0,0,0)"; + ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); }); ``` @@ -778,10 +778,10 @@ Let's look at a simple example of how to create something with a WebGL library. 8. Before we get to defining `draw()`, we'll add a couple of lights to the scene, to liven things up a bit; add the following blocks next: ```js - const light = new THREE.AmbientLight("rgb(255,255,255)"); // soft white light + const light = new THREE.AmbientLight("rgb(255 255 255)"); // soft white light scene.add(light); - const spotLight = new THREE.SpotLight("rgb(255,255,255)"); + const spotLight = new THREE.SpotLight("rgb(255 255 255)"); spotLight.position.set(100, 1000, 1000); spotLight.castShadow = true; scene.add(spotLight); diff --git a/files/en-us/learn/javascript/client-side_web_apis/fetching_data/fetch-update.svg b/files/en-us/learn/javascript/client-side_web_apis/fetching_data/fetch-update.svg index 438ba0e308fa77f..79c098fcc2a649f 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/fetching_data/fetch-update.svg +++ b/files/en-us/learn/javascript/client-side_web_apis/fetching_data/fetch-update.svg @@ -1 +1 @@ - Request page (HTML, JS, CSS, ...) Request data search
update page
update page search
update page
update pageText is not SVG - cannot display + Request page (HTML, JS, CSS, ...) Request data search
update page
update page search
update page
update pageText is not SVG - cannot display diff --git a/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md b/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md index 8270d175daef9e4..deae838993d528d 100644 --- a/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md +++ b/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md @@ -51,10 +51,10 @@ button { font-family: "helvetica neue", helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; - border: 2px solid rgb(200 200 0 / 0.6); - background-color: rgb(0 217 217 / 0.6); - color: rgb(100 0 0 / 1); - box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4); + border: 2px solid rgb(200 200 0 / 60%); + background-color: rgb(0 217 217 / 60%); + color: rgb(100 0 0 / 100%); + box-shadow: 1px 1px 2px rgb(0 0 200 / 40%); border-radius: 10px; padding: 3px 10px; cursor: pointer; diff --git a/files/en-us/learn/javascript/objects/object_building_practice/index.md b/files/en-us/learn/javascript/objects/object_building_practice/index.md index 61d6576aa7c59c3..15dd04e9ce559bd 100644 --- a/files/en-us/learn/javascript/objects/object_building_practice/index.md +++ b/files/en-us/learn/javascript/objects/object_building_practice/index.md @@ -74,7 +74,7 @@ function random(min, max) { } function randomRGB() { - return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`; + return `rgb(${random(0, 255)} ${random(0, 255)} ${random(0, 255)})`; } ``` diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md index 1fd3f0b20ca576b..14b4394ad5e67e6 100644 --- a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md +++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md @@ -164,20 +164,20 @@ button { /* … */ background-color: #ff0000; - background-color: rgb(255 0 0 / 1); + background-color: rgb(255 0 0 / 100%); box-shadow: - inset 1px 1px 3px rgb(255 255 255 / 0.4), - inset -1px -1px 3px rgb(0 0 0 / 0.4); + inset 1px 1px 3px rgb(255 255 255 / 40%), + inset -1px -1px 3px rgb(0 0 0 / 40%); } button:hover { - background-color: rgb(255 0 0 / 0.5); + background-color: rgb(255 0 0 / 50%); } button:active { box-shadow: - inset 1px 1px 3px rgb(0 0 0 / 0.4), - inset -1px -1px 3px rgb(255 255 255 / 0.4); + inset 1px 1px 3px rgb(0 0 0 / 40%), + inset -1px -1px 3px rgb(255 255 255 / 40%); } ``` diff --git a/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md b/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md index 36f28e6eaf98101..cd0209c8e93c691 100644 --- a/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md +++ b/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md @@ -138,8 +138,8 @@ These guidelines should be followed to ensure that the code examples you write d - Use `rgb()` for more complex colors (including semi-transparent ones): ```css example-good - color: rgb(0, 0, 0, 0.5); - color: rgb(248, 242, 230); + color: rgb(0 0 0 / 50%); + color: rgb(248 242 230); ``` - For hex colors, use the short form where relevant: diff --git a/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgebackgroundcolor/index.md b/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgebackgroundcolor/index.md index dc0f4c2d071cd17..b0783d485360d1d 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgebackgroundcolor/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgebackgroundcolor/index.md @@ -33,7 +33,7 @@ browser.action.setBadgeBackgroundColor( - : The color, specified as one of: - - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255,0,0)"`. If the string is not a valid color, the returned promise will be rejected and the background color won't be altered. + - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255 0 0)"`. If the string is not a valid color, the returned promise will be rejected and the background color won't be altered. - a `{{WebExtAPIRef('action.ColorArray')}}` object. - `null`. If a `tabId` is specified, it removes the tab-specific badge background color so that the tab inherits the global badge background color. Otherwise it reverts the global badge background color to the default value. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgetextcolor/index.md b/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgetextcolor/index.md index b23f286effda0e1..b47cd7a22ba9830 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgetextcolor/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/action/setbadgetextcolor/index.md @@ -29,7 +29,7 @@ browser.action.setBadgeTextColor( - : The color, specified as one of: - - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255,0,0)"`. If the string is not a valid color, the returned promise will be rejected and the text color won't be altered. + - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255 0 0)"`. If the string is not a valid color, the returned promise will be rejected and the text color won't be altered. - a `{{WebExtAPIRef('action.ColorArray')}}` object. - `null`. If a `tabId` is specified, it removes the tab-specific badge text color so that the tab inherits the global badge text color. Otherwise it reverts the global badge text color to the default value. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md b/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md index 1fe3c8c5038ab25..62f9a4644b256e5 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md @@ -31,7 +31,7 @@ browser.browserAction.setBadgeBackgroundColor( - : The color, specified as one of: - - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255,0,0)"`. If the string is not a valid color, the returned promise will be rejected and the background color won't be altered. + - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255 0 0)"`. If the string is not a valid color, the returned promise will be rejected and the background color won't be altered. - a `{{WebExtAPIRef('browserAction.ColorArray')}}` object. - `null`. If a `tabId` is specified, it removes the tab-specific badge background color so that the tab inherits the global badge background color. Otherwise it reverts the global badge background color to the default value. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md b/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md index e6109e029df364d..2220a3647b5bbbd 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md @@ -27,7 +27,7 @@ browser.browserAction.setBadgeTextColor( - : The color, specified as one of: - - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255,0,0)"`. If the string is not a valid color, the returned promise will be rejected and the text color won't be altered. + - a string: any CSS [\](/en-US/docs/Web/CSS/color_value) value, for example `"red"`, `"#FF0000"`, or `"rgb(255 0 0)"`. If the string is not a valid color, the returned promise will be rejected and the text color won't be altered. - a `{{WebExtAPIRef('browserAction.ColorArray')}}` object. - `null`. If a `tabId` is specified, it removes the tab-specific badge text color so that the tab inherits the global badge text color. Otherwise it reverts the global badge text color to the default value. diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md index 6d96f16b7b99e37..ad72466b14aec95 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md @@ -1005,10 +1005,10 @@ All these properties can be specified as either a string containing any valid [C 

 "theme": {
   "colors": {
-    "toolbar_field": "rgba(255, 255, 255, 0.91)",
-    "toolbar_field_text": "rgb(0, 100, 0)",
-    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
-    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+    "toolbar_field": "rgb(255 255 255 / 91%)",
+    "toolbar_field_text": "rgb(0 100 0)",
+    "toolbar_field_highlight": "rgb(180 240 180 / 90%)",
+    "toolbar_field_highlight_text": "rgb(0 80 0)"
   }
 }
@@ -1044,10 +1044,10 @@ All these properties can be specified as either a string containing any valid [C 
 "theme": {
   "colors": {
-    "toolbar_field": "rgba(255, 255, 255, 0.91)",
-    "toolbar_field_text": "rgb(0, 100, 0)",
-    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
-    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+    "toolbar_field": "rgb(255 255 255 / 91%)",
+    "toolbar_field_text": "rgb(0 100 0)",
+    "toolbar_field_highlight": "rgb(180 240 180 / 90%)",
+    "toolbar_field_highlight_text": "rgb(0 80 0)"
   }
 }
diff --git a/files/en-us/related/imsc/basics/index.md b/files/en-us/related/imsc/basics/index.md index 967108b37a650cc..1831d1e3186aae8 100644 --- a/files/en-us/related/imsc/basics/index.md +++ b/files/en-us/related/imsc/basics/index.md @@ -80,8 +80,8 @@ Try setting some other colors for the text and background colors: - Try other named colors like `lime` or `aqua`. - Use hexadecimal values like `#00ff00` or `#00ffff`. -- You can use other color schemes like `rgb(0,255,255)`. -- Finally, try semi-transparent variations, like `rgba(0,0,0, 80)`. +- You can use other color schemes like `rgb(0 255 255)`. +- Finally, try semi-transparent variations, like `rgb(0 0 0 / 80%)`. > **Note:** Don't worry for now about namespaces. We will explain the meaning of `xmlns:tts` and `tts:backgroundColor` in a separate guide. From 4d5e2c11f4b8cc32e54d2527d9576ed26ced9458 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Wed, 24 Jan 2024 10:32:48 +0300 Subject: [PATCH 104/113] Unify length, percentage and length-percentage links with `{{cssxref}}` macro usage (#31874) unify length, percentage and length-percentage links with {{cssxref}} macro usage --- .../backgrounds_and_borders/index.md | 4 +-- .../building_blocks/values_and_units/index.md | 16 ++++-------- .../mozilla/firefox/releases/119/index.md | 2 +- .../en-us/mozilla/firefox/releases/4/index.md | 6 ++--- .../letterspacing/index.md | 2 +- .../wordspacing/index.md | 2 +- .../web/api/htmlimageelement/sizes/index.md | 2 +- files/en-us/web/css/@property/index.md | 2 +- files/en-us/web/css/alpha-value/index.md | 2 +- files/en-us/web/css/box-shadow/index.md | 4 +-- files/en-us/web/css/clamp/index.md | 2 +- .../index.md | 2 +- .../css_images/using_css_gradients/index.md | 2 +- files/en-us/web/css/css_transforms/index.md | 6 ++--- .../web/css/gradient/conic-gradient/index.md | 2 +- .../web/css/gradient/radial-gradient/index.md | 4 +-- files/en-us/web/css/mod/index.md | 2 +- files/en-us/web/css/rem/index.md | 2 +- files/en-us/web/mathml/attribute/index.md | 26 +++++++++---------- files/en-us/web/mathml/element/mfrac/index.md | 2 +- .../web/mathml/element/mmultiscripts/index.md | 4 +-- files/en-us/web/mathml/element/mo/index.md | 8 +++--- .../en-us/web/mathml/element/mpadded/index.md | 10 +++---- .../en-us/web/mathml/element/mspace/index.md | 6 ++--- files/en-us/web/mathml/element/msub/index.md | 2 +- .../en-us/web/mathml/element/msubsup/index.md | 4 +-- files/en-us/web/mathml/element/msup/index.md | 2 +- .../en-us/web/mathml/element/mtable/index.md | 8 +++--- .../web/mathml/global_attributes/index.md | 2 +- files/en-us/web/mathml/values/index.md | 2 +- .../svg/attribute/transform-origin/index.md | 8 +++--- files/en-us/web/svg/content_type/index.md | 2 +- 32 files changed, 72 insertions(+), 78 deletions(-) diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index dc688dff9b70759..0729ebba179c217 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -88,7 +88,7 @@ The {{cssxref("background-repeat")}} property is used to control the tiling beha #### Sizing the background image -The _balloons.jpg_ image used in the initial background images example, is a large image that was cropped due to being larger than the element it is a background of. In this case we could use the {{cssxref("background-size")}} property, which can take [length](/en-US/docs/Web/CSS/length) or [percentage](/en-US/docs/Web/CSS/percentage) values, to size the image to fit inside the background. +The _balloons.jpg_ image used in the initial background images example, is a large image that was cropped due to being larger than the element it is a background of. In this case we could use the {{cssxref("background-size")}} property, which can take {{cssxref("length")}} or {{cssxref("percentage")}} values, to size the image to fit inside the background. You can also use keywords: @@ -123,7 +123,7 @@ You can use keywords such as `top` and `right` (look up the others on the {{cssx } ``` -And [Lengths](/en-US/docs/Web/CSS/length), and [percentages](/en-US/docs/Web/CSS/percentage): +And {{cssxref("length", "lengths")}}, and {{cssxref("percentage", "percentages")}}: ```css .box { diff --git a/files/en-us/learn/css/building_blocks/values_and_units/index.md b/files/en-us/learn/css/building_blocks/values_and_units/index.md index 35e12c28a2279e0..36248492fb16155 100644 --- a/files/en-us/learn/css/building_blocks/values_and_units/index.md +++ b/files/en-us/learn/css/building_blocks/values_and_units/index.md @@ -43,7 +43,7 @@ In this lesson, we will take a look at some of the most frequently used value ty ## What is a CSS value? -In CSS specifications and on the property pages here on MDN you will be able to spot value types as they will be surrounded by angle brackets, such as [``](/en-US/docs/Web/CSS/color_value) or [``](/en-US/docs/Web/CSS/length). When you see the value type `` as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the [``](/en-US/docs/Web/CSS/color_value) reference page. +In CSS specifications and on the property pages here on MDN you will be able to spot value types as they will be surrounded by angle brackets, such as [``](/en-US/docs/Web/CSS/color_value) or {{cssxref("length")}}. When you see the value type `` as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the [``](/en-US/docs/Web/CSS/color_value) reference page. > **Note:** You'll see CSS value types referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term _value_ refers to any particular expression supported by a value type that you choose to use. @@ -105,9 +105,7 @@ There are various numeric value types that you might find yourself using in CSS. A <dimension> is a <number> with a unit attached to it. For example, 45deg, 5s, or 10px. <dimension> is an umbrella - category that includes the - <length>, <angle><angle>, <time>, and
- + @@ -224,7 +224,7 @@ The following changes were made to the {{domxref("CanvasRenderingContext2D")}} i - The {{cssxref("overflow")}} property no longer applies to table-group elements (``, ``, and ``). - The `-moz-appearance` property now supports the `-moz-win-borderless-glass` value, which applies a borderless Aero Glass look to an element. - The [`-moz-device-pixel-ratio`](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#-moz-device-pixel-ratio) media feature has been added, allowing the use of the device pixels per CSS pixel ratio to be used in [Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). -- Gecko's handling of [CSS units](/en-US/docs/Web/CSS/length) has been revised to better match other browsers, and to more accurately translate absolute lengths into screen pixel counts based on the device's DPI. +- Gecko's handling of CSS {{cssxref("length")}} units has been revised to better match other browsers, and to more accurately translate absolute lengths into screen pixel counts based on the device's DPI. ### Graphics and video diff --git a/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md b/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md index 6938b1d1aeb37f4..55963eff6a55ba7 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md @@ -14,7 +14,7 @@ This corresponds to the CSS [`letter-spacing`](/en-US/docs/Web/CSS/letter-spacin ## Value -The letter spacing as a string in the [CSS length](/en-US/docs/Web/CSS/length) data format. +The letter spacing as a string in the CSS {{cssxref("length")}} data format. The default is `0px`. The property can be used to get or set the spacing. diff --git a/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md b/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md index 787ec948bd76893..89b2cf9eb2b1059 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md @@ -14,7 +14,7 @@ This corresponds to the CSS [`word-spacing`](/en-US/docs/Web/CSS/word-spacing) p ## Value -The word spacing as a string in the [CSS length](/en-US/docs/Web/CSS/length) data format. +The word spacing as a string in the CSS {{cssxref("length")}} data format. The default is `0px`. The property can be used to get or set the spacing. diff --git a/files/en-us/web/api/htmlimageelement/sizes/index.md b/files/en-us/web/api/htmlimageelement/sizes/index.md index 8dca0a3afedbaf3..45212ef6ef54ecf 100644 --- a/files/en-us/web/api/htmlimageelement/sizes/index.md +++ b/files/en-us/web/api/htmlimageelement/sizes/index.md @@ -37,7 +37,7 @@ details on how to construct a media condition. ### Source size values -The source size value is a [CSS length](/en-US/docs/Web/CSS/length). It may +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 diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md index 2d892887a402fbd..0a60d55cfb5d5c1 100644 --- a/files/en-us/web/css/@property/index.md +++ b/files/en-us/web/css/@property/index.md @@ -58,7 +58,7 @@ In this example, we define two custom properties, `--item-size` and `--item-colo ``` -The following code uses the CSS `@property` at-rule to define a custom property named `--item-size`. The property sets the initial value to `40%`, limiting valid values to [percentage](/en-US/docs/Web/CSS/percentage) values only. This means, when used as the value for an item's size, its size will always be relative to its parent's size. The property is inheritable. +The following code uses the CSS `@property` at-rule to define a custom property named `--item-size`. The property sets the initial value to `40%`, limiting valid values to {{cssxref("percentage")}} values only. This means, when used as the value for an item's size, its size will always be relative to its parent's size. The property is inheritable. ```css @property --item-size { diff --git a/files/en-us/web/css/alpha-value/index.md b/files/en-us/web/css/alpha-value/index.md index e17ff3c0da304be..172969ed69039cd 100644 --- a/files/en-us/web/css/alpha-value/index.md +++ b/files/en-us/web/css/alpha-value/index.md @@ -11,7 +11,7 @@ The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/C ## Syntax -The value of an `` is given as either a [``](/en-US/docs/Web/CSS/number) or a [``](/en-US/docs/Web/CSS/percentage). +The value of an `` is given as either a [``](/en-US/docs/Web/CSS/number) or a {{cssxref("percentage")}}. If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are [clamped]() to lie within the range 0 to 1. diff --git a/files/en-us/web/css/box-shadow/index.md b/files/en-us/web/css/box-shadow/index.md index 6877695148cfb0f..b0bd3b5fa46da99 100644 --- a/files/en-us/web/css/box-shadow/index.md +++ b/files/en-us/web/css/box-shadow/index.md @@ -52,7 +52,7 @@ box-shadow: unset; Specify a single box-shadow using: -- Two, three, or four [``](/en-US/docs/Web/CSS/length) values. +- Two, three, or four {{cssxref("length")}} values. - If only two values are given, they are interpreted as `` and `` values. - If a third value is given, it is interpreted as a ``. @@ -87,7 +87,7 @@ To specify multiple shadows, provide a comma-separated list of shadows. ### Interpolation -When animating shadows, such as when multiple shadow values on a box transition to new values on hover, the values are interpolated. {{Glossary("Interpolation")}} determines intermediate values of properties, such as the blur radius, spread radius, and color, as shadows transition. For each shadow in a list of shadows, the color, x, y, blur, and spread transition; the color as [``](/en-US/docs/Web/CSS/color_value), and the other values as [``](/en-US/docs/Web/CSS/length)s. +When animating shadows, such as when multiple shadow values on a box transition to new values on hover, the values are interpolated. {{Glossary("Interpolation")}} determines intermediate values of properties, such as the blur radius, spread radius, and color, as shadows transition. For each shadow in a list of shadows, the color, x, y, blur, and spread transition; the color as [``](/en-US/docs/Web/CSS/color_value), and the other values as {{cssxref("length")}}s. In interpolating multiple shadows between two comma-separated lists of multiple box shadows, the shadows are paired, in order, with interpolation occurring between paired shadows. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is `transparent`, and X, Y, and blur are `0`, with the inset, or lack of inset, being set to match. If in any pair of shadows, one has `inset` set and the other does not, the entire shadow list is uninterpolated; the shadows will change to the new values without an animating effect. diff --git a/files/en-us/web/css/clamp/index.md b/files/en-us/web/css/clamp/index.md index e372ca8b9535bfb..1db170c5c1236d4 100644 --- a/files/en-us/web/css/clamp/index.md +++ b/files/en-us/web/css/clamp/index.md @@ -74,7 +74,7 @@ The example adjusts the sizes of page elements in three ways: - the font size of paragraph text - the font size of heading text -In all three cases, the page uses a combination of a viewport-relative units ([`vw`](/en-US/docs/Web/CSS/length#vw) and [``](/en-US/docs/Web/CSS/percentage)), to set a size that varies with the viewport width, and a value that is not viewport relative ([`rem`](/en-US/docs/Web/CSS/length#rem) and [`px`](/en-US/docs/Web/CSS/length#px)) to implement minimum and/or maximum sizes. +In all three cases, the page uses a combination of a viewport-relative units ([`vw`](/en-US/docs/Web/CSS/length#vw) and {{cssxref("percentage")}}), to set a size that varies with the viewport width, and a value that is not viewport relative ([`rem`](/en-US/docs/Web/CSS/length#rem) and [`px`](/en-US/docs/Web/CSS/length#px)) to implement minimum and/or maximum sizes. The example is at . Open it in a new window and try adjusting the window width. diff --git a/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md b/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md index 659edc3fa6d947d..600034c96e9e9a4 100644 --- a/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md @@ -34,7 +34,7 @@ There are a few concepts worth digging into before looking at how the flex prope In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don't have a width or a height applied using an absolute length unit? -There is a concept in CSS of {{CSSxRef('min-content')}} and {{CSSxRef('max-content')}}; these keywords can be used in place of a [length unit](/en-US/docs/Web/CSS/length). +There is a concept in CSS of {{CSSxRef('min-content')}} and {{CSSxRef('max-content')}}; these keywords can be used in place of a {{cssxref("length")}} unit. In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of `min-content`. You should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the `min-content` size of that string. Essentially, the longest word in the string is dictating the size. 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 a5bd3fa399419af..e15870e3c6e1aec 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 @@ -557,7 +557,7 @@ div { #### Example: length for circles -For circles the size may be given as a [\](/en-US/docs/Web/CSS/length), which is the size of the circle. +For circles the size may be given as a {{cssxref("length")}}, which is the size of the circle. ```html hidden
diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index a1466f240ea8522..bcc902b116fded1 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -103,10 +103,10 @@ You can [view this example's source on GitHub](https://github.com/mdn/css-exampl - [`visibility`](/en-US/docs/Web/CSS/visibility) - Data types: - [``](/en-US/docs/Web/CSS/angle) - - [``](/en-US/docs/Web/CSS/length-percentage) - - [``](/en-US/docs/Web/CSS/length) + - {{cssxref("length-percentage")}} + - {{cssxref("length")}} - [``](/en-US/docs/Web/CSS/number) - - [``](/en-US/docs/Web/CSS/percentage) + - {{cssxref("percentage")}} - [``](/en-US/docs/Web/CSS/position_value) - Glossary terms: - [Interpolation](/en-US/docs/Glossary/Interpolation) diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md index 7fa9b97c7cfcf2d..aba36c5d082fcc3 100644 --- a/files/en-us/web/css/gradient/conic-gradient/index.md +++ b/files/en-us/web/css/gradient/conic-gradient/index.md @@ -70,7 +70,7 @@ The conic-gradient syntax is similar to the radial-gradient syntax, but the colo ![color stops along the circumference of a conic gradient and the axis of a radial gradient.](screenshot_2018-11-29_21.09.19.png) -A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a [length](/en-US/docs/Web/CSS/length), the color-stops of a conic gradient are specified with an [angle](/en-US/docs/Web/CSS/angle). Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. +A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a {{cssxref("length")}}, the color-stops of a conic gradient are specified with an [angle](/en-US/docs/Web/CSS/angle). Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. Similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value background-position. diff --git a/files/en-us/web/css/gradient/radial-gradient/index.md b/files/en-us/web/css/gradient/radial-gradient/index.md index 9fa0e16bc8ad719..be05007ead00a38 100644 --- a/files/en-us/web/css/gradient/radial-gradient/index.md +++ b/files/en-us/web/css/gradient/radial-gradient/index.md @@ -43,9 +43,9 @@ A radial gradient is specified by indicating the center of the gradient (where t | `farthest-side` | Similar to `closest-side`, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). | | `farthest-corner` | The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. | - If `` is specified as `circle`, the size may be given explicitly as a [``](/en-US/docs/Web/CSS/length), which provides an explicit circle radius. Negative values are invalid. + If `` is specified as `circle`, the size may be given explicitly as a {{cssxref("length")}}, which provides an explicit circle radius. Negative values are invalid. - If `` is specified as `ellipse`, the size may be given as a [``](/en-US/docs/Web/CSS/length-percentage) with two values to provide an explicit ellipse size. The first value represents the horizontal radius and the second is the vertical radius. Percentage values are relative to the corresponding dimension of the gradient box. Negative values are invalid. + If `` is specified as `ellipse`, the size may be given as a {{cssxref("length-percentage")}} with two values to provide an explicit ellipse size. The first value represents the horizontal radius and the second is the vertical radius. Percentage values are relative to the corresponding dimension of the gradient box. Negative values are invalid. When the `` keyword is omitted, the gradient shape is determined by the size given. One `` value provides a circle, while two values in ``units provide an ellipse. A single `` value is not valid. diff --git a/files/en-us/web/css/mod/index.md b/files/en-us/web/css/mod/index.md index 79451e91f14b7e2..3bbf5a356384419 100644 --- a/files/en-us/web/css/mod/index.md +++ b/files/en-us/web/css/mod/index.md @@ -40,7 +40,7 @@ transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */ ### Parameter -The `mod(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, [number](/en-US/docs/Web/CSS/number), [dimension](/en-US/docs/Web/CSS/dimension), or [percentage](/en-US/docs/Web/CSS/percentage), for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as {{cssxref("length")}}, {{cssxref("angle")}}, {{cssxref("time")}}, or {{cssxref("frequency")}} to be valid. +The `mod(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, [number](/en-US/docs/Web/CSS/number), [dimension](/en-US/docs/Web/CSS/dimension), or {{cssxref("percentage")}}, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as {{cssxref("length")}}, {{cssxref("angle")}}, {{cssxref("time")}}, or {{cssxref("frequency")}} to be valid. - `dividend` diff --git a/files/en-us/web/css/rem/index.md b/files/en-us/web/css/rem/index.md index 797d261ac48ed08..40d30ff0432b17e 100644 --- a/files/en-us/web/css/rem/index.md +++ b/files/en-us/web/css/rem/index.md @@ -40,7 +40,7 @@ transition-duration: rem(20s / 2, 3000ms * 2); /* 4s */ ### Parameter -The `rem(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, [number](/en-US/docs/Web/CSS/number), [dimension](/en-US/docs/Web/CSS/dimension), or [percentage](/en-US/docs/Web/CSS/percentage), for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as {{cssxref("length")}}, {{cssxref("angle")}}, {{cssxref("time")}}, or {{cssxref("frequency")}} to be valid. +The `rem(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, [number](/en-US/docs/Web/CSS/number), [dimension](/en-US/docs/Web/CSS/dimension), or {{cssxref("percentage")}}, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as {{cssxref("length")}}, {{cssxref("angle")}}, {{cssxref("time")}}, or {{cssxref("frequency")}} to be valid. - `dividend` diff --git a/files/en-us/web/mathml/attribute/index.md b/files/en-us/web/mathml/attribute/index.md index 330b1535681318a..cdea4158b1daa3c 100644 --- a/files/en-us/web/mathml/attribute/index.md +++ b/files/en-us/web/mathml/attribute/index.md @@ -117,7 +117,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu @@ -209,7 +209,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu {{ MathMLElement("mspace") }} @@ -225,7 +225,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu - + @@ -233,7 +233,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu {{ MathMLElement("mo") }} @@ -242,7 +242,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu {{ MathMLElement("mpadded") }} @@ -270,7 +270,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu @@ -281,12 +281,12 @@ This is an alphabetical list of MathML attributes. More details for each attribu - + - + @@ -343,7 +343,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu - + @@ -412,7 +412,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu {{ MathMLElement("mmultiscripts") }} @@ -423,7 +423,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu {{ MathMLElement("mmultiscripts") }} @@ -436,7 +436,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu - @@ -447,7 +447,7 @@ This is an alphabetical list of MathML attributes. More details for each attribu {{ MathMLElement("mtable") }} diff --git a/files/en-us/web/mathml/element/mfrac/index.md b/files/en-us/web/mathml/element/mfrac/index.md index ffbcd8758c69366..1eb04c9755a9bfd 100644 --- a/files/en-us/web/mathml/element/mfrac/index.md +++ b/files/en-us/web/mathml/element/mfrac/index.md @@ -25,7 +25,7 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web - `denomalign` {{deprecated_inline}} {{Non-standard_Inline}} - : The alignment of the denominator under the fraction. Possible values are: `left`, `center` (default), and `right`. - `linethickness` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the thickness of the horizontal fraction line. + - : A {{cssxref("length-percentage")}} indicating the thickness of the horizontal fraction line. - `numalign` {{deprecated_inline}} {{Non-standard_Inline}} - : The alignment of the numerator over the fraction. Possible values are: `left`, `center` (default), and `right`. diff --git a/files/en-us/web/mathml/element/mmultiscripts/index.md b/files/en-us/web/mathml/element/mmultiscripts/index.md index b9c665216f27098..974a1392c656162 100644 --- a/files/en-us/web/mathml/element/mmultiscripts/index.md +++ b/files/en-us/web/mathml/element/mmultiscripts/index.md @@ -33,9 +33,9 @@ MathML uses the syntax below, that is a base expression, followed by an arbitrar This element's attributes include the [global MathML attributes](/en-US/docs/Web/MathML/Global_attributes) as well as the following deprecated attributes: - `subscriptshift` {{deprecated_inline}} {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum amount to shift the baseline of the subscript down. + - : A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the subscript down. - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum amount to shift the baseline of the superscript up. + - : A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the superscript up. > **Note:** For the `subscriptshift` and `superscriptshift` attributes, some browsers may also accept [legacy MathML lengths](/en-US/docs/Web/MathML/Values#legacy_mathml_lengths). diff --git a/files/en-us/web/mathml/element/mo/index.md b/files/en-us/web/mathml/element/mo/index.md index 7fbe9bde5a3af7f..b9df70bc9162f90 100644 --- a/files/en-us/web/mathml/element/mo/index.md +++ b/files/en-us/web/mathml/element/mo/index.md @@ -20,15 +20,15 @@ In addition to the [global MathML attributes](/en-US/docs/Web/MathML/Global_attr - `largeop` - : A [``](/en-US/docs/Web/MathML/Values#mathml-specific_types) indicating whether the operator should be drawn bigger when [`math-style`](/en-US/docs/Web/CSS/math-style) is set to `normal`. - `lspace` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the amount of space before the operator. + - : A {{cssxref("length-percentage")}} indicating the amount of space before the operator. - `maxsize` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the maximum size of the operator when it is stretchy. + - : A {{cssxref("length-percentage")}} indicating the maximum size of the operator when it is stretchy. - `minsize` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum size of the operator when it is stretchy. + - : A {{cssxref("length-percentage")}} indicating the minimum size of the operator when it is stretchy. - `movablelimits` - : A [``](/en-US/docs/Web/MathML/Values#mathml-specific_types) indicating whether attached under- and overscripts move to sub- and superscript positions when [`math-style`](/en-US/docs/Web/CSS/math-style) is set to `compact`. - `rspace` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the amount of space after the operator. + - : A {{cssxref("length-percentage")}} indicating the amount of space after the operator. - `separator` - : A [``](/en-US/docs/Web/MathML/Values#mathml-specific_types) indicating whether the operator is a separator (such as commas). There is no visual effect for this attribute. - `stretchy` diff --git a/files/en-us/web/mathml/element/mpadded/index.md b/files/en-us/web/mathml/element/mpadded/index.md index c72e36311ed1455..798a8543c0479d5 100644 --- a/files/en-us/web/mathml/element/mpadded/index.md +++ b/files/en-us/web/mathml/element/mpadded/index.md @@ -14,15 +14,15 @@ The **``** [MathML](/en-US/docs/Web/MathML) element is used to add extr This element's attributes include the [global MathML attributes](/en-US/docs/Web/MathML/Global_attributes) as well as the following attributes: - `depth` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the desired depth (below the baseline) of the `` element. + - : A {{cssxref("length-percentage")}} indicating the desired depth (below the baseline) of the `` element. - `height` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the desired height (above the baseline) of the `` element. + - : A {{cssxref("length-percentage")}} indicating the desired height (above the baseline) of the `` element. - `lspace` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the `` element. + - : A {{cssxref("length-percentage")}} indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the `` element. - `voffset` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the vertical location of the positioning point of the child content with respect to the positioning point of the `` element. + - : A {{cssxref("length-percentage")}} indicating the vertical location of the positioning point of the child content with respect to the positioning point of the `` element. - `width` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the desired horizontal length of the `` element. + - : A {{cssxref("length-percentage")}} indicating the desired horizontal length of the `` element. ### Legacy syntax diff --git a/files/en-us/web/mathml/element/mspace/index.md b/files/en-us/web/mathml/element/mspace/index.md index b17edfdc3d77b4e..85016a95efb54b4 100644 --- a/files/en-us/web/mathml/element/mspace/index.md +++ b/files/en-us/web/mathml/element/mspace/index.md @@ -14,11 +14,11 @@ The **``** [MathML](/en-US/docs/Web/MathML) element is used to display a This element's attributes include the [global MathML attributes](/en-US/docs/Web/MathML/Global_attributes) as well as the following attributes: - `depth` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the desired depth (below the baseline) of the space. + - : A {{cssxref("length-percentage")}} indicating the desired depth (below the baseline) of the space. - `height` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the desired height (above the baseline) of the space. + - : A {{cssxref("length-percentage")}} indicating the desired height (above the baseline) of the space. - `width` - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the desired width of the space. + - : A {{cssxref("length-percentage")}} indicating the desired width of the space. > **Note:** For the `depth`, `height`, `width` attributes, some browsers may also accept [legacy MathML lengths](/en-US/docs/Web/MathML/Values#legacy_mathml_lengths). diff --git a/files/en-us/web/mathml/element/msub/index.md b/files/en-us/web/mathml/element/msub/index.md index e9e57aaa952af75..f6b2b252102bd88 100644 --- a/files/en-us/web/mathml/element/msub/index.md +++ b/files/en-us/web/mathml/element/msub/index.md @@ -16,7 +16,7 @@ It uses the following syntax: ` base subscript `. This element's attributes include the [global MathML attributes](/en-US/docs/Web/MathML/Global_attributes) as well as the following deprecated attribute: - `subscriptshift` {{deprecated_inline}} {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum amount to shift the baseline of the subscript down. + - : A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the subscript down. > **Note:** For the `subscriptshift` attribute, some browsers may also accept [legacy MathML lengths](/en-US/docs/Web/MathML/Values#legacy_mathml_lengths). diff --git a/files/en-us/web/mathml/element/msubsup/index.md b/files/en-us/web/mathml/element/msubsup/index.md index 5622297db187221..8c95bfb76ef2efe 100644 --- a/files/en-us/web/mathml/element/msubsup/index.md +++ b/files/en-us/web/mathml/element/msubsup/index.md @@ -16,9 +16,9 @@ It uses the following syntax: ` base subscript superscript `. This element's attributes include the [global MathML attributes](/en-US/docs/Web/MathML/Global_attributes) as well as the following deprecated attributes: - `subscriptshift` {{deprecated_inline}} {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum amount to shift the baseline of the subscript down. + - : A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the subscript down. - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum amount to shift the baseline of the superscript up. + - : A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the superscript up. > **Note:** For the `subscriptshift` and `superscriptshift` attributes, some browsers may also accept [legacy MathML lengths](/en-US/docs/Web/MathML/Values#legacy_mathml_lengths). diff --git a/files/en-us/web/mathml/element/msup/index.md b/files/en-us/web/mathml/element/msup/index.md index 8f56504130f04cd..a573f8ddffee2a5 100644 --- a/files/en-us/web/mathml/element/msup/index.md +++ b/files/en-us/web/mathml/element/msup/index.md @@ -16,7 +16,7 @@ It uses the following syntax: ` base superscript `. This element's attributes include the [global MathML attributes](/en-US/docs/Web/MathML/Global_attributes) as well as the following deprecated attribute: - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the minimum amount to shift the baseline of the superscript up. + - : A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the superscript up. > **Note:** For the `superscriptshift` attribute, some browsers may also accept [legacy MathML lengths](/en-US/docs/Web/MathML/Values#legacy_mathml_lengths). diff --git a/files/en-us/web/mathml/element/mtable/index.md b/files/en-us/web/mathml/element/mtable/index.md index 10066d5cbe78096..9e9388c6834e947 100644 --- a/files/en-us/web/mathml/element/mtable/index.md +++ b/files/en-us/web/mathml/element/mtable/index.md @@ -31,19 +31,19 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web - `columnlines` {{Non-standard_Inline}} - : Specifies column borders. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnlines="none none solid"`). Possible values are: `none` (default), `solid` and `dashed`. - `columnspacing` {{Non-standard_Inline}} - - : Specifies the space between table columns. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnspacing="1em 2em"`). Possible values are [``](/en-US/docs/Web/CSS/length-percentage). + - : Specifies the space between table columns. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnspacing="1em 2em"`). Possible values are {{cssxref("length-percentage")}}. - `frame` {{Non-standard_Inline}} - : Specifies borders of the entire table. Possible values are: `none` (default), `solid` and `dashed`. - `framespacing` {{Non-standard_Inline}} - - : Specifies additional space added between the table and frame. The first value specifies the spacing on the right and left; the second value specifies the spacing above and below. Possible values are [``](/en-US/docs/Web/CSS/length-percentage). + - : Specifies additional space added between the table and frame. The first value specifies the spacing on the right and left; the second value specifies the spacing above and below. Possible values are {{cssxref("length-percentage")}}. - `rowalign` {{Non-standard_Inline}} - : Specifies the vertical alignment of the cells. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowalign="top bottom axis"`). Possible values are: `axis`, `baseline` (default), `bottom`, `center` and `top`. - `rowlines` {{Non-standard_Inline}} - : Specifies row borders. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowlines="none none solid"`). Possible values are: `none` (default), `solid` and `dashed`. - `rowspacing` {{Non-standard_Inline}} - - : Specifies the space between table rows. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowspacing="1em 2em"`). Possible values are [``](/en-US/docs/Web/CSS/length-percentage). + - : Specifies the space between table rows. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowspacing="1em 2em"`). Possible values are {{cssxref("length-percentage")}}. - `width` {{Non-standard_Inline}} - - : A [``](/en-US/docs/Web/CSS/length-percentage) indicating the width of the entire table. + - : A {{cssxref("length-percentage")}} indicating the width of the entire table. > **Note:** For the `width` attribute, some browsers may also accept [legacy MathML lengths](/en-US/docs/Web/MathML/Values#legacy_mathml_lengths). diff --git a/files/en-us/web/mathml/global_attributes/index.md b/files/en-us/web/mathml/global_attributes/index.md index bae2ea105bc415c..54eeb2345195d68 100644 --- a/files/en-us/web/mathml/global_attributes/index.md +++ b/files/en-us/web/mathml/global_attributes/index.md @@ -49,7 +49,7 @@ In addition to the basic MathML global attributes, the following global attribut - [`mathsize`](/en-US/docs/Web/MathML/Global_attributes/mathsize) - - : A [``](/en-US/docs/Web/CSS/length-percentage) used as a [font-size](/en-US/docs/Web/CSS/font-size) for the element. + - : A {{cssxref("length-percentage")}} used as a [font-size](/en-US/docs/Web/CSS/font-size) for the element. - [`nonce`](/en-US/docs/Web/HTML/Global_attributes/nonce) diff --git a/files/en-us/web/mathml/values/index.md b/files/en-us/web/mathml/values/index.md index 6c6ee53800fd2cf..12c827ef659d819 100644 --- a/files/en-us/web/mathml/values/index.md +++ b/files/en-us/web/mathml/values/index.md @@ -18,7 +18,7 @@ In addition to [CSS data types](/en-US/docs/Web/CSS/CSS_Types), some MathML attr {{deprecated_header}} -Instead of [``](/en-US/docs/Web/CSS/length-percentage), MathML used to define its own [type to describe lengths](https://www.w3.org/TR/MathML3/chapter2.html#type.length). Accepted values included non-zero unitless length values (e.g. `5` to mean `500%`), values containing numbers ending with a dot (e.g. `34.px`), or named spaces (e.g. `thinmathspace`). For compatibility reasons, it is recommended to replace non-zero unitless length values with equivalent [``](/en-US/docs/Web/CSS/percentage) values, to remove unnecessary dots in numbers, and to use the following replacement for named lengths: +Instead of {{cssxref("length-percentage")}}, MathML used to define its own [type to describe lengths](https://www.w3.org/TR/MathML3/chapter2.html#type.length). Accepted values included non-zero unitless length values (e.g. `5` to mean `500%`), values containing numbers ending with a dot (e.g. `34.px`), or named spaces (e.g. `thinmathspace`). For compatibility reasons, it is recommended to replace non-zero unitless length values with equivalent {{cssxref("percentage")}} values, to remove unnecessary dots in numbers, and to use the following replacement for named lengths: ```plain veryverythinmathspace => 0.05555555555555555em diff --git a/files/en-us/web/svg/attribute/transform-origin/index.md b/files/en-us/web/svg/attribute/transform-origin/index.md index 06a18c0d1bd3a67..5589f5e80754f54 100644 --- a/files/en-us/web/svg/attribute/transform-origin/index.md +++ b/files/en-us/web/svg/attribute/transform-origin/index.md @@ -42,17 +42,17 @@ If two or more values are defined and either no value is a keyword, or the only - One-value syntax: - - The value must be a [``](/en-US/docs/Web/CSS/length), or one of the keywords `left`, `center`, `right`, `top`, and `bottom`. + - The value must be a {{cssxref("length")}}, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`. - Two-value syntax: - - One value must be a [``](/en-US/docs/Web/CSS/length), a [``](/en-US/docs/Web/CSS/percentage), or one of the keywords `left`, `center`, and `right`. - - The other value must be a [``](/en-US/docs/Web/CSS/length), a [``](/en-US/docs/Web/CSS/percentage), or one of the keywords `top`, `center`, and `bottom`. + - One value must be a {{cssxref("length")}}, a {{cssxref("percentage")}}, or one of the keywords `left`, `center`, and `right`. + - The other value must be a {{cssxref("length")}}, a {{cssxref("percentage")}}, or one of the keywords `top`, `center`, and `bottom`. - Three-value syntax: - The first two values are the same as for the two-value syntax. - - The third value must be a [``](/en-US/docs/Web/CSS/length). It always represents the Z offset. + - The third value must be a {{cssxref("length")}}. It always represents the Z offset. ## Example diff --git a/files/en-us/web/svg/content_type/index.md b/files/en-us/web/svg/content_type/index.md index 7b71d7d717d7a34..a8aa367b4a211fd 100644 --- a/files/en-us/web/svg/content_type/index.md +++ b/files/en-us/web/svg/content_type/index.md @@ -197,7 +197,7 @@ SVG makes use of a number of data types. This article lists these types along wi - \ - : A length is a distance measurement, given as a number along with a unit. - The SVG2 specification aligns with CSS [``](/en-US/docs/Web/CSS/length) data types and units for the attribute syntax and values. + The SVG2 specification aligns with CSS {{cssxref("length")}} data types and units for the attribute syntax and values. A length unit identifier must be provided and the values of the length unit identifiers are case-insensitive. The syntax follows the CSS `` syntax: From 6610050dace0bfa2bba703576225aef6f84f36fe Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 24 Jan 2024 02:33:39 -0500 Subject: [PATCH 105/113] fix(contrib-docs): Fix internal links (#31870) fixes internal links --- files/en-us/mdn/community/pull_requests/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/mdn/community/pull_requests/index.md b/files/en-us/mdn/community/pull_requests/index.md index 862f0f9f9b05dfb..05761cfa36c65ac 100644 --- a/files/en-us/mdn/community/pull_requests/index.md +++ b/files/en-us/mdn/community/pull_requests/index.md @@ -19,9 +19,9 @@ Regardless of how content changes are done, they are submitted as pull requests The content changes go through the following stages before they are published on MDN Web Docs: 1. **Submitting changes:** As a pull request author, you submit changes via opening a pull request. - See the sections [Before you start](#before-you-start), [Open a pull request](#open-a-pull-request), and [After you open a pull request](#after-you-open-a-pull-request) to learn more about our processes. -2. **Reviewing changes:** Your changes are reviewed by [MDN members and volunteers](#pull-request-review-process). - See the section [Pull request review process](#pull-request-review-process) for more details. + See the sections [Before you start](#before_you_start), [Open a pull request](#open_a_pull_request), and [After you open a pull request](#after_you_open_a_pull_request) to learn more about our processes. +2. **Reviewing changes:** Your changes are reviewed by MDN members and volunteers. + See the section [Pull request review process](#pull_request_review_process) for more details. 3. **Viewing published changes:** Content updated on `mdn/content` goes live within a day of merging via a site rebuild once every 24 hours. ## Submitting changes From ec3f432d057c485405e1b2f0c2a30ae24c79d698 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Wed, 24 Jan 2024 14:55:19 +0100 Subject: [PATCH 106/113] Add a declarative shadow DOM example (#31577) * Add declarative shadow DOM example * Add remote example * Update link to demo * Apply suggestions from code review Co-authored-by: Estelle Weyl * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Estelle Weyl Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web_components/using_shadow_dom/index.md | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/web_components/using_shadow_dom/index.md b/files/en-us/web/api/web_components/using_shadow_dom/index.md index 2c765ecd0d5690f..f16b1f7bd2b4c84 100644 --- a/files/en-us/web/api/web_components/using_shadow_dom/index.md +++ b/files/en-us/web/api/web_components/using_shadow_dom/index.md @@ -66,6 +66,8 @@ Before shadow DOM was made available to web developers, browsers were already us ## Creating a shadow DOM +### Imperatively with JavaScript + The following page contains two elements, a {{htmlelement("div")}} element with an [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `"host"`, and a {{htmlelement("span")}} element containing some text: ```html @@ -85,7 +87,34 @@ shadow.appendChild(span); The result looks like this: -{{EmbedLiveSample("Creating a shadow DOM")}} +{{EmbedLiveSample("Imperatively with JavaScript")}} + +### Declaratively with HTML + +Creating a shadow DOM via JavaScript API might be a good option for client-side rendered applications. For other applications, a server-side rendered UI might have better performance and, therefore, a better user experience. In such cases, you can use the {{htmlelement("template")}} element to declaratively define the shadow DOM. The key to this behavior is the {{glossary("enumerated")}} `shadowrootmode` attribute, which can be set to either `open` or `closed`, the same values as the `mode` option of {{domxref("Element.attachShadow()", "attachShadow()")}} method. + +```html +
+ +
+``` + +{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/simple.html", "", "")}} + +> **Note:** By default, contents of `
- <percentage> - {{cssxref("percentage")}} A <percentage> represents a fraction of some other value. For example, 50%. Percentage values are always @@ -134,7 +128,7 @@ There are various numeric value types that you might find yourself using in CSS. ### Lengths -The numeric type you will come across most frequently is [``](/en-US/docs/Web/CSS/length). For example, `10px` (pixels) or `30em`. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become. +The numeric type you will come across most frequently is {{cssxref("length")}}. For example, `10px` (pixels) or `30em`. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become. #### Absolute length units @@ -336,7 +330,7 @@ The next example has font sizes set in percentages. Each `
  • ` has a `font-size {{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 800)}} -Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes [``](/en-US/docs/Web/CSS/length-percentage) then you can use a length or a percentage. If the allowed value only includes ``, it is not possible to use a percentage. +Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes {{cssxref("length-percentage")}} then you can use a length or a percentage. If the allowed value only includes ``, it is not possible to use a percentage. ### Numbers diff --git a/files/en-us/mozilla/firefox/releases/119/index.md b/files/en-us/mozilla/firefox/releases/119/index.md index bc79d146c380ca6..fe5cf3c69e227f8 100644 --- a/files/en-us/mozilla/firefox/releases/119/index.md +++ b/files/en-us/mozilla/firefox/releases/119/index.md @@ -28,7 +28,7 @@ This article provides information about the changes in Firefox 119 that affect d ### SVG -- The [SVG attributes](/en-US/docs/Web/SVG/Attribute) that accept a [``](/en-US/docs/Web/SVG/Content_type#length) value now support [level 3](https://www.w3.org/TR/css-values-3/#lengths) [length](/en-US/docs/Web/CSS/length) [CSS data types](/en-US/docs/Web/CSS/CSS_Types) for all SVG elements. This enables the sizing of SVG elements based on font sizes (`cap`, `rem`, etc.), viewport (`vh`, `vw`, `vmin`, etc.), or absolute lengths (`px`, `cm`, etc.), e.g. ``. (See [Firefox bug 1287054](https://bugzil.la/1287054) for more details). +- The [SVG attributes](/en-US/docs/Web/SVG/Attribute) that accept a [``](/en-US/docs/Web/SVG/Content_type#length) value now support [level 3](https://www.w3.org/TR/css-values-3/#lengths) {{cssxref("length")}} [CSS data types](/en-US/docs/Web/CSS/CSS_Types) for all SVG elements. This enables the sizing of SVG elements based on font sizes (`cap`, `rem`, etc.), viewport (`vh`, `vw`, `vmin`, etc.), or absolute lengths (`px`, `cm`, etc.), e.g. ``. (See [Firefox bug 1287054](https://bugzil.la/1287054) for more details). ### HTTP diff --git a/files/en-us/mozilla/firefox/releases/4/index.md b/files/en-us/mozilla/firefox/releases/4/index.md index 67d3540f1826163..a20cebbc5dc7d49 100644 --- a/files/en-us/mozilla/firefox/releases/4/index.md +++ b/files/en-us/mozilla/firefox/releases/4/index.md @@ -55,7 +55,7 @@ The following changes were made to the {{domxref("CanvasRenderingContext2D")}} i - [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) - : New CSS transitions support is available in Firefox 4. - Computed values in CSS - - : Support for `-moz-calc` has been added. This lets you specify `{{cssxref("<length>")}}` values as mathematical expressions. + - : Support for `-moz-calc` has been added. This lets you specify {{cssxref("length")}} values as mathematical expressions. - Selector grouping - : Support for `:-moz-any` to group selectors and factorize combinators. - Background image subrectangle support @@ -187,7 +187,7 @@ The following changes were made to the {{domxref("CanvasRenderingContext2D")}} i
    		• -moz-calc Lets you specify - {{cssxref("<length>")}} values as + {{cssxref("length")}} values as mathematical expressions.
    depth {{ MathMLElement("mpadded") }} - A <length-percentage> indicating the desired depth (below the baseline). + A {{cssxref("length-percentage")}} indicating the desired depth (below the baseline).
    - A <length-percentage> indicating the desired height (above the baseline). + A {{cssxref("length-percentage")}} indicating the desired height (above the baseline).
    linethickness {{ MathMLElement("mfrac") }}A <length-percentage> indicating the thickness of the horizontal fraction line.A {{cssxref("length-percentage")}} indicating the thickness of the horizontal fraction line.
    lspace - A <length-percentage> indicating amount of space before the operator. + A {{cssxref("length-percentage")}} indicating amount of space before the operator.
    - A <length-percentage> indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the element. + A {{cssxref("length-percentage")}} indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the element.
    mathsize All MathML elements - A <length-percentage> used as a font-size for the element. + A {{cssxref("length-percentage")}} used as a font-size for the element.
    maxsize {{ MathMLElement("mo") }}A <length-percentage> indicating the maximum size of the operator when it is stretchy.A {{cssxref("length-percentage")}} indicating the maximum size of the operator when it is stretchy.
    minsize {{ MathMLElement("mo") }}A <length-percentage> indicating the minimum size of the operator when it is stretchy.A {{cssxref("length-percentage")}} indicating the minimum size of the operator when it is stretchy.
    movablelimits
    rspace {{ MathMLElement("mo") }}A <length-percentage> indicating the amount of space after the operator.A {{cssxref("length-percentage")}} indicating the amount of space after the operator.
    rquote {{deprecated_inline}} - A <length-percentage> indicating the minimum amount to shift the baseline of the subscript down. + A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the subscript down.
    - A <length-percentage> indicating the minimum amount to shift the baseline of the superscript up. + A {{cssxref("length-percentage")}} indicating the minimum amount to shift the baseline of the superscript up.
    voffset {{ MathMLElement("mpadded") }}A <length-percentage> indicating the vertical location of the positioning point of the child content with respect to the positioning point of the element. + A {{cssxref("length-percentage")}} indicating the vertical location of the positioning point of the child content with respect to the positioning point of the element.
    - A <length-percentage> indicating the desired width. + A {{cssxref("length-percentage")}} indicating the desired width.