-moz-orient - CSS: Cascading Style Sheets
values inline the element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes. block the element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes. horizontal the element is rendered horizontally. vertical the element is rendered vertically. ...
... ...
...he following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress> css .vert { -moz-orient: vertical; width: 16px; height: 150px; } result specifications not part of any standard. though submitted to the w3c, with positive initial feedback, this property is not yet part of any specification; currently, this is a mozilla-specific extension (that is, -moz-orient). ...

:-moz-focusring - CSS: Cascading Style Sheets
whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform. this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. ...
...e element was focused. whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform. this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. ...
...n yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. note: developers tend to use :-moz-focusring to differentiate between the focus state when the user focuses an element via a mouse click versus keyboard tabbing. it is also potentially useful if you are creating a custom element and you want to change its style based on its behavior. syntax :-moz-focusring examples html <input /> css input { margin: 5px; } :-moz-focusring { color: red; outline: 2px dotted green; } result specifications not part of any standard. ...

:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
the :-moz-locale-dir(ltr) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed left-to-right. this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "ltr". note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (this can vary from window to window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. this selector does not work properly from html; it always matches, regardless of whether the ui locale is left-to-right or right-to-left. ...
...an vary from window to window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. this selector does not work properly from html; it always matches, regardless of whether the ui locale is left-to-right or right-to-left. ...
...s, regardless of whether the ui locale is left-to-right or right-to-left. syntax :-moz-locale-dir(ltr) examples this example doesn't work if you're not using firefox, and may not work even in firefox due to an issue with the selector not working propertly with html content. it was designed for use with xul. html <p>if you're using a left-to-right interface, this should be red.</p> css p:-moz-locale-dir(ltr) { color: red; } result specifications not part of any standard. ...

-moz-device-pixel-ratio - CSS: Cascading Style Sheets
the -moz-device-pixel-ratio gecko-only css media feature can be used to apply styles based on the number of device pixels per css pixel. do not use this feature. use the resolution feature with the dppx unit instead. note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. the min and max prefixes as implemented by gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. ...
... min and max prefixes as implemented by gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx. ...
... per css pixel. media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx. example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx. specifications not part of any standard. ...

-moz-window-shadow - Archive of obsolete content
the -moz-window-shadow css property specifies whether a window will have a shadow. it only works on mac os x. this property is not standard and from firefox 44 onwards cannot be used on websites anymore. firefox 3 added support for transparent windows on mac os x. however, for these windows shadows were turned off and there was no way to turn them on. in firefox 3.5 the default changed, with all windows having a shadow. this version introduced the -moz-window-shadow css property to provide a way to turn off unwanted shadows. initial valuedefaultapplies toall elements that create native windows, e.g. <window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the keyword values listed below. values defa...
... with the default window shadow style. menu the window will have the shadow style that's appropriate for menus. tooltip the window will have the shadow style that's appropriate for tooltips. sheet the window will have the shadow style that's appropriate for sheet windows. none the window won't have a shadow. formal syntax default | menu | tooltip | sheet | none example .kui-panel { -moz-window-shadow: none; } ...

:-moz-system-metric(windows-default-theme) - Archive of obsolete content
this will exclude windows classic themes as well as third-party themes. this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero windows themes and red with other themes. ...
...een background with luna/royale/zune/aero windows themes and red with other themes. </p> <p id="nondefaultthemes"> this paragraph should have a green background with windows classic or third-party themes and red with other themes. </p> <p id="notsupported">theme detection is not supported.</p> css content #defaultthemes, #nondefaultthemes { background-color: #ffa0a0; } #defaultthemes:-moz-system-metric(windows-default-theme) { background-color: #a0ffa0; } #nondefaultthemes:not(-moz-system-metric(windows-default-theme)) { background-color: #a0ffa0; } #notsupported:-moz-system-metric(windows-default-theme), #notsupported:not(:-moz-system-metric(windows-default-theme)) { display: none; } specifications not part of any specification. ...

-moz-window-dragging
values drag the window is draggable. ...
...not being moveable when busy (bug 944836). initial value drag applies to all elements that create native windows, e.g. <window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below. values drag the window is draggable. no-drag the window is not draggable formal syntax drag | no-drag example toolbarpaletteitem { -moz-window-dragging: no-drag; } specifications this property is not part of any specification. ...

-moz-force-broken-image-icon - CSS: Cascading Style Sheets
the -moz-force-broken-image-icon extended css property can be used to force the broken image icon to be shown even when a broken image has an alt attribute. syntax values <integer> a value of 1 means that the broken image icon is shown even if the image has an alt attribute. when the value 0 is used the image will act as usual and only display the alt attribute. note: even if the value is set to 1 the alt attribute will still be displayed, alongside the broken image icon. ...
...image will act as usual and only display the alt attribute. note: even if the value is set to 1 the alt attribute will still be displayed, alongside the broken image icon. formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz-force-broken-image-icon is set to 1. notes this property will only work in gecko-based browsers. the use of this property is not recommended. a proper...

-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the bottom-left corner of the element, specified as the percentages of the bottom and left sides of the border box. ...
... ...

-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the bottom-right corner of the element, specified as the percentages of the bottom and right sides of the border box. ...
... specifications not part of any standard. ...

-moz-outline-radius-topleft - CSS: Cascading Style Sheets
the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the top-left corner of the element, specified as the percentages of the top and left sides of the border box. ...
... ...

-moz-outline-radius-topright - CSS: Cascading Style Sheets
the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the top-right corner of the element, specified as the percentages of the top and right sides of the border box. ...
... specifications not part of any standard. ...

-moz-user-focus - CSS: Cascading Style Sheets
the element will be skipped in the tab sequence. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus. instead, xbl creates an anonymous html <input> element inside the textbox, and that element is what receives focus. ...
...a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group. ...

:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
the :-moz-locale-dir(rtl) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed right-to-left. this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "rtl". note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (this can vary from window to window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. this selector does not work properly from html; it never matches, no matter whether the ui locale is left-to-right or right-to-left. ...
...his can vary from window to window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. this selector does not work properly from html; it never matches, no matter whether the ui locale is left-to-right or right-to-left. syntax :-moz-locale-dir(rtl) examples this example will not work if you're not using firefox, and might not work properly even in firefox due to an issue with using this selector in html. html <p>if you're using a right-to-left interface, this should be red.</p> css p:-moz-locale-dir(rtl) { color: red; } result specifications not part of any standard. ...

:-moz-only-whitespace - CSS: Cascading Style Sheets
note: in selectors level 4 the :empty selector was changed to act like :-moz-only-whitespace, but no browser currently supports this yet. the :-moz-only-whitespace css pseudo-class matches elements that only contains text nodes that only contain whitespace. ...
...y contain whitespace. (this includes elements with empty text nodes and elements with no child nodes.) syntax syntax not found in db! examples html <div> </div> css :root { overflow: hidden; max-width: 100vw; max-height: 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; } div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; } result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged into :empty and :blank redefined to mean empty <input>. ...

:-moz-window-inactive - CSS: Cascading Style Sheets
the :-moz-window-inactive css pseudo-class is a mozilla extension that matches any element while it's in an inactive window. :-moz-window-inactive works in content html documents, too. note: prior to the addition of this pseudo-class, giving different styles to background windows was achieved by setting an attribute (active="true") on the top-level xul chrome window. this attribute is no longer used. syntax :-moz-window-inactive examples this example alters the appearance of a box's background depending on whether its window is active or not. ...
...ive="true") on the top-level xul chrome window. this attribute is no longer used. syntax :-moz-window-inactive examples this example alters the appearance of a box's background depending on whether its window is active or not. html <div id="mybox"> <p>this is a box!</p> </div> css #mybox { background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; } result the result of this code is shown below. you can view this as a separate page as well. specifications not part of any standard. ...

::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...
...at represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. syntax syntax not found in db! examples html <input type="submit" value="input"/> <button type="submit">button</button> css button::-moz-focus-inner, input[type="color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard. ...

-moz-binding - Archive of obsolete content
the -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element. syntax /* <url> value */ -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#checkbox); /* global values */ -moz-binding: inherited; -moz-binding: initial; -moz-binding: unset; values <url> the url for the xbl binding (including the fragment identifier). none no xbl binding is applied to the element. formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard. ...

-moz-text-blink - Archive of obsolete content
the -moz-text-blink non-standard mozilla css extension specifies the blink mode. firefox, which was the only major browser supporting it, dropped support for this property in firefox 26. it is now unsupported on all browsers. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none produces no blinking. blink text blinks. note that not blinking the text is one technique to satisfy checkpoint 3.3 of wai-uaag. formal syntax none | blink example .example { -moz-text-blink: blink; } specifications this property was defined in an old draft of the css 3 text specification. newer versions removed its definition. ...

:-moz-full-screen-ancestor - Archive of obsolete content
however, those elements' ancestors have this pseudo-class applied to them. ...

:-moz-system-metric(images-in-menus) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). ...

:-moz-system-metric(mac-graphite-theme) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(scrollbar-end-backward) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(scrollbar-end-forward) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(scrollbar-start-backward) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(scrollbar-start-forward) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(touch-enabled) - Archive of obsolete content
the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. use the -moz-touch-enabled media query instead. specifications not part of any specification. ...

-moz-mac-graphite-theme - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. the -moz-mac-graphite-theme gecko-only css media feature can be used to apply styles based on whether the user has the mac os x "graphite" theme enabled. syntax <integer> if the user has configured their device to use the "graphite" appearance on mac os x, this is 1. if the user is using the standard blue appearance, or is not on mac os x, this is 0. media: media/visual accepts min/max prefixes: no ...

-moz-maemo-classic - Archive of obsolete content
syntax <integer> if the user agent is using maemo with the original theme, this is 1. if it's using the newer fremantle theme, this is 0. ...

-moz-os-version - Archive of obsolete content
this can be useful for adapting application skins and other chrome code depending on the user's operating system version. syntax values windows-win7 the user is on the windows 7 operating system. ...

-moz-touch-enabled - Archive of obsolete content
longer supported. use pointer: coarse instead. ...

-moz-windows-theme - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. the -moz-windows-theme gecko-only css media feature is useful for customizing application skins and other chrome code to work well with the user's windows theme. syntax the -moz-windows-theme feature is specified as a keyword value that indicates which windows theme is currently being used. values aero luna-blue luna-olive luna-silver royale generic zune media: media/visual accepts min/max prefixes: no ...

:-moz-lwtheme-brighttext
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected. ...

:-moz-lwtheme-darktext
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected. ...

:-moz-lwtheme
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected. ...

::-moz-tree-cell-text(hover)
this selector is intended for use mainly by theme developers. ...

::-moz-tree-row(hover)
this selector is intended for use mainly by theme developers. ...

::-moz-tree-row
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the ::-moz-tree-row css pseudo-element is used to select rows and apply styles to tree rows. associated elements treerow syntax treechildren::-moz-tree-row { style properties } style properties background border margin outline padding display -moz-appearance examples treechildren::-moz-tree-row( foo bar ) { margin: 2%; } ...where... <treerow properties="foo">...</treerow> ...

::-moz-tree-separator
activated by the properties attribute. associated elements <xul:treeseparator> style properties border display -moz-appearance ...

::-moz-tree-twisty
activated by the properties attribute. associated elements <xul:treecell> style properties border margin padding display list-style position -moz-appearance ...

:-moz-broken - CSS: Cascading Style Sheets
the :-moz-broken css pseudo-class is a mozilla extension that matches elements representing broken image links. note: this selector is mainly intended to be used by theme developers. syntax :-moz-broken examples html <img src="broken.jpg" alt="this image is broken. :-("> css :-moz-broken { background: bisque; padding: 8px; } result specifications not part of any standard. ...

:-moz-drag-over - CSS: Cascading Style Sheets
the :-moz-drag-over css pseudo-class is a mozilla extension that matches an element when a dragover event is called on it. syntax :-moz-drag-over examples html <table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </table> css td:-moz-drag-over { color: red; } result specifications not part of any standard. ...

:-moz-first-node - CSS: Cascading Style Sheets
the :-moz-first-node css pseudo-class is a mozilla extension that represents any element that is the first child node of some other element. it differs from :first-child because it does not match a first-child element with (non-whitespace) text before it. note: any whitespace at the start of an element is ignored for the determination of :-moz-first-node. syntax :-moz-first-node examples css span:-moz-first-node { background-color: lime; } html <p> <span>this matches!</span> <span>this doesn't match.</span> </p> <p> blahblah. <span>this doesn't match because it's preceded by text.</span> </p> result specifications not part of any standard. ...

:-moz-handler-blocked - CSS: Cascading Style Sheets
the :-moz-handler-blocked css pseudo-class is a mozilla extension that matches elements that can't be displayed because their handlers have been blocked. note: this selector is mainly intended to be used by theme developers. syntax :-moz-handler-blocked specifications not part of any standard. ...

:-moz-handler-crashed - CSS: Cascading Style Sheets
the :-moz-handler-crashed css pseudo-class is a mozilla extension that matches elements that can't be displayed because the plugin responsible for drawing them has crashed. note: this selector is mainly intended to be used by theme developers. syntax :-moz-handler-crashed specifications not part of any standard. ...

:-moz-handler-disabled - CSS: Cascading Style Sheets
the :-moz-handler-disabled css pseudo-class is a mozilla extension that matches elements that can't be displayed because their handlers have been disabled by the user. note: this selector is mainly intended to be used by theme developers. syntax :-moz-handler-disabled specifications not part of any standard. ...

:-moz-last-node - CSS: Cascading Style Sheets
the :-moz-last-node css pseudo-class is a mozilla extension that represents any element that is the last child node of some other element. it differs from :last-child because it does not match a last-child element with (non-whitespace) text after it. note: any whitespace at the end of an element is ignored for the determination of :-moz-last-node. syntax :-moz-last-node examples css span:-moz-last-node { background-color: lime; } html <p> <span>this does not match.</span> <span>this matches!</span> </p> <p> <span>this doesn't match because it's followed by text.</span> blahblah. </p> result specifications not part of any standard. ...

::-moz-list-bullet - CSS: Cascading Style Sheets
the ::-moz-list-bullet css pseudo-element is a mozilla extension that represents the marker (typically a bullet) of a list item (<li>) in an unordered list (<ul>). syntax li::-moz-list-bullet examples html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css ::-moz-list-bullet { color: red; font-size: 1.5em; } result specifications not part of any standard. ...

