What are the known working work arounds for filters in non compatible Browsers

Browser & Compatibility
1

I normally do not care about IE or FF when I write my pages as the people who use them mainly will be using Chrome or Safari and do not have public access.

My inexperience of IE ( avoid it like the plague ) leads me to a few questions in relation to Hype filters and non compatible Browsers

1, Anyone have any known working work arounds (i.e Text-Shadow, blur )

For example these do not work in IE9.

    <style>
	.ttext {
      
   filter: Shadow(Color=white, Direction=130, Strength=10)!important; /* IE Proprietary Filter*/
}


	
	</style>

   <style>
.ttext { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
	
	</style>

2, What oldest version you would normally test against and cover. (IE/FF)

Should I for example ignore IE9

3, What is considered best practice when you want to cover most common browsers.

2

Ok after a resounding response…
I realise maybe this is too broad and like me no one gives a poop about IE support.

I did find a few post that suggest we should stop supporting most of the older versions of IE.

Which makes sense to me.

But since I trust you all’s opinion and and many of you have expirence of what is the reallity out there, I would love to garner your views or what you do…

3

I'll give this a shot... Good question.

While I can't really offer specific work I've been assigned with old browser requirements, I think part of establishing work with a client is setting baseline support: are you going to support 90% of users? Will you recommend newer browsers to site visitors who use decade-old browsers? ( Outdated Browser - Update your Browser )

Some of the workaround for blurs / text shadows are downright ridiculous: CSS Blurred Text-Shadow in IE — Part I

This is reasonable:

https://medium.com/@MateMarschalko/css-filters-all-the-way-down-to-ie4-6349d61c4cce

This should work in IE9:

text-shadow: -14px -14px 2px rgba(150, 150, 150, 1);

I think it depends on the demographic data you already have for the site you're working on. If it's a new site, I would support only the top browsers. If it is for a known population, you can use Google Analytics to drill down and see the exact number of people who would not see your effect.

Browser Market Share Worldwide | Statcounter Global Stats & "Can I use" usage table are good tables for seeing market share.

Most browser features like text shadow and blur are delightful additions that don't dramatically affect the experience of the smaller percentage of users on older browsers who don't experience them. I think things like video and audio (features which are likely core to the functioning of the site ) should work for everyone.

I've seen some people overlay a foggy translucent GIF on top of text to simulate blur. Might work?

1 Like
4

Thans @Daniel,

This really helps.. sinc e( in my case) this would be for new site this helps me in thinking to steer towards only supporting the Top browsers. So hopefully I do not have to mess about too much.

But it may be a good idea to see ( Google Analytics) what my relative is already getting on their current site (host streaming which they are leaving ).

And once we have an idea see what they want to do..

This is very good advice to bear in mind.

It does not suprise me most people use Chrome. It seems to me that their approach to the business sector and their intergration of the cloud based apps and business workflows is what drives this.

I do not have access to Edge so do not know what it accepts and does not, probably not to hard to find out but do you or anyone else have any expirence with it.. gripes etc.