Christmas Deal is on: Save 25% off on select annual plans for 1st year.Use Coupon Code: LTNEWEXCL

Next-Gen App & Browser
Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

Start free with Google Start free with Email

Crisp edges/pixelated images

Last updated on : 2023-03-20

Note:

Crisp edges/pixelated images shows a browser compatibility score of 100. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.

Overview

The counter-increment and counter-reset properties are used to control the value of a counter in generated content.

Formal Definition

Inherited

yes

Applies to

all elements

Initial value

auto

Animation type

discrete

Computed value

as specified

Specifications

CSS Images Module Level 3 # the-image-rendering

Syntax

/* Keyword values */
 image-rendering: auto;
 image-rendering: crisp-edges;
 image-rendering: pixelated;
 /* Global values */
 image-rendering: inherit;
 image-rendering: initial;
 image-rendering: revert;
 image-rendering: unset;

Code snippets

index.html

Source:index.html

...26			27			<li id="1417222103707881475" class="tweet h-entry" data-pagefind-index-attrs="id">28		29			<div class="tweet-text e-content" data-pagefind-body="">(#BehindTheScenes) We used CSS <code>image-rendering: pixelated</code> to deliver on <a href="https://twitter.com/AdamStddrd/" class="tweet-username h-card">@<span class="p-nickname">AdamStddrd</span></a>âs lovely design for this one.30<a href="https://caniuse.com/css-crisp-edges" class="tweet-url" data-pagefind-index-attrs="href">caniuse.com/css-crisp-edges</a> <a href="https://twitter.com/johnson_brad/status/1417219475984699393" class="tweet-username" data-pagefind-index-attrs="href">@johnson_brad/1417219475984699393</a> <is-land on:visible=""><div class="tweet-medias"><template data-island=""><a href="https://caniuse.com/css-crisp-edges"><img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fcaniuse.com%2Fcss-crisp-edges/small/onerror/" alt="OpenGraph image for caniuse.com/css-crisp-edges" loading="lazy" decoding="async" width="375" height="197" class="tweet-media tweet-media-og" onerror="this.parentNode.remove()"></a></template><a href="/twitter/img/v-QW8nK63J.jpeg"><img src="/twitter/img/v-QW8nK63J.jpeg" width="1200" height="612" alt="oh my god twitter doesnât include alt text from images in their API" class="tweet-media u-featured" onerror="fallbackMedia(this)" loading="lazy" decoding="async"></a></div></is-land></div>31			<span class="tweet-metadata">32				33				<a href="https://twitter.com/zachleat/status/1417222103707881475" class="tag tag-icon u-url" data-pagefind-index-attrs="href"><span class="sr-only">On twitter.com </span><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftwitter.com%2F/" alt="Twitter logo" width="27" height="27"></a>34				35				<a href="/twitter/" class="tag tag-naked tag-lite tag-avatar"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2F/" width="52" height="52" alt="zachleatâs avatar" class="tweet-avatar"></a>36				<span class="tag tag-lite tag-retweet">â»ï¸ 1<span class="sr-only"> Retweets</span></span>37					<span class="tag tag-lite tag-favorite">â¤ï¸ 25<span class="sr-only"> Favorites</span></span>38				<time class="tag tag-naked tag-lite dt-published" datetime="2021-07-19T20:37:34.000Z">2021 Jul 19</time>39				<span class="tag tag-naked tag-lite sr-only">Mood +<strong class="tweet-sentiment">3</strong> ð</span>40			</span>41		</li>42			43		</ol>44		</main>...

Browser Compatibility

Crisp edges/pixelated images on IE is fully supported on None of the versions, partially supported on 7-11, and not supported on 5.5-6 IE versions.
Crisp edges/pixelated images on Edge is fully supported on 79-111, partially supported on None of the versions, and not supported on 12-18 Edge versions.
Crisp edges/pixelated images on Firefox is fully supported on 3.6-113, partially supported on None of the versions, and not supported on 2-3 Firefox versions.
Crisp edges/pixelated images on Chrome is fully supported on 41-114, partially supported on None of the versions, and not supported on 4-40 Chrome versions.
Crisp edges/pixelated images on Safari is fully supported on 10-16.4, partially supported on 6.1-9, and not supported on 3.2-5 Safari versions.
Crisp edges/pixelated images on Opera is fully supported on 11.6-95, partially supported on None of the versions, and not supported on 9.5-27 Opera versions.
Crisp edges/pixelated images on Safari on iOS is fully supported on 10-16.4, partially supported on 5-9, and not supported on 3.2-4 Safari on iOS versions.
Crisp edges/pixelated images on Android Browser is fully supported on 97-111, partially supported on None of the versions, and not supported on 2.1-4 Android Browser versions.
Crisp edges/pixelated images on Opera Mobile is fully supported on 12.1-73, partially supported on None of the versions, and not supported on 10-11 Opera Mobile versions.
Crisp edges/pixelated images on Chrome for Android is fully supported on 97-111, partially supported on None of the versions, and not supported on below 97 Chrome for Android versions.
Crisp edges/pixelated images on Firefox for Android is fully supported on 95-110, partially supported on None of the versions, and not supported on below 95 Firefox for Android versions.
Crisp edges/pixelated images on Samsung Internet is fully supported on 4-20, partially supported on None of the versions, and not supported on below 4 Samsung Internet versions.

100

High

Browser Compatibility Score

High

Browser Support For IE Versions

Fully

7-11

Partially

5.5-6

No Support

Edge

High

Browser Support For Edge Versions

79-111

Fully

Partially

12-18

No Support

Firefox

High

Browser Support For Firefox Versions

3.6-113

Fully

Partially

2-3

No Support

Chrome

High

Browser Support For Chrome Versions

41-114

Fully

Partially

4-40

No Support

Safari

High

Browser Support For Safari Versions

10-16.4

Fully

6.1-9

Partially

3.2-5

No Support

Opera

High

Browser Support For Opera Versions

11.6-95

Fully

Partially

9.5-27

No Support

Safari on iOS

High

Browser Support For Safari on iOS Versions

10-16.4

Fully

5-9

Partially

3.2-4

No Support

Android Browser

High

Browser Support For Android Browser Versions

97-111

Fully

Partially

2.1-4

No Support

Opera Mobile

High

Browser Support For Opera Mobile Versions

12.1-73

Fully

Partially

10-11

No Support

Chrome for Android

High

Browser Support For Chrome for Android Versions

97-111

Fully

Partially

No Support

Firefox for Android

High

Browser Support For Firefox for Android Versions

95-110

Fully

Partially

No Support

Samsung Internet

High

Browser Support For Samsung Internet Versions

4-20

Fully

Partially

No Support

Debug webpages on the go with LT Debug Chrome extension.

Add to Chrome

Test your website on 3000+ browsers

Test your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for Crisp edges/pixelated images and many more web technologies that are a part of your website or web-application.

Test Now

Last Modified date

2023-03-20