::-moz-list-number - CSS: Cascading Style Sheets
the ::-moz-list-number css pseudo-element is a mozilla extension that represents the marker (typically a number) of a list item (<li>) in an ordered list (<ol>). syntax li::-moz-list-number examples html <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> css li::-moz-list-number { font-style: italic; font-weight: bold; } result screenshotlive sample specifications not part of any standard. ...

:-moz-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet. note that images that are in the process of loading are not matched by this pseudo-class. note: this selector is mainly intended to be used by theme developers. syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) center no-repeat; } specifications not part of any standard. ...

:-moz-submit-invalid - CSS: Cascading Style Sheets
by default, no style is applied. you can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields. ...

:-moz-suppressed - CSS: Cascading Style Sheets
the :-moz-suppressed css pseudo-class is a mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked. note: this selector is mainly intended to be used by theme developers. syntax :-moz-suppressed examples styling elements that have been blocked :-moz-suppressed { background: yellow; padding: 8px; } specifications not part of any standard. ...

:-moz-ui-invalid - CSS: Cascading Style Sheets
this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is invalid, apply this pseudo-class. if the control has focus, and the value was valid (including empty) when it gained focus, do not apply the pseudo-class. if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...

:-moz-ui-valid - CSS: Cascading Style Sheets
this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is valid, apply this pseudo-class. if the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class. if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...

:-moz-user-disabled - CSS: Cascading Style Sheets
the :-moz-user-disabled css pseudo-class is a mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences. note: this selector is mainly intended to be used by theme developers. syntax :-moz-user-disabled examples styling user-disabled elements :-moz-user-disabled { background-color: lightgray; padding: 8px; } specifications not part of any standard. ...

::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swatch css pseudo-element is a mozilla extension that represents the color selected in an <input> of type="color". note: using ::-moz-color-swatch with anything but an <input type="color"> doesn't match anything and has no effect. syntax syntax not found in db! examples html <input type="color" value="#de2020" /> css input[type=color]::-moz-color-swatch { border-radius: 10px; border-style: none; } result specifications not part of any standard. ...

::-moz-page-sequence - CSS: Cascading Style Sheets
the ::-moz-page-sequence css pseudo-element is a mozilla extension that represents the background of a print preview. syntax syntax not found in db! specifications not part of any standard. ...

::-moz-page - CSS: Cascading Style Sheets
the ::-moz-page css pseudo-element is a mozilla extension that represents an individual page when printed or in a print preview. syntax syntax not found in db! specifications not part of any standard. ...

::-moz-progress-bar - CSS: Cascading Style Sheets
the ::-moz-progress-bar css pseudo-element is a mozilla extension that represents the progress bar inside a <progress> element. (the bar represents the amount of progress that has been made.) if you want to select the unfinished part of <progress> in mozilla, please select the <progress> directly. syntax ::-moz-progress-bar examples html <progress value="30" max="100">30%</progress> <progress max="100">indeterminate</progress> css ::-moz-progress-bar { background-color: red; } /* force indeterminate bars to have zero width */ :indeterminate::-moz-progress-bar { width: 0; } result specifications not part of any standard. ...

::-moz-range-progress - CSS: Cascading Style Sheets
the ::-moz-range-progress css pseudo-element is a mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <input> of type="range". this portion corresponds to values lower than the value currently selected by the thumb (i.e., virtual knob). note: using ::-moz-range-progress with anything but an <input type="range"> doesn't match anything and has no effect. syntax ::-moz-range-progress examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-progress { background-color: green; height: 1em; } result a progress bar using this style might look something like this: specifications not part of any standard. ...

::-moz-range-thumb - CSS: Cascading Style Sheets
the ::-moz-range-thumb css pseudo-element is a mozilla extension that represents the thumb (i.e., virtual knob) of an <input> of type="range". the user can move the thumb along the input's track to alter its numerical value. note: using ::-moz-range-thumb with anything but an <input type="range"> doesn't match anything and has no effect. syntax ::-moz-range-thumb examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-thumb { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard. ...

::-moz-range-track - CSS: Cascading Style Sheets
the ::-moz-range-track css pseudo-element is a mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <input> of type="range". note: using ::-moz-range-track with anything but an <input type="range"> doesn't match anything and has no effect. syntax ::-moz-range-track examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-track { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard. ...

::-moz-scrolled-page-sequence - CSS: Cascading Style Sheets
the ::-moz-scrolled-page-sequence css pseudo-element is a mozilla extension that represents the background of a print preview. syntax syntax not found in db! specifications not part of any standard. ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. these extensions are prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track. some of them apply only to xul elements. ...
...s to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. these extensions are prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track. some of them apply only to xul elements. ...
...ing properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. these extensions are prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track. some of them apply only to xul elements. ...
...And 58 more matches

Index - Archive of obsolete content
ate describes a content tree that will be generated around the bound element during binding attachment. an element declared in a bound document using a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound document. 697 binding attachment and detachment xbl bindings can be attached to elements through css using the -moz-binding property. 698 binding implementations mozilla, reference, xbl bindings can define methods and properties on a bound element using the implementation tag. a binding implementation provides a new set of methods and properties that can be invoked directly from the bound element. 699 dom interfaces no summary! 700 elements xbl thi...
...f the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1824 autohide no summary! 1825 bbox xul elements, xul reference a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. 1826 binding needshelp, needstechnicalreview, xul elements, xul reference should be contained within a bindings element. a binding is u...
...efulness in specific circumstances to arrive at a common sense approach to browser detection. 2080 browser feature detection compatibility, cross-browser_development, dom, gecko, obsolete, web development an experimental approach to discovering degree of support for standards. ...
...And 40 more matches

Box-shadow generator - CSS: Cascading Style Sheets
/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transfor...
... 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display...
...kground-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: r...
...And 15 more matches

<color> - CSS: Cascading Style Sheets
inactivecaptiontext color of text in an inactive caption. should be used with the inactivecaption background color. infobackground background color for tooltip controls. should be used with the infotext foreground color. infotext text color for tooltip controls. should be used with the infobackground background color. menu menu background. should be used with the menutext or -moz-menubartext foreground color. menutext text in menus. should be used with the menu background color. scrollbar background color of scroll bars. threeddarkshadow the color of the darker (generally outer) of the two borders away from the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border. threedface the face background color for 3...
...e lighter (generally inner) of the two borders away from the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border. window window background. should be used with the windowtext foreground color. windowframe window frame. windowtext text in windows. should be used with the window background color. ...
...oncentric layers of surrounding border. window window background. should be used with the windowtext foreground color. windowframe window frame. windowtext text in windows. should be used with the window background color. mozilla system color extensions -moz-buttondefault the border color that goes around buttons that represent the default action for a dialog box. -moz-buttonhoverface the background color of a button that the mouse pointer is over (which would be threedface or buttonface when the mouse pointer is not over it). should be used with the -moz-buttonhovertext foreground color. -moz-buttonhovertext the text color of a button that the mouse pointer is over (which would be buttontext when the mouse pointer is not over it). should be used with t...
...And 13 more matches

In-Depth - Archive of obsolete content
la. all of the properties follow the w3c's standards for vendor extensions, which is why they all begin with -moz. this is only a list of properties which may be useful to you; it is in no way all of the mozilla specific properties available. other sites which list mozilla specific css properties xulplanet.com [dead link, 26.03.13] mozilla-prefixed properties on the standard track 26.03.13 -moz-appearance makes a widget look like it's from your operating system. possible are (this is probably an incomplete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-...
..., treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours. each colour is one pixel in the border. if you want the border to be 3 pixels wide you define each colour separated by a space. example: -moz-border-top-colors: threeddarkshadow threedshadow transparent; -moz-border-right-colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-bo...
...is one pixel in the border. if you want the border to be 3 pixels wide you define each colour separated by a space. example: -moz-border-top-colors: threeddarkshadow threedshadow transparent; -moz-border-right-colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-border-left-colors: threeddarkshadow threedshadow transparent; -moz-border-top-colors see -moz-border-bottom-colors above. -moz-border-left-colors see -moz-border-bottom-colors above. -moz-border-right-colors see -moz-border-bottom-colors above. -moz-border-radius rounds the corners of a box. ...
...And 12 more matches

Chrome-only CSS reference
this page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg. ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these. -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
... chrome code (and sometimes in other privileged circumstances, eg. ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these. -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
... sometimes in other privileged circumstances, eg. ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these. -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
...And 12 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
ritten in pure css instead, if preferred. flexbox containers using the display property's flex value causes an element to generate a block-level flex container box. the inline-flex value causes an element to generate an inline-level flex container box. ...
...s an element to generate an inline-level flex container box. values: flex | inline-flex spec: https://drafts.csswg.org/css-flexbox/#flex-containers @mixin flexbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. values: row (default)...
...ing the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. ...
...And 11 more matches

Making sure your theme works with RTL locales - Archive of obsolete content
from right to left. of the languages firefox and thunderbird are shipped in, that includes arabic and hebrew, with persian available as beta, for a total population in excess of 100 million potential users. the important thing to understand about these locales, is that the entire interface is mirrored right-to-left. that means that text that had a left margin will have a right margin instead (or -moz-margin-start), arrows that pointed right will have to point left and vice versa, and so on. a screenshot of firefox 2 in hebrew what you need to do at this stage you might ask yourself, "how would i know what language is my theme installed on? should i make a special theme for these locales?" don't despair: making a theme rtl-compatible is fairly easy! gecko 1.9.2 and later gecko 1.9.2 intro...
...t), arrows that pointed right will have to point left and vice versa, and so on. ...
...do at this stage you might ask yourself, "how would i know what language is my theme installed on? should i make a special theme for these locales?" don't despair: making a theme rtl-compatible is fairly easy! ...
...And 10 more matches

Recommended Drag Types - Web APIs
en multiple links are dragged, including any comments. for convenience, the special type url may be used to refer to the first valid link within data for the text/uri-list type. do not add data with the url type — attempting to do so will set the value of the text/uri-list type instead. var url = event.datatransfer.getdata("url"); you may also see data with the mozilla-specific type text/x-moz-url. if it appears, it should appear before the text/uri-list type. it holds the urls of links followed by their titles, separated by a linebreak. for example: http://www.mozilla.org mozilla http://www.example.com example dragging html and xml html content may use the text/html type. the data for this type should be serialized html source code. for example, it would be suitable to set its data...
...y also include a plain text representation of the html or xml data using the text/plain type. the data should be just the text without any of the source tags or attributes. ...
... multiple files will be received during a drop as multiple items in the data transfer. ...
...And 10 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
</div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { ba...
...r-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255,...
...ear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, h...
...And 10 more matches

list-style-type - CSS: Cascading Style Sheets
-greek lowercase classical greek alpha, beta, gamma… e.g. α, β, γ… lower-alpha lower-latin lowercase ascii letters e.g. a, b, c, … z lower-latin is unsupported in ie7 and earlier see browser compatibility section. upper-alpha upper-latin uppercase ascii letters e.g. ...
...ascii letters e.g. a, b, c, … z lower-latin is unsupported in ie7 and earlier see browser compatibility section. upper-alpha upper-latin uppercase ascii letters e.g. ...
...ty section. upper-alpha upper-latin uppercase ascii letters e.g. a, b, c, … z upper-latin is unsupported in ie7 and earlier arabic-indic -moz-arabic-indic example armenian traditional armenian numbering (ayb/ayp, ben/pen, gim/keem… bengali -moz-bengali example cambodian * example is a synonym for khmer cjk-earthly-branch -moz-cjk-earthly-branch example cjk-heavenly-stem -moz-cjk-heavenly-stem example cjk-ideographic identical to trad-chinese-informal e.g. ...
...And 10 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the ones shown in table a below correspond to the common attributes in xul. in fact, those xul attributes operate through these css properties. the values declared for these css properties are the same integers or keywords used by the xul attributes. while we don't recommend tha...
...erties in ordinary xul development, they can be useful for customizing the firefox ui without scripting by using userchrome.css. for example, if you save the contents of listing 28 as userchrome.css and save that in the chrome directory under the user profile directory, the tab bar will appear at the bottom of the content area. ...
...evelopment, they can be useful for customizing the firefox ui without scripting by using userchrome.css. for example, if you save the contents of listing 28 as userchrome.css and save that in the chrome directory under the user profile directory, the tab bar will appear at the bottom of the content area. ...
...And 9 more matches

tree - Archive of obsolete content
l contents). otherwise the cell label is reverted to the value it had prior to editing. related elements treecols, treecol, treechildren, treeitem, treerow, treecell and treeseparator.. ...
... prior to editing. related elements treecols, treecol, treechildren, treeitem, treerow, treecell and treeseparator.. ...
...echildren, treeitem, treerow, treecell and treeseparator.. ...
...And 9 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
zillazine.org/viewtopic.php?f=18&t=1953371&start=60 windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly. the resolution to this issue is to add the following code to your browser.css file somewhere below where the main-window is made transparent to support aero glass. @media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread. mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702...
...chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows. the problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.css. once the offending rule is found, it should be deleted and manual styling used. app button not styled on linux, but is styled on windows on linux the firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to windows and is not changing colors when in private browsing m...
...eme provided appropriate padlock icons are used for secure sites but not on insecure sites. ...
...And 9 more matches

Examine and edit CSS - Firefox Developer Tools
the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. ...
...cted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. ...
... expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. ...
...And 8 more matches

Color picker tool - CSS: Cascading Style Sheets
</div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { ba...
...cker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255,...
...ear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, h...
...And 8 more matches

The Firefox codebase: CSS Guidelines
; instead of margin-left: 3px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|rtl) (for html files). remember that while a tab content's scrollbar still shows on the right in rtl, an overflow scrollbar will show on the left. write padding: 0 3px 4px; instead of padding: 0 3px 4px 3px;. this makes it more obvious that the padding is symmetrical (so rtl won't be an issue). note: see css logical properties and values for mor...
...ch is styling deemed to be essential for the browser to behave correctly. to determine whether some css is theme-side or content-side, it is useful to know that certain css properties are going to lean one way or the other: color - 99% of the time it will be theme css, overflow - 99% content. 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css. if it is esthetics related, then it is likely theme css. when importing your stylesheets, it's best to import the content css before the theme...
...ride the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/path/module.css" type="text/css"?> [1] -moz-appearance is tricky. generally, when specifying -moz-appearance: foo; you're giving hints as to how something should act, however -moz-appearance: none; is probably saying 'ignore browser preconceptions - i want a blank sheet', so that's more visual. however -moz-appearance values aren't implemented and don't behave consistently across platforms, so idealism aside -moz-appearance should always be...
...And 7 more matches

filter - CSS: Cascading Style Sheets
<td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3709/test_form_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:brightness(2); -webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; height:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll ...
...td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3713/test_form_3_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:contrast(200%); -webkit-filter:contrast(200%); -ms-filter:contrast(200%); filter:contrast(200%); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; width: 85%; height: 100%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat sc...
...ss="internal default" src="/files/8469/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: drop-shadow(16px 16px 10px black); -ms-filter: drop-shadow(16px 16px 10px black); filter: drop-shadow(16px 16px 10px black); } #img12 { width:100%; height:auto; -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); ...
...And 7 more matches

CSS - Archive of obsolete content
normally, a...
...normally, a...
...normally, a...
...And 6 more matches

Styling a Tree - Archive of obsolete content
ages or labels. you can think of the properties as functioning much like style classes, although they require a somewhat more complex syntax to use in a style sheet. this is because you can specify the style for a number of parts of the cell individually. you can style not only the cell and its text, but the twisty and indentation. the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) { background-color: blue; } this style which has a complex selector is used to style the background color of rows that have the 'makeitblue' property. this special syntax is needed because the cells themselves are not separate elements. all of the content inside the tree's body is rendered by the treechildren element. however, css has a concept to access parts of elements ...
... css has a concept to access parts of elements considering them to be pseudo-elements. this selector matches some tree rows inside the treechildren element as pseudo-elements. the style sets style rules for particular parts of what it displays. this style rule means, inside a treechildren element, set the background color to blue for all tree rows that have the 'makeitblue' property. ...
...de the treechildren element as pseudo-elements. the style sets style rules for particular parts of what it displays. this style rule means, inside a treechildren element, set the background color to blue for all tree rows that have the 'makeitblue' property. the text '::-moz-tree-row' specifies what content area is desired, which in this case is a row. you can also use the following values: ::-moz-tree-cell: a cell. use this to set borders and background colors. ::-moz-tree-cell-text: the text in a cell. use this to set the font and text color. ::-moz-tree-twisty: the appearance of the twisty used to expand and collapse child rows. ::-moz-tree-image: the image for a cell. you can set the image with the list-style-image property. ::-moz-tree-row: a row. use this to set the background col...
...And 5 more matches

CSS <display-xul> component
see this firefox site compatibi...
...see this firefox site compatibi...
...see this firefox site compatibi...
...And 5 more matches

Border-image generator - CSS: Cascading Style Sheets
for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; ...
...*********************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ ...
...rit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dro...
...And 5 more matches

box-flex - CSS: Cascading Style Sheets
this is a property for controlling parts of the xul box model. it does not match either the old css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts). see flexbox for information about the current standard. ...
... this is a property for controlling parts of the xul box model. it does not match either the old css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts). see flexbox for information about the current standard. ...
... module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts). see flexbox for information about the current standard. the -moz-box-flex and -webkit-box-flex css properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout. /* <number> values */ -moz-box-flex: 0; -moz-box-flex: 2; -moz-box-flex: 3.5; -webkit-box-flex: 0; -webkit-box-flex: 2; -webkit-box-flex: 3.5; /* global values */ -moz-box-flex: inherit; -moz-box-flex: initial; -moz-box-flex: unset; -webkit-box-flex: inherit; -webkit-box-flex: initial; -webkit-box-flex: unset; syntax the box-flex property is specified as a <number>. if the value is 0, the box does not grow. if it is gre...
...And 5 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
is that it would be complicated to manage that many files, and it becomes more likely that changes made to some of the files lead to an inconsistent appearance that is not obvious by looking at the individual files. it is easier to be able to edit all icons in one go. there is also a performance gain from using a single file. to get the region that corresponds to a specific state of an icon, the -moz-image-region css property is used. here are some examples of how the css for a toolbarbutton would look like on the 3 major platforms. this assumes that you've set the class xs-hw-toolbarbutton to all of your buttons. windows: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([ac...
... and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } mac os x: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschool...
... and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } linux: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar-large.png"); } #xulschoolhello-hello-world-button {...
...And 3 more matches

