CODEWITHSUNDEEP
javascriptjquerycsscompatibility
PeregrineStudios
PeregrineStudios

Reputation: 49

jQuery Fallbacks for Unsupported CSS Properties?

I'm currently enrolled in a web design course, and one of our assignments is to come up with two CSS3 properties that are NOT compatible with every major browser (IE, Chrome, Opera, Safari, and Firefox). Easy as cake, right? CSS3 is relatively new, there must be dozens of properties that aren't fully supported. And I was wrong. I've barely been able to find ANY such properties, and all except ONE of the properties I've found have been unsuitable, because the second half of the assignment is to create a jQuery fallback that duplicates their functionality, regardless of browser. It also has to actually make sense to use jQuery for the issue (for instance, you can't just use jQuery to change a text-stroke to a drop-shadow, since that's mainly just CSS. jQuery needs to be the major player. It also needs to work without needless extra HTML - for example, if it's an image effect, it needs to work straight on the image, not necessitate putting the image inside a canvas element first).

The resize property is the one example I've found that's worked. It's not supported in IE at all, but jQuery handles it no problem in any problem. Unfortunately, every single other thing I've tried has not had a remotely suitable fallback option in jQuery. My first thought was to use image filters, such as sepia and blur, which are new in CSS3 and currently not supported in Firefox or IE - however, every single piece of jQuery, plugins or code snippets or what have you, has not worked at all, mainly because all they do is use the -webkit-filter and filter property, which, as you know, is not supported at all in Firefox or IE, hence why I'm trying to do it WITHOUT CSS in the first place!

And virtually every single thing I've found has been like that. The CSS is either supported everywhere, or if it's not, there doesn't appear to be ANY functionality within jQuery to duplicate ANY of it without using the same unsupported CSS!

I'm honestly at the end of my rope here. I'm out of ideas and I haven't found anything except the resize property. I need one CSS property, that is not compatible with every major browser, that jQuery can duplicate WITHOUT using the same unsupported CSS property. Any and all answers and suggestions are greatly, greatly appreciated.

TLDR; Are there any CSS3 features that are not supported by all major browsers but can be replicated through the use of jQuery?

Upvotes: 1

Views: 279

Answers (1)

Christina
Christina

Reputation: 34652

These days we employ graceful degradation if at all possible.

To answer your question: http://caniuse.com/#search=pseudo will get you started. See the red, find a jQuery equiv.

Here's some resources:

Though I don't know if that's a good example.

Try clicking around here: http://caniuse.com/

Upvotes: 2

Related Questions