It seems inevitable for me to fall into some browser compatibility trap from time to time. The last “blogpost worthy” one that I faced was fun, but still, it was traceable through the standard browser compatibility resources such as caniuse.com or MDN Web Docs browser compatibility tables.

Well, this time, MutationObserverInit.attributeFilter gave me a bit of a hard time.

While working in some implementation that requires me to detect when a DOM element is mutated, I did not blink an eye when it came to choosing the MutationObserver API to get the job done. But this time, I used something different, that was MutationObserverInit.attributeFilter.

The problem here is that the relevant browser compatibility information was not accurate for the usage of attributeFilter, especially for Internet Explorer and Edge browsers. It happens that these browsers throw a syntax error upon the usage of this API without setting a flag, I won’t bother you with the details, you can now check caniuse.com attributeFilter compatibility information, you might find all the details about this issue there.

The point here is that we might be reaching soon (maybe a few years more) a more stable era of browsers with the discontinuation of IE and the Microsoft Edge big move on becoming a Chromium-based browser. In the meantime, we can all contribute to a compatible web. How can we individually help?

• You see a browser-specific funky issue.
• You can’t find any references for the issue online, especially in official sources such as caniuse and MDN browser compatibility tables.
• You go to mdn/browser-compat-data, and there’s no open Pull Request or ongoing issue that points towards the problem you found.

If you tick all the checkboxes ✅ in the previous list, you can go ahead and open a Pull Request on mdn/browser-compat-data; the mdn team, me, and all the community own you a big thanks for documenting the issue. Lastly, but most importantly, you’ll be ensuring that no one has to go through all the pain to debug and figure out why the hell your application was breaking.

I did so, with the attributeFilter issue on the MutationObserverInit.attributeFilter API. Here’s the final result where caniuse is displaying the information for users about the compatibility issue on the attributeFilter API.

source: https://caniuse.com/#search=attributeFilter

I hope this short episode makes you aware that you can help to make the web compatible and help the community get relieved of all of these annoying nuances of the different JavaScript APIs in the various browsers, especially when working with Internet Explorer and Edge.