Border-radius generator - CSS: Cascading Style Sheets
out) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-alig...
...px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-r...
....left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /****************...
...And 3 more matches

box-pack - CSS: Cascading Style Sheets
the effect of this is only visible if there is extra space in the box. ...
...the effect of this is only visible if there is extra space in the box. ...
...acking purposes depends on the box's orientation and direction: normal reverse horizontal left right vertical top bottom the edge opposite to the start is designated the end. if the packing is set using the element's pack attribute, then the style is ignored. ...
...And 3 more matches

max-height - CSS: Cascading Style Sheets
this defines available and not fit-available. also, the definition of fit-content is simpler than in css3 sizing.ie no support noopera full support 44safari full support 6.1prefixed ...
...this defines available and not fit-available. also, the definition of fit-content is simpler than in css3 sizing.opera android full support 43safari ios full support 7prefixed full support 7prefixed...
...efix: -webkit-max-contentchrome full support 46edge full support 79firefox full support 66 full support 66 full support 3prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 44safari full support 11 full support 11 full support 9prefixed prefixed implemented with the vendor prefix: -webkit-webview android ...
...And 3 more matches

max-width - CSS: Cascading Style Sheets
this defines available and not fit-available. also, the definition of fit-content is simpler than in css3 sizing.ie no support noopera full support 44safari full support 6.1prefixed ...
...this defines available and not fit-available. also, the definition of fit-content is simpler than in css3 sizing.opera android full support 43safari ios full support 7prefixed full support 7prefixed...
...rt 79 full support 79prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 66 full support 66 full support 3prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 44safari full support 6.1prefixed full support 6.1prefixed prefixed implemented with the vendor prefix: -webkit- full support 2alternate na...
...And 3 more matches

min-width - CSS: Cascading Style Sheets
this defines available and not fit-available. also, the definition of fit-content is simpler than in css3 sizing.ie no support noopera full support 15prefixed full support 15prefixed prefixed implem...
...this defines available and not fit-available. also, the definition of fit-content is simpler than in css3 sizing.opera android full support 33safari ios full support 11 full support 11 ...
...rt 79 full support 79prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 66 full support 66 full support 3prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari full support 11 full support 11 ...
...And 3 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
e button uses. the last section specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. ...
...ate a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. ...
... that you scroll to get all of it. ...
...And 2 more matches

Example 1 - Learn web development
inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value ...
...d : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 ...
...d : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 ...
...And 2 more matches

nsITransferable
constant value description kflavorhasdataprovider 0 a description is needed here. common mime types some of these need better descriptions, especially the mozilla-specific ones. constant value description ktextmime text/plain plain text. kunicodemime text/unicode unicode text. kmoztextinternal text/x-moz-text-internal text data that isn't meant to be used by non-mozilla code. khtmlmime text/html html. kaolmailmime aolmail aol mail. need details. kpngimagemime image/png png image. kjpegimagemime image/jpeg jpeg image. kjpgimagemime image/jpg jpeg image. kgifimagemime image/gif gif image. kfilemime ...
... text data that isn't meant to be used by non-mozilla code. khtmlmime text/html html. kaolmailmime aolmail aol mail. need details. kpngimagemime image/png png image. kjpegimagemime image/jpeg jpeg image. kjpgimagemime image/jpg jpeg image. kgifimagemime image/gif gif image. kfilemime application/x-moz-file an arbitrary file (is this an nsifile?) kurlmime text/x-moz-url a mozilla url object; this is a text string containing the url, a newline (\n), then the title of the page. kurldatamime text/x-moz-url-data a string containing only a url. kurldescriptionmime text/x-moz-url-desc a string containing only a description. kurlprivatemime te...
... an arbitrary file (is this an nsifile?) kurlmime text/x-moz-url a mozilla url object; this is a text string containing the url, a newline (\n), then the title of the page. kurldatamime text/x-moz-url-data a string containing only a url. kurldescriptionmime text/x-moz-url-desc a string containing only a description. kurlprivatemime text/x-moz-url-priv the same as kurldatamime, except intended for private use only. knativeimagemime application/x-moz-nativeimage an image in gecko's native internal image storage format. knativehtmlmime application/x-moz-nativehtml html in gecko's native internal storage format. khtmlcontext text/_moz_htmlcontext along with khtmlinfo, this is used to provide ...
...And 2 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
<compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo...
...' ]? ...
...} let matcheditems; try { matcheditems = document.queryselectorall(':is(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':matches(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-webkit-any(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-cla...
...And 2 more matches

:read-only - CSS: Cascading Style Sheets
hile still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. ...
...submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. ...
...used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. <p contenteditable>this paragraph is editable; ...
...And 2 more matches

:read-write - CSS: Cascading Style Sheets
hile still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. ...
...submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. ...
...used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. ...
...And 2 more matches

@supports - CSS: Cascading Style Sheets
{} @supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions. it returns true if one or both of the shorter expressions is also true. ...
.... it returns true if one or both of the shorter expressions is also true. the following example returns true if at least one of the two shorter expressions is true: @supports (transform-style: preserve) or (-moz-transform-style: preserve) {} multiple disjunctions can be juxtaposed without the need of more parentheses. ...
...otherwise, the condition is invalid and the whole rule is ignored. ...
...And 2 more matches

Animatable CSS properties - CSS: Cascading Style Sheets
certain css properties can be animated using css animations or css transitions. animation means that their values can be made to change gradually over a given amount of time. ...
... certain css properties can be animated using css animations or css transitions. animation means that their values can be made to change gradually over a given amount of time. ...
... certain css properties can be animated using css animations or css transitions. animation means that their values can be made to change gradually over a given amount of time. ...
...And 2 more matches

element() - CSS: Cascading Style Sheets
kground. on gecko browsers, you can use the non-standard document.mozsetimageelement() method to change the element being used as the background for a given css background element. syntax element(id) where: id the id of an element to use as the background, specified using the html attribute #id on the element. ...
...ckground, specified using the html attribute #id on the element. examples these examples can be viewed live in builds of firefox that support -moz-element(). a somewhat realistic example this example uses a hidden <div> as a background. the background element uses a gradient, but also includes text that is rendered as part of the background. ...
...including the paragraph "this box uses the element with the #mybackground1 id as its background!". a somewhat more bizarre example this example uses a hidden <button> element in a repeating pattern as its background. this demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices. <div style="width:400px; height:100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification. working draft deferred from css3 images. brow...
...And 2 more matches

XUL user interfaces - Archive of obsolete content
" oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css. ...
...<button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css. ...
...bel="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css. ...
... { -moz-box-align: start; background-color: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-child { margin-left: 4px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padd...

Elements - Archive of obsolete content
t defines a unique binding that can be attached to elements in other documents. an element can have only one binding attached (explicitly or inherited) at one moment. from several bindings only the last in the sequence will be used (like with any css rule). ...
...to elements in other documents. an element can have only one binding attached (explicitly or inherited) at one moment. from several bindings only the last in the sequence will be used (like with any css rule). ...
... cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding. a xbl binding can add anonymous content, fields, properties, methods, and event handlers to html/xml elements. a single xbl binding can be attached to an element by using style sheets or by scripting. (see bug 83830 for <table> specifics). ...
...nt by using style sheets or by scripting. (see bug 83830 for <table> specifics). css: div { -moz-binding: url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data: url to embed the binding inline: div { -moz-binding: url(data:text/xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%0a%3cbindings%20id%3d%22xbltestbindings%22%20xmlns%3d%22http%3a//www.mozilla.org/xbl%22%3e%0a%20%20%3cbinding%20id%3d%22xbltest%22%3e%3ccontent%3epass%3c/content%3e%3c/binding%3e%0a%3c/bindings%3e%0a); } since data: urls don't support fragment identifiers, the first binding found in the embedded xml is used instead. k...

Tree Widget Changes - Archive of obsolete content
checkbox for a particular cell in that column by setting the value attribute to true, or leaving out the attribute. note that it's the value attribute you use, not the label attribute. <treecell/> <treecell value="true"/> you need to specify the checkbox image with css for the checkbox to display. (do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ... </treecol> </treecols> </tree> if the column is editable, the user can click the cell to change the state of the ch...
...her types of cells. for instance: var col = tree.columns.getprimarycolumn(); treecell.setcelltext(5, col, "banana"); this will change the label of the cell in row 5 and the primary column to banana. however, this paves the way in the future for more general tree editing features. style improvements you can now specify the cursor to use for a cell using the css cursor property. ...
..."banana"); this will change the label of the cell in row 5 and the primary column to banana. however, this paves the way in the future for more general tree editing features. style improvements you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. ...
...re general tree editing features. style improvements you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...

Creating a Skin - Archive of obsolete content
style class. let's do this. that way, we can modify the xul without needing to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. ...
...l without needing to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab. used here is a special mozilla style rule, -moz-border-radius, that creates rounded border corners. the upper left border of the...
...icult to distinguish the buttons on the toolbar from the commands on the menu. we could add some icons to the buttons to make them clearer. mozilla composer provides some icons for open and save buttons, which we'll just use here to save time. we can set the image for a button using the list-style-image css property. #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image. you can think of it as a clip region for the image. yo...
...erent region for each one. when you have lots of buttons, with states for hover, active and disabled, this saves space that would normally be occupied by mutliple images. in the code above, we use the same image for each button, but set a different image region each one. if you look at this image (btn1.gif), you will notice that it contains a grid of smaller images, each one 16 by 16 pixels. the -moz-box-orient property is used to orient the button vertically, so that the image appears above the label. this property has the same meaning as the orient attribute. this is convenient because the skin cannot change the xul. most of the box attributes have corresponding css properties. other changes next, we'll make a couple of changes to the buttons along the bottom, again reusing some icons from...

background-size - Archive of obsolete content
r. [i assume it's the same as safari, since they just backported a webkit patch into khtml. but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (> 40% in some european countries). user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-size is not supported? i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit. some example code? user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the cod...
...user:robertc 2009-08-09 this is only an issue with <body> and <html>. <body>'s background extends per css spec to <html>. since you have a 8px default margin on <body> and your <body>'s content is smaller than the viewport's height, you see what you see. ...
... to <html> rather than <body>. user:jürgen jeka 2009-08-12 ok, probably my understanding of css inheritance isn't all it should be. i tried locating the part of the spec about <body>'s background extending to <html> but it didn't seem to be explicitly mentioned in the cascading and inheritance section and both the background-image and border-image say 'inherited: no'. ...
...ing of css inheritance isn't all it should be. i tried locating the part of the spec about <body>'s background extending to <html> but it didn't seem to be explicitly mentioned in the cascading and inheritance section and both the background-image and border-image say 'inherited: no'. and anyway, it's more the -moz-border-image that seems to be the problem - that gets inherited even if i add in -moz-border-image: none, to <body> or <html>, and setting the height to 100% is more a matter of covering it up rather than stopping it happening (see further examples a, b and c - b and c look ok, but adding margin or padding reveals that the image applies to both <body> and <html> even though explicitly set to none) user:robertc 2009-08-14 see also bug 509681 and bug 497995. user:jürgen jeka 2009-0...

XForms Custom Controls - Archive of obsolete content
constant. for example, in the mozilla xforms extension we will render a combobox widget when appearance='minimal' on a select1 control. should the form author instead choose to use appearance='compact' on this control, we would render a listbox widget. here is a snippet from our .css file to show the type of css rule we would use to make such a determination. xf|select1[appearance="compact"] { -moz-binding: url('chrome://xforms/content/select-xhtml.xml#xformswidget-select1-compact'); } the mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains. for example, if mediatype='image/*' then the user should see the image that the bytes represent rather than just the byte sequence. xf|output[mediatype^="image"...
...g: url('chrome://xforms/content/select-xhtml.xml#xformswidget-select1-compact'); } the mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains. for example, if mediatype='image/*' then the user should see the image that the bytes represent rather than just the byte sequence. xf|output[mediatype^="image"] { -moz-binding: url('chrome://xforms/content/xforms-xhtml.xml#xformswidget-output-mediatype-anyuri'); } custom data types if you define a new schema data type or you use a built-in data type and find the current xforms control for this type to be insufficient, then you should write a new custom control. for example, if you have an instance node of type xsd:date and you'd like to see the date displayed i...
...the data type that you are targeting and any type derived from that target type. so if you want an input bound to an instance node of type integer (and all types derived from integer), you would use: @namespace xf url(http://www.w3.org/2002/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|input[moztype|typelist~="http://www.w3.org/2001/xmlschema#integer"] { -moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-integer'); } advanced xforms controls there may be times where you need a control that is very specific to your task, but you also want it to work with xforms models and instance nodes just like a regular xforms control. the xforms specification provides for a nice way to do this using xforms binding attributes (like ref, or...
...erbird">http://www.mozilla.com/images/thunderbird-logo-64x64.png</img> <img label="bugzilla">http://www.mozilla.org/images/p-bugz.gif</img> <img label="mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img> </data> </xf:instance> </xf:model> <style type="text/css"> @namespace xf url(http://www.w3.org/2002/xforms); xf|output[mediatype="image/*"] { -moz-binding: url('#output-image'); } </style> </head> <body> <h1>custom control sample</h1> <xf:select1 ref="curimg"> <xf:label>select image to display: </xf:label> <xf:itemset nodeset="../img"> <xf:label ref="@label"/> <xf:value ref="."/> </xf:itemset> </xf:select1> <xf:output ref="curimg" mediatype="image/*"/> </body> </html> ...

Styling Vue components with CSS - Learn web development
er { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "hel...
... the reset...
... of your styles, preventing them from colliding globally. ...
...ment: .custom-checkbox > .checkbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; color: #0b0c0c; display: block; margin-bottom: 5px; } .custom-checkbox > .checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; box-sizing: border-box; width: 100%; height: 40px; height: 2.5rem; margin-top: 0; padding: 5px; border: 2px solid #0b0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd...

box-align - CSS: Cascading Style Sheets
efinition initial valuestretchapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 400px; /* make this box wider than the children so there is room for the box-align */ width: 300px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box...
... box wider than the children so there is room for the box-align */ width: 300px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ box-align: center; /* as specified */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom of this box */ box-pack: end; /* as specified */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example > p { /* make children narrower than their parent, so there is room for the box-align */ w...
...fix: -webkit-edge full support 12prefixed full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -moz- full support 49prefixed prefixed implemented with the vendor prefix: -webkit-ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari ...
...e android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz- full support 49prefixed prefixed implemented with the vendor prefix: -webkit-opera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 1p...

box-direction - CSS: Cascading Style Sheets
see flexbox for information about the current standard. the box-direction css property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge). ...
...e start is designated the end. if the direction is set using the element's dir attribute, then the style is ignored. formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; /* as specified */ } specifications not part of any standard. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send u...
...to change preferences in fi...
...to change preferences in fi...

