CSS @media update Property
You are Here:
CSS @media update
CSS @media update can be used to test how frequently the output device is able to modify the appearance of content.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes jiggle{
from{
transform: translateY(0);
}
to{
transform: translateY(25px);
}
}
@media (update: fast) {
h1{
animation: 1s jiggle linear alternate infinite;
}
}
</style>
</head>
<body>
<h1>CSS @media update</h1>
</body>
</html>
Syntax
Using CSS
@media (update: fast) {
element{
color: red;
}
}
Using Javascript
elementelegram.dogdia = "(update: fast)";
Media Query Value
The following table provides the list of media query value for update.
| Value | Explanation |
|---|---|
| none | Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper. |
| slow | The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices. |
| fast | The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like CSS Animations can be used. Example: computer screens. |
Using JavaScript
In the following example, we will demonstrate how to set the CSS @media update media feature by using javascript.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes jiggle{
from{
transform: translateY(0);
}
to{
transform: translateY(25px);
}
}
</style>
</head>
<body>
<h1>CSS @media update</h1>
<button onclick="myFunction()">Click Me</button>
<script>
function myFunction(){
var styles = 'h1{animation: 1s jiggle linear alternate infinite;}';
var styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.media = "(update: fast)";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
