Mozilla's code includes references to MANY proprietary CSS
properties and values. Browser makers have been following a convention [1]
of using a dash character ("-") as a prefix for proprietary
CSS properties...Mozilla/Netscape uses "-moz-" as a prefix.
(Of course, Microsoft's Internet Explorer for Win32 doesn't adhere to this -
they choose to name their proprietary properties anything they feel like.)
There is no real explanatory documentation of these properties in the
Mozilla code itself - you have to be a developer or at least trained in
the art of reading code trails to find a lot of these cross-references.
It LOOKS like many of these proprietary properties are one-to-one
mappings of many of the new features in the CSS3 working draft:
"User Interface for CSS3".
Since this document has not been finalized, it looks like Mozilla decided
to err on the side of caution and put the functionality under special
names until CSS3 is more complete. I used that document for inspiration
of the descriptions below since Mozilla's documentation is so...
"non-existent." =) See the W3C document for fuller descriptions of some
of these properties/values - THEY MAY OR MAY NOT REFLECT THE TRUE
BEHAVIOR IN MOZILLA - be sure to test your CSS.
Should you use these proprietary CSS properties and values? The people
at Mozilla would suggest that you shouldn't - some of these properties
were created to help construct Mozilla/Netscape's own user interface
and weren't intended for wide usage. I attempt to list them here only
for completeness sake. But, as long as you keep in mind that Mozilla is
the only browser that can utilize these properties, and as long as your
documents do not RELY on them for their full functionality and
rendering, in most cases their use can be harmless. Also: remember that
Mozilla could retract support for these properties/values at any time
as CSS3 becomes mature. [2]
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- [None]: Do not bind anything for this element.
- [URL]: Specifies the URL for the binding.
Purpose:
"Used to specify a binding to use for the element. The property should be
a URL of an XBL file containing the binding. The URL may contain an anchor
to point to a specific binding with the XBL file, referenced by its id attribute."
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- [Length]: Specifies a length and unit of the border/corner radius.
- [Percentage]: Specifies a percentage. Not sure of what the percentage
relates to.
Purpose:
This property controls the curve radius of borders at the corners, allowing
corners to be rounded (otherwise, borders are usually squared off.) The
'-moz-border-radius' property is a shorthand method for controlling this
effect for each corner. If one value is specified, it applies to all corners.
If only two values exist, the first applies to the top-left and bottom-right,
while the second value applies to the top-right and bottom-left. If all
four values are specified, they control, in order: [top-left] [top-right]
[bottom-right] [bottom-left]
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- None: [DEFAULT] Do not use any color striping for this border side.
- [Color]+: Indicating one or more [Color] values
Purpose:
This property tells the browser to use a color striping effect on the
indicated border-[side]. For borders thicker than 1 pixel, the indicated
colors are striped, a pixel width at a time, going from the outside to the
inside of the border thickness. If there are not enough colors specified to
cover all of the border thickness, the remaining inner thickness uses
the border-color property indicated for that side.
-moz-opacity
Support: N6
Inherited: No
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- [Number]: Values range from "0" (transparent) to "1" (non-transparent.)
- [Percentage]: Values range from "0%" (transparent) to "100%" (non-transparent.)
Purpose:
This is a pretty cool property; it allows the opacity of an element to be
controlled. Values can range from 0/0% (transparent) to 1/100% (non-transparent.)
Child elements have the same opacity, but subsequent applications of the
property adds to total opacity. There are a few bugs in the implementation
that I could see - cursors remain unaffected, dropdown lists act strangely,
and scrolling areas freeze and react oddly.
Purpose:
This is property that attempts to mirror the CSS2 'outline' property. It
is a shorthand property that allows an author to specify the '-moz-outline-color',
'-moz-outline-style' and '-moz-outline-width' properties in one place. See
the 'outline' property page for more
details on how this property should work. See the individual -moz-outline
sub-properties for details on this shorthand.
-moz-outline-color
Support: N6
Inherited: No
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- Invert: Inverts the color of the outline to the opposite value of
the color "underneath" the outline to ensure proper contrast.
- [Color]: Sets the outline to the indicated color value.
Purpose:
This is property that attempts to mirror the CSS2 'outline-color' property.
See the 'outline-color' property page
for more details on how this property should work.
-moz-outline-style
Support: N6
Inherited: No
Allowed Values:
[See the 'border-style' property for
list of allowed values]
Purpose:
This is property that attempts to mirror the CSS2 'outline-style' property.
See the 'outline-style' property page
for more details on how this property should work.
-moz-outline-width
Support: N6
Inherited: No
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- [Thin|Medium|Thick]: The actual thickness of these outline values
is not specified, but "thin" should have a smaller thickness than "medium",
which should have a smaller thickness than "thick".
- [Length]: Sets the width of the outline to an explicit measurement.
Purpose:
This is property that attempts to mirror the CSS2 'outline-width' property.
See the 'outline-width' property page
for more details on how this property should work.
-moz-user-focus
Support: N6
Inherited: Yes
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- Auto: Use the default focus behavior for the element.
- Normal: Seems to be like "Auto".
- None: The element can not receive focus.
- Ignore: Seems to be like "None."
Purpose:
Known as 'user-focus' in the "User Interface for CSS3" W3C Working Draft.
The purpose of this property is to determine what happens to an element
when "focus" is given to it (usually through the keyboard, mouse or other
pointing device.) The values listed seem to work ok, but there are several
others listed in CSS3 which are not yet supported.
-moz-user-input
Support: N6
Inherited: Yes
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- Auto: Use the element's default behavior for user-input behavior.
- None: The element is considered to be neither enabled or disabled.
- Enabled: Element can respond to user input.
- Disabled: Element is disabled and will not respond to user input.
Purpose:
This property controls whether an element is allowed to have input focus
(like the HTML 4.x "disabled" flag for form elements.) This same behavior
is known as the 'user-input' property in the "User Interface for CSS3"
W3C Working Draft.
-moz-user-modify
Support: N6
Inherited: Yes
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- Read-only: User can view/select/copy information
in the element, but cannot modify the contents.
- Read-write: User can view/select/copy and edit content
of the element.
- Write-only: User can select/edit element contents, but cannot
view it (possibly like INPUT TYPE="password" fields.)
Purpose:
This property controls an element's ability to change its contents (like
the HTML 4.x "readonly" flag for form elements.) This same behavior is known
as the 'user-modify' property in the "User Interface for CSS3" W3C Working Draft.
-moz-user-select
Support: N6
Inherited: No
Allowed Values:
- Inherit: Use the value of this property from the parent element.
- None: None of the element's content can be selected.
- Text: [DEFAULT] Only the element's text content is selected,
following the system's text selection model.
- Element: One element at a time may be selected.
- Elements: One or more elements at a time may be selected.
- All: The element's contents can only be selected as a whole.
- Toggle: The element's content is selected, following the system's
standard text selection toggling model.
- Tri-State: Unknown - probably Mozilla proprietary. May follow a
3-state selection model.
- -moz-all: Unknown - Mozilla proprietary. Seems similar to "All" value.
Purpose:
This same behavior is known as the 'user-select' property in the "User Interface
for CSS3" W3C Working Draft. This property controls the selection control
model of an element (as with mouse selection.) Although the default value
is generally "Text", some elements may use a different default value
(eg: for FORM widgets.) Although the property is not inherited, it will
still affect child elements.
Other Proprietary Properties
The Mozilla code lists a bunch of them, but there are some I haven't
been able to confirm yet:
-moz-box-sizing: Like the CSS3 'box-sizing' property, which
allows for slightly-different box-model rendering calculation for box
dimensions. The Mozilla version does not take the same values as the
CSS3 version, it looks like it shoudl take values of "content", "border"
and "padding," but I can't get it to work yet.
-moz-float-edge: Unknown
-moz-image-region:
"For elements that have an image, this property sets the area of
the image that is used. Syntax resembles the 'clip' property"
-moz-key-equivalent:
Like the CSS3 'key-equivalent' property, which allows an author to
set the shortcut-key combinations for giving focus to an element
(like the ACCESSKEY attribute in HTML.) Doesn't seem to work though.
-moz-outline-radius: Shorthand to create curved 'outline' corners?
-moz-outline-radius-topleft: Create curved 'outline' for top/left corner?
-moz-outline-radius-topright: Create curved 'outline' for top/right corner?
-moz-outline-radius-bottomright: Create curved 'outline' for bottom/right corner?
-moz-outline-radius-bottomleft: Create curved 'outline' for bottom/left corner?