text-decoration-style - CSS: Cascading Style Sheets
olid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: unset; values solid draws a single line. double draws a double line. dotted draws a dotted line. dashed draws a dashed line. wavy draws a wavy line. ...
...draws a dashed line. wavy draws a wavy line. -moz-none draws no line. use text-decoration-line: none instead. formal definition initial valuesolidapplies toall elements. ...
.... -moz-none draws no line. use text-decoration-line: none instead. formal definition initial valuesolidapplies toall elements. ...
...coration-line: none instead. formal definition initial valuesolidapplies toall elements. ...

user-select - CSS: Cascading Style Sheets
the user-select css property controls whether the user can select text. this doesn't have any effect on content loaded as chrome, except in textboxes. ...
...elect css property controls whether the user can select text. this doesn't have any effect on content loaded as chrome, except in textboxes. ...
...ols whether the user can select text. this doesn't have any effect on content loaded as chrome, except in textboxes. ...
...ent to contain. formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status comment css basic user interface module level 4the definition of 'user-select' in that specification. working draft ...

The building blocks of responsive design - Progressive web apps (PWAs)
heir proportions remain the same as the browser window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. border-box sizing the padding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } this basically means that width and height will now set the dimensions of an element all the way up to and including the border, not just the content. so if you set width: 40%, the box width will always be 40% of its parent, and any padding and border widths set on the box will be subtracted from the content width, not added to it. very useful! ...
...ick on an image in the gallery it brings up options to delete or cancel deletion of the card, and you don't want two buttons on top of one another. x-card:nth-child(3) img { width: 50%; } this rule simply changes the width of the gallery images so now there are two per line. ...
...op of one another. x-card:nth-child(3) img { width: 50%; } this rule simply changes the width of the gallery images so now there are two per line. ...
...ut of our example app is designed for portrait orientation, and looks terrible when viewed on a device in landscape orientation. ...

Drag & Drop - Archive of obsolete content
here, elem could be a window or an xul element. ...
...pped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1'].getservice(components.interfaces.nsiioservice); ...
...ts.interfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the application if (dragsession.sourcenode) return; // setup a transfer item to retrieve the file data var trans = components.classes["@mozilla.org/widget/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("text/x-moz-url"); trans.adddataflavor("application/x-moz-file"); for (var i=0; i<dragsession.numdropitems; i++) { var uri = null; dragsession.getdata(trans, i); var flavor = {}, data = {}, length = {}; trans.getanytransferdata(flavor, data, length); if (data) { try { var str = data.value.queryinterface(components.interfaces.nsisupportsstring); ...

The Box Model - Archive of obsolete content
with these you can make an hbox have vertical orientation and viceversa, although that isn't very useful. the css property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation. flexibility an html div is as big as its contents unless you override its dimensions using css. this is similarly the case ...
...ause it mixes content and presentation. flexibility an html div is as big as its contents unless you override its dimensions using css. this is similarly the case for xul, except there are two flexibility directions to consider. an hbox is as big as its contents horizontally, but it will occupy all the available space vertically. you can make an hbox flexible horizontally with the css property -moz-box-flex or the flex attribute. the same applies to a vbox, but in the other direction. unlike most style attributes, the flex attribute is considered acceptable to use in xul code. this is because this attribute is used much too often, and it would require a great deal of css code to avoid using it. at any rate, it can always be overriden using css, so your extension won't lose skinability becau...
...nt is completely invisible and doesn't do more than take space. you should only use it when you need flexible space. if you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your xul document. alignment xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having center alignment and end packing results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases. if you add fle...

MenuItems - Archive of obsolete content
t with the 'list-style-image' property. #add-bookmark { list-style-image: url('addbookmark.png'); } this technique can also be used to apply an image for the menu element, except you would want to use the "menu-iconic:" class instead. ...
...g"/> menu icon animation in order to animate the menu item icon on hover a -moz-image-region rule can be applied. in this example we use an image that is 16px wide and 32px high. the top 16px square is the icon in normal state the bottom part in hovered state. note that the image element is on a child level underneath the menu or menuitem, and it will have the class menu-iconic-icon. ...
... that the image element is on a child level underneath the menu or menuitem, and it will have the class menu-iconic-icon. hence, -moz-image-region is not applied to the menu itself, but one level lower: <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> #add-bookmark { list-style-image: url('addbookmark.png'); } #add-bookmark .menu-iconic-icon { -moz-image-region: rect(0px, 16px, 16px, 0px) !important; } #add-bookmark:hover .menu-iconic-icon { -moz-image-region: rect(16px, 16px, 32px, 0px) !important; } this behavior is fundamentally different to other html elements, such as <li> or <div> where list-style-image and -moz-image-region can be applied at the same element level. checkbox menu items sometimes, you will want to have an item on ...

Building Trees - Archive of obsolete content
both. of course, we can’t really see the photos, since the tree’s rows are too small! it’s not normal to put photos in a tree like this—instead, the images would be used for icons. on the other hand, you could use a stylesheet to change the default height of the tree rows. you cannot make each row a different height, but you can change the height of all rows with some css: treechildren::-moz-tree-row { height: 150px; } since no elements are constructed by the tree builder, you cannot use the style or class attributes to change the style of a cell (this is the case with all trees). you must use syntax like that above to change the appearance. in the example above, it changes the height of a row to 150 pixels. you may want to change the syntax to refer to a specific treechildren elem...
...extremely useful. it can be used to define extra properties for reference later in a stylesheet. for example, if the properties attribute was set to the value "?creator", you could style the photos created by different people differently. alternatively, you could also use static values (in addition to variables) in the properties attribute. for instance, consider the following css: treechildren::-moz-tree-cell(dave) { background-color: lightgreen; } this would set the background color of a cell to green for any cell with the “dave” property. you can also use the properties attribute on the treerow to change the style for an entire row. this example sets the country associated with a photo as a property of a tree’s rows. we can use that property to change the appearance of each row. <r...
... « previousnext » ...

XUL element attributes - Archive of obsolete content
the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datas...
...e. the ordinal attribute can be used to change the order. note the default ordinal for elements is 1. you can retrieve the displayed order by using the properties of the boxobject of the container. orient type: one of the values below used to specify whether the children of the element are oriented horizontally or vertically. the default value depends on the element. you can also use the -moz-box-orient style property. horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. pack type: one of the values below the pack attribute specifies where child elements of the...
...aced when the box is larger that the size of the children. for boxes with horizontal orientation, it is used to indicate the position of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box. end child elements are placed on the right or b...

titlebar - Archive of obsolete content
will send a command event after the move is complete. examples this xul file will create a hud-style window that can be moved with the mouse. it will close if the mouse button is released. ...
...use. it will close if the mouse button is released. ...
...eased. ...

Theme changes in Firefox 3.5 - Archive of obsolete content
a part of the background of the scrollbar thumb widget. third-party themes can still draw a gripper for the scrollbar thumb button by applying a centered background image to the scrollbar's thumb button. global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x. if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check to 16px to avoid that problem. look at the patch to see what was changed for pinstripe. bug 450944 changed the way window shadow is handled on mac os x. before that change, opaque windows always had a shadow and transparent windows never...
...44 changed the way window shadow is handled on mac os x. before that change, opaque windows always had a shadow and transparent windows never had a shadow. after that change, transparent windows also have a shadow by default. this can result in unwanted shadows in your theme, e.g. under the autoscroll icon or the identity panel. if you don't want the shadow, you can turn it off by setting the new -moz-window-shadow css property to none on the affected element. browser.xul bug 463189 added a new attribute on the xul window element of browser.xul named browsingmode. the value of this attribute is normal when the private browsing mode is inactive, and private when it's active. this attribute can be used to style different parts of the browser window inside the private browsing mode. ...
... get attribute 'active="true"'. to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the toolbox/tabbrowserbar. see private browsing for theme designers for details. native hyperlink color: use -moz-nativehyperlinktext, to select the computer's native hyperlink color. all known changes for a list of all the known changes see: mozillazine's forum: theme changes for firefox 3.5 ...

Example 2 - Learn web development
inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); backgro...
...d : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 ...
...x-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"...

