-
Notifications
You must be signed in to change notification settings - Fork 22.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New pages: HTMLSourceElement api pages (#36855)
* New pages: HTMLSourceElement api pages * update to htmlsourceelement based on review
- Loading branch information
Showing
5 changed files
with
264 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |