Must Know: Browser Compatibility

Prerequisites

• - Supported-browser matrix approved by product/support.
• - Fallback behavior for unsupported API sets.
• - QA matrix covering desktop and mobile target browsers.

Step 1: Define support baseline

Set a clear evergreen baseline and publish unsupported scenarios.

Supported baseline:
- Latest Chrome, Edge, Firefox, and Safari
- Current mobile Safari and Chrome on Android

Step 2: Apply feature detection before enhancement

Use lightweight checks for custom-elements and shadow DOM support.

const supportsWebComponents =
  'customElements' in window &&
  'attachShadow' in Element.prototype;

Step 3: Provide fallback or support guidance

When support is missing, route users to a clear fallback and support message.

if (!supportsWebComponents) {
  document.documentElement.classList.add('diwa-fallback-mode');
}

Implementation Notes

• - Keep support policy mirrored in docs and support responses.
• - Fallback mode should preserve critical user tasks even with reduced UI richness.
• - Track fallback-mode usage to inform deprecation or additional support investment.

Troubleshooting

• - If compatibility bugs appear only in one browser, isolate API assumptions and polyfill strategy.
• - If support requests spike after release, verify fallback messaging clarity.
• - If route behavior differs across browsers, test loader timing and CSS variable availability.

Next Actions