Support image-rendering

[magsout]

input.css

foo {
  image-rendering: pixelated;
}

output.css

foo {
/* IE */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: -moz-crisp-edges;
  /* Safari */
  image-rendering: -webkit-optimize-contrast;
  /* Chrome and Opera */
  image-rendering: pixelated;
}

source : http://www.simevidas.com/2015/05/10/Blowing-up-pixel-art-on-the-Web.html and http://dev.w3.org/csswg/css-images-3/#the-image-rendering

[ai]

@magsout what you mean? What is bad in current workaround? What we should add to Autoprefixer?

[magsout]

oops I deleted the beginning of my message

If it were possible to add support for this property in autoprefixer

[ai]

Strange, Autoprefixer supports crisp-edges https://github.com/postcss/autoprefixer-core/blob/master/data/prefixes.coffee#L315

[ai]

I found a problem. You need to set input:

foo {
  image-rendering: crisp-edges;
}

[ai]

We can also set this behaviour to pixelated value.

[magsout]

thanks 👍

[ai]

@yisibl @simevidas are you agree that we should have some prefixed values for pixelated and for crisp-edges?

[magsout]

@ai there are 3 values : auto crisp-edges pixelated

See http://dev.w3.org/csswg/css-images-3/#the-image-rendering

[simevidas]

@ai The problem is that the 3 prefixed declarations:

-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;

behave like image-rendering: pixelated. The spec includes screenshots which show that pixelated fully preserves pixels, whereas crisp-edges does not. If I remember correctly, Mozilla even acknowledged that their -moz-crisp-edges algorithm corresponds to the spec’s pixelated algorithm.

Maybe the state of implementations is too unstable for Autoprefixer. My current recommendation is to use a CSS utility class for the “preserve pixels” use case, anyway.

[ai]

@simevidas for example, Autoprefixer adds prefixes for flexbox even if specs has big difference.

If -moz-crisp-edges is equal to pixelated, it is OK.

But maybe we should not add prefixes for crisp-edges if all prefixed values do different thing?

[simevidas]

@ai Ah oh. All 3 prefixed declarations correspond to image-rendering: pixelated since they fully preserve pixels. For the crisp-edges algorithm, there are no prefixes that I am aware of.

[ai]

@simevidas so, what you think about this plan to 5.2:

1. Remove prefixes for crisp-edges
2. Add warning on crisp-edges.
3. Add prefixes for pixelated

Is there some case, when user will write crisp-edges right now?

[simevidas]

Sounds good. I’ve checked Mozilla, Chromium, and WebKit bug trackers. The crisp-edges value/algorithm is not even in development anywhere.

[ai]

Done:

ai/autoprefixer-core@3948475
ai/autoprefixer-core@804c4d1

[yisibl]

Good job!

[magsout]

👍 thanks

[mathiasbynens]

I don’t understand why this change (“1. Remove prefixes for crisp-edges”) was made… image-rendering: -moz-crisp-edges; should not be stripped as it’s still the only way to achieve this effect in Firefox. Am I missing something here?

http://caniuse.com/#feat=css-crisp-edges

[mathiasbynens]

Turns out what I was missing was this bug: #632.