MQ-based Content-controlled Optional Image Loading
How do I make an mq-based content-controlled optional image loading?
This is a test. I want to see if we can reliably load images only within specific media queries using only HTML and CSS without causing issues in older browsers.. What is a mq-based content-controlled optional image loading? How do you make a mq-based content-controlled optional image loading? This script and codes were developed by Aaron Gustafson on 13 August 2022, Saturday.
MQ-based Content-controlled Optional Image Loading - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MQ-based Content-controlled Optional Image Loading</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>MQ-based Content-controlled Optional Image Loading</h1>
<p>This is a test. I want to see if we can reliably load images only within specific media queries using only HTML and CSS without causing issues in older browsers.</p>
<p>On modern browsers rendering with a screen width of 20em or above, an image should be displayed in the box below. On older browsers or browsers displaying below 20em, you should <strong>not</strong> see an image, a broken image icon, or (optionally) displayed <code>alt</code> text (typically displayed because the <code>src</code> is not available).</p>
<p>Drumroll…</p>
<div class="image-container">
<img sizes="(min-width: 40em) 80vw, (min-width: 20em) 100vw" srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg 375w, http://scottjehl.github.io/picturefill/examples/images/medium.jpg 480w, http://scottjehl.github.io/picturefill/examples/images/large.jpg 768w" alt="This alt text could be optionally displayed.">
</div>
<small>Image and basic <code>img</code> syntax lifted from <a href="http://scottjehl.github.io/picturefill/">the Picturefill documentation</a></small> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
MQ-based Content-controlled Optional Image Loading - Script Codes CSS Codes
@charset "UTF-8";
/* Hide all images */
img { position: absolute; overflow: hidden; width: 0; height: 0;
}
/* Show traditional images */
img[src] { position: static; width: auto; height: auto;
}
/* Optional: In modern browsers, hide alt text for non-src’d images */
img[alt]:not([src]):before,
img[alt]:not([src]):after { position: absolute; overflow: hidden; width: 0; height: 0;
}
/* Images should only appear > 20em on modern browsers */
@media only screen and (min-width: 20em) { /* Bring images back universally */ img { position: static; width: auto; height: auto; } /* Debugging something in IE9+ */ img:not([src]) { position: absolute; overflow: hidden; width: 0; height: 0; } img[srcset]:not([src]) { position: static; width: auto; height: auto; }
}
/* Demo styles - irrelevant to the concept */
body { padding: 0 1em;
}
small { display: block; font-style: italic; margin: 1em 0;
}
.image-container { border: 1px solid; background: #ccc; padding: 1em;
}
![MQ-based Content-controlled Optional Image Loading - Script Codes](http://shots.codepen.io/aarongustafson/pen/azqWMZ-512.jpg)
Developer | Aaron Gustafson |
Username | aarongustafson |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 3,047 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Auto-advance example | 3,328 Kb |
Simple Compact Labels | 1,978 Kb |
Easy Couch Mode | 8,819 Kb |
Visualizing CSS Transforms | 3,155 Kb |
Pure CSS knockout arrow | 2,344 Kb |
Pure CSS Modal | 3,569 Kb |
Un-doing tables | 3,993 Kb |
Validation rules jQuery plugin | 2,768 Kb |
Footnote references that maintain good user focus | 2,167 Kb |
FAQ JS-Enhanced Tab Order | 3,573 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Save for later... | Victorfreire | 1,359 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!