You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
761 lines
15 KiB
761 lines
15 KiB
{ |
|
"title":"Crisp edges/pixelated images", |
|
"description":"Scales images with an algorithm that preserves edges and contrast, without smoothing colors or introducing blur. This is intended for images such as pixel art. Official values that accomplish this for the `image-rendering` property are `crisp-edges` and `pixelated`.", |
|
"spec":"https://w3c.github.io/csswg-drafts/css-images-3/#valdef-image-rendering-crisp-edges", |
|
"status":"cr", |
|
"links":[ |
|
{ |
|
"url":"https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering", |
|
"title":"MDN Web Docs - CSS Image rendering" |
|
}, |
|
{ |
|
"url":"https://developer.chrome.com/blog/pixelated/", |
|
"title":"HTML5Rocks article" |
|
}, |
|
{ |
|
"url":"https://bugzilla.mozilla.org/show_bug.cgi?id=856337", |
|
"title":"Firefox bug #856337: Implement image-rendering: pixelated" |
|
}, |
|
{ |
|
"url":"https://bugs.chromium.org/p/chromium/issues/detail?id=317991", |
|
"title":"Chrome bug #317991: Implement image-rendering:crisp-edges" |
|
} |
|
], |
|
"bugs":[ |
|
{ |
|
"description":"`image-rendering:-webkit-optimize-contrast;` and `-ms-interpolation-mode:nearest-neighbor` do not affect CSS images." |
|
}, |
|
{ |
|
"description":"Safari [had a bug](https://bugs.webkit.org/show_bug.cgi?id=193895) where `image-rendering: pixelated` is not supported for WebGL contexts." |
|
} |
|
], |
|
"categories":[ |
|
"CSS", |
|
"CSS3" |
|
], |
|
"stats":{ |
|
"ie":{ |
|
"5.5":"n", |
|
"6":"n", |
|
"7":"a x #2 #5", |
|
"8":"a x #2 #5", |
|
"9":"a x #2 #5", |
|
"10":"a x #2 #5", |
|
"11":"a x #2 #5" |
|
}, |
|
"edge":{ |
|
"12":"n", |
|
"13":"n", |
|
"14":"n", |
|
"15":"n", |
|
"16":"n", |
|
"17":"n", |
|
"18":"n", |
|
"79":"y #4", |
|
"80":"y #4", |
|
"81":"y #4", |
|
"83":"y #4", |
|
"84":"y #4", |
|
"85":"y #4", |
|
"86":"y #4", |
|
"87":"y #4", |
|
"88":"y #4", |
|
"89":"y #4", |
|
"90":"y #4", |
|
"91":"y #4", |
|
"92":"y #4", |
|
"93":"y #4", |
|
"94":"y #4", |
|
"95":"y #4", |
|
"96":"y #4", |
|
"97":"y #4", |
|
"98":"y #4", |
|
"99":"y #4", |
|
"100":"y #4", |
|
"101":"y #4", |
|
"102":"y #4", |
|
"103":"y #4", |
|
"104":"y #4", |
|
"105":"y #4", |
|
"106":"y #4", |
|
"107":"y #4", |
|
"108":"y #4", |
|
"109":"y #4", |
|
"110":"y #4", |
|
"111":"y #4", |
|
"112":"y #4", |
|
"113":"y #4", |
|
"114":"y #4", |
|
"115":"y #4", |
|
"116":"y #4", |
|
"117":"y #4", |
|
"118":"y #4", |
|
"119":"y #4", |
|
"120":"y #4", |
|
"121":"y #4", |
|
"122":"y #4", |
|
"123":"y #4", |
|
"124":"y #4", |
|
"125":"y #4", |
|
"126":"y #4", |
|
"127":"y #4", |
|
"128":"y #4", |
|
"129":"y #4", |
|
"130":"y #4", |
|
"131":"y #4", |
|
"132":"y #4", |
|
"133":"y #4", |
|
"134":"y #4", |
|
"135":"y #4", |
|
"136":"y #4", |
|
"137":"y #4", |
|
"138":"y #4", |
|
"139":"y #4", |
|
"140":"y #4", |
|
"141":"y #4", |
|
"142":"y #4", |
|
"143":"y #4", |
|
"144":"y #4", |
|
"145":"y #4", |
|
"146":"y #4", |
|
"147":"y #4" |
|
}, |
|
"firefox":{ |
|
"2":"n", |
|
"3":"n", |
|
"3.5":"n", |
|
"3.6":"y x #3", |
|
"4":"y x #3", |
|
"5":"y x #3", |
|
"6":"y x #3", |
|
"7":"y x #3", |
|
"8":"y x #3", |
|
"9":"y x #3", |
|
"10":"y x #3", |
|
"11":"y x #3", |
|
"12":"y x #3", |
|
"13":"y x #3", |
|
"14":"y x #3", |
|
"15":"y x #3", |
|
"16":"y x #3", |
|
"17":"y x #3", |
|
"18":"y x #3", |
|
"19":"y x #3", |
|
"20":"y x #3", |
|
"21":"y x #3", |
|
"22":"y x #3", |
|
"23":"y x #3", |
|
"24":"y x #3", |
|
"25":"y x #3", |
|
"26":"y x #3", |
|
"27":"y x #3", |
|
"28":"y x #3", |
|
"29":"y x #3", |
|
"30":"y x #3", |
|
"31":"y x #3", |
|
"32":"y x #3", |
|
"33":"y x #3", |
|
"34":"y x #3", |
|
"35":"y x #3", |
|
"36":"y x #3", |
|
"37":"y x #3", |
|
"38":"y x #3", |
|
"39":"y x #3", |
|
"40":"y x #3", |
|
"41":"y x #3", |
|
"42":"y x #3", |
|
"43":"y x #3", |
|
"44":"y x #3", |
|
"45":"y x #3", |
|
"46":"y x #3", |
|
"47":"y x #3", |
|
"48":"y x #3", |
|
"49":"y x #3", |
|
"50":"y x #3", |
|
"51":"y x #3", |
|
"52":"y x #3", |
|
"53":"y x #3", |
|
"54":"y x #3", |
|
"55":"y x #3", |
|
"56":"y x #3", |
|
"57":"y x #3", |
|
"58":"y x #3", |
|
"59":"y x #3", |
|
"60":"y x #3", |
|
"61":"y x #3", |
|
"62":"y x #3", |
|
"63":"y x #3", |
|
"64":"y x #3", |
|
"65":"y #3", |
|
"66":"y #3", |
|
"67":"y #3", |
|
"68":"y #3", |
|
"69":"y #3", |
|
"70":"y #3", |
|
"71":"y #3", |
|
"72":"y #3", |
|
"73":"y #3", |
|
"74":"y #3", |
|
"75":"y #3", |
|
"76":"y #3", |
|
"77":"y #3", |
|
"78":"y #3", |
|
"79":"y #3", |
|
"80":"y #3", |
|
"81":"y #3", |
|
"82":"y #3", |
|
"83":"y #3", |
|
"84":"y #3", |
|
"85":"y #3", |
|
"86":"y #3", |
|
"87":"y #3", |
|
"88":"y #3", |
|
"89":"y #3", |
|
"90":"y #3", |
|
"91":"y #3", |
|
"92":"y #3", |
|
"93":"y", |
|
"94":"y", |
|
"95":"y", |
|
"96":"y", |
|
"97":"y", |
|
"98":"y", |
|
"99":"y", |
|
"100":"y", |
|
"101":"y", |
|
"102":"y", |
|
"103":"y", |
|
"104":"y", |
|
"105":"y", |
|
"106":"y", |
|
"107":"y", |
|
"108":"y", |
|
"109":"y", |
|
"110":"y", |
|
"111":"y", |
|
"112":"y", |
|
"113":"y", |
|
"114":"y", |
|
"115":"y", |
|
"116":"y", |
|
"117":"y", |
|
"118":"y", |
|
"119":"y", |
|
"120":"y", |
|
"121":"y", |
|
"122":"y", |
|
"123":"y", |
|
"124":"y", |
|
"125":"y", |
|
"126":"y", |
|
"127":"y", |
|
"128":"y", |
|
"129":"y", |
|
"130":"y", |
|
"131":"y", |
|
"132":"y", |
|
"133":"y", |
|
"134":"y", |
|
"135":"y", |
|
"136":"y", |
|
"137":"y", |
|
"138":"y", |
|
"139":"y", |
|
"140":"y", |
|
"141":"y", |
|
"142":"y", |
|
"143":"y", |
|
"144":"y", |
|
"145":"y", |
|
"146":"y", |
|
"147":"y", |
|
"148":"y", |
|
"149":"y", |
|
"150":"y", |
|
"151":"y", |
|
"152":"y", |
|
"153":"y" |
|
}, |
|
"chrome":{ |
|
"4":"n", |
|
"5":"n", |
|
"6":"n", |
|
"7":"n", |
|
"8":"n", |
|
"9":"n", |
|
"10":"n", |
|
"11":"n", |
|
"12":"n", |
|
"13":"n", |
|
"14":"n", |
|
"15":"n", |
|
"16":"n", |
|
"17":"n", |
|
"18":"n", |
|
"19":"n", |
|
"20":"n", |
|
"21":"n", |
|
"22":"n", |
|
"23":"n", |
|
"24":"n", |
|
"25":"n", |
|
"26":"n", |
|
"27":"n", |
|
"28":"n", |
|
"29":"n", |
|
"30":"n", |
|
"31":"n", |
|
"32":"n", |
|
"33":"n", |
|
"34":"n", |
|
"35":"n", |
|
"36":"n", |
|
"37":"n", |
|
"38":"n", |
|
"39":"n", |
|
"40":"n", |
|
"41":"y #4", |
|
"42":"y #4", |
|
"43":"y #4", |
|
"44":"y #4", |
|
"45":"y #4", |
|
"46":"y #4", |
|
"47":"y #4", |
|
"48":"y #4", |
|
"49":"y #4", |
|
"50":"y #4", |
|
"51":"y #4", |
|
"52":"y #4", |
|
"53":"y #4", |
|
"54":"y #4", |
|
"55":"y #4", |
|
"56":"y #4", |
|
"57":"y #4", |
|
"58":"y #4", |
|
"59":"y #4", |
|
"60":"y #4", |
|
"61":"y #4", |
|
"62":"y #4", |
|
"63":"y #4", |
|
"64":"y #4", |
|
"65":"y #4", |
|
"66":"y #4", |
|
"67":"y #4", |
|
"68":"y #4", |
|
"69":"y #4", |
|
"70":"y #4", |
|
"71":"y #4", |
|
"72":"y #4", |
|
"73":"y #4", |
|
"74":"y #4", |
|
"75":"y #4", |
|
"76":"y #4", |
|
"77":"y #4", |
|
"78":"y #4", |
|
"79":"y #4", |
|
"80":"y #4", |
|
"81":"y #4", |
|
"83":"y #4", |
|
"84":"y #4", |
|
"85":"y #4", |
|
"86":"y #4", |
|
"87":"y #4", |
|
"88":"y #4", |
|
"89":"y #4", |
|
"90":"y #4", |
|
"91":"y #4", |
|
"92":"y #4", |
|
"93":"y #4", |
|
"94":"y #4", |
|
"95":"y #4", |
|
"96":"y #4", |
|
"97":"y #4", |
|
"98":"y #4", |
|
"99":"y #4", |
|
"100":"y #4", |
|
"101":"y #4", |
|
"102":"y #4", |
|
"103":"y #4", |
|
"104":"y #4", |
|
"105":"y #4", |
|
"106":"y #4", |
|
"107":"y #4", |
|
"108":"y #4", |
|
"109":"y #4", |
|
"110":"y #4", |
|
"111":"y #4", |
|
"112":"y #4", |
|
"113":"y #4", |
|
"114":"y #4", |
|
"115":"y #4", |
|
"116":"y #4", |
|
"117":"y #4", |
|
"118":"y #4", |
|
"119":"y #4", |
|
"120":"y #4", |
|
"121":"y #4", |
|
"122":"y #4", |
|
"123":"y #4", |
|
"124":"y #4", |
|
"125":"y #4", |
|
"126":"y #4", |
|
"127":"y #4", |
|
"128":"y #4", |
|
"129":"y #4", |
|
"130":"y #4", |
|
"131":"y #4", |
|
"132":"y #4", |
|
"133":"y #4", |
|
"134":"y #4", |
|
"135":"y #4", |
|
"136":"y #4", |
|
"137":"y #4", |
|
"138":"y #4", |
|
"139":"y #4", |
|
"140":"y #4", |
|
"141":"y #4", |
|
"142":"y #4", |
|
"143":"y #4", |
|
"144":"y #4", |
|
"145":"y #4", |
|
"146":"y #4", |
|
"147":"y #4", |
|
"148":"y #4", |
|
"149":"y #4", |
|
"150":"y #4", |
|
"151":"y #4" |
|
}, |
|
"safari":{ |
|
"3.1":"n", |
|
"3.2":"n", |
|
"4":"n", |
|
"5":"n", |
|
"5.1":"n", |
|
"6":"a x #1", |
|
"6.1":"a x #3 #6", |
|
"7":"a x #3 #6", |
|
"7.1":"a x #3 #6", |
|
"8":"a x #3 #6", |
|
"9":"a x #3 #6", |
|
"9.1":"a x #3 #6", |
|
"10":"y", |
|
"10.1":"y", |
|
"11":"y", |
|
"11.1":"y", |
|
"12":"y", |
|
"12.1":"y", |
|
"13":"y", |
|
"13.1":"y", |
|
"14":"y", |
|
"14.1":"y", |
|
"15":"y", |
|
"15.1":"y", |
|
"15.2-15.3":"y", |
|
"15.4":"y", |
|
"15.5":"y", |
|
"15.6":"y", |
|
"16.0":"y", |
|
"16.1":"y", |
|
"16.2":"y", |
|
"16.3":"y", |
|
"16.4":"y", |
|
"16.5":"y", |
|
"16.6":"y", |
|
"17.0":"y", |
|
"17.1":"y", |
|
"17.2":"y", |
|
"17.3":"y", |
|
"17.4":"y", |
|
"17.5":"y", |
|
"17.6":"y", |
|
"18.0":"y", |
|
"18.1":"y", |
|
"18.2":"y", |
|
"18.3":"y", |
|
"18.4":"y", |
|
"18.5-18.7":"y", |
|
"26.0":"y", |
|
"26.1":"y", |
|
"26.2":"y", |
|
"26.3":"y", |
|
"26.4":"y", |
|
"26.5":"y", |
|
"TP":"y" |
|
}, |
|
"opera":{ |
|
"9":"n", |
|
"9.5-9.6":"n", |
|
"10.0-10.1":"n", |
|
"10.5":"n", |
|
"10.6":"n", |
|
"11":"n", |
|
"11.1":"n", |
|
"11.5":"n", |
|
"11.6":"y x #3", |
|
"12":"y x #3", |
|
"12.1":"y x #3", |
|
"15":"n", |
|
"16":"n", |
|
"17":"n", |
|
"18":"n", |
|
"19":"n", |
|
"20":"n", |
|
"21":"n", |
|
"22":"n", |
|
"23":"n", |
|
"24":"n", |
|
"25":"n", |
|
"26":"n", |
|
"27":"n", |
|
"28":"y #4", |
|
"29":"y #4", |
|
"30":"y #4", |
|
"31":"y #4", |
|
"32":"y #4", |
|
"33":"y #4", |
|
"34":"y #4", |
|
"35":"y #4", |
|
"36":"y #4", |
|
"37":"y #4", |
|
"38":"y #4", |
|
"39":"y #4", |
|
"40":"y #4", |
|
"41":"y #4", |
|
"42":"y #4", |
|
"43":"y #4", |
|
"44":"y #4", |
|
"45":"y #4", |
|
"46":"y #4", |
|
"47":"y #4", |
|
"48":"y #4", |
|
"49":"y #4", |
|
"50":"y #4", |
|
"51":"y #4", |
|
"52":"y #4", |
|
"53":"y #4", |
|
"54":"y #4", |
|
"55":"y #4", |
|
"56":"y #4", |
|
"57":"y #4", |
|
"58":"y #4", |
|
"60":"y #4", |
|
"62":"y #4", |
|
"63":"y #4", |
|
"64":"y #4", |
|
"65":"y #4", |
|
"66":"y #4", |
|
"67":"y #4", |
|
"68":"y #4", |
|
"69":"y #4", |
|
"70":"y #4", |
|
"71":"y #4", |
|
"72":"y #4", |
|
"73":"y #4", |
|
"74":"y #4", |
|
"75":"y #4", |
|
"76":"y #4", |
|
"77":"y #4", |
|
"78":"y #4", |
|
"79":"y #4", |
|
"80":"y #4", |
|
"81":"y #4", |
|
"82":"y #4", |
|
"83":"y #4", |
|
"84":"y #4", |
|
"85":"y #4", |
|
"86":"y #4", |
|
"87":"y #4", |
|
"88":"y #4", |
|
"89":"y #4", |
|
"90":"y #4", |
|
"91":"y #4", |
|
"92":"y #4", |
|
"93":"y #4", |
|
"94":"y #4", |
|
"95":"y #4", |
|
"96":"y #4", |
|
"97":"y #4", |
|
"98":"y #4", |
|
"99":"y #4", |
|
"100":"y #4", |
|
"101":"y #4", |
|
"102":"y #4", |
|
"103":"y #4", |
|
"104":"y #4", |
|
"105":"y #4", |
|
"106":"y #4", |
|
"107":"y #4", |
|
"108":"y #4", |
|
"109":"y #4", |
|
"110":"y #4", |
|
"111":"y #4", |
|
"112":"y #4", |
|
"113":"y #4", |
|
"114":"y #4", |
|
"115":"y #4", |
|
"116":"y #4", |
|
"117":"y #4", |
|
"118":"y #4", |
|
"119":"y #4", |
|
"120":"y #4", |
|
"121":"y #4", |
|
"122":"y #4", |
|
"123":"y #4", |
|
"124":"y #4", |
|
"125":"y #4", |
|
"126":"y #4", |
|
"127":"y #4", |
|
"131":"y #4" |
|
}, |
|
"ios_saf":{ |
|
"3.2":"n", |
|
"4.0-4.1":"n", |
|
"4.2-4.3":"n", |
|
"5.0-5.1":"a x #1 #6", |
|
"6.0-6.1":"a x #1 #6", |
|
"7.0-7.1":"a x #3 #6", |
|
"8":"a x #3 #6", |
|
"8.1-8.4":"a x #3 #6", |
|
"9.0-9.2":"a x #3 #6", |
|
"9.3":"a x #3 #6", |
|
"10.0-10.2":"y", |
|
"10.3":"y", |
|
"11.0-11.2":"y", |
|
"11.3-11.4":"y", |
|
"12.0-12.1":"y", |
|
"12.2-12.5":"y", |
|
"13.0-13.1":"y", |
|
"13.2":"y", |
|
"13.3":"y", |
|
"13.4-13.7":"y", |
|
"14.0-14.4":"y", |
|
"14.5-14.8":"y", |
|
"15.0-15.1":"y", |
|
"15.2-15.3":"y", |
|
"15.4":"y", |
|
"15.5":"y", |
|
"15.6-15.8":"y", |
|
"16.0":"y", |
|
"16.1":"y", |
|
"16.2":"y", |
|
"16.3":"y", |
|
"16.4":"y", |
|
"16.5":"y", |
|
"16.6-16.7":"y", |
|
"17.0":"y", |
|
"17.1":"y", |
|
"17.2":"y", |
|
"17.3":"y", |
|
"17.4":"y", |
|
"17.5":"y", |
|
"17.6-17.7":"y", |
|
"18.0":"y", |
|
"18.1":"y", |
|
"18.2":"y", |
|
"18.3":"y", |
|
"18.4":"y", |
|
"18.5-18.7":"y", |
|
"26.0":"y", |
|
"26.1":"y", |
|
"26.2":"y", |
|
"26.3":"y", |
|
"26.4":"y", |
|
"26.5":"y" |
|
}, |
|
"op_mini":{ |
|
"all":"n" |
|
}, |
|
"android":{ |
|
"2.1":"n", |
|
"2.2":"n", |
|
"2.3":"n", |
|
"3":"n", |
|
"4":"n", |
|
"4.1":"n", |
|
"4.2-4.3":"n", |
|
"4.4":"n", |
|
"4.4.3-4.4.4":"n", |
|
"147":"y #4" |
|
}, |
|
"bb":{ |
|
"7":"n", |
|
"10":"a x #1 #6" |
|
}, |
|
"op_mob":{ |
|
"10":"n", |
|
"11":"n", |
|
"11.1":"n", |
|
"11.5":"n", |
|
"12":"y x #3", |
|
"12.1":"y x #3", |
|
"80":"y #4" |
|
}, |
|
"and_chr":{ |
|
"147":"y #4" |
|
}, |
|
"and_ff":{ |
|
"150":"y" |
|
}, |
|
"ie_mob":{ |
|
"10":"a x #2 #5", |
|
"11":"a x #2 #5" |
|
}, |
|
"and_uc":{ |
|
"15.5":"y #4" |
|
}, |
|
"samsung":{ |
|
"4":"y #4", |
|
"5.0-5.4":"y #4", |
|
"6.2-6.4":"y #4", |
|
"7.2-7.4":"y #4", |
|
"8.2":"y #4", |
|
"9.2":"y #4", |
|
"10.1":"y #4", |
|
"11.1-11.2":"y #4", |
|
"12.0":"y #4", |
|
"13.0":"y #4", |
|
"14.0":"y #4", |
|
"15.0":"y #4", |
|
"16.0":"y #4", |
|
"17.0":"y #4", |
|
"18.0":"y #4", |
|
"19.0":"y #4", |
|
"20":"y #4", |
|
"21":"y #4", |
|
"22":"y #4", |
|
"23":"y #4", |
|
"24":"y #4", |
|
"25":"y #4", |
|
"26":"y #4", |
|
"27":"y #4", |
|
"28":"y #4", |
|
"29":"y #4" |
|
}, |
|
"and_qq":{ |
|
"14.9":"y #4" |
|
}, |
|
"baidu":{ |
|
"13.52":"y #4" |
|
}, |
|
"kaios":{ |
|
"2.5":"y #6", |
|
"3.0-3.1":"y" |
|
} |
|
}, |
|
"notes":"Note that prefixes apply to the value (e.g. `-moz-crisp-edges`), not the `image-rendering` property.", |
|
"notes_by_num":{ |
|
"1":"Supported using the non-standard value `-webkit-optimize-contrast`", |
|
"2":"Internet Explorer accomplishes support using the non-standard declaration `-ms-interpolation-mode: nearest-neighbor`", |
|
"3":"Supports the `crisp-edges` value, but not `pixelated`.", |
|
"4":"Supports the `pixelated` value, but not `crisp-edges`.", |
|
"5":"Only works on `<img>`, not CSS backgrounds or `<canvas>`.", |
|
"6":"Only works on `<img>` and CSS backgrounds, _not_ `<canvas>`. " |
|
}, |
|
"usage_perc_y":95.95, |
|
"usage_perc_a":0.28, |
|
"ucprefix":false, |
|
"parent":"", |
|
"keywords":"image-rendering,crisp-edges", |
|
"chrome_id":"5118058116939776", |
|
"shown":true |
|
}
|
|
|