Thanks to PostCSS, we now have tooling that means it is unnecessary to write vendor prefixes for any W3C specified property/values in the authoring style sheets. The prefixes are handled auto-magically by the Autoprefixer (https://github.com/postcss/autoprefixer) tool that can be configured to provide vendor prefixes for the required level of platforms/browser support.

For example, don't do this:

    .ip-Header_Count { 
      position: absolute; 
      right: $size-full;
      top: 50%; 
      -webkit-transform: translateY(-50%); 
      -ms-transform: translateY(-50%); 
      transform: translateY(-50%); 
    }

Instead you should just write this:

.ip-Header_Count {
    position: absolute;
    right: $size-full;
    top: 50%;
    transform: translateY(-50%);
}

Not only does this make the authoring style sheets easier to read and work with, it also means that when we want to change our level of support we can make a single change to the build tool and the vendor prefixes that get added will update automatically.

The only exception to this scenario is non-W3C property/values that might still be desirable. For example, for touch inertia scrolling panels in WebKit devices, it will still be necessary to add certain vendor prefixed properties in the authoring styles as they are non-W3C. For example:

.ui-ScrollPanel {
    -webkit-overflow-scrolling: touch;
}

Or in the case of removing the scrollbar for WebKit:

.ui-Component {
    &::-webkit-scrollbar {
      -webkit-appearance: none;
    }
}