The media attribute in HTML specifies which media or device a linked resource is optimized for.
Definition and Usage
➔ The media attribute allows the browser to apply styles or load resources only when certain media conditions are met.
➔ Media attributes can be used on these tags:
- <link>: Load different CSS stylesheets for screen or print.
- <style>: Apply internal CSS targeting specific media conditions.
- <source>: Used within <picture>, <video>, or <audio> to load different files based on the device specifications.
- <a> and <area>: Linked URLs are based on a specific media type.
Common media types
➔ These are the standard media attribute values:
- all: Default. Suitable for all devices.
- screen: Designed for computer screens, tablets, and smartphones.
- print: Designed for print preview mode or printed pages.
- speech: Designed for screen readers who "read" the page aloud.
➔ Media Queries & Operators:
- Operators: and, or, not(comma is equivalent to or)
- width / height: display dimensions of a device(can use min- , max-)
- orientation: portrait or landscape
- resolution: Pixel density (e.g., 480dpi)
Syntax
//In HTML
<div id="sample" class="mydiv">
<h3>HTML media attribute example</h3>
<p>The media attribute is used to specify a unique identifier for a single HTML element within a document.</p>
<h4>ID must be unique within the same HTML document.</h4>
<h4>The ID is used for styling, scripting, and navigation of a specific element in a document.</h4>
<button id="mybutton" type="button" onclick="changeStyle()">Toggle Style</button>
</div>
//In JavaScript
<script>
const mediaQuery = window.matchMedia('(max-width: 480px)');
function myhandler(event) {
const div = document.getElementById('sample');
const button = document.getElementById('mybutton');
if (event.matches) {
// Viewport is 480px wide or less
div.style.backgroundColor = 'lightblue';
button.style.backgroundColor = 'black';
} else {
// Viewport is wider than 480px
div.style.backgroundColor = '';
button.style.backgroundColor = '';
}
}
mediaQuery.addListener(myhandler);
myhandler(mediaQuery);
//let element = document.querySelector("#sample");;
//element.media = "print";
//element.setAttribute('media', 'screen and (max-width: 480px)');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML media attribute example</title>
<style>
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML media attribute example</h3>
<p>The media attribute in HTML specifies which media or device a linked resource is optimized for</p>
<h4>The media attribute allows the browser to apply styles or load resources only when certain media conditions are met.</h4>
<button id="mybutton" type="button" >My Button</button>
<p><b>Note:</b> Change the browser window size to 480px or larger to see the effect.</p>
</div>
</body>
<script>
const mediaQuery = window.matchMedia('(max-width: 480px)');
function mediaQueryChange(event) {
const div = document.getElementById('sample');
const button = document.getElementById('mybutton');
if (event.matches) {
// Viewport is 480px wide or less
div.style.backgroundColor = 'lightblue';
div.style.padding = '20px';
div.style.border = '2px solid black';
div.style.color = 'black';
button.style.backgroundColor = 'black';
button.style.color = 'white';
button.style.margin = '10px 75px';
button.style.padding = '10px';
button.style.borderRadius = '5px';
} else {
// Viewport is wider than 480px
div.style.backgroundColor = '#ff4422';
div.style.padding = '20px';
div.style.border = '2px solid black';
div.style.color = 'white';
button.style.backgroundColor = 'white';
button.style.color = 'black';
button.style.margin = '10px 75px';
button.style.padding = '10px';
button.style.borderRadius = '5px';
}
}
mediaQuery.addListener(mediaQueryChange);
mediaQueryChange(mediaQuery);
//let element = document.querySelector("#sample");;
//element.media = "print";
//element.setAttribute('media', 'screen and (max-width: 480px)');
</script>
</html>
Click on the "Try it Now" button to see how it works.