Microsoft Edge – keeping up to date with CSS prefixes
This article is part of a series of posts detailing specific compatibility tollgates for a modern web, and how you can take action to make sure your site works as intended in the world of modern web browsers:
- EdgeHTML interoperability
- Legacy plug-ins & features
- Frameworks & Libraries
- Browser detection
- CSS prefixes (this post)
Keeping up to date with CSS prefixes
CSS vendor prefixes or browser prefixes are a way for browser makers to add support (either fully or experimental) for new CSS features. They can also be used to add support for features that aren’t officially part of a standard but still widely adopted by the public.
The prefixes causing all the trouble (and what browser is using which one) are:
- -webkit-
- Android, Chrome, iOS, Safari
- -ms-
- Internet Explorer
- -moz-
- Firefox
- -o-
- Opera
Why is it important?
Following best practices when using vendor prefixes will help you reach the widest possible audience across browsers and devices.
What will we look for?
We check if the webpage may have missing vendor-specific prefixes or may have implemented vendor-specific prefixes when they are not required in common CSS properties. This may cause compatibility problems with how this webpage renders across different browsers.
How can you fix it?
Since it's very difficult to validate and verify all vendor specific properties, it becomes easy to make mistakes.
If you’re using Visual Studio you definitely should check out Web Essentials – the Visual Studio web developers’ secret cache of ninja tools.
In Web Essentials the validator will automatically make you aware of any unknown or deprecated vendor specifics. The same goes for any missing vendor specific properties – it’ll let you know of these as well.