4 ms·
* Oh, for webkit-based browsers, please replace `crisp-edges` with `pixelated`. I've just blindly trusted MDN compatibility data table [1] and did not verify it
by myfonj 3y ago
* Oh, for webkit-based browsers, please replace `crisp-edges` with `pixelated`. I've just blindly trusted MDN compatibility data table [1] and did not verify it myself, and obviously there was a catch X[
Here is better cross-browser compatible version with sharp "pixels" for Chrome/Edge:
data:text/html;verbatim,<body>
<script>document.body.style.setProperty('--dpr',devicePixelRatio);</script>
<img src="https://win98icons.alexmeub.com/css_sprites.png"
style="background-color:grey;
image-rendering:-webkit-optimize-contrast;
image-rendering:pixelated;
image-rendering:crisp-edges;
width:calc(1/var(--dpr)*2168px*5);">
Sorry for the inconvenience!
(And welcome to peculiarities of front-end web development. It is the year 2024 and there are still CSS level 3 modules that are not implemented reliably in latest browser versions, apparently.)
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...