Learn about browser compatibility and the different techniques to create a consistent user experience regardless of the browser and its version.

Browser Compatibility

Every now and then, exciting new HTML, CSS, and JavaScript features get released. However, these new features may not be immediately usable because different browsers adopt new web features at different speeds. For example, Internet Explorer did not support many CSS3 features until Microsoft Edge was released, even though many other browsers had already adopted these features by that point.

The availability of CSS features differs across browsers and their versions. Using a CSS property supported only on select browsers will create inconsistent experiences for users. Thankfully, there are tools such as [caniuse.com](http://caniuse.com) that can help you find out what browsers support a particular CSS feature.

Checking Availability

Congratulations! In this lesson, you learned about browser compatibility and how to resolve issues that occur when websites are rendered across different browsers and their various versions. Let's take a moment to review what we learned:

* We can check whether a CSS feature is available on specific browsers using tools like [caniuse.com](http://caniuse.com).
* Browsers have default styles which we can check using resources like [browserdefaultstyles.com](https://browserdefaultstyles.com/).
* We sometimes need to use browser-specific prefixes, especially for new CSS features.
* Polyfills provide a way to support newer web features on older browsers.

You are well on your way to developing amazing websites that work consistently on various browsers and devices!

Review

_[Vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)_ are prefixes for property names that were developed as a way of testing new CSS features or standards before browsers fully supported them. These prefixes were never intended to be used on production websites, but they are sometimes required to use certain new and cutting-edge features or to support older versions of browsers when those features were cutting edge.

Common vendor prefixes include:

* `-webkit-` for Chrome, Safari, newer versions of Opera, and almost all iOS browsers, including Firefox for iOS
* `-moz-` for Firefox
* `-ms-` for Internet Explorer and Microsoft Edge
* `-o-` for old pre-WebKit versions of Opera

Eventually, these experimental features are fully adopted into all browsers, at which point the vendor prefix is no longer required. Remember that browsers adopt features at different rates&mdash;for newer CSS features, you may need to include prefixed property names alongside. An example of this for the `transform` property would be as follows:

```css
.tilted {
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}
```

Rather than looking through every CSS feature on your site to determine which features require vendor prefixes, you can also use tools such as [Autoprefixer](https://github.com/postcss/autoprefixer) to automatically include all vendor prefixes for the features that require them.

Vendor Prefixes

It's difficult to keep track of which CSS properties are not supported in certain browsers and their versions. [_Polyfills_](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) are JavaScript codes that allow older browsers to behave as though they understand more advanced features than they actually do. These codes rewrite the HTML and CSS codes to simulate features that have not yet been adopted by that version of the browser.

For example, the `text-shadow` property is not supported in some older versions of Internet Explorer and Firefox but can be simulated using other CSS properties. Using JavaScript, we can replace CSS declarations depending on which browser version a user is using to view the website.

For a more comprehensive solution, we can use tools such as [Modernizr](https://github.com/Modernizr/Modernizr) or [Polyfill.io](https://github.com/financial-times/polyfill-service) to automatically identify and provide all of the polyfills that our website might need, ensuring that it can run as smoothly as possible on older browsers.

Polyfills

Browsers are based on [browser engines](https://en.wikipedia.org/wiki/Browser_engine)&mdash;the core component responsible for rendering HTML, CSS, and JavaScript in the browser. For example, Chrome, Opera, and Edge use [Blink](https://en.wikipedia.org/wiki/Blink_(browser_engine)) as their browser engine, whereas Firefox uses [Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) and Safari uses [Webkit](https://en.wikipedia.org/wiki/WebKit). Each of these engines renders features such as margins, padding, colors, or text slightly differently. This is because different browsers have different _default styles_.

For example, the default text color of the `<a>` element in most browsers is `#0000EE`, but in Internet Explorer 11, the value is `#0066cc`. We can use tools such as [browserdefaultstyles.com](https://browserdefaultstyles.com/) to compare default styles across browsers.

There are also tools that we can use, such as [normalize.css](https://necolas.github.io/normalize.css/) and [minireset.css](https://github.com/jgthms/minireset.css), to eliminate differences between browser default styles and ensure that all elements are rendered the same way across browsers.

Browser Defaults

What is your default browser? Is it [Chrome](https://www.google.com/chrome/), [Firefox](https://www.mozilla.org/en-US/firefox/products/), [Safari](https://www.apple.com/safari/), or [Microsoft Edge](https://www.microsoft.com/en-us/edge)? These are just a few of the many browsers used to view websites.

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_&mdash;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](https://www.google.com/chrome/) and [Firefox](https://www.mozilla.org/firefox/) installed. No need to worry if you don’t have either browser available on your computer&mdash;there will be screenshots throughout the lesson!