Browser support

- [Instructor] Although Flexbox and Grid have wide support in modern browsers, there will still be some users who are using browsers that do not support these parts of CSS. In particular, users in countries outside of North America and Europe are more likely to be using older devices, older browsers or inexpensive mobile phones that lack support for Flexbox and Grid. With responsive design, you want your layout to look good in all different viewport sizes but also you want to make it usable for as many people as possible. It may not look the way you want it to look in these older or inexpensive devices but you can at least make sure the site works correctly and allows users to read all the content.

Browsers ignore CSS that they don't understand. So, if a browser doesn't understand Flexbox or Grid, it just ignores that CSS. If you made sure to create your HTML in a good order, then the content will be displayed in that order. Often this is enough to make sure that users can at least access all of the content. If you want to make sure your design looks okay in other browsers, there's more you can do. Test on a wide range of devices and browsers or use tools like BrowserStack to do virtual tests. You can target additional CSS to devices that don't support Flexbox and Grid using feature queries.

These work much like media queries but instead of doing a query for something like the width of the viewport, it finds out whether the browser supports a specific feature such as Grid. Feature queries are outside of the scope of this course but you may wish to learn more about them if you need to design for both modern browsers and also browsers that don't support Flexbox and Grid.