Although it’s not the most semantic solution, couldn’t you just create to divs, both containing the “6” where on has color: red and the other color: white & the filter and then just stack them with a bit of displacement?
Any comments/improvements on this? The idea is that it goes into a separate stylesheet with a conditional statement. All other browsers will be using the modern implementation (which isn’t shown in the pen for demonstrative purpose).
Unfortunately we run into the same trouble when trying to apply a blur – the special IE filters do not seem to work at all anymore. The only way to reliably implement a blur would be to wrap the text inside an svg and apply a Gaussian deviation, which would really lead to far. It does look a lot better (than nothing at all) with a pseudo element already though. And using hsla, supported in IE9, can help a bit as well.
Just happened to stumble upon this topic, and wanted to weigh in. I am also having no success using the IE filters any longer. The filter appears to be applied via the Developer Tools, but IE refuses to render it.
Thank you for that update, as that was the case for me as well. I viewed my site through IE Tester, and the filters were working just fine. Perhaps IE 10+ developer’s tools uses an emulator that does not totally render the way the legacy browsers do. Thankfully this is not an issue in 99% of the work that I do.
@jaybadz-css Your guess is right. IE10+ Developer Tools are busted and should not be used for doing serious testing.
I’ve got a virtual machine with IE9 for that (as you cannot install multiple IE versions -.-). Alternatively services like crossbrowsertesting.com may help to test with (nearly) every possible device-os-browser-combination (they are much slower, though).