New pages: HTMLSourceElement api pages

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
+<source
+  id="el"
+  src="largeVideo.mov"
+  type="video/quicktime"
+  media="screen and (min-width: 600px)" />
+```
+
+```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")}}

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
+<source
+  id="el"
+  src="mediumVideo.mov"
+  type="video/quicktime"
+  sizes="((min-width: 50em) and (max-width: 60em)) 50em,
+         ((min-width: 30em) and (max-width: 50em)) 30em" />
+```
+
+```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")}}

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
+<source
+  id="el"
+  src="large.webp"
+  type="video/webp"
+  media="screen and (600px <= width <= 800px)" />
+```
+
+```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")}}

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
+<source
+  id="el"
+  srcset="smile.png, smile-1.5x.png 1.5x, smile-2x.png 2x"
+  type="image/png" />
+```
+
+```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")}}

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
+<source
+  id="el"
+  src="large.webp"
+  type="video/webp"
+  media="screen and (min-width: 600px)" />
+```
+
+```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")}}