Revision 48200 of Mozilla CSS Extensions

  • Revision slug: CSS/CSS_Reference/Mozilla_Extensions
  • Revision title: Mozilla CSS Extensions
  • Revision id: 48200
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment {{bug|311415}} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{cssxref|width}}, {{cssxref|min-width}}, and {{cssxref|max-width}} properties.

Revision Content

At this time I'm not sure whether this list is complete or accurate. Please feel free to add/modify/delete from this list as required. -- dria 11:57, 17 October 2005 (PDT)

Any information there is on Mozilla CSS Extensions page needs to be moved here.

CSS Properties that are Mozilla Extensions (ie: not part of the CSS Standard) should be included in the Category:CSS:Mozilla Extensions category.

Mozilla extensions to properties that are part of the CSS Standard should be noted at the bottom of that property's page, in a "Mozilla Extensions" subsection. So, for example, extensions to the CSS "cursor" property should be included on the CSS:cursor page, in a section at the bottom called "Mozilla Extensions" .

Mozilla supports a number of extensions to CSS that are prefixed with '-moz'. These include a number of capabilities, including rounded borders, and the ability to specify different box width and height calculations to more easily support browers that perform such calculations in a non-standard way.

Some of these properties have subsequently been proposed for inclusion in the CSS specification, though the standard property may be different from the -moz implementation.

Some of these nonstandard properties apply only to elements with XUL display types.

At-rules

Pseudo-elements and pseudo-classes

Properties

Values

We'll probably document these on the page describing the standard property.

TODO: write guidelines

  • display
    • -moz-box
    • -moz-inline-block
    • -moz-inline-box
    • -moz-inline-grid
    • -moz-inline-stack
    • -moz-inline-table
    • -moz-grid
    • -moz-grid-group
    • -moz-grid-line
    • -moz-groupbox
    • -moz-deck
    • -moz-popup
    • -moz-stack
    • -moz-run-in
    • -moz-compact
    • -moz-marker
  • overflow
    • -moz-scrollbars-horizontal
    • -moz-scrollbars-none
    • -moz-scrollbars-vertical
    • -moz-hidden-unscrollable

Note: All of these values should be considered deprecated. Use of the overflow-x and overflow-y is preferred, although it does not replace the last of these.

  • {{template.Cssxref("border-style")}} and {{template.Cssxref("outline-style")}}
    • -moz-bg-inset - Makes the inset border to blend with then current background (scheduled for removal {{template.Bug(84307)}})
    • -moz-bg-outset - Makes the outset border to blend with then current background (scheduled for removal {{template.Bug(84307)}})
    • -moz-bg-solid - Makes the solid border to blend with then current background (scheduled for removal {{template.Bug(84307)}})
  • all properties accepting color keywords
    • -moz-activehyperlinktext
    • -moz-hyperlinktext
    • -moz-visitedhyperlinktext
    • -moz-buttondefault
    • -moz-buttonhoverface
    • -moz-buttonhovertext
    • -moz-cellhighlight
    • -moz-cellhighlighttext
    • -moz-field
    • -moz-fieldtext
    • -moz-dialog
    • -moz-dialogtext
    • -moz-dragtargetzone
    • -moz-mac-accentdarkestshadow
    • -moz-mac-accentdarkshadow
    • -moz-mac-accentface
    • -moz-mac-accentlightesthighlight
    • -moz-mac-accentlightshadow
    • -moz-mac-accentregularhighlight
    • -moz-mac-accentregularshadow
    • -moz-mac-focusring
    • -moz-mac-menuselect
    • -moz-mac-menushadow
    • -moz-mac-menutextselect
    • -moz-menuhover
    • -moz-menuhovertext
  • empty-cells
    • -moz-show-background (default value in quirks mode)
  • font
    • -moz-button
    • -moz-info
    • -moz-desktop
    • -moz-dialog (also a color)
    • -moz-document
    • -moz-workspace
    • -moz-window
    • -moz-list
    • -moz-pull-down-menu
    • -moz-field (also a color)
  • text-align
    • -moz-center
    • -moz-left
    • -moz-right
  • text-decoration
    • -moz-anchor-decoration
  • -moz-user-select
    • -moz-all
    • -moz-none
  • white-space
    • -moz-pre-wrap
  • list-style-type
    • -moz-arabic-indic
    • -moz-bengali
    • -moz-cjk-earthly-branch
    • -moz-cjk-heavenly-stem
    • -moz-devanagari
    • -moz-ethiopic-halehame
    • -moz-ethiopic-halehame-am
    • -moz-ethiopic-halehame-ti-er
    • -moz-ethiopic-halehame-ti-et
    • -moz-ethiopic-numeric
    • -moz-gujarati
    • -moz-gurmukhi
    • -moz-hangul
    • -moz-hangul-consonant
    • -moz-japanese-formal
    • -moz-japanese-informal
    • -moz-kannada
    • -moz-khmer
    • -moz-lao
    • -moz-malayalam
    • -moz-myanmar
    • -moz-oriya
    • -moz-persian
    • -moz-simp-chinese-formal
    • -moz-simp-chinese-informal
    • -moz-tamil
    • -moz-telugu
    • -moz-thai
    • -moz-trad-chinese-formal
    • -moz-trad-chinese-informal
    • -moz-urdu

