If you’ve ever visited a website and noticed that it loaded differently in Chrome versus Firefox, this is because each browser renders a website slightly differently. To ensure that users experience a website the same way across browsers, we need to consider browser compatibility—the ability for a website to be rendered in the same way across all available modern browsers. In this lesson, we will learn about the different issues related to browser compatibility when building a website.
Throughout this lesson, you will be prompted to view websites on different browsers. If you don’t have them already, it is recommended that you have Chrome and Firefox installed. No need to worry if you don’t have either browser available on your computer—there will be screenshots throughout the lesson!
Take a look at Pleasant Cafe’s website on the right. View the website in both Chrome and Firefox. What differences can you find between the two browsers?
Click to reveal the answer!
Take a look at the images above. The image on the left shows the website rendered in Chrome, and the image on the right is the website rendered in Firefox. Here is a list of differences you will find across the two browsers:
- The font weight of the word “Pleasant” in the header
- The bulleted menu items underneath the “Pleasant Cafe” header text
- The layout of images of coffee and plants