From da9701a81a92538abef8763e69d88158e6215703 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 26 Nov 2024 11:49:33 -0800 Subject: [PATCH] New pages: HTMLSourceElement api pages (#36855) * New pages: HTMLSourceElement api pages * update to htmlsourceelement based on review --- .../web/api/htmlsourceelement/media/index.md | 53 ++++++++++++++++++ .../web/api/htmlsourceelement/sizes/index.md | 55 +++++++++++++++++++ .../web/api/htmlsourceelement/src/index.md | 51 +++++++++++++++++ .../web/api/htmlsourceelement/srcset/index.md | 51 +++++++++++++++++ .../web/api/htmlsourceelement/type/index.md | 54 ++++++++++++++++++ 5 files changed, 264 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..3159348f4c389cd --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/media/index.md @@ -0,0 +1,53 @@ +--- +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 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. + +## 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")}} +- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) 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..1f4dff181756306 --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/srcset/index.md @@ -0,0 +1,51 @@ +--- +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. + +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 + +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..fa09bb49ac8c71b --- /dev/null +++ b/files/en-us/web/api/htmlsourceelement/type/index.md @@ -0,0 +1,54 @@ +--- +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 {{glossary("MIME type")}} of the media 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" +``` + +## 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")}}