Example 3 - Learn web development
inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); backgro...
...d : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 ...
...x-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(...

Example 4 - Learn web development
inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); backgro...
...d : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 ...
...x-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(...

Example 5 - Learn web development
inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); backgro...
...d : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 ...
...x-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(...

Handling common HTML and CSS problems - Learn web development
other set of problems comes with css prefixes — these are a mechanism originally used to allow browser vendors to implement their own version of a css (or javascript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. ...
...sion of a css (or javascript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the pr...
... — this was needed to make transforms work in chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, chrome supported both versions). the last three lines show three different versions of the linear-gradient() function, which is used to generate a linear gradient in the background of an element: the first one has a -moz- prefix, and shows a slightly older version of the syntax (firefox) the second one has a -webkit- prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the webkit engine). the third one has no prefix, and shows the final version of the syntax (included in the css image values and replaced content module level 3 spec, which defines this ...

Places utilities for JavaScript
for instance, normally in order to get access to the bookmarks service, you have to run something like: components.classes["@mozilla.org/brow...
...for instance, normally in order to get access to the bookmarks service, you have to run something like: components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(comp...
...for instance, normally in order to get access to the bookmarks service, you have to run something like: components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksserv...

nsIParserUtils
seuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallowcomments (1 << 0) flag for sanitizer: allow comment nodes. sanitizerallowstyle (1 << 1) flag for sanitizer: allow <style> elements and style attributes (with contents sanitized in case of -moz-binding). note: if -moz-binding is absent, properties that might be xss risks in other web engines are preserved! sanitizercidembedsonly (1 << 2) flag for sanitizer: only allow cid: urls for embedded content. at present, sanitizing css backgrounds, and so on., is not supported, so setting this together with sanitizerallowstyle doesn't make sense. at present, sani...
... can still leak information. by default, non-dangerous non-css presentational html elements and attributes or forms are not removed. to remove these, use sanitizerdropnoncsspresentation and/or sanitizerdropforms. by default, comments and css is removed. to preserve comments, use sanitizerallowcomments. to preserve <style> elements and style attributes on other elements, use sanitizerallowstyle. ...
...sentation and/or sanitizerdropforms. by default, comments and css is removed. to preserve comments, use sanitizerallowcomments. to preserve <style> elements and style attributes on other elements, use sanitizerallowstyle. -moz-binding is removed from <style> elements and style attributes if present. in this case, properties that gecko doesn't recognize can get removed as a side effect. note: if -moz-binding is not present, <style> elements and style attributes, and if sanitizerallowstyle is specified, the sanitized content may still be xss dangerous if loaded into a non-gecko web engine! astring sanitize( in astring src, in unsigned long flags ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value). flags s...

HTMLCanvasElement.toBlob() - Web APIs
ecturl(url); }; newimg.src = url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type. for example, to get the image in jpeg format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.95); // jpeg at 95% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico. windows xp doesn't support converting from png to ico, so it uses bmp instead. a download link is created by setting the download attribute. the value of the download attribute is the name it will use as the file name. var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d);...
... living standard no change since the latest snapshot, html5 html 5.1the definition of 'htmlcanvaselement.toblob' in that specification. recommendation no change html5the definiti...

Drag Operations - Web APIs
erty. although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. this mouse pointer feedback is sufficient in many cases. however, you can also update the user interface with an insertion point or highlight as needed. for simple highlighting, you can use the :-moz-drag-over css pseudoclass on a drop target. .droparea:-moz-drag-over { outline: 1px solid black; } in this example, the element with the class droparea will receive a 1 pixel black outline while it is a valid drop target, that is, if the preventdefault() method was called during the dragenter event. note: you must cancel the dragenter event for this pseudoclass to apply, as this state is no...
...l. you can use the event's clientx and clienty properties as with other mouse events to determine the location of the mouse pointer. finally, the dragleave event will fire at an element when the drag leaves the element. this is the time when you should remove any insertion markers or highlighting. you do not need to cancel this event. any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically. the dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event. performing a drop when the user releases the mouse, the drag and drop operation ends. if the mouse is released over an element that is a valid drop target, that is, one that cancelled th...
...n the list of types specified in the types property. sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. in the following example, three formats are supported by a drop target. the following example returns the data associated with the best-supported format: function dodrop(event) { const supportedtypes = ["application/x-moz-file", "text/uri-list", "text/plain"]; const types = event.datatransfer.types.filter(type => supportedtypes.includes(type)); if (types.length) { const data = event.datatransfer.getdata(types[0]); } event.preventdefault(); } finishing a drag once the drag is complete, a dragend event is fired at the source of the drag (the same element that received the dragstart event). this event w...

::selection - CSS: Cascading Style Sheets
ss text). ::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored. ...
...lor cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored. syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it. ...
...ation and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored. syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it. ...

Customizing the download progress bar - Archive of obsolete content
t...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed. this is required since it contains platform-specific directives, as we will see. ...
...ains platform-specific directives, as we will see. the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to add support for linux. this is the product of some tweaking and experim...

Appendix F: Monitoring DOM changes - Archive of obsolete content
ule' in window || 'csskeyframerule' in window) { var watchnodes = function watchnodes(selector, callback, doc) { const event = watchnodes.prefix + (watchnodes._i++); const xhtml = 'http://www.w3.org/1999/xhtml'; doc = doc || document; let style = doc.createelementns(xhtml, 'style'); style.setattribute('type', 'text/css'); let preamble = ' @-moz-keyframes ' + event + ' { \n\ from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } \n\ }\n'; let properties = [ 'animation-duration: 0.0001s;', 'animation-name: ' + event + ' !important;' ]; properties = properties.map(function (prop) ' ' + watchnodes.namespace + prop) ...
...t weak references. ...

Search Extension Tutorial (Draft) - Archive of obsolete content
, ... </image> <url type="application/x-suggestions+json" template="https://api.example.com/suggestions"> <param name="q" value="{searchterms}"/> </url> <url type="text/html" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="search-box"/> </url> <url type="application/x-moz-keywordsearch" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="keyword"/> </url> <searchform>https://www.example.com/search</searchform> </searchplugin> bootstrap.js const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module. cu.import("resource://gre...
...ne_details.url) services.search.removeengine(engine); } } function install() {} function uninstall() {} changing the location bar keyword url the preferred method for changing the keyword url is to add a new search engine as described above and change the browser.search.defaultenginename preference to its name. a separate url for keyword can be set by adding a type="application/x-moz-keywordsearch" url to the search description file if desired. while it is possible to achieve similar effects by changing the keyword.url preference, this method is deprecated and should not be used. example extension and utility module in order to simplify the process of correctly changing these kinds of settings, we've developed a reusable utility module, and an example add-on to demonstrate its...

Drag and Drop JavaScript Wrapper - Archive of obsolete content
"text/unicode"); return flavours; } } the flavours list contains only one flavour, which is 'text/unicode'. the flavourset object can be used to hold a list of flavours. in some cases, you must provide the xpcom interface as well. for example, for files: var textobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("application/x-moz-file","nsifile"); flavours.appendflavour("text/unicode"); return flavours; } } the ondragover function defines what happens when an object is dragged over. you might use it to change the appearance of the element as it is being dragged over. in many cases the function can do nothing. it must be defined for elements that accept dragged data however. next, the ondrop function should be cr...
... session) { event.target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various types to be dragged at once and also allows alternative forms of the data to be dragged. the following table describes some of the flavours you might use. you can also make up your own flavours if necessary. text/unicode text data text/html html data text/x-moz-url a url application/x-moz-file a local file see here for an overview of more data flavours. « previousnext » original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragwrap.php copyright information: copyright (c) neil deakin ...

Supporting private browsing mode - Archive of obsolete content
an do so quite easily by using the browsingmode attribute in the window element in browser.xul. this attribute has the value "normal" when the user isn't in private browsing mode, and is "private" when in private browsing mode. ...
.... for example, if you want to use a different background color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-right-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); } this snippet is pulled directly from the standard skin; you can customize as you see fit. private browsing for plug-in authors plug-ins can detect whether or not private browsing...

Binding Attachment and Detachment - Archive of obsolete content
attachment using css bindings can be attached to elements through css using the -moz-binding property. -moz-binding value: none | [,]* <uri> | inherit initial value: none applies to: all elements (not generated content or pseudo-elements) inherited: no percentages: n/a the value of the -moz-binding property is a set of urls that identify specific bindings. an individual url in the set consists of the binding document's url and the binding's document-unique identifier. in the following example, a binding is referenced that will be attached to all html checkbox elements. ...
...ed content or pseudo-elements) inherited: no percentages: n/a the value of the -moz-binding property is a set of urls that identify specific bindings. an individual url in the set consists of the binding document's url and the binding's document-unique identifier. in the following example, a binding is referenced that will be attached to all html checkbox elements. input[type="checkbox"] { -moz-binding: url("http://www.mozilla.org/xbl/htmlbindings.xml#checkbox"); } bindings attached through css will only remain on the bound element as long as the element continues to match the style rule. if at any time a resolution of style on the element determines that a different binding should be attached, the old binding (and all bindings that it explicitly extends in its inheritance chain) will ...

Example Sticky Notes - Archive of obsolete content
fax - respond today.</p></div> <div class="sticker"><p>don't forget the eggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>lea...
...andatory. the others are only needed if you plan to handle xul (xml user interface language) or/and svg (scalable vector graphics) in your bindings; xlink in xml also may come useful sometimes. all namespaces above are supported by default and they do not require any additional downloads or initializations. --> <binding id="default"> <!-- a separate binding. you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatica...

treecol.type - Archive of obsolete content
checkboxes. progressmeter the content of the columns are a progress meters. this is used in mozilla's download manager window. text the content of the columns is text. if you are using type="checkbox", then the tree and each treecol must be editable. you need to apply css to make the checkbox toggle. here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells. cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or el...
...cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x, so you should specify a url to an image in your extension or elsewhere. ...

Things I've tried to do with XUL - Archive of obsolete content
ue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox. <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated. s...
...; ... xbl in listboxes using xbl bindings in listboxes is not easy because there is a big bug there: if you create from js an element you want to bind, and if it is hidden when the listbox is first rendered, the listbox does not create a frame for it, and the xbl doesn't get attached... a workaround for that is to create the element, insert it in the document and set its style attribute with a -moz-binding property, all of that from c++ instead of js. multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.ap...

Anonymous Content - Archive of obsolete content
<content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single binding, declared with the binding element. the id attribute should be set to the identifier of the binding. this way it can be referred to through the css -moz-binding property. the content tag is used to declare anonymous content that will be added to the scroll bar. all of the elements inside the content tag will be added inside the element that the binding is bound to. presumably this binding would be bound to a scroll bar, although it doesn't have to be. any element that has its css -moz-binding property set to the uri of the binding will use it. the...
...by using the children element. the children added in the xul are added in place of the children element. this is handy when creating custom menu widgets. for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it. the menupopup will be added to the content in the location specified by the children element. note tha...

Box Objects - Archive of obsolete content
nextsibling.label);"/> <button label="button 4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a window, the elements are ordered according to a number of properties, for instance the orientation, their ordinal group and their direction. orient attribute the orientation is commonly modified using the orient attribute. there is also a corresponding css property -moz-box-orient which may be used instead, depending on the situation. this attribute was explained earlier in the section on boxes. ordinal attribute the ordinal attribute on an element may be used to specify the ordinal group of the element, or you can use the css property -moz-box-ordinal-group. elements with a lower ordinal value are placed in the box before elements with a higher ordinal value. fo...
...nd of the row. items with the same ordinal value appear in the same order as in the source. if you then press the button labeled one again, its ordinal will increase to 3 and will move to the end. finally, pressing the button labeled three will increase its ordinal to 2 and it will appear in between the other two buttons. dir attribute the final box ordering attribute is the dir attribute, or the -moz-box-direction css property. if this is set to reverse, all of the children in the box are displayed in reverse order. in a horizontal box, the elements will be displayed from right to left; in a vertical box, the elements will be displayed from bottom to top. here is an example: example 5 : source view <hbox dir="reverse"> <button label="left"/> <button label="center"/> <button label="right"...

Element Positioning - Archive of obsolete content
you may find the box alignment example useful for trying out the various box properties. cropping text and buttons you could potentially create a button element that contains a label that is larger than the maximum width of the button. of course, a solution would be to increase the size of the button. however, buttons (and other elem...
... you may find the box alignment example useful for trying out the various box properties. cropping text and buttons you could potentially create a button element that contains a label that is larger than the maximum width of the button. of course, a solution would be to increase the size of the button. however, buttons (and other elements with a label)...

Introduction to XBL - Archive of obsolete content
d binding1 and the other called binding2. one might be attached to a scroll bar and the other to a menu. a binding can be attached to any xul element. if you use css classes, you can use as many different bindings as you need. note the namespace on the bindings element in the template above. this declares that we are using xbl syntax. you assign a binding to an element by setting the css property -moz-binding to the url of the bindings file. for example: scrollbar { -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); } the url points to the binding with the id 'binding1' in the file 'chrome://findfile/content/findfile.xml'. the '#binding1' syntax is used to point to a specific binding, much like how you would point to an anchor in an html file. you will usually put all of...
...ass. the following example demonstrates this. ...

XBL Attribute Inheritance - Archive of obsolete content
a textbox element, the label will need to inherit its text from the value attribute and the textbox will also need to inherit its default value from the value attribute as well. to solve this, we will need to use a different attribute and map it to the same one. the following demonstrates this: xul: <box class="labeledtextbox" title="enter some text:" value="ok"/> css: box.labeledtextbox { -moz-binding: url('chrome://example/skin/example.xml#labeledtextbox'); } xbl: <binding id="labeledtextbox"> <content> <xul:label xbl:inherits="value=title"/> <xul:textbox xbl:inherits="value"/> </content> </binding> the textbox inherits the value attribute directly. to set the value attribute on the label, we need to use a different attribute name and map it to the value. the inherits at...
...ibute name and map it to the value. the inherits attribute on the label grabs the title attribute from the labeledtextbox and maps it to the value attribute of the label element. the syntax <inner attribute>=<outer attribute> is used to map one attribute to another. here is another example: xul: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"/> css: box.okcancel { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl: <binding id="okcancel"> <content> <xul:button xbl:inherits="label=oktitle,image"/> <xul:button xbl:inherits="label=canceltitle"/> </content> </binding> the value of the oktitle attribute is mapped to the label attribute of the first button. the canceltitle attribute is mapped to the label attribute of the second butt...

resizer - Archive of obsolete content
height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window> resizing an element <stack style="border: 1px solid black;"> <button id="button" label="resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" style="background: black; -moz-appearance: none;" element="button" left="0" top="0" width="16" height="16"/> <resizer dir="topright" style="background: black; -moz-appearance: none;" element="button" right="0" top="0" width="16" height="16"/> <resizer dir="bottomleft" style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer di...
... left resized to the left. right resized to the right. top resized up. ...

toolbarbutton - Archive of obsolete content
have an image. more information is available in the xul tutorial. relevant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type ex...
...cut attached to the command. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. orient type: one of the values below used to specify whether the children of the element are oriented horizontally or vertically. the default value depends on the element. you can also use the -moz-box-orient style property. horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. tabindex type: integer the tab order of the element. the tab order is the order in which the...

Extentsions FAQ - Archive of obsolete content
tool bar and would have no problem implementing a third, so yes it's possible. ...
...//or document.getelementbyid("toolbar-button").setattribute("toolbar-button","off"); //css #myexten-toolbar-button[myexten-toolbar-button="on"] { list-style-image: url("chrome://myexten/skin/toolbar-button.png"); -moz-image-region: rect(0px 24px 24px 0px);} #myexten-toolbar-button[myexten-toolbar-button="off"] { list-style-image: url("chrome://myexten/skin/toolbar-button-off.png"); -moz-image-region: rect(0px 24px 24px 0px);} to implement a third i would simply change add an attribute and the corresponding css see http://www.w3.org/tr/rec-css2/cascade.html#cascade friday, october 13 - 20, 2006 (↑ top) how to get a refenece to the sidebar window assuming you have chrome privileges, this should work: var ci = components.interfaces; var toplevelwindow = window.queryinte...

