What is HTML <source> media Attribute
Definition and Usage
The media attribute accepts any valid media query that would normally be defined in a CSS.
Note: This attribute can accept several values.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<source media="media_query">
Devices
Value
Description
all
Suitable for all devices. This is default
aural
Speech synthesizers
braille
Braille feedback devices
handheld
Handheld devices (small screen, limited bandwidth)
projection
Projectors
print
Print preview mode/printed pages
screen
Computer screens
tty
Teletypes and similar media using a fixed-pitch character grid
tv
Television type devices (low resolution, limited scroll ability)
Values
Value
Description
width
Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
height
Specifies the height of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
device-width
Specifies the width of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"
device-height
Specifies the height of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"
orientation
Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
aspect-ratio
Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio
Specifies the device-width/device-height ratio of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
color
Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (color:3)"
color-index
Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
monochrome
Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (monochrome:2)"
resolution
Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (resolution:300dpi)"
scan
Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
grid
Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The source media attribute</h1>
<picture>
<source media="(min-width: 650px)" srcset="https://horje.com/avatar.png">
<source media="(min-width: 465px)" srcset="https://horje.com/avatar.png">
<img src="https://horje.com/avatar.png" alt="Horje Icon" style="width:auto;">
</picture>
</body>
</html>
Output should be:
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |