Browser Compatibility

Web developers will often have a preferred Internet browser. Naturally, that same browser is the one used to preview websites and web applications in development. There are, however, a multitude of browsers (and many versions of those browsers), resulting in a variety of experiences for users. This creates a problem for developers: how can we ensure that a website is compatible across as many browsers as possible?

In this article, you'll learn about the varying, default CSS rules that different browsers apply to HTML, how to reset default browser CSS, and how to increase browser compatibility for websites.

User Agent Style Sheets

When building a website, you've probably noticed that heading elements like h1 are always a default size (and font) or that hyperlinks always appear blue and underlined, all before you add your own styles. Why is that so? And how does that happen?

All browsers have a default set of CSS rules that they apply to HTML. The default CSS rules live in a stylesheet specific to the browser. The stylesheet is known as a user agent style sheet.

If you were to view the same website across many different web browsers, you might notice that the website looks different in each browser. This is because each browser has its own user agent stylesheet. This variance in user agent style sheets is what makes it difficult to create a website that is consistent across all browsers.

Resetting User Agent Stylesheets

Designing a website across browsers with different user agent stylesheets can be a frustrating experience. To avoid this problem, it's very common to reset the user agent stylesheets using a CSS reset stylesheet (often shortened to "CSS reset").

CSS resets remove all browser-added styling to make sure that all content starts at the same starting point for developers. Using a CSS reset stylesheet can be accomplished using the following steps:

  1. Create a reset.css file.
  2. Copy and paste CSS reset rules into the reset.css file.
  3. Link to reset.css in the HTML file (make sure reset.css is loaded first before other CSS files, otherwise reset.css may reset your custom rules by accident).
<!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 a reset.css stylesheet linked in an HTML file.

A popular CSS reset can be found here.

Browser Support

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:

For example, if you search "Can I use" for the CSS property filter (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 a support 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.

Global Support vs Unprefixed Support

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 a vendor prefix. For example, the -moz vendor prefix refers to Mozilla Firefox's implementation. A full list of vendor prefixes can be found here.

The following code demonstrates how the transition property 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; }

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 the transition declaration were written in the previous example).

To identify exactly which CSS properties need vendor prefixes, you can use tools like this one to generate all of the necessary vendor prefixes for you.

Polyfills

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

Polyfills:

  1. Detect the user's browser.
  2. Collect information about which features are supported by the browser.
  3. 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:

  1. Navigate to the website and click "Download."
  2. Click the + next to any features you want to polyfill.
  3. Click "Build."
  4. Click "Download" next to the "Build" option in the resulting pop-up. This will prompt you to download a JavaScript file (the polyfill code).
  5. Place the downloaded .js file (JavaScript file) into the corresponding folder in your website's directory.
  6. Link the JavaScript file using a <source> tag in your index.html file.
  7. 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 code feature-name is 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); }

Review

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

  1. A website may not look the same in all browsers (or versions of browsers) due to differing user agent stylesheets across browsers.
  2. User agent stylesheets can be reset with a CSS reset stylesheet.
  3. A CSS reset stylesheet can be linked in an HTML file.
  4. Resources like "Can I use" allow you to check if a CSS feature is supported across multiple browsers.
  5. Vendor prefixes increase the browser compatibility of CSS features. This is because they indicate to browsers how the rule should be specifically implemented.
  6. 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.

Tehtud New York City's &copy; 2018 Codecademy