Theme changes in Firefox 2 - Archive of obsolete content
hover #print-button:hover:active #reload-button:hover #reload-button:hover:active #searchbar[empty="true"] .searchbar-textbox #stop-button:hover #stop-button:hover:active #urlbar-icons-spacer #urlbar-spacer #urlbar[level="high"] #lock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolautocompletecomment) .bookmark-item[livemark] .openintabs-menuitem .toolbarbutton-icon .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker toolbar[iconsize="s...
...browsing-palm-paragraph .safebrowsing-palm-smalltext the following styles are used to display, in the url bar, an indicator of whether or not the site is safe: #safebrowsing-urlbar-icon #safebrowsing-urlbar-icon[level="safe"] #safebrowsing-urlbar-icon[level="warn"] enginemanager.css the following style needs to be implemented. this file is new in firefox 2. #enginelist treechildren::-moz-tree-image(enginename) changes in global about.css this is a new file for firefox 2. it skins the firefox about box, and needs to provide at least the following styles: #aboutlogocontainer #aboutpagecontainer #version the default theme also skins the following styles: body, html, img, ul, and ul > li. browser.css the following styles that were used in firefox 1.5 are no longer used in...

Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
displayed in "quirks" mode in mozilla 0.9.4 and later, the markers of lists will not use the font size of the list item text, but will instead stay the same as the user's default font size. see bug 97351 for more details. the solution fortunately, there are mozilla-specific css-like rules that can be used to correct both problems. the following rule is derived from mozilla's html.css file: *|*:-moz-list-bullet, *|*:-moz-list-number {font-size: 1em;} this rule tells gecko-based browsers to use the computed value of font-size for the marker's parent, which is the list item itself. thus the font sizes of the marker and the content will be the same. since this rule is not valid css, it will prevent the validation of any stylesheet that contains it. one solution is to move the rule into its own...
...ntains it. one solution is to move the rule into its own stylesheet, and accept that the stylesheet in question will never validate. this might also be a place to put any explorer-specific css-like rules (such as scrollbar styling rules), which also will not validate. authors who are not concerned with making sure the rule applies across all namespaces can use a slightly more simplified rule: *:-moz-list-bullet, *:-moz-list-number {font-size: 1em;} recommendations if it is important to make list item markers match the font size of the content, use one of the suggested rules. in situations where validation is a priority, segregate the rule into a separate stylesheet so that the rule will not confuse css validators run against the main stylesheet. related links bug 110360 bug 97351 ...

Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
reating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks" mode. to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and captions except for family. */ table, caption { font-size: -moz-initial; font-weight: -moz-initial; font-style: -moz-initial; font-variant: -moz-initial; } this rule sets all aspects of a table's font, except for the font family, to match the user's preferences setting, thus emulating the behavior of old browsers. this only happens when gecko is in "quirks" mode; in "standards" mode, all styles are inherited by tables as permitted by the css specificati...
...e behavior of old browsers. this only happens when gecko is in "quirks" mode; in "standards" mode, all styles are inherited by tables as permitted by the css specification. in those cases where it is necessary to author documents in "quirks" mode, but the breaking of table inheritance is not desired, authors can use gecko's standards support to overcome the table-font rule shown above. the value -moz-initial is a proprietary value used to apply the user's (or browser's) default setting for a given property to an element. because it is not actually part of css, it is marked with the prefix -moz- in order to avoid confusion about what is or isn't part of css. overcoming legacy behavior all that is needed is a rule that overrides the -moz-initial values with the css2 value inherit. this value i...

Managing screen orientation - Web APIs
ac est dolor, quis tincidunt leo. cras commodo quam non tortor consectetur eget rutrum dolor ultricies. ut interdum tristique dapibus. ...
...y to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospace; margin : 0; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* for landscape, ...

Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method changes the element being used as the css background for a background with a given background element id. syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css function. ...
... as a background image using the -moz-element css function. imageelement is the new element to use as the background corresponding to that image element string. specify null to remove the background element. example this example changes the background of a <div> block each time the block is clicked by the user. view this example live. <style type="text/css"> #mybox { background-image: -moz-element(#canvasbg); text-align: center; width: 400px; height: 400px; cursor: pointer; } </style> the css defined by the <style> block above is used by our <div> to use an element with the id "canvasbg" as its background. var c = 0x00; function clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100);...

Dragging and Dropping Multiple Items - Web APIs
support a single item do not need to do anything extra. however, use the mozgetdataat() method to retrieve a specific item from the data transfer. the following example retrieves a set of files being dragged and adds them to an array. function ondrop(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } you may also wish to check if the desired format exists using the moztypesat method. as with the types property, it returns a list of strings of the types for an item. types property is equivalent to retrieving the list of types for the item at index 0. var types = event.datatransfer.moztypesat(1); dragging non-string data the additional methods described above are also not re...
...types property, it returns a list of strings of the types for an item. types property is equivalent to retrieving the list of types for the item at index 0. var types = event.datatransfer.moztypesat(1); dragging non-string data the additional methods described above are also not restricted to string data; you can specify any type of data. for example, files are dragged using the application/x-moz-file type stored as nsifile objects. as the setdata() method only supports strings, it cannot be used to specify files for dragging in this manner. instead the mozsetdataat() method must be used. dt.mozsetdataat("application/x-moz-file", file, 0); by using this method, you can file objects, although you do not necessarily need to support multiple items. thus, you should pass 0 as the index. si...

:empty - CSS: Cascading Style Sheets
the :empty css pseudo-class represents any element that has no children. children can be either element nodes or text (including whitespace). comments, processing instructions, and css content do not affect whether an element is considered empty. note: in selectors level 4 the :empty pseudo-class was changed to act like :-moz-only-whitespace, but no browser currently supports this yet. /* selects any <div> that contains no content */ div:empty { background: lime; } syntax :empty examples html <div class="box"><!-- i will be lime. --></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older browsers because of the whitespace around this comment. --> </div> <div class="box"> <p><!-- i will be pink in all browsers because of the non-collapsible whit...
... selectors level 3the definition of 'the :empty pseudo-class' in that specification. recommendation initial definition ...

any-pointer - CSS: Cascading Style Sheets
all checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. the big checkbox takes precedence because it is declared after the small one. ...
... candidate recommendation initial definition. ...

WebKit CSS extensions - CSS: Cascading Style Sheets
supported in firefox with -webkit- prefix the following properties are supported with the -webkit- prefix in firefox. many of these are supported with no prefix as well: see formerly proprietary properties that are now standard above. note: due to the legacy code in a multitude of web sites that used -webkit- prefixed properties, edge and firefox redirect many -webkit- prefixed properties to -moz-, -ms-, and unprefixed equivalents. a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function -webkit-appearance* b -webkit-bac...
...microsoft edge and ie mobile support this property with the -webkit- prefix, rather than -ms- for interopability reasons as well. ** these values are supported even though they are not standard and are not on track to becoming standard. *** use flex-box properties instead. deprecated -webkit- properties the following properti...

animation-delay - CSS: Cascading Style Sheets
full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). to change preferences in firefox, visit about:config. ...
...full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). to change preferences in firefox, visit about:config. ...

animation-direction - CSS: Cascading Style Sheets
full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). to change preferences in firefox, visit about:config. ...
...full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). to change preferences in firefox, visit about:config. ...

column-count - CSS: Cascading Style Sheets
support 12 full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 52 full support 52 no support 1.5 — 74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support 15prefixed prefixed implemented with the vendor prefix...
... 50 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 52 full support 52 full support 4prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.opera android full support 11.1 full support 11.1 full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support ...

font-smooth - CSS: Cascading Style Sheets
thing off; display text with jagged sharp edges. antialiased - smooth the font on the level of the pixel, as opposed to the subpixel. switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. subpixel-antialiased - on most non-retina displays, this will give the sharpest text. firefox implements a similar property, but with different values: -moz-osx-font-smoothing. it only works on mac os x/macos. auto - allow the browser to select an optimization for font smoothing, typically grayscale. grayscale - render text with grayscale antialiasing, as opposed to the subpixel. switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. formal definition initial valueautoapplies toall elementsi...
...he smoothed font should look slightly lighter in weight. for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard. ...

initial - CSS: Cascading Style Sheets
roidsafari on iossamsung internetinitialchrome full support 1edge full support 13firefox full support 19 full support 19 no support 1 — 24prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 15safari full support 1.2webview android full support 1chrome android full support 18firefox android full support ...
... 1.2webview android full support 1chrome android full support 18firefox android full support 19 full support 19 no support 4 — 24prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support no support ...

user-modify - CSS: Cascading Style Sheets
erty has no effect in firefox. it was originally planned to determine whether or not the content of an element can be edited by a user. /* keyword values */ user-modify: read-only; user-modify: read-write; user-modify: write-only; /* global values */ user-modify: inherit; user-modify: initial; user-modify: unset; this property has been replaced by the contenteditable attribute. syntax the -moz-user-modify property is specified as one of the keyword values from the list below. values read-only default value. contents are read-only. read-write the user is able to read and write contents. read-write-plaintext-only same as read-write, but rich text formatting will be lost. write-only the user is able to edit the content, but not to read it. formal definition value not found ...
...ite the user is able to read and write contents. read-write-plaintext-only same as read-write, but rich text formatting will be lost. write-only the user is able to edit the content, but not to read it. formal definition value not found in db! formal syntax syntax not found in db! examples html <div class="readwrite">the user is able to change this text.</div> css .readwrite { -moz-user-modify: read-write; -webkit-user-modify: read-write; } specifications not part of any standard. a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group. ...

Video player styling basics - Developer guides
l('data:image/png;base64,ivborw0kggoaaa ... '); } when the data-state of the button is changed, the appropriate image will also be changed. all the other buttons are treated in a similar way. progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:100%; height:81%; margin-top:0.125rem; border:none; color:#0095dd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here. it is also given a slight rounded corner for aesthetic reasons. the color property is also defined here as internet explorer uses this defined colour for styling the progress bar's background colour as it increases. as mentioned in th...
...e background colour needs to be set. the internal <span> element used as the actual progressing part of the faked progress bar has its width initially set to 0% (it is updated via javascript) and it also has its background colour set. there are some browser-specific properties that need to be set to ensure that firefox and chrome use the required colour for the progress bar: .controls progress::-moz-progress-bar { background-color:#0095dd; } .controls progress::-webkit-progress-value { background-color:#0095dd; } although the same properties are set to the same value, these rules need to be defined separately, otherwise chrome ignores it. javascript that's really it for the immediate styling; the next task is making a number of javascript changes to ensure that everything works as e...

<input type="radio"> - HTML: Hypertext Markup Language
e here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely and in a semantic way. ...
...by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. by specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. here we've used a border along with border-radius and a transition to create a nice animating radio ...

Localization - Archive of obsolete content
ocalizing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and will make it possible to work...

Label and description - Archive of obsolete content
atically but can still be achieved with <html:br/> if desired. <description style="white-space: pre-wrap;">i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> with white-space: pre-wrap; all whitespace is rendered literally, but text is additionally permitted to wrap at spaces. note: prior to firefox 3, it was necessary to use -moz-pre-wrap instead of -pre-wrap. you may wish to use both for backward compatibility. <description style="white-space: pre;">i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> text can also be made to wrap by inserting an <html:br/> element regardless of the css style, but this creates a hard-break that does not change as pare...

Adding Events and Commands - Archive of obsolete content
nselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. onfocus and onblur. used when an element receives or loses focus when the user is navigating with the keyboard. you can combine these with -moz-user-focus to add custom focus behavior to elements that normally wouldn't have it. drag and drop. drag and drop operations involve several events. since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it. also keep in mind that there are 2 drag and drop apis, the newest (and preferred) one introduced in firefox 3.5. event handlers...

Adding windows and dialogs - Archive of obsolete content
ur window, and tab focus advances in the order the items are found in the xul document. if you have a very complex layout, or need customized tabbing behavior, you can set the tabindex attribute in the controls. you can also use the focus function to focus an element depending on events such as window load. you should do this carefully, to avoid having inaccessible controls. you can also use the -moz-user-focus css property to enable focusing of elements that typically wouldn't receive focus. again, this should be used sparingly. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Custom XUL Elements with XBL - Archive of obsolete content
in order to improve the error console window. replacing elements should always be a last resort solution, specially if it is done on the main browser window. it's very easy to break the ui of the application or other extensions if you do this the wrong way, so be very careful about it. if you only need to change some specific instances of an element, use very specific css rules. you can use the -moz-binding property with any css selector. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Creating reusable content with CSS and XBL - Archive of obsolete content
l 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css. this stylesheet contains the document style. copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new text file, square.xbl. this file contains the xbl binding. copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> ...

Layout FAQ - Archive of obsolete content
you can work around it by removing display:t...

jspage - Archive of obsolete content
||h.scrolltop};},getscrollsize:function(){var i=a(this),h=this.getsize();return{x:math.max(i.scrollwidth,h.x),y:math.max(i.scrollheight,h.y)}; },getposition:function(){return{x:0,y:0};},getcoordinates:function(){var h=this.getsize();return{top:0,left:0,bottom:h.y,right:h.x,height:h.y,width:h.x}; }});var d=element.getcomputedstyle;function e(h,i){return d(h,i).toint()||0;}function f(h){return d(h,"-moz-box-sizing")=="border-box";}function g(h){return e(h,"border-top-width"); }function c(h){return e(h,"border-left-width");}function b(h){return(/^(?:body|html)$/i).test(h.tagname);}function a(h){var i=h.getdocument();return(!i.compatmode||i.compatmode=="css1compat")?i.html:i.body; }})();element.alias("setposition","position");native.implement([window,document,element],{getheight:function(){return t...

Static Analysis for Windows Code under Linux - Archive of obsolete content
ins as shared libraries: # prepare a directory mkdir $home/dehydra cd $home/dehydra #obtain gcc 4.3 sources wget ftp://mirrors.kernel.org/gnu/gcc/gcc...-4.3.0.tar.bz2 tar jxvf gcc-4.3.0.tar.bz2 # get the patches which enable plugins cd gcc-4.3.0/ # create an hg repository. this makes it easy to apply patches, they can be applied manually hg init . hg clone http://hg.mozilla.org/users/tglek_mo...-moz-plugin-mq .hg/patches # apply gty.diff and plugin.diff # if you have mq setup, do hg qpush -a (for file in `cat .hg/patches/series`; do cat .hg/patches/$file; done) |patch -p1 cd .. now, the gcc source with plugin supports is ready, we should now build a cross compiler from this source. and the instructions are exactly the same with the one here. follow that instructions strictly for making a cr...

align - Archive of obsolete content
the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...

alternatingbackground - Archive of obsolete content
...

orient - Archive of obsolete content
« xul reference home orient type: one of the values below used to specify whether the children of the element are oriented horizontally or vertically. the default value depends on the element. you can also use the -moz-box-orient style property. horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. see also separator.orient ...

pack - Archive of obsolete content
aced when the box is larger that the size of the children. for boxes with horizontal orientation, it is used to indicate the position of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box. end child elements are placed on the right or b...

Building accessible custom components in XUL - Archive of obsolete content
ther reading table of supported roles and states in firefox focus issues download stage-3.zip install stage-3.xpi the next step on the road to an accessible spreadsheet is the focus problem. in html documents, you can make any element focusable with the tabindex attribute. in xul, there is no tabindex attribute; to make a xul element focusable, you need to use a mozilla-specific css property, -moz-user-focus: normal. <code> grid.spreadsheet { border: thin solid; -moz-user-focus: normal; } </code> in html documents, firefox draws a focus rectangle around the currently focused element. in xul, we will need to handle this ourselves, again with css rules. you might initially think of using the css border property, but that will add width and height to the focused cell. a better approach is ...

Index - Archive of obsolete content
f the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1093 autohide no summary! 1094 bbox xul elements, xul reference a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. 1095 binding needshelp, needstechnicalreview, xul elements, xul reference should be contained within a bindings element. a binding is u...

Custom toolbar button - Archive of obsolete content
that the button uses. the last section specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24px);} there is nothing to customize. save the file. explanation: this css stylesheet specifies how the button is di...

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
hen the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed. similarly, you may wish to change a property when the element is focused. you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this property controls whether an element can be focused. (see focus and selection) handling mouse events for mouse events, you can use the button attribute to have the handler only trap events that occur from a certain button. without this attribute, the handler traps all events regardless of the button that was pressed. the button attribute should be set to either 0 for the left mous...

Adding Methods to XBL-defined Elements - Archive of obsolete content
occurs when a window is displayed. all elements that have xbl-bound content will have their constructors invoked. the order that they are called in should not be relied upon, as they are loaded from various files. the window's onload handler is not called until after all the bindings have been attached and their constructors finished. the second point is when a binding is attached by changing the -moz-binding style property of an element. the existing binding will be removed, after its destructor is called. then, the new binding will be added in its place and its constructor invoked. the script for a constructor or destructor should be placed directly inside the appropriate tag. there should only be at most one of each per binding and they take no arguments. here are some examples: <construct...

Focus and Selection - Archive of obsolete content
e pointing to the id of the textbox. finally, the other label which displays the tag name has no control attribute, so clicking it has no effect on the focused element. only focusable elements can be focused. making a label focusable if you were creating custom elements, you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this property controls whether an element can be focused. for instance, you could make a label focusable, as in the example below. example 4 : source view <label id="focused" style="-moz-user-focus: normal;" onkeypress="alert('label focused');" value="focus me"/> the style property is set to normal. you can also set it to ignore to turn off the focus for an element. this sho...

Stack Positioning - Archive of obsolete content
hree elements, each positioned at the coordinates given by the left and top attributes. here, all three children are buttons, but the elements do not have to be same type. they may be any element, including boxes and other stacks. the size of a stack is determined by the positions of the child elements. it is always sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore). so if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element. you can override this size with the various style properties such as width and max-width. you can use a script to adjust the value of the left and top attributes and thus make the elements move around. stacks have the advantage that when one absolutely positio...

