Why does Firebug add -moz-* styles when inspecting element CSS?

Question

Whenever I inspect page elements in Firebug, I always see it adding styles such as...

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;

... etc, to the Style box. Why does it do this?

Answer 1

I believe it is all the little extra design things that firebug adds to your page when you are using it. Like adding colored boxes around block-level elements etc.

Answer 2

That are CSS 3 and experimental properties. As that properties are not standard yet, they add that prefix.

Answer 3

It isn't Firebug adding those rules but the Gecko rendering engine. They are part of "the default stylesheet". (The default style a particular agent applies before parsing the styles on the page. They have a specificity of 0,0,0,0 which essentially means that any further declaration of the same rule overrides the default.)

Since you have "Show User-Agent CSS" Checked in your Firebug settings, Firebug displays those rules.

---

From the Mozilla Developer Reference:

-moz-background-clip

In Gecko-based applications like Firefox the -moz-background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border

border: (initial) The background extends to the outside edge of the border (but underneath the border in z-ordering).

padding: No background is drawn below the border (background extends to the outside edge of the padding).

---

-moz-background-inline-policy

In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.

bounding-box: The background image is positioned (and repeated) in the smallest rectangle that contains all of the inline boxes for the element. It is then clipped to be visible only within those boxes, according to the -moz-background-clip property.

continuous: (Initial) The background image is positioned (and repeated) as if the inline box were not broken across lines, and then this long rectangle is sliced into pieces for each line.

each-box: The background image is positioned (and repeated) separately for each box of the inline element. This means that an image with background-repeat : no-repeat may be repeated multiple times.

---

-moz-background-origin

In Mozilla applications like Firefox, the -moz-background-origin CSS property determines the background positioning area (the origin of a background-image).

border: The background position is relative to the border, so the image can go behind the border.

padding: (Initial) The background position is relative to the padding.

content: The background position is relative to the content.

Answer 4

I don't have Show User Agent checked, yet I'm getting these styles included - and they're causing the page to display incorrectly. How can I stop it?