Search completed in 1.94 seconds.
CSSStyleSheet.deleteRule() - Web APIs
the css
stylesheet method deleterule() removes a rule from the
stylesheet object.
... syntax css
stylesheet.deleterule(index) parameters index the index into the
stylesheet's cssrulelist indicating the rule to be removed.
... return value undefined example this example removes the first rule from the
stylesheet my
styles.
... my
styles.deleterule(0); specifications specification status comment css object model (cssom)the definition of 'css
stylesheet.deleterule()' in that specification.
CSSStyleSheet.removeRule() - Web APIs
the obsolete css
stylesheet method removerule() removes a rule from the
stylesheet object.
... syntax css
stylesheet.removerule(index) parameters index the index into the
stylesheet's cssrulelist indicating the rule to be removed.
... return value undefined example this example removes the first rule from the
stylesheet my
styles.
... my
styles.removerule(0); you can rewrite this to use the standard deleterule() method very easily: my
styles.deleterule(0); specifications specification status comment css object model (cssom)the definition of 'css
stylesheet.removerule()' in that specification.
CSSStyleValue.parse() - Web APIs
the parse() method of the css
stylevalue interface sets a specific css property to the specified values and returns the first value as a css
stylevalue object.
... syntax css
stylevalue.parse(property, csstext) parameters property a css property to set.
... return value a css
stylevalue object containing the first supplied value.
... const css = css
stylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification.
ElementCSSInlineStyle - Web APIs
the elementcssinline
style mixin describes cssom-specific features common to the htmlelement, svgelement and mathmlelement interfaces.
... note: elementcssinline
style is a mixin and not an interface; you can't actually create an object of type elementcssinline
style.
... properties
stylethe
style property is used to get as well as set the inline
style of an element.
... when getting, it returns a css
styledeclaration object that contains a list of all
styles properties for that element with values assigned for the attributes that are defined in the element's inline
style attribute.methodsthis interface has no methods.
FontFace.style - Web APIs
the
style property of the fontface interface retrieves or sets the font's
style.
... it is equivalent to the font-
style descriptor.
... syntax var
style = fontface.
style; fontface.
style = value; value a cssomstring containing the descriptors defined in the
style sheet's @font-face rule.
... specifications specification status comment css font loading module level 3the definition of '
style' in that specification.
StyleSheet.ownerNode - Web APIs
the ownernode property of the
stylesheet interface returns the node that associates this
style sheet with the document.
... this is usually an html <link> or <
style> element, but can also return a processing instruction node in the case of <?xml-
stylesheet ?>.
... syntax noderef =
stylesheet.ownernode example <html lang="en"> <head> <link rel="
stylesheet" href="example.css"> </head> <body> <button onclick="alert(document.
stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for
style sheets that are included by other
style sheets, such as with @import, the value of this property is null.
... specifications specification status comment css object model (cssom)the definition of '
stylesheet: ownernode' in that specification.
::before (:before) - CSS: Cascading Style Sheets
html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can
style text or images in the content property almost any way we want.
... html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-
style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
... html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-
style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-
style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.targe...
...note that there are no icons used, and the check-mark is actually the ::before that has been
styled in css.
:checked - CSS: Cascading Style Sheets
note: because browsers often treat <option>s as replaced elements, the extent to which they can be
styled with the :checked pseudo-class varies from browser to browser.
...text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /*
style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /*
style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: ...
...no effect.edge full support 12notes full support 12notes notes on macos, styling <option&rt; elements has no effect.firefox full support 1notes full support 1notes notes from firefox 56, <option&rt; elements cannot be
styled.notes on macos, styling <option&rt; elements has no effect.ie full support 9opera full support 9notes full support 9notes notes on macos, styling <option&rt; elements has no effect.safari full support 3.1notes ...
...notes styling <option&rt; elements has no effect.webview android full support 2chrome android full support 18firefox android full support 4notes full support 4notes notes from firefox 56, <option&rt; elements cannot be
styled.opera android full support 10.1safari ios full support 3.1notes full support 3.1notes notes styling <option&rt; elements has no effect.samsung internet android full support 1.0legend ...
:placeholder-shown - CSS: Cascading Style Sheets
/* selects any element with an active placeholder */ :placeholder-shown { border: 2px solid silver; } syntax :placeholder-shown examples basic example this example applies special font and border
styles when the placeholder is shown.
... html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-
style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
... html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom
style.
...nch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-
style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
negative - CSS: Cascading Style Sheets
when defining custom counter
styles, the negative descriptor lets you alter the representations of negative counter values, by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.
...the negative descriptor has effect only if the system value is symbolic, alphabetic, numeric, additive, or extends, if the extended counter
style itself uses a negative sign.
... formal definition related at-rule@counter-
styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-
style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-
style: neg; } result specifications specification status comment css counter
styles level 3the definition of 'system' in that specification.
@font-face - CSS: Cascading Style Sheets
since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-
style a font-
style value.
... since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-
style: oblique 20deg 50deg; font-weight a font-weight value.
...ttf); font-weight: bold; } } formal syntax @font-face { [ font-family: <family-name>; ] | [ src: <src>; ] | [ unicode-range: <unicode-range>; ] | [ font-variant: <font-variant>; ] | [ font-feature-settings: <font-feature-settings>; ] | [ font-variation-settings: <font-variation-settings>; ] | [ font-stretch: <font-stretch>; ] | [ font-weight: <font-weight>; ] | [ font-
style: <font-
style>; ] }where <family-name> = <string> | <custom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: view the live example <html> <head> <title>web font sample</title> <
style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold";...
... src: url("https://mdn.mozillademos.org/files/2468/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </
style> </head> <body> this is bitstream vera serif bold.
@font-feature-values - CSS: Cascading Style Sheets
@
styleset specifies a feature name that will work with the
styleset() functional notation of font-variant-alternates.
... formal syntax @font-feature-values <family-name># { <feature-value-block-list> }where <family-name> = <string> | <custom-ident>+<feature-value-block-list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-forms | @
styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-declaration-list> = <feature-value-declaration>where <feature-value-declaration> = <custom-ident>: <integer>+; examples using @
styleset in a @font-feature-values rule /* at-rule for "nice-
style" in font one */ @font-feature-values font one { @
styleset { nice-
style: 12; } } /* at-rule for "nice-
style" in font two...
... */ @font-feature-values font two { @
styleset { nice-
style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates:
styleset(nice-
style); } specifications specification status comment css fonts module level 4the definition of '@font-feature-values' in that specification.
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 9.3samsung internet android no support no@
stylesetchrome no support noedge no support nofirefox full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-f...
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
... these
styles can also decorate borders with lines or images, and make them square or rounded.
...lement boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-
style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-
style border-left-width border-radius border-right border-right-color border-right-
style border-right-width border-
style border-top border-top-color border-top-left-radius bo...
...rder-top-right-radius border-top-
style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-
style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1...
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-
style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"><h1>main article...
... .listing { list-
style: none; margin: 2em; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } as soon as i add this css, the items start to lay out as a grid.
... background-color: #f08c00; color: #fff; text-align: center; margin: 0; padding: 20px; } .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: center; } .listing .body { padding: 10px; } .listing { list-
style: none; margin: 2em; display: grid; grid-gap: 20px; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } .listing .wide { grid-column-end: span 2; } this technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a cms for example, where you have repeated i...
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
picking a target the pseudo-class :target is used to
style the target element of a url containing a fragment identifier.
... suppose you wish to
style any h2 element that is the target of a url, but do not want any other kind of element to get a target
style.
... this is simple enough: h2:target { font-weight: bold; } it's also possible to create
styles that are specific to a particular fragment of the document.
...thus, to add a border to the #example fragment, we would write: #example:target { border: 1px solid black; } targeting all elements if the intent is to create a "blanket"
style that will apply to all targeted elements, then the universal selector comes in handy: :target { color: red; } example in the following example, there are five links that point to elements in the same document.
Using CSS transforms - CSS: Cascading Style Sheets
<img
style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img
style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
...rspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-
style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black;...
...o200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-
style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; ...
Comments - CSS: Cascading Style Sheets
a css comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the
style sheet.
... syntax comments can be placed wherever white space is allowed within a
style sheet.
...there is no other way to specify comments in external
style sheets.
... however, when using the <
style> element, you may use <!-- --> to hide css from older browsers, although this is not recommended.
Questions about CSS - CSS: Cascading Style Sheets
cascading
style sheets (css) is a rule-based language allowing developers to define
styles to apply to html elements (or other markup structures).
...with css, the sources of
style definition for a given document element are in this order of precedence: the
style attribute on an individual element tag the
style element that defines a specific
style sheet containing
style declarations or a link element that links to a separate document containing the
style element.
... in a web page, the
style element is placed between the title statement and the body statement.
... an imported
style sheet, using the css @import notation to automatically import and merge an external
style sheet with the current
style sheet
style attributes specified by the viewer to the browser the default
style sheet assumed by the browser in general, the web page creator's
style sheet takes precedence, but it's recommended that browsers provide ways for the viewer to override the
style attributes in some respects.
Cubic Bezier Generator - CSS: Cascading Style Sheets
var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.stroke
style = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i ...
... } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.stroke
style = 'blue'; ctx.beziercurveto(cx(x1), cy(y1), cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ctx.closepath(); // draw the p2 point (with a line to p0) ctx.beginpath(); ctx.stroke
style = 'red'; ctx.moveto(cx(x1), cy(y1)); ctx.lineto(cx(0), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.movet...
...o(cx(x1), cy(y1)); ctx.arc(cx(x1), cy(y1), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fill
style = 'white'; ctx.fill(); ctx.closepath(); // draw the p3 point (with a line to p1) ctx.beginpath(); ctx.stroke
style = 'red'; ctx.moveto(cx(x2), cy(y2)); ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2), cy(y2)); ctx.arc(cx(x2), cy(y2), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fill(); ctx.closepath(); // draw the p1(1,1) point (with dashed hints) ctx.beginpath(); ctx.moveto(cx(1), cy(1)); ctx.stroke
style = 'lightgrey'; ctx.lineto(cx(0), cy(1)); ctx.moveto(cx(1), cy(...
...1)); ctx.lineto(cx(1), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.stroke
style = "black"; ctx.fill
style = "black"; ctx.arc(cx(1), cy(1), radius, 0, 2 * math.pi); ctx.fill(); ctx.stroke(); ctx.closepath(); // draw the p0(0,0) point ctx.beginpath(); ctx.arc(cx(0), cy(0), radius, 0, 2 * math.pi); ctx.fill(); ctx.stroke(); ctx.closepath(); } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function mousedown(e) { var canvas = document.getelementbyid('bezier'); var x1 = cx(document.getelementbyid('x1').value); var y1 = cy(document.getelementbyid('y1').value); var x = e.pagex - canvas.offsetleft; ...
Visual formatting model - CSS: Cascading Style Sheets
it will then behave as a flex item, however, it cannot be targeted and
styled like a regular box because there is no element to target.
... something to consider about these anonymous boxes is that they inherit
styles from their direct parent, but you cannot change how they look by targeting the anonymous box.
...as with the anonymous block boxes, these anonymous inline boxes cannot be
styled independently in the way the <em> can; they just inherit the
styles of their container.
...multiple-column layout creates anonymous column boxes around the columns; these also cannot be
styled or otherwise targetted.
WebKit CSS extensions - CSS: Cascading Style Sheets
a -webkit-animation-trigger -webkit-app-region -webkit-appearance* -webkit-aspect-ratio b -webkit-backdrop-filter -webkit-background-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-
style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-
style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-
style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-
style** -we...
...l-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-
style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mod...
...-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-
style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns ...
...n -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-
style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-
style -webkit-text-emphasis-
style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-
style -webkit-transition -webkit-trans...
box-decoration-break - CSS: Cascading Style Sheets
formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks
styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-
style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ...
...results in: adding box-decoration-break: clone to the above
styles: -webkit-box-decoration-break: clone; box-decoration-break: clone; ...
... block box fragments a block element with similar
styles as above and no fragmentation results in: fragmenting the above block into three columns results in: note that stacking these pieces vertically will result in the non-fragmented rendering.
... now, the same example but
styled with box-decoration-break: clone results in: note here that each fragment has an identical replicated border, box-shadow, and background.
<color> - CSS: Cascading Style Sheets
currentcolor example html <div
style="color:blue; border: 1px dashed currentcolor;"> the color of this text is blue.
... <div
style="background:currentcolor; height:9px;"></div> this block is surrounded by a blue border.
...v { width: 100%; height: 200px; } javascript const inputelem = document.queryselector('input'); const divelem = document.queryselector('div'); function validtextcolor(stringtotest) { if (stringtotest === "") { return false; } if (stringtotest === "inherit") { return false; } if (stringtotest === "transparent") { return false; } const image = document.createelement("img"); image.
style.color = "rgb(0, 0, 0)"; image.
style.color = stringtotest; if (image.
style.color !== "rgb(0, 0, 0)") { return true; } image.
style.color = "rgb(255, 255, 255)"; image.
style.color = stringtotest; return image.
style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlistener('change', () => { if(validtextcolor(inputelem.value)) { divelem.
style.backgroundcolor = inputelem.value; ...
...divelem.textcontent = ''; } else { divelem.
style.backgroundcolor = 'white'; divelem.textcontent = 'invalid color value'; } }); result rgb syntax variations this example shows the many ways in which a single color can be created with the various rgb color syntaxes.
font-family - CSS: Cascading Style Sheets
(however, this doesn't work in internet explorer 6 or earlier.) when a font is only available in some
styles, variants, or sizes, those properties may also influence which font family is chosen.
... <generic-name> generic font families are a fallback mechanism, a means of preserving some of the
style sheet author's intent when none of the specified fonts are available.
... fangsong a particular
style of chinese characters that are between serif-
style song and cursive-
style kai forms.
... this
style is often used for government documents.
font-variant-numeric - CSS: Cascading Style Sheets
syntax font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; font-variant-numeric: lining-nums; /* <numeric-figure-values> */ font-variant-numeric: old
style-nums; /* <numeric-figure-values> */ font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: old
style-nums stacked-fractions; /* ...
... old
style-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | old
style-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scr...
...ipts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-
style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
font-variant - CSS: Cascading Style Sheets
stylistic(), historical-forms,
styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions related to the font-variant-alternates longhand property.
...the possible values are: lining-nums, old
style-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values> | stylistic( <feature-value-name> ) | historical-forms |
styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) | [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero | <east-asian-variant-va...
...st-asian-width-values> | ruby ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]<feature-value-name> = <custom-ident><numeric-figure-values> = [ lining-nums | old
style-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small...
Inheritance - CSS: Cascading Style Sheets
given the
style rules: p { color: green; } ...
...given the
style rules: p { border: medium solid; } ...
...the words "emphasized text" will not have a border (since the initial value of border-
style is none).
...for example: font { all: revert; font-size: 200%; font-weight: bold; } this reverts the
style of the font property to the user agent's default unless a user
stylesheet exists, in which case that is used instead.
mask-repeat - CSS: Cascading Style Sheets
syntax one or more <repeat-
style> values, separated by commas.
... values <repeat-
style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space round round round no-repeat no-repeat no-repeat in the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior.
... formal definition initial valueno-repeatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-
style>#where <repeat-
style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html cont...
... <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").
style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-
style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repeat
style, from first specified to last.
mask - CSS: Cascading Style Sheets
this will ensure that mask-border has also been reset to allow the new
styles to take effect.
... <repeat-
style> sets the repetition of the mask image.
...| <repeat-
style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator> | <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-
style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
symbols() - CSS: Cascading Style Sheets
the symbols() css function lets you define counter
styles inline, directly as the value of a property such as list-
style.
... unlike @counter-
style, symbols() is anonymous (i.e., it can only be used once).
... although less powerful, it is shorter and easier to write than @counter-
style.
... examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol> css ol { list-
style: symbols(cyclic "*" "†" "‡"); } result specifications specification status comment css counter
styles level 3the definition of 'symbols()' in that specification.
StylePropertyMapReadOnly.entries() - Web APIs
the
stylepropertymapreadonly.entries() method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... syntax
stylepropertymapreadonly.entries() parameters none.
... return value an array of the given
stylepropertymapreadonly object's own enumerable property [key, value] pairs.
StylePropertyMapReadOnly.forEach() - Web APIs
the
stylepropertymapreadonly.foreach() method executes a provided function once for each element of
stylepropertymapreadonly.
... syntax
stylepropertymapreadonly.foreach(function callback(currentvalue[, index[, array]]) { //your code }[, thisarg]); parameters callback the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... arrayoptional the
stylepropertymapreadonly thatforeach() is being called on.
StylePropertyMapReadOnly.getAll() - Web APIs
the getall() method of the
stylepropertymapreadonly interface returns an array of css
stylevalue objects containing the values for the provided property.
... syntax var css
stylevalues[] =
stylepropertymapreadonly.getall(property) parameters property the name of the property to retrieve all values of.
... return value an array of css
stylevalue objects.
StyleSheet.media - Web APIs
the media property of the
stylesheet interface specifies the intended destination media for
style information.
... example <!doctype html> <html> <head> <link rel="
stylesheet" href="document.css" type="text/css" media="screen" /> <
style rel="
stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </
style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.
stylesheets.length; isheetindex++) { console.log('document.
stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.
stylesheets[isheetindex].media)); if (isheetindex === 0) document.
stylesheets[isheetindex].media.appendmedium('handheld'); if (isheetindex === 1) document.
stylesheets[isheetindex].media.deletemedium('print'); console.log('document.styl...
...esheets[' + string(isheetindex) + '].media: ' + json.stringify(document.
stylesheets[isheetindex].media)); } /* will log: document.
stylesheets[0].media: {"0":"screen"} document.
stylesheets[0].media: {"0":"screen","1":"handheld"} document.
stylesheets[1].media: {"0":"screen","1":"print"} document.
stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object model (cssom)the definition of '
stylesheet: media' in that specification.
StyleSheetList - Web APIs
the
stylesheetlist interface represents a list of
stylesheet.
... examples get document
stylesheet objects with for loop for (let i = 0; i < document.
stylesheets.length; i++) { let
stylesheet = document.
stylesheets[i]; } get all css rules for the document using array methods const allcss = [...document.
stylesheets] .map(
stylesheet => { try { return [...
stylesheet.cssrules] .map(rule => rule.csstext) .join(''); } catch (e) { console.log('access to
stylesheet %s is denied.
... ignoring...',
stylesheet.href); } }) .filter(boolean) .join('\n'); specifications specification status comment css object model (cssom)the definition of 'css
stylesheetlist' in that specification.
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-
style-image property, this property specifies a region of the image that is used in place of the whole image.
...note: -moz-image-region only works with <image> elements where the icon is specified using list-
style-image.
... it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-
style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area to the right of the first for the hovered button */ -moz-image-region: rect(0px, 8px, 4px, 4px); } specifications not part of any standard.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies
styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
... allowable properties only a small subset of css properties can be used with the ::first-letter pseudo-element: all font properties : font, font-
style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all background properties : background, background-color, background-image, backgrou...
...nd-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-
style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-
style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-lette...
:defined - CSS: Cascading Style Sheets
/* selects any defined element */ :defined { font-
style: italic; } /* selects any instance of a specific custom element */ simple-custom:defined { display: block; } syntax :defined examples hiding elements until they are defined the following snippets are taken from our defined-pseudo-class demo (see it live also).
...he document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } // both the custom and the built-in element are given italic text :defined { font-
style: italic; } then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements: simple-custom:not(:defined) { display: none; } simple-custom:defined { display: block; } this is useful if you have a complex custom element that takes a while to load into the page — you might want to hide inst...
...ances of the element until definition is complete, so that you don't end up with flashes of ugly un
styled elements on the page specifications specification status comment html living standardthe definition of ':defined' in that specification.
:focus-visible - CSS: Cascading Style Sheets
note the difference in behavior from elements
styled with :focus.
... <input value="default
styles"><br> <button>default
styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
... <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback
style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus
style for keyboard-focus on browsers that do support :focus-visible */ outline: 4px dashed darkorange; background: transparent; } polyfill you can polyfill :focus-visible using focus-visible.js.
:fullscreen - CSS: Cascading Style Sheets
syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your
stylesheets to automatically adjust the size,
style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
...this is done without needing to specifically apply
style changes using javascript.
... html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the
style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
:host-context() - CSS: Cascading Style Sheets
in other words, this allows a custom element, or anything within that custom element's shadow dom, to apply different
styles based on its position within the outer dom or classes/attributes applied to ancestor elements.
... in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create
style and span elements, fill the span with the content of the custom element, and fill the
style element with some css rules: let
style = document.createelement('
style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(
style); shadowroot.appendchild(span);
style.textcontent = 'span:hover { t...
...ext-decoration: underline; }' + ':host-context(h1) { font-
style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host-context(h1) { font-
style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules
style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>.
:link - CSS: Cascading Style Sheets
/* selects any <a> that has not been visited yet */ a:link { color: red; }
styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:active, :hover, or :visited) that has at least equal specificity.
... to
style links appropriately, put the :link rule before all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active.
... html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get
styled)</a> css a:link { background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification.
pad - CSS: Cascading Style Sheets
the pad descriptor can be used with custom counter
style definitions when you need the marker representations to have a minimum length.
... formal definition related at-rule@counter-
styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...<percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-
style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-
style: pad-example; } result specifications specification status comment css counter
styles level 3the definition of 'pad' in that specification.
prefix - CSS: Cascading Style Sheets
the prefix descriptor of the @counter-
style rule specifies content that will be prepended to the marker representation.
... formal definition related at-rule@counter-
styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-
style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: 'chapter '; } .index { list-
style: chapters; padding-left: 15ch; } result specifications specification status comment css counter
styles level 3the definition of 'prefix' in that specification.
suffix - CSS: Cascading Style Sheets
the suffix descriptor of the@counter-
style rule specifies content that will be appended to the marker representation.
... formal definition related at-rule@counter-
styleinitial value".
...angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-
style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-
style: options; } result specifications specification status comment css counter
styles level 3the definition of 'suffix' in that specification.
jspage - Archive of obsolete content
:function(){return this.ownerdocument.window;},getdocument:function(){return this.ownerdocument; },getelementbyid:function(o,n){var m=this.ownerdocument.getelementbyid(o);if(!m){return null;}for(var l=m.parentnode;l!=this;l=l.parentnode){if(!l){return null; }}return document.id(m,n);},getselected:function(){return new elements($a(this.options).filter(function(l){return l.selected;}));},getcomputed
style:function(m){if(this.current
style){return this.current
style[m.camelcase()]; }var l=this.getdocument().defaultview.getcomputed
style(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("input, select, textarea",true).each(function(m){if(!m.name||m.disabled||m.type=="submit"||m.type=="reset"||m.type=="file"){return;}var n=(m.tagname.tolo...
...s.removeeventlistener(m,l,false);}else{this.detachevent("on"+m,l);}return this; },retrieve:function(m,l){var o=c(this.uid),n=o[m];if(l!=undefined&&n==undefined){n=o[m]=l;}return $pick(n);},store:function(m,l){var n=c(this.uid);n[m]=l; return this;},eliminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.
style={set:function(a){this.
style.csstext=a; },get:function(){return this.
style.csstext;},erase:function(){this.
style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,...
...1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.
styles={set:function(a){this.set
styles(a);}};element.properties.opacity={set:function(a,b){if(!b){if(a==0){if(this.
style.visibility!="hidden"){this.
style.visibility="hidden"; }}else{if(this.
style.visibility!="visible"){this.
style.visibility="visible";}}}if(!this.current
style||!this.current
style.haslayout){this.
style.zoom=1;}if(browser.engine.trident){this.
style.filter=(a==1)?"":"alpha(opacity="+a*100+"...
...And 10 more matches
Styling tables - Learn web development
prerequisites: html basics (study introduction to html), knowledge of html tables, and an idea of how css works (study css first steps.) objective: to learn how to effectively
style html tables.
...some rows removed for brevity <tr> <th scope="row">the stranglers</th> <td>1974</td> <td>17</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> the table is nicely marked up, easily
styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc.
... unfortunately, it doesn't look good when rendered on the screen (see it live at punk-bands-un
styled.html): with only the default browser styling it looks cramped, hard to read, and boring.
...And 10 more matches
Using the CSS Painting API - Web APIs
to programmatically create an image used by a css
stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
... */ paint(ctx) { ctx.fill
style = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect(0, 15, 200, 20); /* order: x, y, w, h */ } }); in this class example we have defined a single context option with the contextoptions() function: we returned a simple object stating alpha transparency is allowed.
...the 2d rendering context is a subset of the html5 canvas api; the version available to houdini (called the paintrenderingcontext2d) is a further subset containing most of the features available in the full canvas api with the exception of the canvasimagedata, canvasuserinterface, canvastext, and canvastextdrawing
styles apis.
...And 10 more matches
Basic animations - Web APIs
save the canvas state if you're changing any setting (such as
styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state.
...canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fill
style = 'rgba(0, 0, 0, 0.4)'; ctx.stroke
style = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 *...
... function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.stroke
style = 'black'; ctx.fill
style = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.
...And 10 more matches
panel - Archive of obsolete content
self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <
style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </
style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much mo...
...addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <
style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </
style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default
style is different for each operating system: this helps to ensure that th...
...e panel's
style is consistent with the dialogs displayed by firefox and other applications, but means you need to take care when applying your own
styles.
...And 9 more matches
JavaScript Daemons Management - Archive of obsolete content
ript type="text/javascript" src="daemon-methods.js"></script> <script type="text/javascript"> function perform (nindex, nlength, bbackw) { // http://tyleregeto.com/text-animation-in-javascript for (var oletter, nletter = 0; nletter < aletters.length; nletter++) { oletter = aletters[nletter]; var ndist = nmaxdist - nmaxdist * nindex / nlength; oletter.pos += 0.08; oletter.elem.
style.top = math.sin(oletter.pos) * ndist + "px"; oletter.elem.
style.left = math.cos(oletter.pos) * ndist * 5 + "px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("...
...span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.
style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <
style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </
style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callba...
...nclick="orecompose.reversals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33"
style="width: 40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.b...
...And 9 more matches
Modifying the Default Skin - Archive of obsolete content
« previousnext » as of firefox 69, you must set the toolkit.legacyuserprofilecustomizations.
stylesheets preference to true in about:config in order to load userchrome.css or usercontent.css files.
... skin basics a skin is a set of
style sheets, images and behaviors that are applied to a xul file.
...the xul for any skins is the same, however the
style sheets and images used are different.
...And 9 more matches
Table Reflow Internals - Archive of obsolete content
style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc.
...absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail size, various computed values, resolved
style structs possible request for preferred size and more.
...it gains, loses children)
style changed - a target changed stylisticly (recall, size is a
style property) content changed - a target's content changed (e.g.
...And 9 more matches
Browser Feature Detection - Archive of obsolete content
rue true document.open() true true true document.close() true true true document.write() true true true document.writeln() true true true document.getelementbyid() true true true document.getelementsbyname() true true true dom css 1 support for properties/methods in document.body.
style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 background true true true backgroundattachment true true true backgroundcolor true true true backgroundimage true true true backgroundrepeat true true true border true true true borderspacing true false true ...
... border
style true true true bordertop true true true borderright true true true borderbottom true true true borderleft true true true bordertopwidth true true true borderrightwidth true true true borderbottomwidth true true true borderleftwidth true true true borderwidth true true true clear true true true color true true true display true true true cssfloat true false true font true true true fontfamily true true true fontsize true true true font
style true true true fon...
...tvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true list
style true true true list
styleimage true true true list
styleposition true true true list
styletype true true true margin true true true margintop true true true marginright true true true marginbottom true true true marginleft true true true padding true true true paddingtop true true true paddingright true true true paddingbottom true true true pad...
...And 9 more matches
CSS performance optimization - Learn web development
previous overview: performance next painting an un
styled page, and then repainting it once
styles are parsed would be bad user experience.
...to optimize the cssom construction, remove unnecessary
styles, minify, compress and cache it, and split css not required at page load into additional files to reduce css render blocking.
... optimizing for render blocking css can scope
styles to particular conditions with media queries.
...And 9 more matches
Gecko info for Windows accessibility vendors
it supports html, xhtml, cascading
style sheets (css) and the document object model (dom).
...it covers content,
style and events.
...contains more desktop-
style widgets than html and follows a box layout model, rather than being text-flow based.
...And 9 more matches
CSS Typed Object Model API - Web APIs
this not only simplifies css manipulation, but also lessens the negative impact on performance as compared to htmlelement.
style.
... interfaces css
stylevalue the css
stylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api.
... css
stylevalue.parse(property, csstext) the parse() method of the css
stylevalue interface allows a cssnumericvalue to be constructed from a css string.
...And 9 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
3 00:02:25.000 --> 00:02:30.000 - ta en kopp styling webvtt cues you can
style webvtt cues by looking for elements which match the ::cue pseudo-element.
... within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are
styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip".
... <video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> within the webvtt file itself you can also define the
style directly in the webvtt file.
...And 9 more matches
Generating HTML - Web APIs
since there is no html namespace, and using the xhtml namespace would force the xsl to create an xml document that would not behave like a html document, the xsl:output in the xsl
stylesheet will make sure the resulting document will be handled as html.
... figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-
stylesheet type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... </myns:body> </myns:article> the xsl
stylesheet used will need to have two namespaces - one for the xslt elements and one for our own xml elements used in the xml document.
...And 9 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
the <tr> element should be
styled using css.
...any
styles applied to the <tr> element will affect the cells within the row unless overridden by
styles applied to those cells.
... let's apply a basic
style to the table to adjust the typeface being used, and add a background color to the header row.
...And 9 more matches
Client-side form validation - Learn web development
when an element is valid, the following things are true: the element matches the :valid css pseudo-class, which lets you apply a specific
style to valid elements.
... when an element is invalid, the following things are true: the element matches the :invalid css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific
style to invalid elements.
... <option>lemon</option> <option>orange</option> </datalist> </p> <p> <label for="t2">what's your e-mail address?</label> <input type="email" id="t2" name="email"> </p> <p> <label for="t3">leave a short message</label> <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>submit</button> </p> </form> and now some css to
style the html: form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width : 100%; border: 1px solid #333; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { box-shadow: none; } this renders as follows: see validation-related ...
...And 3 more matches
Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required
styles */ /* --------------- */ .select { position: relative; display : 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...
...er { 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 .2em .4em rgba(0,0,0,.4); 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; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required
styles */ /* --------------- */ .select { position: relative; display : 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.
...And 3 more matches
Adding vector graphics to the Web - Learn web development
svgs lend themselves well to styling/scripting, because each component of the image is an element that can be
styled via css or scripted via javascript.
... if you want to control the svg content with css, you must include inline css
styles in your svg code.
... (external
stylesheets invoked from the svg file take no effect.) you cannot re
style the image with css pseudoclasses (like :focus).
...And 3 more matches
Introducing asynchronous JavaScript - Learn web development
there are two main types of asynchronous code
style you'll come across in javascript code, old-
style callbacks and newer promise-
style code.
... promises promises are the new
style of async code that you'll see used in modern web apis.
... promises versus callbacks promises have some similarities to old-
style callbacks.
...And 3 more matches
Object building practice - Learn web development
getting started to begin with, make local copies of our index.html,
style.css, and main.js files.
... some very simple
styles, which mainly serve to
style and position the <h1>, and get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat).
... drawing the ball first add the following draw() method to the ball()'s prototype: ball.prototype.draw = function() { ctx.beginpath(); ctx.fill
style = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); } using this function, we can tell the ball to draw itself onto the screen, by calling a series of members of the 2d canvas context we defined earlier (ctx).
...And 3 more matches
Command line crash course - Learn web development
windows has traditionally had its own terminal-like program called cmd (“the command prompt”) for a long time, but this definitely doesn’t have parity with unix commands, and is equivalent to the old-
style windows dos prompt.
... prettier can: save the cognitive overhead of getting the
style consistent manually across all your code files; prettier can do this for you automatically.
... be installed on any operating system and even as a direct part of project tooling, ensuring that colleagues and friends who work on your code use the code
style you’re using.
...And 3 more matches
SVG Guidelines
most of time, cdata isn't needed, for example, the content in <
style> tags doesn't need to be wrapped in a cdata section as the content inside the tag is already correctly parsed as css.
... on the other hand, the uncolored ones are easier to spot, since they usually come with
styles making them invisible.
... shapes or paths) clip-rule attribute when the element is not a descendant of a <clippath> fill-rule attribute when the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline
styles and use class names or svg attributes examples here are some examples for excessive number precision: 5.000000e-02 → 0.05 (as seen here) -3.728928e-10 → 0 (as seen here) translate(0.000000, -1.000000) → translate(0, -1) (as seen here) as for descriptive ids: for gradients: svg_id1 → gradient1 (as seen here) use of class names avoid using a class if that class is only us...
...And 3 more matches
Mozilla Content Localized in Your Language
this section of the
style guide is for you to author.
...enjoy developing your
style guide!
... your language's
style guide abbreviations how are abbreviations expressed in your language?
...And 3 more matches
about:memory
��──24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ──
style-sheets │ │ │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.75%) ++ dom │ │ │ │ └──0.05 mb (00.02%) ── property-tables │ │ │ └───9.61 mb (05.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) �...
... within each window's measurements are sub-trees for javascript ("js-compartment(...)" and "js-zone(...)"), layout,
style-sheets, the dom, and other things.
...14%) ++ top(chrome://chatzilla/content/output-window.html, id=4298) │ │ └─────45,328 b (00.00%) ++ js-non-window/zones/zone(0x100496800)/compartment([system principal], file:///users/njn/library/application%20support/firefox/profiles/puna0zr8.new/extensions/%7b59c81df5-4b7a-477b-912d-4e0fdf64e5f2%7d/components/chatzilla-service.js) │ └───1,872,144 b (00.19%) ++ tree
styletab@piro.sakura.ne.jp/js-non-window/zones/zone(0x100496800) more things worth pointing out are as follows.
...And 3 more matches
Settings - Firefox Developer Tools
if common preferences is not included in the settings, web console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true inspector show browser
styles a setting to control whether
styles applied by the browser (user-agent
styles) should be displayed in the inspector's rules view.
... note that this setting is independent of the "browser
styles" checkbox in the inspector's computed view.
...
style editor show original sources when a css preprocessor supporting source maps is used, this enables the
style editor to display the original, preprocessor, sources rather than the generated css.
...And 3 more matches
CSSRuleList - Web APIs
description each cssrule can be accessed as rules.item(index), or simply rules[index], where rules is an object implementing the cssrulelist interface (such as css
stylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the
style sheet css.
... note that being indirect-modify (changeable but only having read-methods), rules are not added or removed from the list directly, but instead here, only via its parent
stylesheet.
... in fact, .insertrule() and .deleterule() are not even methods of cssrulelist, but only of css
stylesheet.
...And 3 more matches
Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); canvas.
style.background = "url("+op_8x8.data+")"; canvas.
style.border = "1px solid #000"; canvas.
style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); ...
...(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fill
style = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fill
style = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fill
style...
... = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fill
style = "#fff"; ctx.font = "14px arial"; ctx.filltext('existing content', 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawfrom.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fill
style = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fill
style = "#fff"; ctx.font = "14px arial"; ctx.filltext('new content', 5, height/2 - 5); ctx.restore(); dd.appendchild(canvastodrawon); dd.appendchild(canvastodrawfrom); dd.appendchild(canvastodrawresult); dl.appendchild(dd); } }; util...
...And 3 more matches
Transformations - Web APIs
the current values of the following attributes: stroke
style, fill
style, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fill
style = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fill
style = '#fff'; // make changes to the settings ctx.globalalpha = 0.5; ctx.fillrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore previous state ct...
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fill
style = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate().
...And 3 more matches
HTMLLinkElement - Web APIs
<div id="interfacediagram"
style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg
style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x...
...th="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllinkelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and link
style.
... htmllinkelement.disabled is a boolean which represents whether the link is disabled; currently only used with
style sheet links.
...And 3 more matches
Using the Web Storage API - Web APIs
testing whether your storage has been populated to start with, in main.js, we test whether the storage object has already been populated (i.e., the page was previously accessed): if(!localstorage.getitem('bgcolor')) { populatestorage(); } else { set
styles(); } the storage.getitem() method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populatestorage() to add the existing customization values to the storage.
... if there are already values there, we run set
styles() to update the page styling with the stored values.
...for example: function set
styles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.
style.backgroundcolor = '#' + currentcolor; pelem.
style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the firs...
...And 3 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
an old-
style add-on installer is packaged something like this: myaddon.xpi file (glorified zip) └─ chrome.manifest └─ install.rdf └─ chrome folder └─ myaddon folder └─ content.jar file └─ content folder (most files go here) └─ locale folder (your locale files go here) in versions of firefox prior to 4.0 (gecko 2.0), the xpi would be extracted into a folder in yo...
... step 7: manually handle global css
stylesheets any global css
style sheets which you are using will need to be registered upon load and unregistered when your extension is unloaded.
... components.utils.import("resource://gre/modules/services.jsm"); var
stylesheets = ["chrome://myextension/skin/my
stylesheet.css"]; function startup(data,reason) { ...
...And 2 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
the demo of this is seen at jsfiddle :: jsontodom example var json = ['html:div', {
style:'background-color:springgreen'}, ['html:form', {id:'myfirstform'}, ['html:input', {type:'text', value:'my field'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and sibl...
... * @param {boolean} allow
style if true, allow <
style> nodes and *
style attributes in the parsed fragment.
... */ function parsehtml(doc, html, allow
style, baseuri, isxml) { let parser_utils = "@mozilla.org/parserutils;1"; // user the newer nsiparserutils on versions that support it.
...And 2 more matches
The Box Model - Archive of obsolete content
unlike most
style attributes, the flex attribute is considered acceptable to use in xul code.
...the latter are recommended to keep
style code in the skin section of the chrome.
...the label is displayed with the expected link
style so that users can easily recognize it as a link.
...And 2 more matches
JXON - Archive of obsolete content
}, "input": [{ "@type": "hidden", "@name": "instid", "@value": 1234 }, { "@type": "hidden", "@name": "currency", "@value": "gbp" }, { "@type": "hidden", "@name": "amount", "@value": 0 }, { "@type": "hidden", "@name": "name", "@value": "captured" }], "table": { "tr": [{ "th": { "@
style": "text-align: right;", "keyvalue": "product:" }, "td": { "span": [{ "input": { "@type": "radio", "@name": "nome", "@id": "rel_tshirt", "@value": "tshirt" }, "label": { "@for": "rel_tshirt", "keyvalue": "t-shirt" }, "@c...
...uct" }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_pullover", "@value": "pullover" }, "label": { "@for": "rel_pullover", "keyvalue": "pullover" }, "@class": "product" }] } }, { "th": { "@
style": "text-align: right;", "keyvalue": "quantity:" }, "td": { "input": { "@type": "text", "@name": "myinput", "@onkeypress": "return numbersonly(this, event);", "@onpaste": "return false;" } } }] }, "p": { "input": { "@type": "submit", "@value": "purchase!" ...
...otocheckfield, okeyevent) { return okeyevent.charcode === 0 || /\d/.test(string.fromcharcode(okeyevent.charcode)); } </script> <input type="hidden" name="instid" value="1234" /> <input type="hidden" name="currency" value="gbp" /> <input type="hidden" name="amount" value="0" /> <input type="hidden" name="name" value="captured" /> <table> <tr> <th
style="text-align: right;">product:</th> <td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pu...
...And 2 more matches
Twitter - Archive of obsolete content
there are two
styles you can use to define this object.
... the examples below all use this first, simpler
style.
... the second
style will be familiar if you have used jquery.ajax() -- in fact the object is passed as-is (almost) to it.
...And 2 more matches
Table Layout Regression Tests - Archive of obsolete content
it is good
style to check for these unwanted regressions and fixing them before checkin rather than causing bugzilla avalanches.
...a typical beginning of a dump (*.rgd file) looks like: <frame va="15022440" type="viewport(-1)" state="270340" parent="0"> <view va="47171904"> </view> <
stylecontext va="15022232"> <font serif 240 240 0 /> <color data="-16777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null ...
...textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </
stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
...And 2 more matches
XML in Mozilla - Archive of obsolete content
supported core xml w3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with css, manipulating xml documents with scripts via dom, associating
stylesheets with xml documents, and namespaces in xml.
...likewise, the cascading
style sheets (css, w3c recommendations and drafts)
style language can be used to
style xml documents.
...for example, dom related questions should probably be discussed in the mozilla.dev.tech.dom newsgroup, while
style issues should be discussed on mozilla.dev.tech.css and so on.
...And 2 more matches
treecol.type - Archive of obsolete content
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.
...And 2 more matches
Building Trees - Archive of obsolete content
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).
... it can be used to define extra properties for reference later in a
stylesheet.
...And 2 more matches
Complete - Archive of obsolete content
in this extension, the only things that depend on the theme are the icon images on the buttons and the css
style rules.
...how a button gets themed when you look at button 1 in seamonkey, you see an image or
style that depends on your theme.
... when the xul file, allcustom.xul is loaded, the
stylesheet declaration near the top loads a
stylesheet from chrome://allcustom/skin/.
...And 2 more matches
Adding Buttons - Archive of obsolete content
you'll want to use this if you want to refer to the button in a
style sheet or script.
... class the
style class of the button.
...it is used to indicate the
style that the button appears in.
...And 2 more matches
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer
style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer
style="width: 10px;"/> <textbox id="find-text" flex="1"
style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog.
...<spacer
style="height: 10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer
style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer
style="width: 10...
...px;"/> <textbox id="find-text" flex="1"
style="min-width: 15em;"/> </hbox> <spacer
style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog.
...And 2 more matches
More Button Features - Archive of obsolete content
example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-
style-image
style property on the button.
...example 2 : source view <button id="find-button" label="find"
style="list-
style-image: url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button.
... the
style attribute functions similar to its html counterpart.
...And 2 more matches
listcell - Archive of obsolete content
attributes crop, disabled, image, label, type properties disabled
style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes listcell-iconic use this class to have an image appear on the listcell.
...And 2 more matches
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2"
style="background-color: grey;"> <resizer dir="topleft" height="2"
style="cursor: nw-resize;"/> <resizer dir="left" flex="1"
style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2"
style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2"
style="background-color: grey; cursor: n-resize;"/> <browser flex="1" id="browser" type="content-primary"/> <r...
...esizer dir="bottom" height="2"
style="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2"
style="background-color: grey; overflow: hidden;"> <resizer dir="topright" 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" w...
...idth="16" height="16"/> <resizer dir="bottomleft"
style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer dir="bottomright"
style="background: black; -moz-appearance: none;" element="button" right="0" bottom="0" width="16" height="16"/> </stack> attributes dir type: one of the values below the direction that the window is resized.
...And 2 more matches
separator - Archive of obsolete content
attributes orient
style classes groove, groove-thin, thin examples <separator class="groove-thin"/> attributes orient type: one of the values below used to specify whether the separator is a horizontal or vertical separator.
...licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
...And 2 more matches
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
...you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in
style sheets.
... this attribute is used to save and restore the state of a window (together with the persist attribute) and for css
styles (e.g.
...And 2 more matches
XForms Styling - Archive of obsolete content
switches can be
styled as tabs.
... triggers use appearance="minimal" to be able to
style buttons portability the mozilla xforms extension is one of the few xforms processors which allow for styling of the xforms elements directly, using mostly standard css.
... processors such as chiba create "old-
style" html forms from xforms documents, and must be
styled accordingly.
...And 2 more matches
Move the ball - Game development
now, let's draw the ball — add the following inside your draw() function: ctx.beginpath(); ctx.arc(50, 50, 10, 0, math.pi*2); ctx.fill
style = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame.
... first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fill
style = "#0095dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to add a small value to x and y after every frame has been drawn to make it appear that the ball is moving.
...add the following two new lines indicated below to your draw() function: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fill
style = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code again and try it in your browser.
...And 2 more matches
Gecko FAQ - Gecko Redirect 1
basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading
style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
... scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release)
style sheets css 1 - full support, except for: the application of
styles to html column elements the ability to turn off author
styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is expected and has already been built into gecko, including support for css2 positioning, but no commitment has been made to achieve...
...on of the dom1 spec for xml implementations, entities will be automatically expanded inline and therefore not available through dom1; our implementation extrapolates this provision to apply to entityreferences as well for more information, see the dom in mozilla level 1 html dom 2 - most of it has already been implemented in gecko, including support for dom 2 events, the dom 2
style, and the dom2 core.
...And 2 more matches
Debugging CSS - Learn web development
devtools can save you a lot of time editing a
stylesheet and reloading the page.
...in a similar fashion, you could change the width or
style of the border.
...in the css we have applied: em { color: hotpink; font-weight: bold; } above that in the
stylesheet however is a rule with a .special selector: .special { color: orange; } as you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies.
...And 2 more matches
CSS selectors - Learn web development
previous overview: building blocks next in css, selectors are used to target the html elements on our web pages that we want to
style.
... there are a wide variety of css selectors available, allowing for fine-grained precision when selecting elements to
style.
... in the following example, the invalid class selector rule will be ignored, whereas the h1 would still be
styled.
...And 2 more matches
The box model - Learn web development
its size and
style can be controlled using border and related properties.
... for styling borders, there are a large number of properties — there are four borders, and each border has a
style, width and color that we might want to manipulate.
... you can set the width,
style, or color of all four borders at once using the border property.
...And 2 more matches
HTML forms in legacy browsers - Learn web development
you can declare appearance: none; to remove the browser
styles, but that generally defeats the purpose: as you lose all styling, removing the default look and feel your visitors are used to.
...the best approach remains to not
style html form widgets at all.
... but you can still apply
styles to all the surrounding items.
...And 2 more matches
Advanced text formatting - Learn web development
this is usually a feeling, thought, or piece of additional background information.</dd> </dl> the browser default
styles will display description lists with the descriptions indented somewhat from the terms.
... playable code <h2>live output</h2> <div class="output"
style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input"
style="min-height: 100px; width: 95%"> bacon the glue that binds the world together.
...></code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote> <p>the quote element — <code><q></code> — is <q cite="/docs/web/html/element/q">intended for short quotations that don't require paragraph breaks.</q> -- <a href="/docs/web/html/element/q"> <cite>mdn q page</cite></a>.</p> citations are
styled in italic font by default.
...And 2 more matches
Video and Audio APIs - Learn web development
/button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped in a <div> element, so it can all be
styled as one unit if needed.
... let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-
style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; position: relative; content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; } first of all, at the top of the css we use a @font-face block to import a custom web font.
... icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to
style them — like color and text-shadow.
...And 2 more matches
React resources - Learn web development
component-level
styles although this tutorial doesn't use this approach, many react applications define their
styles on a per-component basis, rather than in a single, monolithic
stylesheet.
...for this app, we could have for example written a dedicated form.css file to house the
styles of those respective components, then imported the
styles into their respective modules like this: import form from './form'; import './form.css' this approach makes it easy to identify and manage the css that belongs to a specific component.
... however, it also fragments your
stylesheet across your codebase, and this fragmentation might not be worthwhile.
...And 2 more matches
Getting started with Vue - Learn web development
app.vue open your app.vue file — you’ll see that it has three parts: <template>, <script>, and <
style>, which contain the component’s template, scripting, and styling information.
... <
style> is where you write your css for the component.
... if you add a scoped attribute — <
style scoped> — vue will scope the
styles to the contents of your sfc.
...And 2 more matches
Commenting IDL for better documentation
comment format doxygen supports several comment formats; for
style and consistency reasons, we use the following: /** * */ note the two asterisks ("**") on the first line of the comment.
...use doxygen
style comments only for information that is directly useful to someone using or implementing the interface.
... @note description used to include a note
styled paragraph.
...And 2 more matches
Getting from Content to Layout
the frame constructor takes these notifications and does the following: dispatches "re
style events" which trigger the reprocessing of relevant css selectors and any restyling that needs to occur.
... restyling the re
styletracker maintains a list of re
styles to process.
... elements that need to be re
styled are marked with flags (e.g element_has_pending_re
style) and are stored in the mpendingre
styles hashtable.
...And 2 more matches
Index - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a css
stylesheet a different value is set for the request than when fetching an image, video or a script.
... 45 csp: require-sri-for csp, directive, http, reference, security the http content-security-policy require-sri-for directive instructs the client to require the use of subresource integrity for scripts or
styles on the page.
...this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt
stylesheets which can trigger script execution.
...And 2 more matches
<mtable> - MathML
note: the <mtable> element resets the display
style attribute to false.
... if you want to use this element as an inline-block, you might want to set <mtable display
style="true">...</mtable>.
... alignmentscope unimplemented class, id,
style provided for use with
stylesheets.
...And 2 more matches
CSS and JavaScript animation performance - Web Performance
they each have their own user scenarios: css transitions provide an easy way to make animations occur between the current
style and an end css state, e.g., a resting button state and a hover state.
... even if an element is in the middle of a transition, the new transition starts from the current
style immediately instead of jumping to the end css state.
...css animations consist of two components: a
style describing the css animation, and a set of key frames that indicate the start and end states of the animation's
style, as well as possible intermediate points.
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
for a start, let's have a look at what happens when we include the <video> and <img> elements inside our first two columns, naked and un
styled.
...this is created using the css rules included at the top of the
stylesheet, before any media queries are encountered.
... display: flex; } nav button { font-size: 6.8vw; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; border-left: 1px solid rgba(100,100,100,0.4); } nav button:first-child { border-left: 0; } } in this last set of rules, we change the display value of the <nav> to flex to make it show (it was set to none in the default css at the top of the
stylesheet, as it wasn't needed for the other views.) we then use absolute positioning and z-index to make it take up no space in the document flow, and sit on top of the x-cards (this is why we gave the x-cards that top-margin earlier).
...And 2 more matches
SVG In HTML Introduction - SVG: Scalable Vector Graphics
source here is the source to the example: <html> <head> <title>xtech svg demo</title> <
style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </
style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body"
style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <...
...legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100"
style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30"
style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a
style rule changes the gradient end-stop color to red.
...And 2 more matches
dev/panel - Archive of obsolete content
xport the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="
stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
...send messages to the add-on // my-panel.js window.addeventlistener("message", function(event) { // retrieve the port var toaddon = event.ports[0]; toaddon.start(); toaddon.postmessage("message from the panel document"); console.log(toaddon); }); communicating with the debugger server the firefox developer tools use a client/server protocol: a tool, such as a javascript debugger or
style editor, is the client, and the program being debugged, such as firefox, is the server.
... to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="
stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee ...
...for example, the root actor object has a method listtabs and the
stylesheet actor object has a method get
stylesheets.
Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "
style-tab", label: "
style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.
style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
... for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "
style-tab", label: "
style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other.
... the content script now needs to look like this: // "self" is a global object in content scripts // listen for a "drawborder" self.port.on("drawborder", function(color) { document.body.
style.border = "5px solid " + color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "
style-tab", label: "
style tab", icon: "./icon-16.png", onclick: function() { var worker = tabs.activeta...
... to modify the
style of a page, you have to use javascript, as in the example above.
Label and description - Archive of obsolete content
the default
style for these xul elements includes white-space: wrap;.
... <description
style="white-space: pre-wrap;">i am your father's brother's nephew's cousin's former roommate.
... <description
style="white-space: pre;">i am your father's brother's nephew's cousin's former roommate.
... 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 parent elements resize.
Appendix F: Monitoring DOM changes - Archive of obsolete content
*/ if ('mozcsskeyframerule' 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) .join('\n'); doc.addeventlistener('animationstart', listener, false); function listener(event) { if (event.animationname == event) callback.call(this, event); }
style.textcontent = ' ' + preamble + selector + '{' + properties + '}'; (doc.head || doc.documentelement).appendchild(
style); // this will only work in chrome privileged code.
...
style = components.utils.getweakreference(
style); return function unwatch() { if (
style.get()) {
style.get().ownerdocument.removeeventlistener('animationstart', listener, false);
style.get().parentnode.removechild(
style.get()); } }; } watchnodes.namespace = 'mozcsskeyframerule' in window ?
...while it is no longer possible for web sites to use xbl directly, chrome code can still attach xbl bindings to web content from
stylesheets loaded via the
stylesheet service.
Custom XUL Elements with XBL - Archive of obsolete content
this css file is located in the content because it's not something we would normally want to be replaced by a skin, and it's not really defining
style; it defines content behavior instead.
... if you use bindings on toolbar elements, remember to include the css file in the customize dialog, using the
style directive in the chrome.manifest file.
...if you look at file bindingdialog.xul, you'll see that the css
stylesheet is included, which means that the xshelloperson tag can now be used just like any xul tag.
...also unlike scripts, you can include
stylesheets using the
stylesheet xbl element.
The Essentials of an Extension - Archive of obsolete content
we namespace all ids and
style classes in overlay elements because they will be mixed with other elements in the main browser window.
...we use camel casing for file names, and all lower case with dashes for element ids and css
style class names, but you're free to use your own system.
... we use javadoc
style comments on all namespaces, objects and object members.
...there isn't much styling you can do to a minimal menu and a very simple alert message, so the hello world extension only includes an empty css file and the compulsory global skin file: <?xml-
stylesheet type="text/css" href="chrome://global/skin/" ?> <?xml-
stylesheet type="text/css" href="chrome://xulschoolhello/skin/browseroverlay.css" ?> the global skin css file holds the default
styles for all xul elements and windows.
Index of archived content - Archive of obsolete content
functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-target preferences/service remote/child remote/parent
stylesheet/
style stylesheet/utils system/child_process system/environment system/events system/runtime system/unload system/xul-app tabs/utils test/assert test/harness test/httpd test/runner test/utils ui/butt...
...ension development environment signing an xpi signing an extension supporting search suggestions in search plugins tabbed browser techniques promises updating addons broken by private browsing changes using dependent libraries in extension components using the
stylesheet service bookmarks.export() bookmarks.import() adding preferences to an extension an interview with douglas bowman of wired news archived mozilla and build documentation activex control for hosting netscape plug-ins in ie archived spidermonkey docs ...
... in a java application using javaxpcom error console exception logging in javascript existing content extension frequently asked questions external cvs snapshots in mozilla-central fast graphics performance with html firefox block and line layout cheat sheet content states and the
style system disabling interruptible reflow document loading - from load start to finding a handler documentation for bidi mozilla downloading nightly or trunk builds jss build instructions for osx 10.6 layout faq layout system overview multiple firefox profiles repackaging firefox st...
...ds in your web pages developing cross-browser and cross-platform pages references summary of changes using the w3c dom using workers in extensions web standards choosing standards compliance over proprietary practices community correctly using titles with external
stylesheets describing microformats in javascript displaying a graphic with audio samples fixing incorrectly sized list item markers fixing table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty w...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
so the following piece of html defines an iframe element which is not visible to the user: <div
style="visibility:hidden; position:absolute; top:-1000px; left:-1000px"> <iframe id="bridgeframe" src=""></iframe> </div> the javascript code located in the data loader component will be interacting with this iframe element, requesting data from the server.
...// ie fix if(document.all) tagname="nde:"+tagname; paraa=article.getelementsbytagname(tagname).item(0).firstchild.nodevalue; linkk=article.getattribute("url"); strvalue="<div class='nde-blurb'><h3><a href='"+linkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>"; document.getelementbyid("container").innerhtml+=strvalue; } } if(previousele) { previousele.
style.backgroundcolor="white"; } ele.
style.backgroundcolor="#ddeeff"; previousele=ele; } var previousele=null; </script> <
style> .tab { position:relative;top:1px; border: 1px solid #dddddd; color:white; background-color:white; padding-left: 5px; border-bottom:white;padding-right: 5px; padding-top:3px; text-decoration:none;} .tab:hover { background-color:#ddeeff; } </
style> </head> <body ...
...ascript"> //// /// object detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span
style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xml',thi...
...s);return false;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- ***** this represents the container ***** --> <div
style="margin-left:0px;border:1px solid #dddddd;" > <div
style="padding:10px;" id="container"> </div> </div> </body> </html> original document information author(s): marcio galli, netscape communications; roger soares, intelinet.com.br; ian oeschger, netscape communications last updated date: published 16 may 2003 copyright information: copyright © 2001-2003 netscape.
Making it into a static overlay - Archive of obsolete content
static overlays are added to a xul file via a reference at the top of the file (much like
stylesheets and javascript scripts).
...to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-
stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-s...
...its next line is the
stylesheet reference we previously added to navigator.xul.
... <?xml-
stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-
stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <?xul-overlay href="chrome://navigator/content/navigatoroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/navextraoverlay.xul"?> <?xul-overlay href="chrome://navigator/content/linktoolbaroverlay.xul"?> <?xul-overlay href="chrome://na...
Creating regular expressions for a microsummary generator - Archive of obsolete content
but ebay uses a different
style of url in some cases (f.e.
...here's a url for the same item in that different
style: http://cgi.ebay.com/mozilla-firefox-logo-1-inch-pin-badge-button-browser_w0qqitemz280018439106qqihz018qqcategoryz2036qqcmdzviewitem to accommodate these urls, we can create a second regular expression that matches them.
... as before, we should distinguish the components of the url which are unique to the item from those which are common to all auction item urls of this
style.
... here are several other urls of this
style: http://cgi.ebay.com/firefox-2002-dvd_w0qqitemz130017517168qqihz003qqcategoryz617qqcmdzviewitem http://cgi.ebay.com/ahm-ho-scale-firefox-tank-car_w0qqitemz290019763032qqihz019qqcategoryz19130qqcmdzviewitem http://cgi.ebay.com/inuyasha-anime-pin-of-kirara-kilala-firefox_w0qqitemz170019463424qqihz007qqcategoryz39557qqcmdzviewitem based on these examples, it looks like the urls all start with "http://cgi.ebay.com/", they all contain the string "qqitemz" followed by the item number, and they all end with the string "qqcmdzviewitem".
Block and Line Layout Cheat Sheet - Archive of obsolete content
nsinlineframe mflags ns_inline_frame_contains_percent_aware_child this flag is set if the inline frame has any children that have a percentage value set (via the
style context) for the width or height of the content area, padding, border, or margin.
... mcomputedwidth mcomputedheight mcomputedmargin mcomputedborderpadding mcomputedpadding mcomputedoffsets mcomputedminwidth mcomputedmaxwidth mcomputedminheight mcomputedmaxheight given the current container frame and the
style applied to the child, these values are the resolved values for the child frame's box.
... brs_nowrap this flag is set in the nsblockreflowstate constructor when the "white-space"
style of the block frame is pre or nowrap.
... ll_understandsnwhitespace ll_textstartswithnbsp ll_firstletter
styleok ll_istopofpage ll_updatedband ll_impactedbyfloaters ll_lastfloaterwasletterframe ll_canplacefloater ll_knowstrictmode ll_instrictmode ll_lineendsinbr perframedata (why isn't this just stored in the frame?) mflags pfd_relativepos pfd_istextframe pfd_isnonemptytextframe pfd_isnonwhitespacetextframe pfd_isletterframe pfd_issticky pfd_isbullet perspandata in ...
Microsummary XML grammar reference - Archive of obsolete content
the <template> element the <template> element contains the xslt
stylesheet which transforms web pages into their microsummaries.
...child elements: <
stylesheet> or <transform> (required) the xslt
stylesheet which performs the transformation.
... per xslt, you may specify the
stylesheet child element using either the <
stylesheet> or the <transform> tag, which are interchangeable.
... note: although the <template> element must be in the microsummaries namespace (http://www.mozilla.org/microsummaries/0.1), its <
stylesheet>/<transform> child element must be in the xslt namespace (http://www.w3.org/1999/xsl/transform).
Monitoring downloads - Archive of obsolete content
atement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("
style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = docu...
...ment.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("
style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var
style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete";
style = "color:green"; break; case 2: statusstr = "failed"; ...
...
style = "color:red"; break; case 3: statusstr = "canceled";
style = "color:purple"; break; case 4: statusstr = "paused";
style = "color:blue"; break; case 5: statusstr = "queued";
style = "color:teal"; break; case 6: statusstr = "blocked";
style = "color:white background-color:red"; break; case 7: statusstr = "scanning";
style = "color:silver"; break; default: statusstr = "unknown"; break; } cell.setattribute("label", statusstr); cell.setattribute("
style",
style); row.appendchild(cell); loglist.appendc...
... to right-justify the numeric columns, we set the appropriate cells'
style attribute to text-align:right.
Styling - Archive of obsolete content
the web application bundle is allowed to hold a css file named webapp.css (called the webapp
style).
... this file will be loaded into the web application content
stylesheet and can override the web application's native
styles.
...it is also possible to create platform-specific
styles.
...to use platform-specific
styles, create a folder in the bundle archive for each supported os and place a webapp.css file in the folder.
Adding Labels and Images - Archive of obsolete content
the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a
style sheet to set the image url.
... a later section will describe how to use
style sheets, but an example will be shown here for completeness.
... you can use the list-
style-image css property to set the url for the image.
... here are some examples: xul: <image id="image1"/> <image id="search"/>
style sheet: #image1 { list-
style-image: url("chrome://findfile/skin/banner.jpg"); } #search { list-
style-image: url("http://example.com/images/search.png"); } these images come from within the chrome directory, in the skin for the findfile package.
Adding Methods to XBL-defined Elements - Archive of obsolete content
button label="hide" oncommand="document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("
style", "visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("
style", "visibility: collapse"); } </body> </method> </implementation> </binding> two buttons added to the xul have oncommand handlers which are used to change the visibility of the label.
...the visibility is changed by modifying the
style on the element.
...bel xbl:inherits="value"/> <xul:button label="show" oncommand="document.getbindingparent(this).showtitle(true);"/> <xul:button label="hide" oncommand="document.getbindingparent(this).showtitle(false);"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("
style","visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("
style","visibility: collapse"); } </body> </method> </implementation> </binding> the oncommand handlers here first get a reference to their parent bound element.
...the second point is when a binding is attached by changing the -moz-binding
style property of an element.
description - Archive of obsolete content
it may contain arbitrary markup, which can be
styled as needed.
... attributes crop, disabled, tabindex value properties accessibletype, crop, disabled, tabindex, value
style classes header, indent, monospace, plain, small-margin examples this is a long section of text that will word wrap when displayed <description> this is a long section of text that will word wrap when displayed.
... </description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc"
style="width: 300px"></description> document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes header a class used for headings.
image - Archive of obsolete content
attributes onerror, onload, src, validate properties accessibletype, src
style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image.
...this applies whether the image is applied via the src attribute or the list-
style-image
style property.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes alert-icon class that adds an alert icon.
scrollbox - Archive of obsolete content
if you just want scrollbars to appear, add
style='overflow: auto;'.
... <vbox flex="1"
style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or even desir...
...licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
<statusbarpanel> - Archive of obsolete content
attributes crop, image, label properties image, label
style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its giv...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes the following classes may be used to
style the element.
... these classes should be used instead of changing the
style of the element directly since they will fit more naturally with the user's selected theme.
titlebar - Archive of obsolete content
examples this xul file will create a hud-
style window that can be moved with the mouse.
... <?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200"
style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()"
style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, co...
...ntainer, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars prior to firefox 3.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(...
nsIContentPolicy - Archive of obsolete content
type_
stylesheet 4 indicates a
stylesheet (for example, <
style> elements).
... type_xslt 18 indicates a
style sheet transformation.
... other 0 obsolete since gecko 1.8 script 1 obsolete since gecko 1.8 image 2 obsolete since gecko 1.8
stylesheet 3 obsolete since gecko 1.8 object 4 obsolete since gecko 1.8 subdocument 5 obsolete since gecko 1.8 control_tag 6 obsolete since gecko 1.8 raw_url 7 obsolete since gecko 1.8 document 8 obsolete since gecko 1.8 methods shouldload() called to let your content policy implementation decide whether or not th...
... query any dom properties that depend on
style (e.g., computed
style).
Building a Theme - Archive of obsolete content
this gives us a base set of
styles to work with.
...these xul elements are
styled using css.
...this is why we copied the default
styles in the setup step.
...to change its
style within our theme, we need to write a selector rule to select this class.
-moz-window-shadow - Archive of obsolete content
values default the window will have a shadow 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.
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline
style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img
style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... <div id="filterfrom"
style="position: absolute; width: 200px; height: 250px; background-color: white; filter: revealtrans()"> <img id="imagefrom"
style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto"
style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> ...
... filterfrom.filters.item(0).transition=12; imagefrom.
style.visibility = "hidden"; filterto.
style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> gradient progid:dximagetransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <gradienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <gradienttype> = 'gradienttype=' <integer> <startcolor> = 'startcolor='...
Graceful asynchronous programming with Promises - Learn web development
the trouble with callbacks to fully understand why promises are a good thing, it helps to think back to old-
style callbacks and to appreciate why they are problematic.
... with old-
style callbacks, a pseudo-code representation of the above functionality might look something like this: choosetoppings(function(toppings) { placeorder(toppings, function(order) { collectorder(order, function(pizza) { eatpizza(pizza); }, failurecallback); }, failurecallback); }, failurecallback); this is messy and hard to read (often referred to as "callback hell"), requires the fai...
...this takes the indexeddb api, which is an old-
style callback-based api for storing and retrieving data on the client-side, and allows you to use it with promises.
...they make it easier to express and reason about sequences of asynchronous operations without deeply nested callbacks, and they support a
style of error handling that is similar to the synchronous try...catch statement.
Client-side storage - Learn web development
we hope you have fun while you are here.'; // hide the 'remember' part of the form and show the 'forget' part forgetdiv.
style.display = 'block'; rememberdiv.
style.display = 'none'; } else { // if not, display generic greeting h1.textcontent = 'welcome to our website '; personalgreeting.textcontent = 'welcome to our website.
... we hope you have fun while you are here.'; // hide the 'forget' part of the form and show the 'remember' part forgetdiv.
style.display = 'none'; rememberdiv.
style.display = 'block'; } } last but not least, we need to run the namedisplaycheck() function every time the page is loaded.
... getting started first of all, make local copies of our index.html,
style.css, and index-start.js files into a new directory on your local machine.
...eturn cache.addall([ '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/', '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html', '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js', '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/
style.css' ]); }) ); }); that's it for now, installation done.
Third-party APIs - Learn web development
this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="
stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library.
...to do this, find the following line: layers: l.mapquest.tilelayer('map') try changing 'map' to 'hybrid' to show a hybrid-
style map.
... function displayresults(json) { while (section.firstchild) { section.removechild(section.firstchild); } const articles = json.response.docs; if(articles.length === 10) { nav.
style.display = 'block'; } else { nav.
style.display = 'none'; } if(articles.length === 0) { const para = document.createelement('p'); para.textcontent = 'no results returned.' section.appendchild(para); } else { for(var i = 0; i < articles.length; i++) { const article = document.createelement('article'); const heading = document.createelement('h2'); const ...
...this was done to make it easy to
style each one.
Web performance resources - Learn web development
as we learned in the critical rendering path document, linking css with a tradional link tag with rel="
stylesheet" is synchronous and blocks rendering.
... <link rel="
stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="
stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of un
styled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.
... these
styles will improve perceived performance as the css does not require a file request.
... <
style type="text/css"> // insert your css here </
style> javascript avoid javascript blocking by using the async or defer attributes, or link javascript assets after the page's dom elements.
Properly configuring server MIME types - Learn web development
examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading
style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime types are available in iana | mime media types.
...for security reasons, gecko 2.0 will no longer do this for
stylesheets loaded from a different origin than the requesting document.
... if your
stylesheet comes from a different origin than the document, you must serve it with the correct mime type (text/css).
... gecko 1.9.1.11 (firefox 3.5.11) and gecko 1.9.2.5 (firefox 3.6.5) also implement this security fix, but to improve compatibility, there was a temporary heuristic that allows the load if the first line in the
style sheet appears to be a well-formed css construct; the heuristic has been removed in firefox 4, and you have to properly set the text/css mime types to have your css pages recognized.
Getting started with Ember - Learn web development
components are individual bundles of behavior,
style, and markup — much like what other frontend frameworks provide, such as react, vue, and angular.
... installing the shared assets for todomvc projects installing shared assets, as we're about to do, isn't normally a required step for new projects, but it allows us to use existing shared css so we don't need to try to guess at what css is needed to create the todomvc
styles.
... finally, find app.css, located at app/
styles/app.css, and paste in the following: :focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc
styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the
styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.
...while inside the todomvc directory: ember server this should give you an output similar to the following: build successful (190ms) – serving on http://localhost:4200/ slowest nodes (totaltime >= 5%) | total (avg) -----------------------------------------+----------- broccolimergetrees (17) | 35ms (2 ms) package /assets/vendor.js (1) | 13ms concat: vendor
styles/assets/vend...
Introduction to automated testing - Learn web development
next, you'll need some sample html, css and javascript content to test your system on — make copies of our sample index.html, main.js, and
style.css files in a subfolder with the name src inside your project folder.
... autoprefixer and css-lint install using the following lines: npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-csslint add the following dependencies to gulpfile.js: const autoprefixer = require('gulp-autoprefixer'); const csslint = require('gulp-csslint'); add the following test to the bottom of gulpfile.js: function css(cb) { return gulp.src('src/
style.css') .pipe(csslint()) .pipe(csslint.formatter('compact')) .pipe(autoprefixer({ browsers: ['last 5 versions'], cascade: false })) .pipe(gulp.dest('build')); cb(); } here we grab our
style.css file, run csslint on it (which outputs a list of any errors in your css to the terminal), then runs it through autoprefixer to add any...
...cb) { return gulp.src('src/main.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(babel({ presets: ['@babel/env'] })) .pipe(gulp.dest('build')); cb(); } here we grab our main.js file, run jshint on it and output the results to the terminal using jshint.reporter; we then pass the file to babel, which converts it to old
style syntax and outputs the result into the build directory.
... our original code included a fat arrow function, which babel has modified into an old
style function.
Accessibility information for UI designers and developers
see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by keyboard (or other specialised input methods), rely on focus
styles to see where they are on the page.
... see also: understanding sc 2.4.7: focus visible be ready for resizing and custom
styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs.
...spacing: set line height (leading) to at least 1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom
stylesheet, they should not break the interface.
... links can be
styled as buttons and vice versa, but designers are advised to avoid this where possible.
Displaying Places information using views
every xul document containing a built-in view must import the
stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-
stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this
stylesheet that binds elements with the special type attribute to one of the views.
... if you would like your tree view to be
styled in the same manner that firefox
styles its uses of the view, you should include the following
stylesheet.
... note that this
stylesheet is different from the one given above, which must be included if you use a built-in places view.
... the following
stylesheet is optional and only applies
styles and icons to the built-in tree view: <?xml-
stylesheet href="chrome://browser/skin/places/places.css" ?> for examples of instantiating a tree view from javascript rather than xul, see programmatic generation of the built-in tree view.
Index
28 mozilla l10n
style guide localization cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages.
...to translate it, you can follow one of two approaches: 29 mozilla content localized in your language localization, mdn, mozilla, reference,
style guide no summary!
... 30 mozilla content localized in your language localization this section of the
style guide is for you to author.
...enjoy developing your
style guide!
Basics
</p> <div
style="text-align:center"> fill the gaps in this matrix with resizable input fields.
... </div> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <div
style="text-align:center"> left size: <a class="control" href="javascript:incrementinput('input21', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input21',-1);" title="decrease input">-</a> right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" title=...
... mathml button html content <div
style="text-align: center"> <button
style="white-space: normal;"> <span
style="color: brown;"> for example, <b>click</b> this mathml continued fraction<br/> inside this html button<br /> </span> <math> <mrow> <mfrac> <mi>π</mi> <mn>4</mn> </mfrac> <mo>=</mo> <mfrac numalign="left"> <m
style scriptlevel="0"> <mn>1</mn> </m
style> <m
style scriptlevel="0"> <mrow> <mn>2</mn> <mo...
...>+</mo> <mfrac numalign="left"> <m
style scriptlevel="0"> <msup><mn>1</mn><mn>2</mn></msup> </m
style> <m
style scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac numalign="left"> <m
style scriptlevel="0"> <msup><mn>3</mn><mn>2</mn></msup> </m
style> <m
style scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac numalign="left"> <m
style scriptlevel="0"> <msup><mn>5</mn><mn>2</mn></msup> </m
style> <m
style scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac numalign="left"> <m
style scriptlevel="0"> <msup><mn>7</mn><mn>2</mn></msup> </m
style> <m
style scriptlevel="0"> <mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> </m
style> </mfrac> </mrow> </m
style> </mfrac> </mrow> </m
style> </mfrac> </mrow> </m
style> </mfrac> </mrow> </m
style> </mfrac> </mrow> </math> </button> </div> for more information ...
Extras
for example with the
style rule: <code
style="white-space: nowrap;">*[title] { color: blue; }</code> <math class="cue" display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</...
...><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%"
style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%"
style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur...
... l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%"
style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%"
style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ<...
.../mo> <mi>θ</mi> </mrow> </math> <div
style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%"
style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%"
style="stop-color:rgb(0,255,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%"
style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="100%"
style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%"
style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%"
style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgra...
NSPR Contributor Guide
coding
style nspr does not have a documented coding
style guide.
...use a coding
style consistent with the source file you are changing.
...use the
style of other nspr documentation.
...the new test cases should be implemented in the
style of other nspr test cases.
nsIFile
example, this could return "/home/user/foo.txt" or "c:\images\my.jpeg" permissions unsigned long the value of this attribute is a unix-
style file permission mask for this nsifile.
... permissionsoflink unsigned long the value of this attribute is a unix-
style file permission mask for this nsifile.
... permissions a unix-
style file permissions value.
... permissions a unix-
style file permissions value.
nsIHTMLEditor
constants constant value description eleft 0 ecenter 1 eright 2 ejustify 3 methods adddefaultproperty() registers a default
style property with the editor.
... boolean nodeisblock( in nsidomnode node ); parameters node return value pastenoformatting() paste the text in the os clipboard at the cursor position, replacing the selected text (if any), but strip out any html
styles and formatting.
... removealldefaultproperties() unregisters all default
style properties with the editor.
... removedefaultproperty() unregisters a default
style property with the editor.
nsISelectionPrivate
void settextrange
style(in nsidomrange range, in consttextrange
styleref textrange
style); native code only!
... void setpresshell( in nsipresshell apresshell ); parameters apresshell native code only!settextrange
style set the painting
style for the range.
...the textrange
style will be used by text frame when it is painting the selection.
... void settextrange
style( in nsidomrange range, in consttextrange
styleref textrange
style ); parameters range textrange
style startbatchchanges() will stop user interface updates while multiple selection methods are called.
Reference Manual
casting never use old-
style c/c++ casts on an nscomptr.
... an old-
style cast is guaranteed to compile, even if it can't do the right thing.
... old-
style casts degenerate into the equivalent of reinterpret_cast if no conversion is defined.
... // old-
style c/c++ casts by-pass |nscomptr|s machinery and cause leaks...
XUL Overlays
because an overlay is superimposed on the master document, there are no ambiguities relating to scoping of
style sheets or scripts.
...
style sheets and scripts loaded by the overlay simply apply to the entire master document.
...since the purpose of an overlay is to define new ui elements for a package within the context of that package's skin, the overlay should add structure but not new
style.
...the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%"
style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.
Paint Flashing Tool - Firefox Developer Tools
for example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that changes the element's
style.
...after moving the mouse around and scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a
style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again.
... in this case, with a simple
style, the extra repaints don't make much of a difference.
... but if the
style were computationally expensive to paint, they might.
CSSMathSum - Web APIs
a cssmathsum is the object type returned when the
stylepropertymapreadonly.get() method is used on a css property whosevalue is created with a calc() function.
... <div>has width</div> we assign a width div { width: calc(30% - 20px); } we add the javascript const
stylemap = document.queryselector('div').computed
stylemap(); console.log(
stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log(
stylemap.get('width').operator ); // 'sum' console.log(
stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log(
stylemap.get('width').values[0] );...
... // cssunitvalue {value: 30, unit: "percent"} console.log(
stylemap.get('width').values[0].value ); // 30 console.log(
stylemap.get('width').values[0].unit ); // 'percent' console.log(
stylemap.get('width').values[1] ); // cssunitvalue {value: -20, unit: "px"} console.log(
stylemap.get('width').values[1].value ); // -20 console.log(
stylemap.get('width').values[1].unit ); // 'px' the specification is still evolving.
... in the future we may write the last three lines as: console.log(
stylemap.get('width').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log(
stylemap.get('width').values[1].value ); // cssunitvalue {value: 20, unit: "px"} console.log(
stylemap.get('width').values[1].value.unit ); // 'px' specifications specification status comment css typed om level 1the definition of 'cssmathsum' in that specification.
CSSRule.cssText - Web APIs
the csstext property of the cssrule interface returns the actual text of a css
stylesheet
style-rule.
... note: do not confuse this property with element-
style css
styledeclaration.csstext.
...therefore, to modify it, use the
stylesheet's cssrules[index] properties .selectortext and .
style (or its sub-properties).
... syntax string = cssrule.csstext example <
style> body { background-color: darkblue; } </
style> <script> var
stylesheet = document.
stylesheets[0]; alert(
stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specifications specification status comment css object model (cssom)the definition of 'cssrule: csstext' in that specification.
CSS Object Model (CSSOM) - Web APIs
it allows users to read and modify css
style dynamically.
... reference animationevent caretposition css csscharsetrule cssconditionrule csscounter
stylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist css
styledeclaration css
stylesheet css
stylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinline
style fontface fontfaceset fontfacesetloadevent geometryutils get
styleutils link
style medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen
stylesheet
stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range,...
... css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy css
stylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue
stylepropertymap
stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).
... css device adaptation working draft css counter
styles level 3 candidate recommendation document object model (dom) level 2
style specification obsolete initial definition.
Pixel manipulation with canvas - Web APIs
<canvas id="canvas" width="300" height="227"
style="float:left"></canvas> <div id="color"
style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.
style.display = 'none'; }; var color = document.getelementbyid('color'); funct...
...ion pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.
style.background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick); painting pixel data into a context you can use the putimagedata() method to paint pixel data into a context: ctx.putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
...iv> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.
style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green data[i + 2] = 255 - data[i + 2]; // blue } ctx.putimagedata(imagedata, 0, 0); }; var graysca...
...thbtn"> <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.
style.display = 'none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; ...
Document.execCommand() - Web APIs
in
stylewithcss mode, it affects the background color of the containing block instead.
...this has been deprecated in favor of
stylewithcss.
...
stylewithcss replaces the usecss command.
... true modifies/generates
style attributes in markup, false generates presentational elements.
Using files from web applications - Web APIs
consider this html: <input type="file" id="fileelem" multiple accept="image/*"
style="display:none"> <button id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can
style the new button for opening the file pick...
...also in this case you can
style the label element as you wish.
... the html that presents the interface looks like this: <input type="file" id="fileelem" multiple accept="image/*"
style="display:none"> <a href="#" id="fileselect">select some files</a> <div id="filelist"> <p>no files selected!</p> </div> this establishes our file <input> element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed).
... dropzone.ondrop = function(event) { event.stoppropagation(); event.preventdefault(); const filesarray = event.datatransfer.files; for (let i=0; i<filesarray.length; i++) { sendfile(filesarray[i]); } } } </script> </head> <body> <div> <div id="dropzone"
style="margin:30px; width:500px; height:300px; border:1px dotted grey;">drag & drop your file here...</div> </div> </body> </html> example: using object urls to display pdf object urls can be used for other things than just images!
GlobalEventHandlers.onanimationiteration - Web APIs
-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the
styles for the box that we're animating.
...we'll add the animation
style later to start animating the box.
... var box = document.getelementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { box.
style.animationplaystate = "paused"; document.getelementbyid("play").innerhtml = "start iteration #" + (iterationcounter+1); }; this sets up two global variables: box, which references the "box" element that we're animating, and iterationcounter, which is initially zero, which indicates how many iterations of the animation have occurred.
... finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { box.
style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box element's animation-play-state to "running" and increments the iteration counter.
GlobalEventHandlers.ontransitioncancel - Web APIs
html this simply creates a <div> which we'll
style with css below to make into a box that resizes and changes color and such.
... <div class="box"></div> css the css below
styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
... .box { margin-left: 70px; margin-top: 30px; border-
style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
... let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.
style.display = 'none'; timeout = window.settimeout(appear, 2000); function appear() { box.
style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
Using the MediaStream Recording API - Web APIs
first of all, we
style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=che...
...ckbox] { position: absolute; top: -100px; } next, we
style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value ch...
...first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.
style.background = "red"; record.
style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording".
... stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.
style.background = ""; record.
style.color = ""; } note that the recording may also stop naturally if the media stream ends (e.g.
Using the Payment Request API - Web APIs
for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.
style.display = 'none'; successpanel.
style.display = 'block'; }); }) this object provides the developer with access to details they can use to complete the logical steps required after the payment completes, such as an email address to contact the customer, a shipping address for mailing goods out to them, etc.
...for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.
style.display = 'none'; successpanel.
style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kinds of errors; cancelled or failed payment.
... for demo purposes: intropanel.
style.display = 'none'; legacypanel.
style.display = 'block'; } }); }); note: see our recommending a payment app when user has no apps demo for the full code.
... const additionaldetailscontainer = document.getelementbyid('additional-details-container'); additionaldetailscontainer.
style.display = 'block'; window.scrollto(additionaldetailscontainer.getboundingclientrect().x, 0); }).catch(function(error) { // handle error.
ShadowRoot - Web APIs
documentorshadowroot.
stylesheets read only returns a
stylesheetlist of css
stylesheet objects for
stylesheets explicitly linked into, or embedded in a document.
... inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, update
style(), which actually applies the size and color to the element.
... connectedcallback() { console.log('custom square element added to page.'); update
style(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); update
style(this); } in the update
style() function itself, we get a reference to the shadow dom using element.shadowroot.
... from here we use standard dom traversal techniques to find the <
style> element inside the shadow dom and then update the css found inside it: function update
style(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === '
style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l') + 'px;' + 'background-color: ' + elem.getattribute('c') + ';' + '}'; } } } specifications specification status comment domthe definition of 'interface shadowroot' in that specification.
Visualizations with Web Audio API - Web APIs
0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been started: var drawvisual = requestanimationframe(draw); next, we grab the time domain data and copy it into our array analyser.getbytetimedomaindata(dataarray); next, fill the canvas with a solid colour to start canvasctx.fill
style = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); set a line width and stroke colour for the wave we will draw, then begin drawing a path canvasctx.linewidth = 2; canvasctx.stroke
style = 'rgb(0, 0, 0)'; canvasctx.beginpath(); determine the width of each segment of the line to be drawn by dividing the canvas width by the array length (equal to the frequencybincount, as defined ea...
...we've defined: canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; at the end of this section of code, we invoke the draw() function to start off the whole process: draw(); this gives us a nice waveform display that updates several times a second: creating a frequency bar graph another nice little sound visualization to create is one of those winamp-
style frequency bar graphs.
... function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canvasctx.fill
style = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); now we set our barwidth to be equal to the canvas width divided by the number of bars (the buffer length).
... for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]/2; canvasctx.fill
style = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight); x += barwidth + 1; } }; again, at the end of the code we invoke the draw() function to set the whole process in motion.
Keyboard-navigable JavaScript widgets - Accessibility
trol keyboard access <ul id="mb1" tabindex="0"> <li id="mb1_menu1" tabindex="-1"> font <ul id="fontmenu" title="font" tabindex="-1"> <li id="sans-serif" tabindex="-1">sans-serif</li> <li id="serif" tabindex="-1">serif</li> <li id="monospace" tabindex="-1">monospace</li> <li id="fantasy" tabindex="-1">fantasy</li> </ul> </li> <li id="mb1_menu2" tabindex="-1">
style <ul id="
stylemenu" title="
style" tabindex="-1"> <li id="italic" tabindex="-1">italics</li> <li id="bold" tabindex="-1">bold</li> <li id="underline" tabindex="-1">underlined</li> </ul> </li> <li id="mb1_menu3" tabindex="-1"> justification <ul id="justificationmenu" title="justication" tabindex="-1"> <li id="left" tabindex="-1">left</li> <li id="center"...
...the event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is
styled appropriately (for example, with a border or background color).
...choose between changing the background color via something like this.
style.backgroundcolor = "gray"; or add a dotted border via this.
style.border = "1px dotted invert".
... in the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border
style is applied (borders take up space, and ie doesn't implement css outlines).
Web accessibility for seizures and physical reactions - Accessibility
the epilepsy foundation's article "take advantage of media queries with <
style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os.
... @media (prefers-color-scheme: dark) { /* adust
styles for dark mode */ } window.matchmedia() there is a powerful tool available to developers via window.matchmedia().
... environment-blending from w3c's draft document, media queries level 5: "the environment-blending media feature is used to query the characteristics of the user’s display so the author can adjust the
style of the document.
... light-level from w3c's draft document, media queries level 5 section on light-level: "the light-level media feature is used to query about the ambient light-level in which the device is used, to allow the author to adjust
style of the document in response." this will be a godsend to those who have motor-skills problems, or for some with cognitive difficulties, who cannot find the right "button" to change their screen settings.
Web Accessibility: Understanding Colors and Luminance - Accessibility
font size, font
style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen.
... window.getcomputed
style() returns values using rgb decimal reference scale.
... for example, calling window.getcomputed
style() on a div with a background-color: #990000; set returns the computed background color as rgb(153, 0, 0) -- the rgb decimal reference.
... window.getcomputed
style() measures color in terms of rgb.
EXSLT
upported by firefox are listed below: common (exsl)the exslt common package provides basic functions that expand upon the capabilities of xslt.math (math)the exslt math package provides functions for working with numeric values and comparing nodes.regular expressions (regexp)the exslt regular expressions package provides functions that allow testing, matching, and replacing text using javascript
style regular expressions.sets (set)the exslt sets package offers functions that let you perform set manipulation.strings (str)the exslt strings package provides functions that allow the manipulation of strings.
...for example, to use the regular expressions package: <xsl:
stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...
... </xsl:template> </xsl:
stylesheet> common the exslt common package provides basic functions that expand upon the capabilities of xslt.
... functions math:highest() math:lowest() math:max() math:min() regular expressions the exslt regular expressions package provides functions that allow testing, matching, and replacing text using javascript
style regular expressions.
Printing - Developer guides
you wish to use different
styles to enhance the appearance of your content on paper.
... using a print
style sheet add the following to your <head> tag.
... <link href="/path/to/print.css" media="print" rel="
stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
...ild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.
style.position = "fixed"; ohiddframe.
style.right = "0"; ohiddframe.
style.bottom = "0"; ohiddframe.
style.width = "0"; ohiddframe.
style.height = "0"; ohiddframe.
style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');"
style="cursor:pointer;text-decoration:underline;color:#0000ff;">print...
<details>: The Details disclosure element - HTML: Hypertext Markup Language
when the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents: from there, you can use css to
style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute.
... the <summary> element supports the list-
style shorthand property and its longhand properties, such as list-
style-type, to change the disclosure triangle to whatever you choose (usually with list-
style-image).
... for example, we can remove the disclosure widget icon by setting list-
style: none.
... css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-
style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.
<div>: The Content Division element - HTML: Hypertext Markup Language
it has no effect on the content or layout until
styled using css.
...instead, it's used to group content so it can be easily
styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.
...you name it!</p> </div> the result looks like this: a
styled example this example creates a shadowed box by applying a
style to the <div> using css.
... note the use of the class attribute on the <div> to apply the
style named "shadowbox" to the element.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
if the <fieldset> is
styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block.
...if the <fieldset> is
styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context.
... if the <fieldset> is
styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context.
... you can feel free to
style the <fieldset> and <legend> in any way you want to suit your page design.
<input type="datetime-local"> - HTML: Hypertext Markup Language
here we make use of the :valid and :invalid css properties to
style the input based on whether or not the current value is valid.
... we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be
styled or shown effectively.
...eryselector('.fallbackdatetimepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); var dayselect = document.queryselector('#day'); var hourselect = document.queryselector('#hour'); var minuteselect = document.queryselector('#minute'); // hide fallback initially fallbackpicker.
style.display = 'none'; fallbacklabel.
style.display = 'none'; // test whether a new datetime-local input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'datetime-local'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nat...
...ivepicker.
style.display = 'none'; fallbackpicker.
style.display = 'block'; fallbacklabel.
style.display = 'block'; // populate the days and years dynamically // (the months are always the same, therefore hardcoded) populatedays(monthselect.value); populateyears(); populatehours(); populateminutes(); } function populatedays(month) { // delete the current set of <option> elements out of the // day <select>, ready for the next set to be injected while(dayselect.firstchild){ dayselect.removechild(dayselect.firstchild); } // create variable to hold new number of days to inject var daynum; // 31 or 30 days?
<input type="file"> - HTML: Hypertext Markup Language
iles currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width: 580px; background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-
style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button { background-color: #7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: white; } form labe...
...next, we hide the <input> element — we do this because file inputs tend to be ugly, difficult to
style, and inconsistent in their design across browsers.
... you can activate the input element by clicking its <label>, so it is better to visually hide the input and
style the label like a button, so the user will know to interact with it if they want to upload files.
... const input = document.queryselector('input'); const preview = document.queryselector('.preview'); input.
style.opacity = 0; note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two
styles to mean the file input isn't interactive.
<input type="month"> - HTML: Hypertext Markup Language
here we make use of the :valid and :invalid css properties to
style the input based on whether or not the current value is valid.
... we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be
styled or shown effectively.
... // define variables var nativepicker = document.queryselector('.nativedatepicker'); var fallbackpicker = document.queryselector('.fallbackdatepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); // hide fallback initially fallbackpicker.
style.display = 'none'; fallbacklabel.
style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'month'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.
style.dis...
...play = 'none'; fallbackpicker.
style.display = 'block'; fallbacklabel.
style.display = 'block'; // populate the years dynamically // (the months are always the same, therefore hardcoded) populateyears(); } function populateyears() { // get the current year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } note: remember that some years have 53 weeks in them (see weeks per year)!
<input type="number"> - HTML: Hypertext Markup Language
1.78" required> <span class="validity"></span> </div> <div class="feetinputgroup"
style="display: none;"> <span>enter your height — </span> <label for="feet">feet:</label> <input id="feet" type="number" name="feet" min="0" step="1"> <span class="validity"></span> <label for="inches">inches:</label> <input id="inches" type="number" name="inches" min="0" max="11" step="1"> <span class="validity"></span> </div> <div> ...
... we've hidden the feet and inches inputs initially using
style="display: none;", so that meters is the default entry type.
...tor('#meters'); let feetinput = document.queryselector('#feet'); let inchesinput = document.queryselector('#inches'); let switchbtn = document.queryselector('input[type="button"]'); switchbtn.addeventlistener('click', function() { if(switchbtn.getattribute('class') === 'meters') { switchbtn.setattribute('class', 'feet'); switchbtn.value = 'enter height in meters'; metersinputgroup.
style.display = 'none'; feetinputgroup.
style.display = 'block'; feetinput.setattribute('required', ''); inchesinput.setattribute('required', ''); metersinput.removeattribute('required'); metersinput.value = ''; } else { switchbtn.setattribute('class', 'meters'); switchbtn.value = 'enter height in feet and inches'; metersinputgroup.
style.display = 'block'; feetin...
...putgroup.
style.display = 'none'; feetinput.removeattribute('required'); inchesinput.removeattribute('required'); metersinput.setattribute('required', ''); feetinput.value = ''; inchesinput.value = ''; } }); after declaring a few variables, an event listener is added to the button to control the switching mechanism.
<input type="radio"> - HTML: Hypertext Markup Language
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.
...notice also how the :checked pseudo-class is used to specify the
styles for the radio button's appearance when selected.
...in addition, the
style and coloring of the legend and submit button are customized to have strong contrast.
<input type="time"> - HTML: Hypertext Markup Language
here we make use of the :valid and :invalid css properties to
style the input based on whether or not the current value is valid.
... we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be
styled or shown effectively.
... // define variables var nativepicker = document.queryselector('.nativetimepicker'); var fallbackpicker = document.queryselector('.fallbacktimepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var hourselect = document.queryselector('#hour'); var minuteselect = document.queryselector('#minute'); // hide fallback initially fallbackpicker.
style.display = 'none'; fallbacklabel.
style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'time'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.
style.disp...
...lay = 'none'; fallbackpicker.
style.display = 'block'; fallbacklabel.
style.display = 'block'; // populate the hours and minutes dynamically populatehours(); populateminutes(); } function populatehours() { // populate the hours <select> with the 6 open hours of the day for(var i = 12; i <= 18; i++) { var option = document.createelement('option'); option.textcontent = i; hourselect.appendchild(option); } } function populateminutes() { // populate the minutes <select> with the 60 minutes of each hour for(var i = 0; i <= 59; i++) { var option = document.createelement('option'); option.textcontent = (i < 10) ?
CSP: script-src-elem - HTTP
'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <
style> elements.
... '<hash-algorithm>-<base64-value>' a sha256, sha384 or sha512 hash of scripts or
styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or
style.
... when generating the hash, don't include the <script> or <
style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
CSP: worker-src - HTTP
'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <
style> elements.
... '<hash-algorithm>-<base64-value>' a sha256, sha384 or sha512 hash of scripts or
styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or
style.
... when generating the hash, don't include the <script> or <
style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
background_color - Web app manifests
type string mandatory no the background_color member defines a placeholder background color for the application page to display before its
stylesheet is loaded.
... this value is used by the user agent to draw the background color of a shortcut when the manifest is available before the
stylesheet has loaded.
... therefore background_color should match the background-color css property in the site’s
stylesheet for a smooth transition between launching the web application and loading the site's content.
... note: the background_color member is only meant to improve the user experience while the main
stylesheet is loading from the network or the storage media; it is not used by the user agent as the background-color css property when the progressive web app
stylesheet is available.
<mo> - MathML
class, id,
style provided for use with
stylesheets.
... largeop specifies whether the operator should be drawn larger than normal when display
style="true" is set.
...that is, although the names suggest the typographic
style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
...allowed values are: infinity an arbitrary length movablelimits specifies whether attached under- and overscripts move to sub- and superscript positions when display
style is false.
Structural overview of progressive web apps - Progressive web apps (PWAs)
it consists of a single html file (index.html), with basic css styling provided in
style.css.
...the file and folder hierarchy looks like this: app.js data/ games.js img/ favicon.ico fonts/ icons/ img/ bg.png js13kgames.png index.html js13kpwa.webmanifest
style.css sw.js the html the html in the file index.html creates the structure of the app.
...-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="
stylesheet" href="
style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a ...
...this list includes both app shell and content files: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/
style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/i...
SVG Styling Attributes - SVG: Scalable Vector Graphics
class
style attributes class assigns a class name or set of class names to an element.
... value: any valid id string; animatable: yes
style it specifies
style information for its element.
... it functions identically to the
style attribute in html.
... value: any valid
style string; animatable: no ...
text-decoration - SVG: Scalable Vector Graphics
it is a shorthand for the text-decoration-line and text-decoration-
style properties.
...e elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-
style'> || <'text-decoration-color'> default value see individual properties animatable yes for a description of the values, please refer to the css text-decoration property.
... candidate recommendation defines the property as a shorthand for text-decoration-line, text-decoration-
style, and text-decoration-color.
... candidate recommendation mainly refers to the definition in css text decoration 3 turning the property into a shorthand for text-decoration-line and text-decoration-
style.
SVG Attribute reference - SVG: Scalable Vector Graphics
ve alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype content
styletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-
style font-variant fon...
...t result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width
style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y ver...
...sibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space
style attributes class,
style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage.
... alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-
style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-a...
Content type - SVG: Scalable Vector Graphics
when used in the value of a property in a
stylesheet, an <angle> is defined as follows: angle ::= number (~"deg" | ~"grad" | ~"rad")?
...when used in a
stylesheet, a <length> is defined as follows: length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
...when used in a
stylesheet, a <number> is defined as follows: number ::= integer | [+-]?
... percentage <percentage> percentages are specified as a number followed by a "%" character: percentage ::= number "%" note that the definition of <number> depends on whether the percentage is specified in a
stylesheet or in an attribute that is not also a presentation attribute.
Scripting - SVG: Scalable Vector Graphics
one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.
style.setproperty("fill-opacity", "0.0", "").
... setproperty has three parameters the function svgelement.
style.setproperty("fill-opacity", "0.0") throws a domexception - syntax err in mozilla.
... this behaviour is specified by the w3c in the dom level 2
style specification.
...the above can be replaced with 'svgelement.
style.setproperty("fill-opacity", "0.0", "")', which is standards compliant.
Fills and Strokes - SVG: Scalable Vector Graphics
using css in addition to setting attributes on objects, you can also use css to
style fills and strokes.
... css can be inserted inline with the element via the
style attribute: <rect x="10" height="180" y="10" width="180"
style="stroke: black; fill: red;"/> or it can be moved to a special
style section that you include.
... <?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <
style type="text/css"><![cdata[ #myrect { stroke: black; fill: red; } ]]></
style> </defs> <rect x="10" height="180" y="10" width="180" id="myrect"/> </svg> moving
styles to an area like this can make it easier to adjust properties on large groups of elements.
... you can also use things like the :hover pseudo class to create rollover effects: #myrect:hover { stroke: black; fill: blue; } you can also specify an external
stylesheet for your css rules through normal xml-
stylesheet syntax: <?xml version="1.0" standalone="no"?> <?xml-
stylesheet type="text/css" href="
style.css"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect height="10" width="10" id="myrect"/> </svg> where
style.css looks something like: #myrect { fill: red; stroke: black; } « previousnext » ...
SVG fonts - SVG: Scalable Vector Graphics
<font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-
style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- outline of excl...
...it defines basic properties of the final font such as weight,
style, etc.
...the font-weight and font-
style attributes have the same purpose as the equivalent descriptors in css.
... option: use css @font-face you can use @font-face to reference remote (and not so remote) fonts: <font id="super_sans"> <!-- and so on --> </font> <
style type="text/css"> @font-face { font-family: "super sans"; src: url(#super_sans); } </
style> <text font-family="super sans">my text uses super sans</text> option: reference a remote font the above mentioned font-face-uri element allows you to reference an external font, hence allowing greater re-usability: <font> <font-face font-family="super sans"> <font-face-src> <font-face-ur...
Subresource Integrity - Web security
how subresource integrity helps using content delivery networks (cdns) to host files such as scripts and
stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth.
... note: an integrity value's "hash" part is, strictly speaking, a cryptographic digest formed by applying a particular hash function to some input (for example, a script or
stylesheet file).
... how browsers handle subresource integrity browsers handle sri by doing the following: when a browser encounters a <script> or <link> element with an integrity attribute, before executing the script or before applying any
stylesheet specified by the <link> element, the browser must first compare the script or
stylesheet to the expected hash given in the integrity value.
... if the script or
stylesheet doesn’t match its associated integrity value, the browser must refuse to execute the script or apply the
stylesheet, and must instead return a network error indicating that fetching of that script or
stylesheet failed.
content/mod - Archive of obsolete content
for example, the following code applies a
style to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var
style = require("sdk/
stylesheet/
style").
style; var
style =
style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(
style, window); parameters modification : object the modification we want to apply to the target.
... for example, the following code applies and removes a
style to a content window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var
style = require("sdk/
stylesheet/
style").
style; var
style =
style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(
style, window); // ...
... detachfrom(
style, window); parameters modification : object the modification we want to remove from the target window : nsidomwindow the window to be modified.
io/file - Archive of obsolete content
if your add-on uses literal windows-
style path specifications with this api, your add-on likely won't work when users run it on unix-like systems.
... likewise, if your add-on uses literal unix-
style path specifications, it won't work for users on windows.
... note that if you do decide to hardcode windows-
style paths, be sure to escape backslashes in strings.
A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
...when you create
styles in <
style> tags, as
style attributes for individual elements, or in custom css files, you break the ability of gecko to skin the application to which your xul belongs.
... <menu id="file" label="file"> <menupopup> <menuitem label="new" oncommand="createnewdoc()" /> <menuitem label="open" oncommand="opendoc()" /> <menuitem label="close" oncommand="closedoc()" /> </menupopup> </menu> element names the item, the widget, while attributes describes features of that element, such as its name, its
style, and so on.
MenuItems - Archive of obsolete content
instead of specifying the icon with the image attribute, you can also reference the image in a
style sheet 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.
...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...
Things I've tried to do with XUL - Archive of obsolete content
<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%" fl...
...ex="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.
...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.
Focus and Selection - Archive of obsolete content
for this, you can use a special
style property -moz-user-focus.
...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 check for the presence of this attribute to determine if the element has the focus, either from a script or within a
style sheet.
Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-
stylesheet href="findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ...
...p> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results"
style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="&b...
...ytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" resizeafter="grow"
style="display: none;"/> <spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%"
style="display: none;"/> <spacer flex="1"/> <button id="find-button" label="&button.find;" oncommand="dofind()"/> <button id="cancel-button" label="&button.cancel;" oncommand="window.close();"/> </hbox> </vbox> </window> each text string has been replaced by an entity reference.
Popup Menus - Archive of obsolete content
example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical"
style="background-color: #33dd00;"> <description value="click here to see more information"/> <description value="really!"
style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
... the first uses the default tooltip
style.
... the second uses a custom tooltip that has a different background color and
styled text.
Stacks and Decks - Archive of obsolete content
for example, you could create an effect similar to the text-shadow property with the following: example 1 : source view <stack> <description value="shadowed"
style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> <description value="shadowed"
style="color: red; font-size: 15pt;"/> </stack> both description elements create text with a size of 15 points.
... this method has advantages over using text-shadow because you could completely
style the shadow apart from the main text.
...shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack
style="background-color: #c0c0c0"> <description value="disabled"
style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled"
style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some platforms.
Trees - Archive of obsolete content
since the entire body of the tree is a single widget, you can't change the
style of individual rows or cells in the normal way.
...a special css syntax is used which
styles components of the tree body with those keywords.
...for instance, you cannot change the appearance of the tree rows using the
style attribute or with other css properties and the box related features such as flexibility and orientation cannot be used.
Writing Skinnable XUL and CSS - Archive of obsolete content
} this evil rule caused the
style system, for every treecell that wasn't in a treehead (which is practically every treecell in a typical tree), to crawl up the whole parent chain to the root of the document in order to determine that the
style rule wasn't a match.
...
style="..." is prohibited in xul files without approval any usages of inline
style are extremely dangerous, since they are overriding the included skin, and must be approved before their usage will be allowed.
...if you find yourself needing to display an image from the skin, then use <titledbutton> and
style it rather than using <html:img>.
XUL Questions and Answers - Archive of obsolete content
support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt
stylesheet into an xml i get the error: "error loading
stylesheet: an xslt
stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
...the following is the code they wrote: <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" ...
...an example of this is: var tree = document.getelementbyid('treeid'); selectedtreeitem = tree.view.getitematindex(tree.currentindex); selectedtreeitem.firstchild.setattribute('
style', 'background: #ff0000'); what is an example of tab browser in xul?
XML - Archive of obsolete content
using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading
stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
... gecko was designed to be lightweight, standards-compliant and cross-platform, so rather than defining on its own how these widgets should be rendered, gecko depends for all but the most basic behavioral and presentational aspects of the widgets upon cascading
stylesheets.
... the combination of structure, as defined in the xul,
style as defined by the
stylesheets, and the other standards are rendered by gecko into the interface.
label - Archive of obsolete content
attributes accesskey, control, crop, disabled, href, value properties accesskey, accessibletype, control, crop, disabled, value
style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes the following classes may be used to
style the element.
... these classes should be used instead of changing the
style of the element directly since they will fit more naturally with the user's selected theme.
listitem - Archive of obsolete content
attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value
style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes the following classes may be used to
style the element.
... these classes should be used instead of changing the
style of the element directly since they will fit more naturally with the user's selected theme.
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value
style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate th...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes menuitem-iconic use this class to have an image appear on the menuitem.
textbox - Archive of obsolete content
nd properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange
style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols type: integer for multiline textboxes, the number of columns to display.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes the following classes may be used to
style the element.
... these classes should be used instead of changing the
style of the element directly since they will fit more naturally with the user's selected theme.
treechildren - Archive of obsolete content
you can use the :-moz-tree-row css
style to do this instead.
...licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
treerow - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to
style the element.
...licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
treeseparator - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to
style the element.
...licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
Windows and menus in XULRunner - Archive of obsolete content
here is an example: <?xml version="1.0"?> <?xml-
stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... building on the simple window code, here is what xul menus and toolbars look like: <?xml version="1.0"?> <?xml-
stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuit...
...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.
Developing cross-browser and cross-platform pages - Archive of obsolete content
function hideelement(id_attribute_value) { if (document.getelementbyid && document.getelementbyid(id_attribute_value) && document.getelementbyid(id_attribute_value).
style ) { document.getelementbyid(id_attribute_value).
style.visibility = "hidden"; }; } // example: // <button type="button" onclick="hideelement('d1');">hide div</button> // <div id="d1">some text</div> these repeated calls to document.getelementbyid are not the most efficient way to check for the existence of particular objects or features in the browser's dom implementation, but they serve...
...if there is, the code sees if document.getelementbyid(id_attribute_value) returns a reference to an existing element, which it then checks for a
style object.
... if the
style object exists on the element, then it sets that object's visibility property.
-ms-scrollbar-3dlight-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a
style rule that sets the -ms-scrollbar-3dlight-color property for a <textarea> element.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doctype html> <html> <head> <title>scrollbar-3dlight-color</title> <
style> .blue3dlight { -ms-scrollbar-3dlight-color: blue; scrollbar-3dlight-color: blue; /* use the standard when available.
... */ } </
style> </head> <body> <textarea class="blue3dlight">the top and left edges of the thumb and button-face elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.
::-ms-ticks-after - Archive of obsolete content
the ::-ms-ticks-after css pseudo-element is a microsoft extension that applies one or more
styles to the tick marks that appear after the track of a slider control.
... background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-
style border-bottom-width border-left-color border-left-
style border-left-width border-right-color border-right-
style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-
style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-
style font-weight height margin-bottom m...
...argin-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-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
the ::-ms-ticks-before css pseudo-element is a microsoft extension that applies one or more
styles to the tick marks that appear before the track of a slider control.
... background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-
style border-bottom-width border-left-color border-left-
style border-left-width border-right-color border-right-
style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-
style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-
style font-weight height margin-bottom m...
...argin-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-ticks-before ...
CSS - Archive of obsolete content
the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-
stylethe -ms-overflow-
style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css property is a microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.-ms-scroll-limitthe -ms-scroll-limit css property is a microsoft extensi...
...a slider control is one possible representation of <input type="range">.::-ms-ticks-afterthe ::-ms-ticks-after css pseudo-element is a microsoft extension that applies one or more
styles to the tick marks that appear after the track of a slider control.
... a slider control is one possible representation of <input type="range">.::-ms-ticks-beforethe ::-ms-ticks-before css pseudo-element is a microsoft extension that applies one or more
styles to the tick marks that appear before the track of a slider control.
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
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
stylesheet, and accept that the
stylesheet in question will never validate.
... 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.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
the html parser starts speculative loads for scripts,
style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively.
... the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts,
style sheets and images.
... to make speculative loads of linked scripts,
style sheets and images successful, avoid document.write.
Pseudo-classes and pseudo-elements - Learn web development
a more valid use of these pseudo-elements is to insert an icon, for example the little arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screenreader: these pseudo-elements are also frequently used to insert an empty string, which can then be
styled just like any element on the page.
...we have set this to display: block in order that we can
style it with a width and height.
... we then use css to
style it just like any element.
CSS building blocks - Learn web development
css selectors there are a wide variety of css selectors available, allowing for fine-grained precision when selecting elements to
style.
...images, other media, and form elements behave a little differently in terms of your ability to
style them with css than regular boxes.
... organizing your css as you start to work on larger
stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
Introduction to CSS layout - Learn web development
for example, the fact that paragraphs in english display one below the other is due to the fact that they are
styled with display: block.
...our examples will all feature the same html, which is as follows: <h1>positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">i am a basic block level element.</p> <p>i am a basic block level element.</p> this html will be
styled by default using the following css: body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } the rendered output is as follows: relative positioning relative positioning allows you to offset an item from the position in normal flow it would have by default.
... html { font-family: sans-serif; } form { display: table; margin: 0 auto; } form div { display: table-row; } form label, form input { display: table-cell; margin-bottom: 10px; } form label { width: 200px; padding-right: 5%; text-align: right; } form input { width: 300px; } form p { display: table-caption; caption-side: bottom; width: 300px; color: #999; font-
style: italic; } this gives us the following result: you can also see this example live at css-tables-example.html (see the source code too.) multi-column layout the multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper.
Responsive design - Learn web development
whether the user's screen is greater than a certain width, or a certain resolution) and apply css selectively to
style the page appropriately for the user's needs.
... @media screen and (min-width: 800px) { .container { margin: 1em 2em; } } you can add multiple media queries within a
stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes.
...this is still an approach used today, and in most
stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach.
CanvasPattern.setTransform() - Web APIs
the pattern gets applied if you set it as the current fill
style and gets drawn onto the canvas when using the fillrect() method, for example.
...as = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fill
style = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400"...
... height="200" class="playable-canvas"></canvas> <svg id="svg1"
style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"
style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fill
style = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelemen...
CanvasRenderingContext2D.fillRect() - Web APIs
the canvasrenderingcontext2d.fillrect() method of the canvas 2d api draws a rectangle that is filled according to the current fill
style.
...the fill
style is determined by the current fill
style attribute.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fill
style = 'green'; ctx.fillrect(20, 10, 150, 100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
CanvasRenderingContext2D.globalAlpha - Web APIs
see also the chapter applying
styles and color in the canvas tutorial.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fill
style = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fill
style = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fill
style = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fill
style = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fill
style = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fill
style = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fill
style = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, tr...
CanvasRenderingContext2D.stroke() - Web APIs
the canvasrenderingcontext2d.stroke() method of the canvas 2d api strokes (outlines) the current or given path with the current stroke
style.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first sub-path ctx.linewidth = 26; ctx.stroke
style = 'orange'; ctx.moveto(20, 20); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.stroke
style = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.stroke
style = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result stroking and filling if you want to both stroke and fill a path, the order i...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.stroke
style = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
CanvasRenderingContext2D.strokeRect() - Web APIs
the canvasrenderingcontext2d.strokerect() method of the canvas 2d api draws a rectangle that is stroked (outlined) according to the current stroke
style and other context settings.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.stroke
style = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.stroke
style = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
Basic usage of canvas - Web APIs
the <canvas> element can be
styled just like any normal image (margin, border, background…).
... <!doctype html> <html> <head> <meta charset="utf-8"/> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); } } </script> <
style type="text/css"> canvas { border: 1px solid black; } </
style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fill
style = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 50, 50); ctx.fill
style = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> this example looks like this: screenshotlive sample « previousnext » ...
DataTransfer.clearData() - Web APIs
); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.
style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...a) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; // change border to signify drag is no longer in process event.currenttarget.
style.border = '1px solid black'; if (dropped) { // remove all event listeners draggable.removeeventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('dragleave', dragleavehandler); dropable.removeeventlistener('drop', drophand...
...} function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css
styles and displayed text element.
style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standardthe definition of 'datatransfer.cleardata()' in that specification.
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for
stylesheets, images, and subframes to finish loading.
...if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of
stylesheets.
... if loaded as usual,
stylesheets slow down dom parsing as they're loaded in parallel, "stealing" traffic from the main html document.
Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images,
stylesheets and frames are still loading.
... // but sub-resources such as images,
stylesheets and frames are still loading.
... console.log("the first css rule is: " + document.
stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded...
Introduction to the DOM - Web APIs
it represents the page so that programs can change the document structure,
style, and content.
... document.getelementbyid(id) document.getelementsbytagname(name) document.createelement(name) parentnode.appendchild(node) element.innerhtml element.
style.left element.setattribute() element.getattribute() element.addeventlistener() window.content window.onload window.scrollto() testing the dom api this document provides samples for every interface that you can use in your own web development.
... <html> <head> <title>dom tests</title> <script> function setbodyattr(attr, value) { if (document.body) document.body[attr] = value; else throw new error("no support"); } </script> </head> <body> <div
style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bgcolor</tt></b></p> <select onchange="setbodyattr('bgcolor', this.options[this.selectedindex].va...
Document Object Model (DOM) - Web APIs
with them, you can change the document's structure,
style, or content.
... the html dom api provides access to various browser features such as tabs and windows, css
styles and
stylesheets, browser history, and so forth.
...ent svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svg
styleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelement svgviewelement svgvkernelement svg data type interfaces here are the dom apis for data types used in the definitions of svg properties and attributes.
Element: overflow event - Web APIs
the overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements
styled with overflow != visible).
... bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <
style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </
style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event )...
...; }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.
style.width = "40px"; child.
style.height = "40px"; } else { child.
style.width = "10px"; child.
style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element.shadowRoot - Web APIs
inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, update
style(), which actually applies the size and color to the element.
... connectedcallback() { console.log('custom square element added to page.'); update
style(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); update
style(this); } in the update
style() function itself, we get a reference to the shadow dom using element.shadowroot.
... from here we use standard dom traversal techniques to find the <
style> element inside the shadow dom and then update the css found inside it: function update
style(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === '
style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute('c')}; } `; } }); } specifications specification status comment domthe definition of 'shadowroot' in that specification.
Comparison of Event Targets - Web APIs
examples <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <
style> table { border-collapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; ...
... } </
style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targets)</td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before retar...
... example <hbox id="outer"> <hbox id="inner" onmouseover="dump('mouseover ' + event.relatedtarget.id + ' > ' + event.target.id + '\n');" onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedtarget.id + '\n');"
style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /> </hbox> ...
Using the Gamepad API - Web APIs
navigator.webkitgetgamepads : []); if (!gamepads) { return; } var gp = gamepads[0]; if (buttonpressed(gp.buttons[0])) { b--; } else if (buttonpressed(gp.buttons[2])) { b++; } if (buttonpressed(gp.buttons[1])) { a++; } else if (buttonpressed(gp.buttons[3])) { a--; } ball.
style.left = a * 2 + "px"; ball.
style.top = b * 2 + "px"; start = requestanimationframe(gameloop); } complete example: displaying gamepad state this example shows how to use the gamepad object, as well as the gamepadconnected and gamepaddisconnected events in order to display the state of all gamepads connected to the system.
...amepad.axes.length; i++) { var p = document.createelement("progress"); p.classname = "axis"; //p.id = "a" + i; p.setattribute("max", "2"); p.setattribute("value", "1"); p.innerhtml = i; a.appendchild(p); } d.appendchild(a); // see https://github.com/luser/gamepadtest/blob/master/index.html var start = document.getelementbyid("start"); if (start) { start.
style.display = "none"; } document.body.appendchild(d); requestanimationframe(updatestatus); } function disconnecthandler(e) { removegamepad(e.gamepad); } function removegamepad(gamepad) { var d = document.getelementbyid("controller" + gamepad.index); document.body.removechild(d); delete controllers[gamepad.index]; } function updatestatus() { if (!haveevents) { scangamepads(); ...
...ment.getelementbyid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val * 100) + "%"; b.
style.backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i++) { var a = axes[i]; a.innerhtml = i + ": " + controller.axes[i].tofixed(4); a.setattribute("value", controller.axes[i] + 1); ...
GlobalEventHandlers.onanimationend - Web APIs
ottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the
styles for the box that we're animating.
...we'll add the animation
style later to start animating the box.
...ox"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.
style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onanimationstart - Web APIs
ottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the
styles for the box that we're animating.
...we'll add the animation
style later to start animating the box.
...ox"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.
style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <
style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </
style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.
style.border = "dashed"; ev.datatransfer.setdata("text", ev.ta...
...rget.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.
style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.
style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.
style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // c...
... var el=document.getelementbyid("target"); el.
style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.
style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragst...
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <
style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </
style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.
style.border = "dashed"; ev.datatransfer.setdata("text", ev.ta...
...rget.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.
style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.
style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.
style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // c...
... var el=document.getelementbyid("target"); el.
style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.
style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragst...
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <
style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </
style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.
style.border = "dashed"; ev.datatransfer.setdata("text", ev.ta...
...rget.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.
style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.
style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.
style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // c...
... var el=document.getelementbyid("target"); el.
style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.
style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragst...
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <
style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </
style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.
style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); ...
...} function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.
style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.
style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.
style.background = "white"; } function dragend_handler(ev) { console.log("dragen...
... var el=document.getelementbyid("target"); el.
style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.
style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p ...
GlobalEventHandlers.ontransitionend - Web APIs
html this simply creates a <div> which we'll
style with css below to make into a box that resizes and changes color and such.
... <div class="box"></div> css the css below
styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
... .box { margin-left: 70px; margin-top: 30px; border-
style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
HTMLSelectElement - Web APIs
<div id="interfacediagram"
style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg
style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
...you can also access an item by specifying the index in array-
style brackets or parentheses, without calling this method explicitly.
...you can also access an item by specifying the name in array-
style brackets or parentheses, without calling this method explicitly.
MediaList.mediaText - Web APIs
syntax medialistinstance.mediatext; medialistinstance.mediatext = string; value a domstring representing the media queries of a
stylesheet.
... examples the following would log to the console a textual representation of the medialist of the first
stylesheet applied to the current document.
... const
stylesheets = document.
stylesheets; let
stylesheet =
stylesheets[0]; console.log(
stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'mediatext' in that specification.
MediaList - Web APIs
the medialist interface represents the media queries of a
stylesheet, e.g.
... examples the following would log to the console a textual representation of the medialist of the first
stylesheet applied to the current document.
... const
stylesheets = document.
stylesheets; let
stylesheet =
stylesheets[0]; console.log(
stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'medialist' in that specification.
PaintWorklet - Web APIs
class checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const color = colors[(x + y) % colors.length]; ctx.beginpath(); ctx.fill
style = color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('checkerboard', checkerboardpainter); load a paintworklet the following example demonstrates loading the above worklet from its js file and does so by feature detection.
... <script> if ('paintworklet' in css) { css.paintworklet.addmodule('checkerboard.js'); } </script> use a paintworklet this example shows how to use a paintworklet in a
stylesheet, including the simplest way to provide a fallback if paintworklet isn't supported.
... <
style> textarea { background-image: url(checkerboard); background-image: paint(checkerboard); } </
style> <textarea></textarea> you can also use the @supports at-rule.
SVGElement - Web APIs
<div id="interfacediagram"
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg
style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25...
..."#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinline
style, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
... methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinline
style, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on...
SVGStylable - Web APIs
svg stylable interface the svgstylable interface is implemented on all objects corresponding to svg elements that can have
style, class and presentation attributes specified on them.
... interface overview also implement none methods cssvalue getpresentationattribute(in domstring name) properties readonly svganimatedstring classname readonly css
styledeclaration
style normative document svg 1.1 (2nd edition) properties name type description classname svganimatedstring corresponds to attribute class on the given element.
...
style css
styledeclaration corresponds to attribute
style on the given element.
Using the Screen Capture API - Web APIs
starting screen capture: async/await
style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as see...
... starting screen capture: promise
style function startcapture(displaymediaoptions) { let capturestream = null; return navigator.mediadevices.getdisplaymedia(displaymediaoptions) .catch(err => { console.error("error:" + err); return null; }); } either way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share.
...max-width is set to 860px to set an absolute upper limit on the video's size, the error, warn, and info classes are used to
style the corresponding console output types.
Storage - Web APIs
if it does, we run a function called set
styles() that grabs the data items using storage.getitem() and uses those values to update page
styles.
... if it doesn't, we run another function, populatestorage(), which uses storage.setitem() to set the item values, then runs set
styles().
... if(!localstorage.getitem('bgcolor')) { populatestorage(); } set
styles(); function populatestorage() { localstorage.setitem('bgcolor', document.getelementbyid('bgcolor').value); localstorage.setitem('font', document.getelementbyid('font').value); localstorage.setitem('image', document.getelementbyid('image').value); } function set
styles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.
style.backgroundcolor = '#' + currentcolor; pelem.
style.fontfamily = currentfont; imgelem.setattribute('src...
in - SVG: Scalable Vector Graphics
html <div
style="width: 420px; height: 220px;"> <svg
style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work.
... --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00"
style="filter:url(#backgroundmultiply);" /> </svg> <svg
style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00"
style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
media - SVG: Scalable Vector Graphics
the media attribute specifies a media query that must be matched for a
style sheet to apply.
... only one element is using this attribute: <
style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <
style> rect { fill: black; } </
style> <
style media="all and (min-width: 600px)"> rect { fill: seagreen; } </
style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the
style sheet to be applied.
... if not specified, the
style sheet is applied unconditionally.
requiredFeatures - SVG: Scalable Vector Graphics
http://www.w3.org/tr/svg11/feature#svg-static the browser supports all the following features: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#
style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile ht...
... http://www.w3.org/tr/svg11/feature#
style the browser supports the <
style> element.
...nditionalprocessing</text> <!-- testing : http://www.w3.org/tr/svg11/feature#image --> <rect class="ko" x="10" y="335" height="25" width="430" /> <rect class="ok" x="10" y="335" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#image" /> <text x="20" y="352">http://www.w3.org/tr/svg11/feature#image</text> <!-- testing : http://www.w3.org/tr/svg11/feature#
style --> <rect class="ko" x="10" y="360" height="25" width="430" /> <rect class="ok" x="10" y="360" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#
style" /> <text x="20" y="377">http://www.w3.org/tr/svg11/feature#
style</text> <!-- testing : http://www.w3.org/tr/svg11/feature#viewportattribute --> <rect class="ko" x="10" y="385" height="25" width="430" /> <r...
<a> - SVG: Scalable Vector Graphics
0% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual
style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
... value type: <url> ; default value: none; animatable: yes global attributes core attributes most notably: id, lang, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-renderin...
...valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<feComponentTransfer> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class
style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface.
...type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="100%" height="20"></rect> <text x="0" y="70">identity</text> <rect x="0" y="80" width="100%" height="20"
style="filter:url(#identity)"></rect> <text x="0" y="120">table lookup</text> <rect x="0" y="130" width="100%" height="20"
style="filter:url(#table)"></rect> <text x="0" y="170">discrete table lookup</text> <rect x="0" y="180" width="100%" height="20"
style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" sty...
...le="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="100%" height="20"
style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class
style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
... example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-
style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100z">...
...</glyph> </font> </defs> <text x="100" y="100"
style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-
style: normal">text using embe@dded font!</text> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<svg> - SVG: Scalable Vector Graphics
value type: <string> ; default value: application/ecmascript; animatable: no content
styletype deprecated since svg 2 the default
style sheet language used by the svg fragment.
... global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, poi...
...now, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
<!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="none" stroke="pink" /> <!-- all instances of our symbol --> <use xlink:href="#mydot" x="5" y="5"
style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5"
style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5"
style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5"
style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5"
style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol.
... value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id styling attributes class,
style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stro...
...now, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
<tspan> - SVG: Scalable Vector Graphics
it allows for adjustment of the
style and/or position of that subtext as needed.
... html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <
style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </
style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana!
... value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, strok...
<use> - SVG: Scalable Vector Graphics
(this differs from how css
style attributes override those set 'earlier' in the cascade).
... since the cloned nodes are not exposed, care must be taken when using css to
style a use element and its cloned descendants.
... global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke...
SVG element reference - SVG: Scalable Vector Graphics
ht> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <
style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <p...
...op> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <
style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <...
..., <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-profile>, <cursor>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <
style>, <view> obsolete and deprecated elements warning: these are old svg elements which are deprecated and should not be used.
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-
style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
...images,
stylesheets) cannot be loaded, though they can be used if inlined through data: uris.
... :visited-link
styles aren't rendered.
Texts - SVG: Scalable Vector Graphics
each of the following properties can be set as an attribute or via a css declaration: font-family, font-
style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.
... <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <
style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></
style> </svg> the tspan element has the following custom attributes: x set a new absolute x coordinate for the containing text.
... </textpath> </text> <
style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></
style> </svg> « previousnext » ...
Tutorials
css tutorials introductory level css basics css (cascading
style sheets) is the code you use to
style your webpage.
... css first steps css (cascading
style sheets) is used to
style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... intermediate level css layout at this point we've already looked at css fundamentals, how to
style text, and how to
style and manipulate the boxes that your content sits inside.
Web Components
this has traditionally not been so easy for custom markup structures — think of the complex html (and associated
style and script) you've sometimes had to write to render custom ui controls, and how using them multiple times can turn your page into a mess if you are not careful.
...in this way, you can keep an element's features private, so they can be scripted and
styled without the fear of collision with other parts of the document.
... using shadow dom a guide that looks at shadow dom fundamentals, showing how to attach a shadow dom to an element, add to the shadow dom tree,
style it, and more.
Tree Widget Changes - Archive of obsolete content
(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"> ...
...
style improvements you can now specify the cursor to use for a cell using the css cursor property.
Anonymous Content - Archive of obsolete content
xul: <box class="zoombox"> <image src="images/happy.jpg"/> <image src="images/angry.jpg"/> </box> xbl: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1"
style="border: 1px solid black"> <children includes="image"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at the location of the children tag.
...this results in a display that is equivalent to the following: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1"
style="border: 1px solid black"> <xul:image src="images/happy.jpg"/> <xul:image src="images/angry.jpg"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> from the dom's perspective, the child elements are still in their original location.
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } function docancel(){ ...
... example dialog with more features <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="...
Cross Package Overlays - Archive of obsolete content
as a side note, you can use a similar technique to apply extra
style sheets.
... the following example shows how: <rdf:seq about="urn:mozilla:
stylesheets"> <rdf:li resource="chrome://messenger/content/messenger.xul"/> </rdf:seq> <rdf:seq about="chrome://messenger/content/messenger.xul"> <rdf:li>chrome://blueswayedshoes/skin/myskinfile.css</rdf:li> </rdf:seq> next, we'll see how to create an installer for a xul application.
Tabboxes - Archive of obsolete content
</description> <spacer
style="height: 10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer
style="width: 10px;"/> <menulist id="searchmode"> <menupopup> ...
... <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer
style="height: 10px"/> <textbox id="find-text" flex="1"
style="min-width: 15em;"/> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="case sensitive search"/> <checkbox id="wordscheck" label="match entire filename"/> </tabpanel> </tabpanels> </tabbox> the tab elements have been placed around the main content of the window.
Tree View Details - Archive of obsolete content
a
style sheet may be used to
style items based on various properties such as whether a row is open.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "l...
Using the Editor from XUL - Archive of obsolete content
having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to
style it from css.
...you are typing over selected text), then calls a generic pre-insertion call willinsert(), which sets up inline
styles for the inserted text, and moves the selection to an appropriate place where the text is to be inserted.
XUL accessibility guidelines - Archive of obsolete content
almost any xul element can be set to scroll by setting a
style to "overflow: auto" or "overflow: scroll".
... to solve this problem, we use the aria-labelledby attribute on both controls (note the double l—aria uses uk-
style spelling) to specify that the checkbox and the textbox are both labeled by the the entire group of components.
action - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, r...
...esource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(),...
arrowscrollbox - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width clicktoscroll type: boolean clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width disabled type: boolean gets and sets the value of the disabled attribute.
assign - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
bbox - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
binding - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties object type: string the object of the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsb...
bindings - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width object type: string the object of the element.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
box - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
broadcaster - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
broadcasterset - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
column - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
columns - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
conditions - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
deck - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex type: integer returns the index of the currently selected item.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the ...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
dropmarker - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatu...
grid - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
grippy - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
groupbox - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatu...
hbox - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
keyset - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width disabled type: boolean indicates whether the element is disabled or not.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
listcol - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
listcols - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
listhead - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
listheader - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatu...
member - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties child type: ?
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
menu - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat
style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="und...
...
style classes menu-iconic use this class to have an image appear on the menu.
observes - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
page - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
popupset - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
preferences - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods void firechangedevent(in domelement preference); creates and dispatches a changed (non-bubbling) event to the specified preference element.
progressmeter - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
query - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
queryset - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
row - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
rows - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
script - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
scrollcorner - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
spacer - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
spinbuttons - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
stack - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
statusbar - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature...
stringbundleset - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
tab - Archive of obsolete content
this attribute should not be set manually, but is useful in a theme if the first tab should be
styled differently.
...this attribute should not be set manually, but is useful in a theme if the last tab should be
styled differently.
tabpanel - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
template - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
textnode - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
toolbar - Archive of obsolete content
attributes autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize, mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem
style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will b...
...), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
style classes chromeclass-toolbar when this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the window.open method.
toolbargrippy - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatur...
toolbaritem - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
toolbarpalette - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
toolbarseparator - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature,...
toolbarset - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, re...
...source, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), r...
toolbarspacer - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatu...
toolbarspring - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature...
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbar...
...licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.
treecell - Archive of obsolete content
properties type: space-separated list of property names sets the properties of the element, which can be used to
style the element.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
treecols - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatu...
triple - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
vbox - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
where - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, ...
...resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(...
Getting started with XULRunner - Archive of obsolete content
main.xul: <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="mo...
...typical mozilla writing
style at play here).
Writing a plugin for Mac OS X - Archive of obsolete content
the sample is posted under a bsd-
style license that means you can use it for anything, even if you don't plan to release your source code.
... the three symbols that must always be visible are: np_initialize() np_getentrypoints() np_shutdown() the sample plugin is written entirely in c, using a standard xcode build configuration, so by default all of its symbols are c-
style and visible.
Theme changes in Firefox 3.5 - Archive of obsolete content
this attribute can be used to
style different parts of the browser window inside the private browsing mode.
... supporting 3.5 features video/audio player: controlbar has to be
styled (chrome://global/skin/media/videocontrols.css) shadow effect for disabled text using text-shadow.
-ms-scrollbar-darkshadow-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a
style rule that sets the -ms-scrollbar-darkshadow-color property for a <textarea> element.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doctype html> <html> <head> <title>scrollbar-darkshadow-color</title> <
style> .blueshadow { scrollbar-darkshadow-color: blue; } </
style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.
-ms-scrollbar-shadow-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a
style rule that sets the -ms-scrollbar-shadow-color property for a <textarea> element.
... <!doctype html> <html> <head> <title>scrollbar-shadow-color</title> <
style> .blueshadow { scrollbar-shadow-color: blue; } </
style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.
<feTurbulence> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class
style specific attributes basefrequency numoctaves seed stitchtiles type dom interface this element implements the svgfeturbulenceelement interface.
...dth="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100"
style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification.
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <
style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </
style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing ...
... global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, poi...
<g> - SVG: Scalable Vector Graphics
"0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke...
...now, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<image> - SVG: Scalable Vector Graphics
svg files displayed with <image> are treated as an image: external resources aren't loaded, :visited
styles aren't applied, and they cannot be interactive.
... usage context categoriesgraphics element, graphics referencing elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class
style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
<marker> - SVG: Scalable Vector Graphics
value type: <list-of-numbers> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke...
...valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<mask> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 120%; animatable: yes global attributes core attributes most notably: id styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility ...
... usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> specifications specification status comment css masking module level 1the definition of '<mask>' in that specification.
<metadata> - SVG: Scalable Vector Graphics
bout="#hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:description> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a computer network based on a hub.</desc> <
style> svg { /* default
styles to be inherited */ fill: white; stroke: black; } text { fill: black; stroke: none; } path { fill: none; } </
style> <!-- define symbols used in the svg --> <defs> <!-- hubplug symbol.
... 10 s 40 12 70 10 l 80 20z"/> </g> <g id="monitor"> <title>monitor</title> <desc>a very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> <title>the computer</title> <desc>a desktop computer - broad flat box
style</desc> <rect width="160" height="60"/> <g id="discdrive" transform="translate(70 8)"> <title>disc drive</title> <desc>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <text x="0" y="15...
<pattern> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class,
style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke...
... xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <
style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<pattern>' in that specification.
<script> - SVG: Scalable Vector Graphics
ntloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.
style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element.
... value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class,
style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
<set> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <
style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </
style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.
... value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class,
style event attributes global event attributes, document element event attributes usage notes categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements specifications specification status comment svg animations level 2the definition of '<set>' in that specification.
<text> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <
style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </
style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="sma...
... value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class,
style, font-family, font-size, font-size-adjust, font-stretch, font-
style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill,...
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
svgsvgelement unimplemented attributes: contentscripttype, content
styletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosurelist, checkintersection, checkenclosure g implemented.
...
style module
style implemented.
Basic Transformations - SVG: Scalable Vector Graphics
<svg width="40" height="50"
style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
... <svg width="40" height="50"
style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees.
Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css
stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth).
...some common examples of mixed content include javascript files,
stylesheets, images, videos, and other media.
xml:base - XML: Extensible Markup Language
<html> <head> <base href="https://mydomain.com"> <
style> .link { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </
style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-...
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <
style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></
style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <
style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></
style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors issue while not chang...
command - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
commandset - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
content - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width propiedades tag type: tag name this may be set to a tag name.
dialog - Archive of obsolete content
yhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio...
iframe - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
key - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
menubar - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
notificationbox - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties currentnotification type: notification element the currently displayed notification element or null.
param - Archive of obsolete content
ring literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
preference - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-...
prefwindow - Archive of obsolete content
, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-
stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="...
rule - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
scrollbar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext,
style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelement...
stringbundle - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties applocale obsolete since gecko 1.9.1 type: nsilocale returns the xpcom object which holds information about the user's locale.
tabpanels - Archive of obsolete content
licatearcs, 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, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext,
style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.