How to Prevent CSS Declaration Dropped Errors Cross Browser

How to prevent CSS declaration dropped errors cross browser?

1. I'd always put or import IE-specific styles inside a conditonal comment;

2. as standard CSS FF should be fine with 'font', so just check your syntax e.g. font: bold 12px/30px Georgia, serif; values separated by spaces, multi-word font names in quotes, etc.

Will CSS parsing errors cause problems in a production environment?

This is intrinsic to vendor identifiers (those that begin with '_' or '-'): only its product will understand them, so every other one should ignore them. In fact, CSS rules for parsing errors mandate implementers to ignore them: https://www.w3.org/TR/CSS22/syndata.html#parsing-errors

Cross-browser CSS3 transition parse errors

You can't stop those parse errors. Firefox doesn't understand the filter property and from Firefox's perspective, that webkit syntax is wrong. That's what happens when standards aren't finalized yet.

Unknown property '-moz-box-shadow'. Declaration dropped

Since Firefox supports box-shadow so well, it has no reason to keep -moz-box-shadow around. It dropped support for the prefix in version 13, so if you're really that concerned about a warning and don't mind losing support for older versions of Firefox, you can remove that declaration. Likewise for -webkit-box-shadow for recent versions of WebKit browsers.

CSS: Workaround to backdrop-filter?

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.

https://web.dev/backdrop-filter/

NOTE: (since this answer keeps getting downvoted because Mozilla hasn’t yet shipped it): this feature is available in Safari, Chrome, and Edge, but not yet in Firefox. Mozilla is planning to ship it very soon, but hasn’t yet. So this answer doesn’t contain a “workaround” but simply more information about which browsers require a workaround. Which still seems like useful information.

---

Related Topics