<!DOCTYPE html><html><head>  <title>My Title</title>  <link href="reset.css" type="text/css" rel="stylesheet">  <link href="styles.css" type="text/css" rel="stylesheet"></head>

The example above demonstrates areset.cssstylesheet linked in an HTML file.

A popular CSS reset can be foundhere.

When new browsers are developed (or an existing browser is updated), they often include new features that weren’t previously available. The result, however, is a multitude of browsers with varying functionalities.

To avoid inconsistencies across browsers when creating a website, developers must ensure that newer HTML or CSS features are supported in each browser. The following resource is an up-to-date record of CSS properties across many versions of many browsers:

• “Can I use“

For example, if you search “Can I use” for the CSS propertyfilter(a property that can add a visual effect to an image), you’ll see that it is supported in most browsers, except for Internet Explorer 11 and Opera Mini.

When a feature is searched using the resource above, the search results include asupport matrix. The support matrix outlines which browsers (and browser versions) support the feature. The bottom of the pane also includes information about known issues and bugs.

In the top-right corner of “Can I use”, there is information on “global support” and “unprefixed support”. What do these terms mean and what is the difference between them?

As stated earlier, every browser has its own implementation of many newer CSS rules. To distinguish their own implementation, browsers add a prefix to the CSS property. The prefix is known as avendor prefix. For example, the-mozvendor prefix refers to Mozilla Firefox’s implementation. A full list of vendor prefixes can be foundhere.

The following code demonstrates how thetransitionproperty is implemented across all browsers using vendor prefixes.

h1 {  -webkit-transition: all 4s ease;  -moz-transition: all 4s ease;  -ms-transition: all 4s ease;  -o-transition: all 4s ease;  transition: all 4s ease;}
Copy to clipboard

h1 {  -webkit-transition: all 4s ease;  -moz-transition: all 4s ease;  -ms-transition: all 4s ease;  -o-transition: all 4s ease;  transition: all 4s ease;}

The “global support” value mentioned earlier represents the percentage of supported browsers for the specified feature if all necessary prefixes are used (as is the case in the previous example). The “unprefixed support” value represents the percentage of supported browsers for the feature if no prefixes are used (if just thetransitiondeclaration were written in the previous example).

To identify exactly which CSS properties need vendor prefixes, you can use tools likethis oneto generate all of the necessary vendor prefixes for you.

Even with vendor prefixes, what if a user is using a browser that doesn’t support newer browser functionalities? Developers have created libraries calledpolyfillsto support such users.

Polyfills:

• Detect the user’s browser.
• Collect information about which features are supported by the browser.
• Return the collected information to your website.

The collected information allows you to write alternative CSS for browsers that are missing certain features. Your website may not look as visually appealing as it would on a newer browser, but it will function.

One example of a polyfill is Modernizr. To use Modernizr:

• Navigate to the websiteand click “Download.”
• Click the+next to any features you want to polyfill.
• Click “Build.”
• Click “Download” next to the “Build” option in the resulting pop-up. This will prompt you to download aJavaScriptfile (the polyfill code).
• Place the downloaded.jsfile (JavaScript file) into the corresponding folder in your website’s directory.
• Link the JavaScript file using a<source>tag in yourindex.htmlfile.
• Use CSS to target elements that have the detected feature using.feature-name. To target elements that don’t have the detected feature use.no-feature-name. The codefeature-nameis intended to represent the actual CSS feature.

An example of alternative CSS rules from the Modernizr documentation:

/* Use this rule if the user's browser doesn't support gradients */.no-cssgradients .header {  background: url("images/glossybutton.png");}

/* Use this rule if the user's browser does support gradients */.cssgradients .header {  background-image: linear-gradient(cornflowerblue, rebeccapurple);}
Copy to clipboard

/* Use this rule if the user's browser doesn't support gradients */.no-cssgradients .header {  background: url("images/glossybutton.png");}

/* Use this rule if the user's browser does support gradients */.cssgradients .header {  background-image: linear-gradient(cornflowerblue, rebeccapurple);}

Let’s review what you’ve learned about browser compatibility.

• A website may not look the same in all browsers (or versions of browsers) due to differing user agent stylesheets across browsers.
• User agent stylesheets can be reset with a CSS reset stylesheet.
• A CSS reset stylesheet can be linked in an HTML file.
• Resources like “Can I use” allow you to check if a CSS feature is supported across multiple browsers.
• Vendor prefixes increase the browser compatibility of CSS features. This is because they indicate to browsers how the rule should be specifically implemented.
• Polyfills are libraries that increase the browser compatibility of a website. They allow developers to write alternative CSS rules based on whether or not a browser supports a certain feature.

Users have the option of selecting from a multitude of browsers and browser versions. Because of this, it’s important to create websites that are compatible across a wide array of browsers. Increasing your website’s browser compatibility is not only good practice, it also increases your website’s accessibility to the potential billions of users around the globe.

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'