Browser support

Elements includes support for a lot of CSS features that are only available in modern evergreen browsers, such as grid layout, object-fit/position, and sticky positioning, and uses other modern CSS features like custom properties to implement utilities like translate, rotate, and scale.

That said, because Elements is such a low-level framework you can still easily use it to build sites that need to support older browsers like IE10/11.

# Using Elements with older browsers

In popular component-based frameworks like Bootstrap or Bulma, it’s important to know what browsers are supported because the implementation details for each component are abstracted away from you.

For example, when you are building a grid with classes like .row or .col-4, you need to know which browsers the framework author is targeting because you have no idea if those classes are implemented using floats, Flexbox, or CSS Grid.

Elements on the other hand is a low-level utility framework, where most of the classes map directly to individual CSS properties. This means that which browsers you support is really up to you, not the framework.

For example, here is a three column grid built with Elements’s Flexbox utilities, so it will only work in IE10+ since Flexbox isn’t supported in IE9:

<div class="flex">
  <div class="w-1/3"><!-- ... --></div>
  <div class="w-1/3"><!-- ... --></div>
  <div class="w-1/3"><!-- ... --></div>
</div>

If you needed to support IE9, you could build your grids with floats instead, since they are supported in virtually all browsers:

<div class="clearfix">
  <div class="float-left w-1/3"><!-- ... --></div>
  <div class="float-left w-1/3"><!-- ... --></div>
  <div class="float-left w-1/3"><!-- ... --></div>
</div>

Because Elements doesn’t impose any opinions about how you build the components in your UI, you can implement them however you like according to your own browser support policy.

For the latest information about which CSS features are supported by which browsers, search the excellent Can I Use database.

# Vendor Prefixes

Elements automatically already have vendor prefixes added to its styles. If you are using a seperate style sheet to manage local styles, we recommend that you use Autoprefixer to ensure they have the correct vendor prefixes.

To use it, install it via npm:

# Using npm
npm install autoprefixer

# Using Yarn
yarn add autoprefixer

Then add it to the plugin list in your PostCSS configuration:

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}