Zum Zeitpunkt des Schreibens funktioniert dies nur in Chrome 18+, aber es ist standardisiert, sodass die Unterstützung schließlich überall verfügbar sein wird.
@media print {
body {
/* IE4-8 and 9 (deprecated). */
filter: Gray();
/* SVG version for IE10, Chrome 17, FF3.5,
Safari 5.2 and Opera 11.6 */
filter: url('#grayscale');
/* CSS3 filter, at the moment Webkit only. Prefix it for
future implementations */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* future-proof */
}
}
Ich freue mich auf
Dave, ich habe etwas Ähnliches gemacht hier.
Dave: Mach einfach {filter: grayscale(0%); } und du kannst auch Übergänge verwenden. Schau dir dieses Dabblet an: http://dabblet.com/gist/2916403
Ich habe versucht, diesen Code für meine Social-Icons auf meinem Blog zu verwenden, aber er funktioniert nicht gut
Chrome – tolles Ergebnis, das Icon erscheint in Graustufen
IE – das Icon erscheint in Farbe
Firefox – das Icon erscheint gar nicht
Ich glaube, diese Zeile funktioniert nicht
Ich habe den SVG-Filter, wenn das Body-Tag wie in der referenzierten URL definiert geöffnet wird.
Irgendeine Idee, wie man das lösen kann?
Bei mir funktioniert es für IE10 nicht, wie kann ich das für IE10 machen?
Funktioniert nicht für IE 10
Vorsicht! Das hat vielleicht 2012 noch funktioniert, aber die Verwendung von filter() in einem Druck-Stylesheet im Jahr 2018 hat die Druckqualität in Safari und noch schlimmer in Firefox auf einem Mac mit Mojave völlig ruiniert. Hat mich heute etwa 3 Stunden Debugging und einen guten Teil meiner Haare gekostet.
Druckqualität? Faszinierend. Es wäre interessant, einige Fotos von Ausdrucken von Bildern zu sehen, bei denen ein Graustufenfilter angewendet wurde und bei denen nicht.
Verrückt, oder? Ich habe beim Testen und Debuggen eine Menge Seiten ausgedruckt. Hier ist eine Nahaufnahme von zwei Seiten: https://i.imgur.com/0mwUWvR.jpg
Die Seite links wurde gedruckt, als das Druck-Stylesheet noch die filter()-Regeln enthielt. Die auf der rechten Seite war dieselbe Seite, nachdem ich die Regeln auskommentiert hatte.
Dies schien nur auf OSX ein Problem gewesen zu sein. Und das Problem war in Firefox merklich schlimmer, obwohl Ausdrucke von Safari gezackt waren.