From 221e612ad14abeb2f6cbd75fbbc17d28a07ab8b4 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 18 Nov 2024 17:29:07 -0800 Subject: [PATCH 1/2] New pages: HTMLSourceElement api pages --- .../web/api/htmlsourceelement/media/index.md | 52 ++++++++++++++++++ .../web/api/htmlsourceelement/sizes/index.md | 55 +++++++++++++++++++ .../web/api/htmlsourceelement/src/index.md | 51 +++++++++++++++++ .../web/api/htmlsourceelement/srcset/index.md | 49 +++++++++++++++++ .../web/api/htmlsourceelement/type/index.md | 55 +++++++++++++++++++ 5 files changed, 262 insertions(+) create mode 100644 files/en-us/web/api/htmlsourceelement/media/index.md create mode 100644 files/en-us/web/api/htmlsourceelement/sizes/index.md create mode 100644 files/en-us/web/api/htmlsourceelement/src/index.md create mode 100644 files/en-us/web/api/htmlsourceelement/srcset/index.md create mode 100644 files/en-us/web/api/htmlsourceelement/type/index.md diff --git a/files/en-us/web/api/htmlsourceelement/media/index.md b/files/en-us/web/api/htmlsourceelement/media/index.md new file mode 100644 index 000000000000000..7c552f5877b3111 --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/media/index.md @@ -0,0 +1,52 @@ +--- +title: "HTMLSourceElement: media property" +short-title: media +slug: Web/API/HTMLSourceElement/media +page-type: web-api-instance-property +browser-compat: api.HTMLSourceElement.media +--- + +{{APIRef("HTML DOM")}} + +The **`media`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing a list of one or more media formats to which the resource applies. + +It reflects the `media` attribute of the {{HTMLElement("source")}} element. + +## Value + +A string. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.media); // Output: "screen and (min-width: 600px)" +el.media = "(min-width: 800px)"; // Updates the media value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLSourceElement.type")}} +- {{domxref("HTMLSourceElement.sizes")}} +- {{domxref("HTMLSourceElement.src")}} +- {{domxref("HTMLSourceElement.srcset")}} +- {{htmlelement("source")}} +- {{htmlelement("picture")}} +- {{htmlelement("audio")}} +- {{htmlelement("video")}} diff --git a/files/en-us/web/api/htmlsourceelement/sizes/index.md b/files/en-us/web/api/htmlsourceelement/sizes/index.md new file mode 100644 index 000000000000000..9f1753a29b822b5 --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/sizes/index.md @@ -0,0 +1,55 @@ +--- +title: "HTMLSourceElement: sizes property" +short-title: sizes +slug: Web/API/HTMLSourceElement/sizes +page-type: web-api-instance-property +browser-compat: api.HTMLSourceElement.sizes +--- + +{{APIRef("HTML DOM")}} + +The **`sizes`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing a list of one or more sizes, representing sizes between breakpoints, to which the resource applies. + +It reflects the `sizes` attribute of the {{HTMLElement("source")}} element. + +## Value + +A string. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.sizes); // Output: "((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em" +el.sizes = + "((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em"; // Updates the sizes value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLImageElement.sizes")}} +- {{domxref("HTMLSourceElement.media")}} +- {{domxref("HTMLSourceElement.type")}} +- {{domxref("HTMLSourceElement.src")}} +- {{domxref("HTMLSourceElement.srcset")}} +- {{htmlelement("source")}} +- {{htmlelement("picture")}} +- {{htmlelement("audio")}} +- {{htmlelement("video")}} diff --git a/files/en-us/web/api/htmlsourceelement/src/index.md b/files/en-us/web/api/htmlsourceelement/src/index.md new file mode 100644 index 000000000000000..4918668d4dcf53d --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/src/index.md @@ -0,0 +1,51 @@ +--- +title: "HTMLSourceElement: src property" +short-title: src +slug: Web/API/HTMLSourceElement/src +page-type: web-api-instance-property +browser-compat: api.HTMLSourceElement.src +--- + +{{APIRef("HTML DOM")}} + +The **`src`** property of the {{domxref("HTMLSourceElement")}} interface is a string indicating the URL of a media resource to use as the source for the element. + +It reflects the `src` attribute of the {{HTMLElement("source")}} element nested in an {{htmlelement("audio")}} or {{htmlelement("video")}} element. It has no meaning and is ignored when it is nested in a {{htmlelement("picture")}} element. + +## Value + +A string; the URL of a source resource to use in the element. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.src); // Output: "large.webp" +el.src = "medium.webp"; // Updates the src value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLSourceElement.type")}} +- {{domxref("HTMLSourceElement.srcset")}} +- {{domxref("HTMLSourceElement.media")}} +- {{domxref("HTMLSourceElement.sizes")}} +- {{htmlelement("source")}} +- {{htmlelement("audio")}} +- {{htmlelement("video")}} diff --git a/files/en-us/web/api/htmlsourceelement/srcset/index.md b/files/en-us/web/api/htmlsourceelement/srcset/index.md new file mode 100644 index 000000000000000..86fc9b085fb758f --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/srcset/index.md @@ -0,0 +1,49 @@ +--- +title: "HTMLSourceElement: srcset property" +short-title: srcset +slug: Web/API/HTMLSourceElement/srcset +page-type: web-api-instance-property +browser-compat: api.HTMLSourceElement.srcset +--- + +{{APIRef("HTML DOM")}} + +The **`srcset`** property of the {{domxref("HTMLSourceElement")}} interface is a string containing a comma-separated list of candidate images and descriptors. Each list item in the comma-separated list includes the URL of an image resource to use as the source for the element and the circumstances under which that image should be used. Each image in the comma selist one or more image URLs and their descriptorseach specifying image resources to use under given circumstances. Each candidate image is a URL followed by the width of the image with a `'w'` or the pixel density with an `'x'`. + +It reflects the `srcset` attribute of the {{HTMLElement("source")}} element nested in a {{htmlelement("picture")}} element. It has no meaning and is ignored when it is nested in an {{htmlelement("audio")}} or {{htmlelement("video")}} element, which use the {{domxref("HTMLSourceElement.src", "src")}} instead. + +## Value + +A string. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.srcset); // Output: "smile.png, smile-1.5x.png 1.5x, smile-large 800w" +el.srcset = "smile.png, smile-med.png 600w, smile-large.png 800w"; // Updates the srcset value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLSourceElement.type")}} +- {{domxref("HTMLSourceElement.src")}} +- {{domxref("HTMLSourceElement.media")}} +- {{domxref("HTMLSourceElement.sizes")}} +- {{htmlelement("source")}} +- {{htmlelement("picture")}} diff --git a/files/en-us/web/api/htmlsourceelement/type/index.md b/files/en-us/web/api/htmlsourceelement/type/index.md new file mode 100644 index 000000000000000..0e2d891c8c5f5cf --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/type/index.md @@ -0,0 +1,55 @@ +--- +title: "HTMLSourceElement: type property" +short-title: type +slug: Web/API/HTMLSourceElement/type +page-type: web-api-instance-property +browser-compat: api.HTMLSourceElement.type +--- + +{{APIRef("HTML DOM")}} + +The **`type`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing the type of media of the resource. + +It reflects the `type` attribute of the {{HTMLElement("source")}} element. + +## Value + +A string. + +## Examples + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.type); // Output: "video/webp" +el.type = "image/webp"; // Updates the type value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLSourceElement.src")}} +- {{domxref("HTMLSourceElement.srcset")}} +- {{domxref("HTMLSourceElement.media")}} +- {{domxref("HTMLSourceElement.sizes")}} +- {{htmlelement("source")}} +- {{htmlelement("picture")}} +- {{htmlelement("audio")}} +- {{htmlelement("video")}} +- [Media types found on the web](/en-US/docs/Web/Media/Formats) +- [Important MIME types for web developers](/en-US/docs/Web/HTTP/MIME_types#important_mime_types_for_web_developers) +- {{domxref("Media Capabilities API")}} From cfdf7d8d74ef8920343f84d969b7ff5c6d93ce9a Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 26 Nov 2024 11:20:09 -0800 Subject: [PATCH 2/2] update to htmlsourceelement based on review --- files/en-us/web/api/htmlsourceelement/media/index.md | 3 ++- files/en-us/web/api/htmlsourceelement/srcset/index.md | 6 ++++-- files/en-us/web/api/htmlsourceelement/type/index.md | 3 +-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/api/htmlsourceelement/media/index.md b/files/en-us/web/api/htmlsourceelement/media/index.md index 7c552f5877b3111..3159348f4c389cd 100644 --- a/files/en-us/web/api/htmlsourceelement/media/index.md +++ b/files/en-us/web/api/htmlsourceelement/media/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLSourceElement.media {{APIRef("HTML DOM")}} -The **`media`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing a list of one or more media formats to which the resource applies. +The **`media`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing the intended destination medium for the resource. The value is a [media query](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), which is a comma separated list of media-types, media-features, and logical operators. It reflects the `media` attribute of the {{HTMLElement("source")}} element. @@ -50,3 +50,4 @@ el.media = "(min-width: 800px)"; // Updates the media value - {{htmlelement("picture")}} - {{htmlelement("audio")}} - {{htmlelement("video")}} +- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) diff --git a/files/en-us/web/api/htmlsourceelement/srcset/index.md b/files/en-us/web/api/htmlsourceelement/srcset/index.md index 86fc9b085fb758f..1f4dff181756306 100644 --- a/files/en-us/web/api/htmlsourceelement/srcset/index.md +++ b/files/en-us/web/api/htmlsourceelement/srcset/index.md @@ -8,9 +8,11 @@ browser-compat: api.HTMLSourceElement.srcset {{APIRef("HTML DOM")}} -The **`srcset`** property of the {{domxref("HTMLSourceElement")}} interface is a string containing a comma-separated list of candidate images and descriptors. Each list item in the comma-separated list includes the URL of an image resource to use as the source for the element and the circumstances under which that image should be used. Each image in the comma selist one or more image URLs and their descriptorseach specifying image resources to use under given circumstances. Each candidate image is a URL followed by the width of the image with a `'w'` or the pixel density with an `'x'`. +The **`srcset`** property of the {{domxref("HTMLSourceElement")}} interface is a string containing a comma-separated list of candidate images. -It reflects the `srcset` attribute of the {{HTMLElement("source")}} element nested in a {{htmlelement("picture")}} element. It has no meaning and is ignored when it is nested in an {{htmlelement("audio")}} or {{htmlelement("video")}} element, which use the {{domxref("HTMLSourceElement.src", "src")}} instead. +Each candidate image includes the URL of an image resource to use as the source for the element and optionally a descriptor indicating the circumstances in which the image should be used. The descriptor is either a number followed by `'w'`, indicating the element width, or a number followed by `'x'`, indicating the device pixel density. + +It reflects the `srcset` attribute of the {{HTMLElement("source")}} element nested in a {{htmlelement("picture")}} element. It has no meaning and is ignored when it is nested in an {{htmlelement("audio")}} or {{htmlelement("video")}} element, which use the {{domxref("HTMLSourceElement.src", "src")}} attribute instead. ## Value diff --git a/files/en-us/web/api/htmlsourceelement/type/index.md b/files/en-us/web/api/htmlsourceelement/type/index.md index 0e2d891c8c5f5cf..fa09bb49ac8c71b 100644 --- a/files/en-us/web/api/htmlsourceelement/type/index.md +++ b/files/en-us/web/api/htmlsourceelement/type/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLSourceElement.type {{APIRef("HTML DOM")}} -The **`type`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing the type of media of the resource. +The **`type`** property of the {{domxref("HTMLSourceElement")}} interface is a string representing the {{glossary("MIME type")}} of the media resource. It reflects the `type` attribute of the {{HTMLElement("source")}} element. @@ -29,7 +29,6 @@ A string. ```js const el = document.getElementById("el"); console.log(el.type); // Output: "video/webp" -el.type = "image/webp"; // Updates the type value ``` ## Specifications