New pages: HTMLSourceElement api pages

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
+<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")}}
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)

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,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
+<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,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
+<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"
+```
+
+## 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")}}