0

I am trying to write a JavaScript patch for older browsers. Normally I would begin with some feature-detection code, such as this:

var img=new Image();
if(img.getAttribute('srcset')) … // already support

but I have a problem with browsers which implement the feature in part.

Specifically, I am trying to patch in the srcset attribute. Most modern browsers will report the attribute as being supported, but not all of them support it fully (they support the x property, but not the w property).

Is there a JavaScript method which would detect this?

Thanks

Manngo
  • 14,066
  • 10
  • 88
  • 110
  • There are really only a couple options. Either you find a feature test that you can code and run that tests whether the `w` property actually works or not or you make a list of which browsers support the full feature and you detect those browsers (in some other way). Though feature detection is always preferred, sometimes there simply isn't a good way to do feature detection, particularly when a browser does a partial or buggy implementation. – jfriend00 Jul 27 '15 at 07:13
  • I was hoping to avoid browser sniffing. The answer below helps with this particular case, but the lack of a proper JavaScript method may prove to be a pain for other partially implemented features. – Manngo Jul 28 '15 at 11:09

1 Answers1

1

What is wrong with one of these polyfills:

Or a partial polyfill like this one:

Detecting whether a browser supports the width descriptor is quite easy, if you have basic JS and responsive image knowledge.

Therefore, I really would suggest that you use one of the polyfills above.

var img = document.createElement('img');
var isWSupported = ('sizes' in img);
alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • @alexande-farkas: are you saying here that any browser that supports the width descriptor also supports the `sizes` attribute? That would simplify this particular issue. I was also interested from a more general perspective of detecting partial implementation. – Manngo Jul 28 '15 at 01:26
  • Yes, if you read the spec, you will see that the `sizes` attribute is a) only related to w descriptors and b) a necessary attribute to implement the w descriptor. – alexander farkas Jul 28 '15 at 07:05
  • @john The sample code in this answer, plus the follow-up comment, _do_ address the specific question in pure JavaScript. As regards laming out, OP is very competent and avoids third party libraries for all but the most specialised of tasks. Answer was accepted for the JavaScript snippet & follow-up comment. Please reverse accordingly. – Manngo Mar 14 '16 at 20:40