Several recent articles on the Hacks blog explain why web developers should care about cross-browser compatibility and how great web developers achieve it. Web developers have a critical role in making the web work for everyone. And so do browser makers. As of today we’re introducing a number of compatibility features to the Gecko rendering engine, bringing us up to date with the WHATWG Compatibility Standard.
Some notable changes in this release include support for several
-webkit- prefixes and WebKit-specific interfaces. These platform features are non-standard, vendor-specific, and quite prevalent.
Non-standard, incompatible CSS breaks websites for user agents designed around standards. When a browser that doesn’t support
-webkit- prefixes (such as Firefox 48 and below) visits one of these sites, the web looks broken. This will be the case until those sites update their CSS. That’s why Firefox 49 includes the following changes to accommodate WebKit-specific content:
-webkit-prefix property mappings to their standard equivalents.
- Mappings from some
-webkit-prefixed (old) flexbox props to
-moz-prefixed flexbox props.
- Support for the following CSS properties that don’t yet have an unprefixed equivalent:
(in)Frequently Asked Questions (iFAQ):
Q. So, what does this mean for me?
A. As a user, improved compatibility with sites that were designed for WebKit browsers only, especially on mobile.
As a developer, you might want to go back and add unprefixed equivalents to your
-webkit-only CSS so we can remove these from the web platform one day in the future (theoretically). Pro Tip: Unprefixed properties always come last.
Q. Did you just break my site?
A. We hope not! But you can toggle this for testing with the following preference:
Q. Should I only use -webkit- prefixes from now on?
A. No, that’s unnecessary and inadvisable. Keep using web standards and keep testing in multiple browsers. If you must use -webkit- prefixes (and there are fewer reasons to do so than ever before), make sure they’re above the unprefixed property in your CSS.
Full disclosure: Mike edits the Compatibility Standard, but there’s work to be done if you’d like to contribute!
View full post on Mozilla Hacks – the Web developer blog