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

Question

Suddenly what happened to CSS -moz-box-shadow? In my design the Firefox console appeared with a strange problem:

But as per the CSS Box Shadow rules I followed all the rules, then what happened? Here is the block where it's directing:

div.area {
  margin: 2px auto;
  border: 1px solid #ededed;
  -moz-box-shadow: 0 0 2px 0 #ccc;
     -webkit-box-shadow: 0 0 2px 0 #ccc;
     box-shadow: 0 0 2px 0 #ccc;
  margin-top: -80px;
  background-color: #ffffff;
  position: relative;
}

I tried the following too:

div.area {
      -moz-box-shadow: 0 0 2px #ccc;
         -webkit-box-shadow: 0 0 2px #ccc;
         box-shadow: 0 0 2px #ccc;
}

I'm using Mozilla Firefox 20.0.

Answer 1

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.

Answer 2

box-shadow does not require any prefixes since more than an year ago (firefox 4 and chrome 10): https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Answer 3

In file .css You just Find and replay moz to webkit

Example

-moz-box-shadow  **to** -webkit-box-shadow

-moz-border-radius **to** -webkit-border-radius

-moz-border-top-left-radius **to** -webkit-border-top-left-radius