XBL Example - Archive of obsolete content
he xbl is bound to will be placed inside the deck. the selectedindex is inherited by the deck, so we may set the initial page in the xul. the following xul file produces the result in the image. <box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <checkbox label="checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding: url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck. the label widget has not appeared as no value has been specified for it. we could set a value, but instead it will calculated later. page property next, a property that holds the current page will be added. when getting this custom property, it will need to retrieve the value of...

Urlbar-icons - Archive of obsolete content
te new image or button child elements to add your own items. ...

XUL accessibility guidelines - Archive of obsolete content
fault, toolbar buttons cannot receive focus with a keyboard. the recommended way of fixing this is that all functionality associated with a toolbar be duplicated elsewhere in the application, such as in a menu item or context menu. in cases where duplication of functionality is not possible (such as a window without a menu bar), toolbar buttons can be made focusable by adding the special css rule -moz-user-focus: normal. (firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are). keyboard shortcuts keyboard shortcuts are very useful to users needing keyboard access. there are many ways to provide keyboard shortcuts. they are wel...

attribute.align - Archive of obsolete content
f the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. parameters start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box. end child elements are placed on the right or...

button - Archive of obsolete content
selection of the menuitem. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. orient type: one of the values below used to specify whether the children of the element are oriented horizontally or vertically. the default value depends on the element. you can also use the -moz-box-orient style property. horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. tabindex type: integer the tab order of the element. the tab order is the order in which th...

treechildren - Archive of obsolete content
ees, the content will be placed inside this element. this element is also used to define container rows in the tree. more information is available in the xul tutorial. attributes alternatingbackground attributes alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack,...

treecol - Archive of obsolete content
platforms, the following styles need to be added to the stylesheet (see treecol.type). on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image. however, chrome://global/skin/checkbox/cbox-check.gif is available in seamonkey on mac os x.. treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells. cbox-check.gif isn't available in firefox 1, 2, and 3 on mac os x, so you should specify a url to an image in your extension or elsewhere.

Windows and menus in XULRunner - Archive of obsolete content
s to the toolbar buttons through the css file. we could hard-code the images in the xul file itself, but css is a better practice. here’s the css file: /* global skin --------------------------------------------------- */ @import url(chrome://global/skin/); /* toolbar ------------------------------------------------------- */ #open { list-style-image: url(chrome://basicapp/skin/open.png); -moz-box-orient: vertical; } #save { list-style-image: url(chrome://basicapp/skin/save.png); -moz-box-orient: vertical; } of course, you need to make sure the png files are included in the application. there are quite a few things xul offers for application ui. more than i can fit into a single article, so we will continue looking at building ui in xulrunner in the next article. see also xu...

nsIContentPolicy - Archive of obsolete content
esh 8 indicates a timed refresh. shouldload() will never get this, because it does not represent content to be loaded (the actual load triggered by the refresh will go through shouldload() as expected). shouldprocess() will get this for, for example <meta> refresh elements and http refresh headers. type_xbl 9 indicates an xbl binding request, triggered either by -moz-binding css property or the document.addbinding() method. type_ping 10 indicates a ping triggered by a click on an <a> element using the ping attribute. type_xmlhttprequest 11 indicates an xmlhttprequest. also used for document.load() type_object_subrequest 12 indicates a request by a plugin. type_dtd 13 indicates a dtd loaded by an xml d...

Theme changes in Firefox 3 - Archive of obsolete content
me the table below lists changes made in the default theme for firefox 3; you can use this information as a starting point for figuring out the changes you need to make. all file list all platforms file description of change browser/themes/*/browser/browser.css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml). instead a '-moz-margin-start' property must be added to .tab-drop-indicator-bar, with a value that is half of the width of the indicator image. also, the visibility of the indicator is now controlled by setting collapsed in tabbrowser.xml. as a result, the 'display' property should be removed from .tab-drop-indicator-bar (including for dragging="true"). mac os x file description of change ...

Theme changes in Firefox 4 - Archive of obsolete content
...

::-ms-fill-upper - Archive of obsolete content
ust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification. browser compatibility historically supported in internet explorer and edge before version 79. see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

::-ms-thumb - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification. see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

::-ms-track - Archive of obsolete content
margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

Implementation Status - Archive of obsolete content
g data with the submission response partial @replace with value of 'text' not supported 11.11 integration with soap supported g. xforms and styling section title status notes bugs g.1 pseudo-classes partial :read-only and :read-write are suported using :-moz-read-only and :-moz-read-write 313111; g.2 pseudo-elements unsupported we support ::value, ::repeat-index, and ::repeat-item through the attributes xf-value, xf-repeat-index, and xf-repeat-item. 271724; ...

Mozilla XForms Specials - Archive of obsolete content
..> <li> ... </li> </xf:repeat> </ul> section 9.3.2 states that mixing with table will probably never work. mixing with ul might suffer from the same limitation. pseudo-class support we currently support all the css pseudo-classes in xforms (:enabled, :disabled, etc. ), except for :read-only and :read-write, because of non-specified behaviour of these for (x)html. instead you have to use :-moz-read-only and :-moz-read-write for now. (limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ). instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an input control use: @namespace xf url("http://www.w3.org/...

XForms Repeat Element - Archive of obsolete content
repeat xbl:inherits="bind, model, nodeset" anonid="anonidgridrepeat"> <xf:trigger> <xf:label>r</xf:label> <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1</input> </item> <item> <input>input2</input> </item> <item> <input>input3</input> </item> </repeat> </data> </xf:instance> </xf:model> </head> <body> ...

Crisp pixel art look with image-rendering - Game development
ifferences between these values, and which prefixes to use depending on the browser. an example let's have a look at an example. ...

Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
web sites. lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly. css prefixes the major browsers use the following prefixes: -webkit- (chrome, safari, newer versions of opera, almost all ios browsers including firefox for ios; basically, any webkit based browser) -moz- (firefox) -o- (old pre-webkit versions of opera) -ms- (internet explorer and microsoft edge) sample usage: -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; api prefixes historically, vendors have also used prefixes for experimental apis. if an entire interface is experimental, then the interfac...

CSS FAQ - Learn web development
of the below <div> will therefore be red. div { color: black; } #orange { color: orange; } .green { color: green; } <div id="orange" class="green" style="color: red;">this is red</div> the rules are more complicated when the selector has multiple parts. more detailed information about how selector specificity is calculated can be found in the css 2.1 specification chapter 6.4.3. what do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do? these properties, called prefixed properties, are extensions to the css standard. they allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended. the use of such properties on production websites is not recommended — the...

Styling web forms - Learn web development
ts. if you want to thoroughly customize those widgets, you really have to create your own using html, css, and javascript. this is beyond the scope of the core form articles, but we do look at this in an advanced article how to build custom form controls. note: there are some proprietary css pseudo-elements available that allow you to style internal components of these form controls, such as ::-moz-range-track, but these are not consistent across browsers, so can't be relied upon. we will mention these later as well. the good to style form controls that are easy to style with css, you shouldn't face much if any difficulties, since they mostly behave like any other html element. we already looked at some simple form styling in your first form, and the css building blocks module contains so...

UI pseudo-classes - Learn web development
donly attribute: <div> <label for="name">name: </label> <input id="name" name="name" type="text" value="mr soft" readonly> </div> if you try the live example, you'll see that the top set of form elements are not focusable, however, the values are submitted when the form is submitted. we've styled the form controls using the :read-only and :read-write pseudo-classes, like so: input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } firefox only supported these pseudo-classes with a prefix up to version 78; at which point it started to support the unprefixed version. the full examp...

Example - Learn web development
n-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ he...

Beginning our React todo list - Learn web development
rder-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-se...

Starting our Svelte Todo list app - Learn web development
rder-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-se...

Vue conditional rendering: editing existing todos - Learn web development
}, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the be...

Command line options
profile_name in the profile manager. note profile_name and profile_dir are quoted together, and are separated by exactly 1 space (as with the previous syntax, profile_name must not contain spaces). do not run profile_dir while running an instance of the application. you can use the -no-remote option to avoid connecting to a running instance. firefox -createprofile "joeluser c:\internet\joelusers-moz-profile" note: profile_dir must not exist and you must not already have a profile called profile_name. -migration start with import wizard. -new-instance open new instance, not a new window in running instance, which allows multiple copies of application to be open at a time. firefox -new-instance -p "another profile" note: not available for windows, see bug 855899. -no-remote do no...

Interface Compatibility
which are visible to web content are not modified, except as a last resort when inherent security vulnerabilities or incompatibility with other browsers make it the only option. any changes, including new features, must have super-review. one exception to this rule is apis which are explicitly shipped with mozilla prefixes as a technology preview. this includes css properties that begin with the -moz- prefix (e.g. -moz-box-shadow), or javascript apis that begin with the moz prefix (e.g. canvasrenderingcontext.mozdrawtext). these apis may be removed or replaced with standard interfaces in future releases of mozilla. jetpack the jetpack sdk and apis are not yet complete. the stable version 1.0 of the jetpack sdk is planned for later in 2010. documented apis which are shipped as part of the jet...

CustomizableUI.jsm
ert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css += '@-moz-document url("chrome://browser/content/browser.xul") {'; css += ' #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon16.png")'; //a 16px x 16px icon for when in toolbar css += ' }'; css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],'; css += ' toolbarpaletteitem[place="palette"] > ...

Fonts for Mozilla 2.0's MathML engine
mime type. finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets. if necessary, you might want to modify the font-family on the <math> elements and, for gecko, the on ::-moz-math-stretchy pseudo element too. for example to force the use of stix fonts: math { font-family: stixgeneral; } ::-moz-math-stretchy { font-family: stixnonunicode, stixsizeonesym, stixsize1, stixgeneral; } try the mathml torture test to compare the rendering of various fonts and the css rules to select them. ...

Mozilla Quirks Mode Behavior
d when it started differing.] gecko had bug 248239, where table cells acted as they had box-sizing:border-box applied for the purpose of the height property. this is fixed in gecko 16 (firefox 16) for standards mode but remains in quirks mode for compatibility with quirks mode behavior of other browsers. (firefox 16 / thunderbird 16 / seamonkey 2.13) since this version bug 338554 is fixed and (-moz-)box-sizing applies to table cells in standards mode, but quirks mode keeps the old behavior. obsolete since gecko 1.9 (firefox 3) in quirks mode table cells with a border have a minimum width of one pixel. obsolete since gecko 1.9 (firefox 3) the basic table layout strategy ignores padding (on what) in quirks mode. obsolete since gecko 1.9 (firefox 3) the basic table layout strategy handles wi...

Installing JSHydra
. prerequisites for building spidermonkey spidermonkey is part of the build process, but since jshydra will get the code if required, you do not need to worry about obtaining the right version of spidermonkey. building jshydra jshydra requires, as part of its build process, spidermonkey. by default, the configure script will obtain a known working copy of spidermonkey; it is possible via the --moz-src and --moz-obj configure arguments to tell jshydra to use existing copies of the source and build. cd $home/jshydra hg clone http://hg.mozilla.org/users/pidgeot18_gmail.com/jshydra/ cd jshydra ./configure make # run jshydra tests make check processing input files jshydra requires the files it processes to be correct js files. converting html, xul, or xbl files into a readable js equivalent...

XForms Accessibility
arification about navindex. he wrote: navindex was in xforms - it was stripped out as it was believed the focus model was dependent on the content which used it. so, yes we don't care about navindex in xforms. if you use xhtml1.x use tabindex. if you use xhtml2 use nextfocus. therefore since mozilla xforms works in xhtml (1.x) or xul documents only then we use tabindex instead. note, we support -moz-user-focus style neither for xhtml or xul. at api accessible properties this section describes common rules how accessibility properties are formed for forms control elements. name it is formed from value of child xforms label element if the element doesn't have labelledby attribute. description it is formed from value of child xforms hint element if the element doesn't have describedby att...

inIDOMUtils
void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants constant value description exclude_shorthands (1<<0) include_aliases (1<<1) content state flags the content state flags are used in a bitmask. value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 16 :target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element. nsiarray getbindingurls( in nsidomelement aelement ); parameters aelement a dom element to retrieve the bindings of. return value an array of nsiuri objects representing the current xbl bi...

nsIDOMChromeWindow
eters none. setcursor() sets the mouse cursor to the specified cursor. the mouse cursor is locked to the specified cursor if it's not "auto". at that time, the cursor has been never changed by cursor moving. after you call this method with "auto", the cursor will be unlocked. void setcursor( in domstring cursor ); parameters cursor you can specify same values of css cursor property (including -moz- prefixed values). and there are special values: "grab", "grabbing" and "spinning". but they might be dropped in the future version, if you use the values, you should use -moz-* value instead. ...

CSS.supports() - Web APIs
takes one parameter matching the condition of @supports: supportcondition a domstring containing the condition to check. return value true if the browser supports the rule, otherwise false. examples result = css.supports("text-decoration-style", "blink"); result = css.supports("display: flex"); result = css.supports("(--foo: red)"); result = css.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`); // result is true or false specification specification status comment css conditional rules module level 3the definition of 'css: supports()' in that specification. candidate recommendation initial definition. ...

Constraint validation API - Web APIs
for this to happen, the custom validity has to be cancelled, by invoking setcustomvalidity() with an empty string value. we therefore do this every time the input event is raised. if you don't do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission. note: firefox supported a proprietary error attribute — x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. this has been removed as of version 66 (see bug 1513890). specifications specification status comment html living standardthe definition of 'constraint validation api' in that specification. living standard html 5.1the definition of 'constraint validation api...

DataTransfer.mozItemCount - Web APIs
erty is gecko-specific. this property is read only . syntax datatransfer.mozitemcount; return value a number representing the number of items being dragged. example this example shows the use of the mozitemcount property. function drop_handler(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } specifications this property is not defined in any web standard. ...

GlobalEventHandlers.onpointerdown - Web APIs
le: <div id="target"> tap me, click me, or touch me! </div> css the css simply sets up the appearance of the target, and doesn't affect its functionality at all. #target { width: 400px; height: 30px; text-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below. try tapping, clicking, or touching the box and see what happens. for full effect, try it with a variety of pointer types. specifications specification status comment pointer events – level 2the definition of 'onpointerdown' in that specificatio...

HTMLButtonElement - Web APIs
ts methods from its parent, htmlelement name return type description checkvalidity() boolean not supported for reset or button elements. reportvalidity() boolean not supported for reset or button elements. setcustomvalidity(in domstring error) void not supported for reset or button elements. with gecko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form. specifications specification status comment html living standardthe definition of 'htmlbuttonelement' in that specification. living standard html 5.2the definition of 'htmlbuttonelement' in that specification. recommendation the menu attribute and type="menu" v...

Capabilities, constraints, and settings - Web APIs
defaults and variables first we have the default constraint sets, as strings. these strings are presented in editable <textarea>s, but this is the initial configuration of the stream. let videodefaultconstraintstring = '{\n "width": 320,\n "height": ...

Controlling multiple parameters with ConstantSourceNode - Web APIs
x="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: abso...

Example and tutorial: Simple synth keyboard - Web APIs
nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0...

ARIA: switch role - Accessibility
result the result looks like this: specifications specificatio...

::-webkit-meter-bar - CSS: Cascading Style Sheets
the ::-webkit-meter-bar css pseudo-class is a webkit extension that represents the meter bar in a <meter> element. ...

::-webkit-meter-inner-element - CSS: Cascading Style Sheets
p to render the meter element as read-only. syntax ::-webkit-meter-inner-element specifications not part of any standard. ...

:focus-visible - CSS: Cascading Style Sheets
pseudo-class and the ua (user agent) determines via heuristics that the focus should be made evident on the element. (many browsers show a “focus ring” by default in this case.) this selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard). note that firefox supports similar functionality through an older, prefixed pseudo-class — :-moz-focusring. syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to match. compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. note the difference in behavior from elements styled with :focus. <input value="default styles"><br> <button>defaul...

:invalid - CSS: Cascading Style Sheets
if any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (grouped radio buttons share the same value for their name attribute.) gecko defaults by default, gecko does not apply a style to the :invalid pseudo-class. however, it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid. specifications specification status comment html living standardthe definition of ':invalid' in that specification. living standard no change. html5the definition of ':invalid' in that specification. recommendation defines the semantics of html and constraint validation. ...

@document - CSS: Cascading Style Sheets
need to escape it using regular expression rules (to \.), then escape that string using css rules (to \\.). @document is currently only supported in firefox; if you wanted to replicate using such functionality in your own non-firefox browser, you could try using this polyfill by @an-error94, which uses a combination of a user script, data-* attributes, and attribute selectors. note: there is a -moz-prefixed version of this property — @-moz-document. this has been limited to use only in user and ua sheets in firefox 59 in nightly and beta — an experiment designed to mitigate potential css injection attacks (see bug 1035091). formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples speci...

pointer - CSS: Cascading Style Sheets
input mechanism includes a pointing device of limited accuracy. fine the primary input mechanism includes an accurate pointing device. examples this example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers. ...

Coordinate systems - CSS: Cascading Style Sheets
he mdn window, to allow you to scroll it horizontally. the "inner" box is the one that we track events in and in which we show the mouse coordinates. .outer { width: 1000px; height: 200px; background-color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .log { position: relative; width: 100%; text-align: center; } result here you can see the results in action. as you mouse in and around the blue box, watch the values of the mouse's x and y coordinates change in the various coordinate systems in which you can obtain the values. note also the effect of scrolling th...

Detecting CSS animation support - CSS: Cascading Style Sheets
ntly prefixing this property and changing its name to animationname instead. once this code is finished running, the value of animation will be false if css animation support isn't available, or it will be true. if it is true then both the animation property name and the keyframe prefix will be the right ones. so if you use a new firefox, the property will be mozanimation and the keyframe prefix -moz- and with chrome it'll be webkitanimation and -webkit-. notice browsers don't make it easy with the switching between camelcase and hyphen-ation. animating using the correct syntax for different browsers now that you know if css animation is supported or not, we can animate. if( animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s l...

Pseudo-classes - CSS: Cascading Style Sheets
pi living standard defined :fullscreen. html living standard living standard defines when particular selectors match html elements. selectors level 4 working draft defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where(). changed :empty to behave like :-moz-only-whitespace . no significant change for other pseudo-classes defined in selectors level 3 and html5 (though semantic meaning not taken over). html5 recommendation copies the relevant section from the canonical (whatwg) html spec. css basic user interface module level 3 recommendation defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :op...

animation-name - CSS: Cascading Style Sheets
ps://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically; /* multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding; /* global values */ animation-name: initial animation-name: inherit animation-name: unset values none a special keyword denoting no keyframes. it can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade. <custom-ident> a name identifying the animation. this identifier is composed of...

background-size - CSS: Cascading Style Sheets
full support 12firefox full support 4 full support 4 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- no support 3.6 — 4prefixed prefixed implemented with the vendor prefix: -moz-ie full support 9opera full support 10 full support 10 full support 15prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 backgrou...

box-ordinal-group - CSS: Cascading Style Sheets
integer>. formal definition initial value1applies tochildren of box elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples basic usage example in an older version of the spec, box-ordinal-group was included to allow you to change the display order of flex children inside a flex container: article:nth-child(1) { -webkit-box-ordinal-group: 2 -moz-box-ordinal-group: 2 box-ordinal-group: 2 } article:nth-child(2) { -webkit-box-ordinal-group: 1 -moz-box-ordinal-group: 1 box-ordinal-group: 1 } the modern flexbox equivalent is order. specifications not part of any standard. ...

box-orient - CSS: Cascading Style Sheets
discrete formal syntax horizontal | vertical | inline-axis | block-axis | inherit examples setting horizontal box orientation here, he box-orient property will cause the two <p> sections in the example to display in the same line. html <div class="example"> <p>i will be to the left of my sibling.</p> <p>i will be to the right of my sibling.</p> </div> css div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /* children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -webkit-box-orient: horizontal; /* webkit */ box-orient: horizontal; /* as specified */ } result specifications not part of any standard. ...

