Lesson Weekend

We just learned about flexbox pseudo-classes, and pseudo-elements. Hopefully you've found them to be a much easier solution to creating layouts with floats and hard-coded positions, or altering a site's appearance based on state.

But they do have a downside. Like many new CSS features, not every browser supports them. But don't worry! We just need to learn clever workarounds to ensure they work correctly in all browsers.

In this lesson we'll learn about browser cross-compatibility and how we can use something called prefixing to make new CSS features work in almost any modern browser.

Cross-Browser Testing

Browser support is a huge deal in web development. While most of us use up-to-date versions of Chrome or Firefox, you’d be surprised how many people still use outdated browsers like Internet Explorer 8. Because of this, developers are constantly striving to uphold standards to include support across all platforms. After all, companies want their sites to be functional and beautiful for everyone, not just those with the newest browsers.

Cross-browser testing helps make this possible. It’s not something we’ll explicitly practice in class, but you can read more about it here and check out some tools (free or paid) at your own leisure. For now, just know what the term means.

Vendor Prefixes

Sometimes browsers also implement new CSS features in their own proprietary way before rolling out full support. This allows developers to test new functionality while still providing alternatives to styles that aren’t supported in certain browsers. You’ve may have seen these online. They're called vendor prefixes, and they look something like this:

.sample-parent-container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

In this example the developer has added a border-radius property to an element. But border-radius only recently gained browser support. So, before it was fully implemented, developers had to manually include the relevant vendor prefixes for each type of browser they wanted the style to appear in.

All four style declarations in the rule above do the exact same thing, but are meant for different browsers:

.sample-parent-container {
  -moz-border-radius: 10px; // adds 10px border radius to element in Firefox.
  -webkit-border-radius: 10px;  // adds 10px border radius to element in
                                // Android, Chrome, iOS, and Safari.
  -o-border-radius: 10px; // adds 10px border radius to element in Opera.
  border-radius: 10px; // non-prefixed version of this same declaration.
}

It's best practice to list all prefixed style declarations for all browsers your site will support, then list the "normal" un-prefixed declaration last, as seen above. (Notice the last style declaration is border-radius: 10px, without a prefix.)

Common Prefixes

Here are the most commonly-used prefixes, and the browsers they work with:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

As mentioned, it's best practice to include support for all browsers. But for the purposes of learning and practice, don’t worry too much about including fallback support (just be aware how!). For class projects, stick to using Chrome as usual.

Autoprefixers

Worth noting, however, is a tool that lets us avoid testing/researching whether each of our style declarations work in every browser: Autoprefixer. Autoprefixer is a CSS post-processor that takes our code and automatically adds prefixes as necessary.

For example, this code that creates a flexbox:

.example {
  display: flex;
}

Would automatically turn into this after being ran through an auto-prefixer:

.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

It's common to implement an automated autoprefixer through a task runner like Webpack (which you'll learn about in your JavaScript course). We won't do this in this course, but you're welcome to either explore this independently, or use a web-based autoprefixer like this one that allows you to copy/paste CSS into it, and receive the appropriately-prefixed version as output.

Vendor Prefix Lifespan?

However, keep in mind vendor prefixes might not be around that much longer anyway. As emphasized in the MDN Documentation on Vendor Prefixes:

Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites.

For this reason, vendor prefixes and autoprefixers aren't required for our course. We've got plenty else to keep us busy. But know what they are, why they exist, and what an autoprefixer does, in case you encounter them on the job, or in an interview.

Additional Resources

  • Can I Use? is an excellent resource that can quickly tell you which browsers support which CSS properties.

  • If you're interested in experimenting with autoprefixers on your own, we suggest trying Post CSS's AutoPrefixer, used and recommended by Google, Twitter, and more.

  • If you need prefixes on-the-fly, use this copy & paste online compiler mentioned above.

Lesson 15 of 36
Last updated more than 3 months ago.