How to ensure cross-browser compatibility in Azure Static Web Apps with React?
I'm having a hard time understanding Currently developing a React app deployed on Azure Static Web Apps, I'm trying to ensure that it works seamlessly across different browsers... During testing, I noticed that certain CSS properties, like `flexbox` and `grid`, are not rendering properly in older versions of Safari and Internet Explorer. To work around these issues, I've tried using CSS fallbacks and prefixes, such as `-webkit-` for Safari, but the layout still breaks. I've also considered implementing polyfills for JavaScript features unsupported by older browsers using the `core-js` library. Here's an example of how I've set it up in my project: ```javascript import 'core-js/stable'; import 'regenerator-runtime/runtime'; ``` Additionally, I've reviewed the Azure Static Web Apps documentation for any specific configurations that might help with compatibility, but I didn't find any relevant guidance. My `package.json` currently includes the following dependencies, and I suspect my build process might need some adjustments: ```json "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", "core-js": "^3.6.5" } ``` For testing, I've been using BrowserStack to simulate various environments and identify the issues. While debugging, I've noticed that the console shows warnings related to CSS properties in those browsers, which makes me think I could optimize my styles with a more careful approach. What strategies or tools can help me improve cross-browser support in this context? Are there best practices I should adopt for styling and script execution that align with Azure's deployment capabilities? This is my first time working with Javascript 3.11. Any ideas how to fix this? I'm working in a Ubuntu 20.04 environment. Thanks, I really appreciate it!