font - CSS: Cascading Style Sheets
on the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in window status bars. prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field. formal definition initial valueas each of the properties of the shorthand:font-style: normalfont-variant: normalfont-weight: normalfont-stretch: normalfont-size: mediumline-height: normalfont-family: depends on user agentapplies toall elements. it also applies to ::first-let...

line-height - CSS: Cascading Style Sheets
ce. <length> the specified <length> is used in the calculation of the line box height. values given in em units may produce unexpected results (see example below). <percentage> relative to the font size of the element itself. the computed value is this <percentage> multiplied by the element's computed font size. percentage values may produce unexpected results (see the second example below). -moz-block-height sets the line height to the content height of the current block. accessibility concerns use a minimum value of 1.5 for line-height for main paragraph content. this will help people experiencing low vision conditions, as well as people with cognitive concerns such as dyslexia. if the page is zoomed to increase the text size, using a unitless value ensures that the line height wil...

outline-color - CSS: Cascading Style Sheets
i on iossamsung internetoutline-colorchrome full support 1edge full support 12firefox full support 1.5 full support 1.5 no support 1 — 3.6prefixed prefixed implemented with the vendor prefix: -moz-ie full support 8opera full support 7safari full support 1.2webview android full support 37chrome android full support 18firefox android full support ...

overflow - CSS: Cascading Style Sheets
ide the padding box, it looks the same as visible, but still establishes a new block formatting context. desktop browsers provide scrollbars if content overflows. overlay behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. only supported in webkit-based (e.g., safari) and blink-based (e.g., chrome or opera) browsers. mozilla extensions -moz-scrollbars-none [1] use overflow: hidden instead. -moz-scrollbars-horizontal [1] use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead. -moz-scrollbars-vertical [1] use overflow-x: hidden and overflow-y: scroll, or overflow: scroll hidden instead. -moz-hidden-unscrollable intended mainly for internal use and by themes. disables scrolling of xml root elements...

<shape> - CSS: Cascading Style Sheets
...

tab-size - CSS: Cascading Style Sheets
ample compares a default tab size with a custom tab size. note that white-space is set to pre to prevent the tabs from collapsing. html <p>no tab</p> <p>&#0009;default tab size of 8 characters wide</p> <p class="custom">&#0009;custom tab size of 3 characters wide</p> <p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p> css p { white-space: pre; } .custom { tab-size: 3; -moz-tab-size: 3; } result specifications specification status comment css text module level 3the definition of 'tab-size' in that specification. working draft initial definition ...

text-align - CSS: Cascading Style Sheets
interactive-examples and send us a pull request. syntax /* keyword values */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* character-based alignment in a table column */ text-align: "."; text-align: "." center; /* block alignment values (non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* global values */ text-align: inherit; text-align: initial; text-align: unset; the text-align property is specified in one of the following ways: using the keyword values start, end, left, right, center, justify, justify-all, or match-parent. using a <string> value only, in which case the other value defaults to right. using both a keyword value and a ...

transition-property - CSS: Cascading Style Sheets
longhand sub-properties that can be animated will be. syntax /* keyword values */ transition-property: none; transition-property: all; /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; /* multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sliding; /* global values */ transition-property: inherit; transition-property: initial; transition-property: unset; values none no properties will transition. all all properties that can transition will. <custom-ident> a string identifying the property to which a transition effect should be applied when its value changes. formal definition initial valueallapplies toall ele...

width - CSS: Cascading Style Sheets
solid black; } <div class="px_length">width measured in px</div> <div class="em_length">width measured in em</div> percentage .percent { width: 20%; background-color: silver; border: 1px solid red; } <div class="percent">width in percentage</div> max-content p.maxgreen { background: lightgreen; width: intrinsic; /* safari/webkit uses a non-standard name */ width: -moz-max-content; /* firefox/gecko */ width: -webkit-max-content; /* chrome */ width: max-content; } <p class="maxgreen">the mozilla community produces a lot of great software.</p> min-content p.minblue { background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a...

<button>: The Button element - HTML: Hypertext Markup Language
or control issues, who may accidentally activate the wrong interactive content. spacing may be created using css properties such as margin. hand tremors and the giant-button-problem - axess lab firefox firefox will add a small dotted border on a focused button. this border is declared through css in the browser stylesheet, but you can override it to add your own focused style using button::-moz-focus-inner { }. if overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. in order to meet current web co...

<img>: The Image Embed element - HTML: Hypertext Markup Language
ment. note: you cannot use this attribute if the <img> element is inside an <a> or <button> element. deprecated attributes align aligns the image with its surrounding context. use the float and/or vertical-align css properties instead of this attribute. allowed values: top equivalent to vertical-align: top or vertical-align: text-top middle equivalent to vertical-align: -moz-middle-with-baseline bottom the default, equivalent to vertical-align: unset or vertical-align: initial left equivalent to float: left right equivalent to float: right border the width of a border around the image. use the border css property instead. hspace the number of pixels of white space on the left and right of the image. use the margin css property instead. longdes...

<input type="range"> - HTML: Hypertext Markup Language
for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5, 3.5,... in the positive direction and -0.5, -1.5, -2.5,... in the negative direction. see the html step attribute. non standard attributes attribute description orient sets the orientation of the range slider. firefox only. orient similar to the -moz-orient non-standard css property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, f...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
s previously set, the input will register as invalid, even if it current contains a valid value on submission. note: always validate input constraints both client side and server side. constraint validation doesn't remove the need for validation on the server side. invalid values can still be sent by older browsers or by bad actors. note: firefox supported a proprietary error attribute — x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. this has been removed as of version 66 (see bug 1513890). localization the allowed inputs for certain <input> types depend on the locale. in some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00. firefox uses the following heuristics to det...

OpenSearch description format
e url or urls to use for the search. the template attribute indicates the base url for the search query. firefox supports three url types: type="text/html" specifies the url for the actual search query. type="application/x-suggestions+json" specifies the url for fetching search suggestions. in firefox 63 onwards, type="application/json" is accepted as an alias of this. type="application/x-moz-keywordsearch" specifies the url used when a keyword search is entered in the location bar. this is supported only in firefox. for these url types, you can use {searchterms} to substitute the search terms entered by the user in the search bar or location bar. other supported dynamic search parameters are described in opensearch 1.1 parameters. for search suggestions, the application/x-sugges...

fill - SVG: Scalable Vector Graphics
...

stroke - SVG: Scalable Vector Graphics
...