Others

  • -moz-initial - where do we put it?
    The value -moz-initial is a partial implementation of css3's initial used to apply the CSS specification's initial value of a property to an element.

If you know what the following things mean, please put them into an appropriate section.

(The list doesn't seem to be be complete, I accidentally found 8 missing extensions --Nickolay 12:24, 20 October 2005 (PDT))

See Talk:Mozilla CSS Extensions

{{template.Bug(311415)}} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{template.Cssxref("width")}}, {{template.Cssxref("min-width")}}, and {{template.Cssxref("max-width")}} properties.

{{ wiki.languages( { "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}

Revision Source

<p>
</p>
<div class="note">
<p>At this time I'm not sure whether this list is complete or accurate.  Please feel free to add/modify/delete from this list as required. -- <a href="User:Dria">dria</a> 11:57, 17 October 2005 (PDT)
</p><p>Any information there is on <a href="en/Mozilla_CSS_Extensions">Mozilla CSS Extensions</a> page needs to be moved here. 
</p><p>CSS Properties that are Mozilla Extensions (ie: not part of the CSS Standard) should be included in the <a href="Special:Tags?tag=CSS:Mozilla_Extensions&amp;language=en">Category:CSS:Mozilla Extensions</a> category.
</p><p>Mozilla extensions to properties that are part of the CSS Standard should be noted at the bottom of that property's page, in a "Mozilla Extensions" subsection.  So, for example, extensions to the CSS "cursor" property should be included on the <a href="en/CSS/cursor">CSS:cursor</a> page, in a section at the bottom called "Mozilla Extensions" <a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-October/000453.html">.
</a></p><a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-October/000453.html">
</a></div><a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-October/000453.html">
</a><p><a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-October/000453.html">Mozilla supports a number of extensions to </a><a href="en/CSS">CSS</a> that are prefixed with '-moz'. These include a number of capabilities, including rounded borders, and the ability to specify different box width and height calculations to more easily support browers that perform such calculations in a non-standard way.
</p><p>Some of these properties have subsequently been proposed for inclusion in the CSS specification, though the standard property may be different from the -moz implementation.
</p><p>Some of these nonstandard properties apply only to elements with XUL display types. 
</p>
<h4 name="At-rules"> At-rules </h4>
<ul><li><a href="en/CSS/@-moz-document">@-moz-document</a>
</li></ul>
<h4 name="Pseudo-elements_and_pseudo-classes"> Pseudo-elements and pseudo-classes </h4>
<ul><li><a href="en/CSS/%3a-moz-list-bullet">:-moz-list-bullet</a>
</li><li><a href="en/CSS/%3a-moz-first-node">:-moz-first-node</a>
</li><li><a href="en/CSS/%3a-moz-last-node">:-moz-last-node</a>
</li><li><a href="en/CSS/%3a-moz-only-whitespace">:-moz-only-whitespace</a>
</li><li><a href="en/CSS/%3a-moz-bound-element">:-moz-bound-element</a>
</li><li><a href="en/CSS/%3a-moz-any-link">:-moz-any-link</a> (matches :link and :visited)
</li><li><a href="en/CSS/%3a-moz-drag-over">:-moz-drag-over</a>
</li><li><a href="en/CSS/%3a-moz-tree-row">:-moz-tree-row</a>
</li><li><a href="en/CSS/%3a-moz-tree-cell">:-moz-tree-cell</a>
</li><li><a href="en/CSS/%3a-moz-tree-checkbox">:-moz-tree-checkbox</a>
</li><li><a href="en/CSS/%3a-moz-tree-column">:-moz-tree-column</a>
</li><li><a href="en/CSS/%3a-moz-tree-cell-text">:-moz-tree-cell-text</a>
</li><li><a href="en/CSS/%3a-moz-tree-twisty">:-moz-tree-twisty</a>
</li><li><a href="en/CSS/%3a-moz-tree-indentation">:-moz-tree-indentation</a>
</li><li><a href="en/CSS/%3a-moz-tree-line">:-moz-tree-line</a>
</li><li><a href="en/CSS/%3a-moz-tree-image">:-moz-tree-image</a>
</li><li><a href="en/CSS/%3a-moz-tree-separator">:-moz-tree-separator</a>
</li><li><a href="en/CSS/%3a-moz-tree-drop-feedback">:-moz-tree-feedback</a>
</li><li><a href="en/CSS/%3a-moz-tree-progressmeter">:-moz-tree-progressmeter</a>
</li></ul>
<h4 name="Properties"> Properties </h4>
<ul><li> <a href="en/CSS/-moz-appearance">-moz-appearance</a>
</li><li> <a href="en/CSS/-moz-binding">-moz-binding</a>
</li><li> <a href="en/CSS/-moz-background-clip">-moz-background-clip</a>
</li><li> <a href="en/CSS/-moz-background-inline-policy">-moz-background-inline-policy</a>
</li><li> <a href="en/CSS/-moz-background-origin">-moz-background-origin</a>
</li><li> <a href="en/CSS/-moz-border-bottom-colors">-moz-border-bottom-colors</a>
</li><li> <a href="en/CSS/-moz-border-left-colors">-moz-border-left-colors</a>
</li><li> <a href="en/CSS/-moz-border-radius">-moz-border-radius</a>
</li><li> <a href="en/CSS/-moz-border-radius-bottomleft">-moz-border-radius-bottomleft</a>
</li><li> <a href="en/CSS/-moz-border-radius-bottomright">-moz-border-radius-bottomright</a>
</li><li> <a href="en/CSS/-moz-border-radius-topleft">-moz-border-radius-topleft</a>
</li><li> <a href="en/CSS/-moz-border-radius-topright">-moz-border-radius-topright</a>
</li><li> <a href="en/CSS/-moz-border-right-colors">-moz-border-right-colors</a>
</li><li> <a href="en/CSS/-moz-border-top-colors">-moz-border-top-colors</a>
</li><li> <a href="en/CSS/-moz-box-align">-moz-box-align</a>
</li><li> <a href="en/CSS/-moz-box-direction">-moz-box-direction</a>
</li><li> <a href="en/CSS/-moz-box-flex">-moz-box-flex</a>
</li><li> <a href="en/CSS/-moz-box-ordinal-group">-moz-box-ordinal-group</a>
</li><li> <a href="en/CSS/-moz-box-orient">-moz-box-orient</a>
</li><li> <a href="en/CSS/-moz-box-pack">-moz-box-pack</a>
</li><li> <a href="en/CSS/-moz-box-sizing">-moz-box-sizing</a>
</li><li> <a href="en/CSS/-moz-image-region">-moz-image-region</a>
</li><li> <a href="en/CSS/-moz-box-flexgroup">-moz-key-equivalent</a>
</li><li> <a href="en/CSS/-moz-opacity">-moz-opacity</a>
</li><li> <a href="en/CSS/-moz-outline">-moz-outline</a>
</li><li> <a href="en/CSS/-moz-outline-color">-moz-outline-color</a>
</li><li> <a href="en/CSS/-moz-outline-offset">-moz-outline-offset</a>
</li><li> <a href="en/CSS/-moz-outline-radius">-moz-outline-radius</a>
</li><li> <a href="en/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a>
</li><li> <a href="en/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a>
</li><li> <a href="en/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a>
</li><li> <a href="en/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a>
</li><li> <a href="en/CSS/-moz-outline-style">-moz-outline-style</a>
</li><li> <a href="en/CSS/-moz-outline-width">-moz-outline-width</a>
</li><li> <a href="en/CSS/-moz-user-focus">-moz-user-focus</a>
</li><li> <a href="en/CSS/-moz-user-input">-moz-user-input</a>
</li><li> <a href="en/CSS/-moz-user-modify">-moz-user-modify</a>
</li><li> <a href="en/CSS/-moz-user-select">-moz-user-select</a>
</li></ul>
<ul><li> css3-box
<ul><li> <a href="en/CSS/overflow-x">overflow-x</a>
</li><li> <a href="en/CSS/overflow-y">overflow-y</a>
</li></ul>
</li></ul>
<ul><li> (CSS3 columns)
<ul><li> <a href="en/CSS/-moz-column-count">-moz-column-count</a>
</li><li> <a href="en/CSS/-moz-column-gap">-moz-column-gap</a>
</li><li> <a href="en/CSS/-moz-column-width">-moz-column-width</a>
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/-moz-float-edge">-moz-float-edge</a>
</li></ul>
<ul><li> <a href="en/CSS/-moz-margin-end">-moz-margin-end</a>
</li><li> <a href="en/CSS/-moz-margin-start">-moz-margin-start</a>
</li><li> <a href="en/CSS/-moz-padding-start">-moz-padding-start</a>
</li><li> <a href="en/CSS/-moz-padding-end">-moz-padding-end</a>
</li></ul>
<ul><li> <a href="en/CSS/-moz-force-broken-image-icon">-moz-force-broken-image-icon</a>
</li></ul>
<h4 name="Values"> Values </h4>
<p>We'll probably document these on the page describing the standard property.
</p><p>TODO: write guidelines
</p>
<ul><li> cursor (need to be moved to <a href="en/CSS/cursor">CSS:cursor</a>)
<ul><li> <a href="en/CSS/-moz-alias">-moz-alias</a>
</li><li> <a href="en/CSS/-moz-cell">-moz-cell</a>
</li><li> <a href="en/CSS/-moz-context-menu">-moz-context-menu</a>
</li><li> <a href="en/CSS/-moz-copy">-moz-copy</a>
</li><li> <a href="en/CSS/-moz-grab">-moz-grab</a>
</li><li> <a href="en/CSS/-moz-grabbing">-moz-grabbing</a>
</li><li> <a href="en/CSS/-moz-spinning">-moz-spinning</a>
</li><li> <a href="en/CSS/-moz-zoom-in">-moz-zoom-in</a>
</li><li> <a href="en/CSS/-moz-zoom-out">-moz-zoom-out</a>
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/display">display</a>
<ul><li> -moz-box
</li><li> -moz-inline-block
</li><li> -moz-inline-box
</li><li> -moz-inline-grid
</li><li> -moz-inline-stack
</li><li> -moz-inline-table
</li><li> -moz-grid
</li><li> -moz-grid-group
</li><li> -moz-grid-line
</li><li> -moz-groupbox
</li><li> -moz-deck
</li><li> -moz-popup
</li><li> -moz-stack
</li><li> -moz-run-in
</li><li> -moz-compact
</li><li> -moz-marker
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/overflow">overflow</a>
<ul><li> -moz-scrollbars-horizontal
</li><li> -moz-scrollbars-none
</li><li> -moz-scrollbars-vertical
</li><li> -moz-hidden-unscrollable
</li></ul>
</li></ul>
<p>Note: All of these values should be considered deprecated.  Use of the <a href="en/CSS/overflow-x">overflow-x</a> and <a href="en/CSS/overflow-y">overflow-y</a> is preferred, although it does not replace the last of these.
</p>
<ul><li> {{template.Cssxref("border-style")}} and {{template.Cssxref("outline-style")}}
<ul><li> -moz-bg-inset - Makes the inset border to blend with then current background (scheduled for removal {{template.Bug(84307)}})
</li><li> -moz-bg-outset - Makes the outset border to blend with then current background (scheduled for removal {{template.Bug(84307)}})
</li><li> -moz-bg-solid - Makes the solid border to blend with then current background (scheduled for removal {{template.Bug(84307)}})
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/border-color">border-color</a>
<ul><li> -moz-use-text-color
</li></ul>
</li></ul>
<ul><li> all properties accepting color keywords
<ul><li> -moz-activehyperlinktext
</li><li> -moz-hyperlinktext
</li><li> -moz-visitedhyperlinktext
</li><li> -moz-buttondefault
</li><li> -moz-buttonhoverface
</li><li> -moz-buttonhovertext
</li><li> -moz-cellhighlight
</li><li> -moz-cellhighlighttext
</li><li> -moz-field
</li><li> -moz-fieldtext
</li><li> -moz-dialog
</li><li> -moz-dialogtext
</li><li> -moz-dragtargetzone
</li><li> -moz-mac-accentdarkestshadow
</li><li> -moz-mac-accentdarkshadow
</li><li> -moz-mac-accentface
</li><li> -moz-mac-accentlightesthighlight
</li><li> -moz-mac-accentlightshadow
</li><li> -moz-mac-accentregularhighlight
</li><li> -moz-mac-accentregularshadow
</li><li> -moz-mac-focusring
</li><li> -moz-mac-menuselect
</li><li> -moz-mac-menushadow
</li><li> -moz-mac-menutextselect
</li><li> -moz-menuhover
</li><li> -moz-menuhovertext
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/empty-cells">empty-cells</a>
<ul><li> -moz-show-background (default value in quirks mode)
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/font-family">font-family</a>
<ul><li> -moz-fixed
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/font">font</a>
<ul><li> -moz-button
</li><li> -moz-info
</li><li> -moz-desktop
</li><li> -moz-dialog (also a color)
</li><li> -moz-document
</li><li> -moz-workspace
</li><li> -moz-window
</li><li> -moz-list
</li><li> -moz-pull-down-menu
</li><li> -moz-field (also a color)
</li></ul>
</li></ul>
<ul><li> text-align
<ul><li> -moz-center
</li><li> -moz-left
</li><li> -moz-right
</li></ul>
</li></ul>
<ul><li> text-decoration
<ul><li> -moz-anchor-decoration
</li></ul>
</li></ul>
<ul><li> -moz-user-select
<ul><li> -moz-all
</li><li> -moz-none
</li></ul>
</li></ul>
<ul><li> white-space
<ul><li> -moz-pre-wrap
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/list-style-type">list-style-type</a>
<ul><li> -moz-arabic-indic
</li><li> -moz-bengali
</li><li> -moz-cjk-earthly-branch
</li><li> -moz-cjk-heavenly-stem
</li><li> -moz-devanagari
</li><li> -moz-ethiopic-halehame
</li><li> -moz-ethiopic-halehame-am
</li><li> -moz-ethiopic-halehame-ti-er
</li><li> -moz-ethiopic-halehame-ti-et
</li><li> -moz-ethiopic-numeric
</li><li> -moz-gujarati
</li><li> -moz-gurmukhi
</li><li> -moz-hangul
</li><li> -moz-hangul-consonant
</li><li> -moz-japanese-formal
</li><li> -moz-japanese-informal
</li><li> -moz-kannada
</li><li> -moz-khmer
</li><li> -moz-lao
</li><li> -moz-malayalam
</li><li> -moz-myanmar
</li><li> -moz-oriya
</li><li> -moz-persian
</li><li> -moz-simp-chinese-formal
</li><li> -moz-simp-chinese-informal
</li><li> -moz-tamil
</li><li> -moz-telugu
</li><li> -moz-thai
</li><li> -moz-trad-chinese-formal
</li><li> -moz-trad-chinese-informal
</li><li> -moz-urdu
</li></ul>
</li></ul>
<h4 name="Others"> Others </h4>
<ul><li> color 'functions'
<ul><li> <a href="en/CSS/-moz-hsla">-moz-hsla</a> (hue, saturation, lightness, opacity)
</li><li> <a href="en/CSS/-moz-rgba">-moz-rgba</a>
</li></ul>
</li></ul>
<ul><li> <a href="en/CSS/-moz-initial">-moz-initial</a> - where do we put it?<br><i>The value <code>-moz-initial</code> is a partial implementation of css3's <code>initial</code> used to apply the CSS specification's initial value of a property to an element.</i>
</li></ul>
<p>If you know what the following things mean, please put them into an appropriate section.
</p>
<ul><li> <a href="en/CSS/-moz-math-columnline">-moz-math-columnline</a>
</li><li> <a href="en/CSS/-moz-math-firstcolumn">-moz-math-firstcolumn</a>
</li><li> <a href="en/CSS/-moz-math-firstrow">-moz-math-firstrow</a>
</li><li> <a href="en/CSS/-moz-math-font-size">-moz-math-font-size</a>
</li><li> <a href="en/CSS/-moz-math-font-style">-moz-math-font-style</a>
</li><li> <a href="en/CSS/-moz-math-lastcolumn">-moz-math-lastcolumn</a>
</li><li> <a href="en/CSS/-moz-math-lastrow">-moz-math-lastrow</a>
</li><li> <a href="en/CSS/-moz-math-rowline">-moz-math-rowline</a>
</li></ul>
<p>(The list doesn't seem to be be complete, I accidentally found 8 missing extensions --<a href="User:Nickolay">Nickolay</a> 12:24, 20 October 2005 (PDT))
</p><p>See <a href="Talk:en/Mozilla_CSS_Extensions">Talk:Mozilla CSS Extensions</a>
</p><p>{{template.Bug(311415)}} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{template.Cssxref("width")}}, {{template.Cssxref("min-width")}}, and {{template.Cssxref("max-width")}} properties.
</p>{{ wiki.languages( { "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}
Revert to this revision