Document.lastStyleSheetSet - Web APIs
the document.laststylesheetset property returns the last enabled style sheet set. this property's value changes whenever the document.selectedstylesheetset property is changed. syntax var laststylesheetset = document.laststylesheetset on return, laststylesheetset indicates the style sheet set that was most recently set. if the current style sheet set has not been changed by setting document.selectedstylesheetset, the returned value is null. note: this value doesn't change when document.enablestylesheetsforset() is called. ...
...tset property is changed. syntax var laststylesheetset = document.laststylesheetset on return, laststylesheetset indicates the style sheet set that was most recently set. if the current style sheet set has not been changed by setting document.selectedstylesheetset, the returned value is null. note: this value doesn't change when document.enablestylesheetsforset() is called. ...
...ntax var laststylesheetset = document.laststylesheetset on return, laststylesheetset indicates the style sheet set that was most recently set. if the current style sheet set has not been changed by setting document.selectedstylesheetset, the returned value is null. note: this value doesn't change when document.enablestylesheetsforset() is called. ...
...And 5 more matches

StyleSheet.disabled - Web APIs
working draft no change from document object model (dom) level 2 style specification. ...
... working draft no change from document object model (dom) level 2 style specification. ...
... working draft no change from document object model (dom) level 2 style specification. ...
...And 5 more matches

PI Parameters - XSLT: Extensible Stylesheet Language Transformations
overview xslt supports the concept of passing parameters to a stylesheet when executing it. this has been possible for a while when using the xsltprocessor in javascript. however when using an <?xml-stylesheet?> processing instruction (pi) there used to be no way to provide parameters. to solve this two new pis are implemented in firefox 2 (see supported versions below for details), <?xslt-param?> and <?xslt-param-namespace?>. both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does. the following document passes the two parameters "color" and "size" to the stylesheet "style.xsl". ...
...pis are implemented in firefox 2 (see supported versions below for details), <?xslt-param?> and <?xslt-param-namespace?>. both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does. the following document passes the two parameters "color" and "size" to the stylesheet "style.xsl". <?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript. processing instructions the attributes in the xslt-param and xslt-param-namespace pis are parsed using the rules defined in xml-stylesheet. any unrecognized attributes must be ignored. parsing of any attribute must not fail due to the presence of an u...
...ransformation is done using the xsltprocessor object in javascript. processing instructions the attributes in the xslt-param and xslt-param-namespace pis are parsed using the rules defined in xml-stylesheet. any unrecognized attributes must be ignored. parsing of any attribute must not fail due to the presence of an unrecognized attribute as long as that attribute follows the syntax in xml-stylesheet. both the xslt-param and the xslt-param-namespace pis must appear in the prolog of the document, i.e. before the first element tag. ...
...And 5 more matches

Document.styleSheetSets - Web APIs
the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets. syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available. ...
... the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets. syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available. ...
... the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets. syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available. ...
...And 4 more matches

Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
this document describes the javascript interface in mozilla 1.2 and up to the xslt processing engine (transformiix). creating an xsltprocessor to start, you need to create an xsltprocessor object: var processor = new xsltprocessor(); specifying the stylesheet before you can use it, you must import a stylesheet with the xsltprocessor.importstylesheet() method. it has a single parameter, which is the dom node of the xslt stylesheet to import. note: the import is live, meaning that if you alter the stylesheet dom after importing it, this will be reflected in the processing. rather than modifying the dom it is recommended to use stylesheet parameters which are usually easier and can give better performance. var testtransform = document.implementation.createdocument("", "test", nul...
...nd can give better performance. var testtransform = document.implementation.createdocument("", "test", null); // just an example to get a transform into a script as a dom // xmldocument.load is asynchronous, so all processing happens in the // onload handler testtransform.addeventlistener("load", onload, false); testtransform.load("test-transform.xml"); function onload() { processor.importstylesheet(testtransform); } xsltprocessor.importstylesheet() requires one argument, a dom node. if that node is a document node, you can pass in a full xsl transform or a literal result element transform, otherwise it must be an xsl:stylesheet or xsl:transform element. transforming the document you can use the xsltprocessor.transformtodocument() or xsltprocessor.transformtofragment() methods to transfo...
...ylesheet() requires one argument, a dom node. if that node is a document node, you can pass in a full xsl transform or a literal result element transform, otherwise it must be an xsl:stylesheet or xsl:transform element. transforming the document you can use the xsltprocessor.transformtodocument() or xsltprocessor.transformtofragment() methods to transform a document using the imported xslt stylesheet. ...
...And 4 more matches

JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
this can be done via xmlhttprequest or xmldocument.load(). ...
...this can be done via xmlhttprequest or xmldocument.load(). ...
...this can be done via xmlhttprequest or xmldocument.load(). ...
...And 3 more matches

Document.enableStyleSheetsForSet() - Web APIs
enables the style sheets matching the specified name in the current style sheet set, and disables all other style sheets (except those without a title, which are always enabled). syntax document.enablestylesheetsforset(name); parameters name the name of the style sheets to enable. all style sheets with a title that match this name will be enabled, while all others that have a title will be disabled. specify an empty string for the name parameter to disable all alternate and preferred style sheets (but not the persistent style sheets; that is, those with no title attribute). notes title matches are case-sensitive. ...
...l be enabled, while all others that have a title will be disabled. specify an empty string for the name parameter to disable all alternate and preferred style sheets (but not the persistent style sheets; that is, those with no title attribute). notes title matches are case-sensitive. calling this method with a null name has no effect; if you want to disable all alternate and preferred style sheets, you must pass "", the empty string. stylesheets that don't have a title are never affected by this method. ...
...the persistent style sheets; that is, those with no title attribute). notes title matches are case-sensitive. calling this method with a null name has no effect; if you want to disable all alternate and preferred style sheets, you must pass "", the empty string. stylesheets that don't have a title are never affected by this method. this method never affects the values of document.laststylesheetset or document.preferredstylesheetset. ...
...And 2 more matches

Document.preferredStyleSheetSet - Web APIs
the preferredstylesheetset property returns the preferred style sheet set as set by the page author. syntax preferredstylesheetset = document.preferredstylesheetset on return, preferredstylesheetset indicates the author's preferred style sheet set. this is determined from the order of style sheet declarations and the default-style http header. if there isn't a preferred style sheet set defined by the author, the empty string ("") is returned. ...
...age author. syntax preferredstylesheetset = document.preferredstylesheetset on return, preferredstylesheetset indicates the author's preferred style sheet set. this is determined from the order of style sheet declarations and the default-style http header. if there isn't a preferred style sheet set defined by the author, the empty string ("") is returned. ...
...ocument.preferredstylesheetset on return, preferredstylesheetset indicates the author's preferred style sheet set. this is determined from the order of style sheet declarations and the default-style http header. if there isn't a preferred style sheet set defined by the author, the empty string ("") is returned. ...
...And 2 more matches

Document.selectedStyleSheetSet - Web APIs
the selectedstylesheetset property indicates the name of the style sheet set that's currently in use. syntax currentstylesheetset = document.selectedstylesheetset; document.selectedstylesheet = newstylesheetset; on return, currentstylesheetset indicates the name of the style sheet set currently in use. you can also set the current style sheet set using this property. setting the value of this property is equivalent to calling document.enablestylesheetsforset() with the value of currentstylesheetset, then setting the value of laststylesheetset to that value as well. note: this attribute's value is live; directly changing the disabled attribute on style sheets will affect the value of this attribute. ...
...t using this property. setting the value of this property is equivalent to calling document.enablestylesheetsforset() with the value of currentstylesheetset, then setting the value of laststylesheetset to that value as well. note: this attribute's value is live; directly changing the disabled attribute on style sheets will affect the value of this attribute. ...
...alue of this property is equivalent to calling document.enablestylesheetsforset() with the value of currentstylesheetset, then setting the value of laststylesheetset to that value as well. note: this attribute's value is live; directly changing the disabled attribute on style sheets will affect the value of this attribute. ...
...And 2 more matches

revert - CSS: Cascading Style Sheets
the revert css keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). it can be applied to any css property, including the css shorthand all. this removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached. if used by a site's own styles (the author origin), revert rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default styl...
...ing the css shorthand all. this removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached. if used by a site's own styles (the author origin), revert rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style. ...
... revert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). so if you have a color: green for all sections and all: revert on a specific section the color of the section will be black. ...
...And 2 more matches

stylesheet/style - Archive of obsolete content
experimental modify styles using stylesheet files or css rules. globals constructors style(options) the style constructor creates an object that represents style modifications via stylesheet file(s) or/and css rules. stylesheet file url(s) are verified to be local to an add-on, while css rules are verified to be a string or array of strings. the style created can be applied to a content by calling attach, and removed using detach. those functions are part of content/mod module. parameters options : object required options: name type uri string,array a string, or an array of strings, that represents local uri to stylesheet. source string,array a string, or an array of strings, that contains css rules. those rules are a...
...ch. those functions are part of content/mod module. parameters options : object required options: name type uri string,array a string, or an array of strings, that represents local uri to stylesheet. source string,array a string, or an array of strings, that contains css rules. those rules are applied after the rules in the stylesheet specified with uri options, if provided. optional options: name type type string the type of the sheet. it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". style properties source an array of strings that contains the css rule(s) specified in the constructor's option; null...
...if no type is provided in constructor's option, it returns the default value, "author". ...
...operties source an array of strings that contains the css rule(s) specified in the constructor's option; null if no source option was given to the constructor. this property is read-only. uri an array of strings that contains the stylesheet local uri(s) specified in the constructor's option; null if no uri option was given to the constructor. this property is read-only. type the type of the sheet. if no type is provided in constructor's option, it returns the default value, "author". this property is read-only. ...

At-rules - CSS: Cascading Style Sheets
ntifier and includes everything up to the next semicolon, ';' (u+003b semicolon), or the next css block, whichever comes first. /* general structure */ @identifier (rule); /* example: tells browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet. ...
...semicolon), or the next css block, whichever comes first. /* general structure */ @identifier (rule); /* example: tells browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet. @import — tells the css engine to include an external style sheet. ...
...nated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet. @import — tells the css engine to include an external style sheet. @namespace — tells the css engine that all its content must be considered prefixed with an xml namespace. nested at-rules — a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: @media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. @supports — a conditional group rule that will apply its content if the browser meets the criteria of the given condition. @document — a conditional group rule that will apply its content if t...
...al group rules: @media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. @supports — a conditional group rule that will apply its content if the browser meets the criteria of the given condition. @document — a conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (deferred to level 4 of css spec) @page — describes the aspect of layout changes that will be applied when printing the document. @font-face — describes the aspect of an external font to be downloaded. @keyframes — describes the aspect of intermediate steps in a css animation sequence. @viewport — describes the aspects of...

Detecting CSS animation support - CSS: Cascading Style Sheets
ot...
...otherwise, we can use java...
...otherwise, we can use javascript to create the desired css animat...
...ing javascript, we need to write them out as a css string. all we do is set up a keyframes variable, prefixing each attribute as it's constructed. this variable, once constructed, contains the complete description of all the keyframes needed by our animation sequence. the next task is to actually add the keyframes to the page's css. the first thing to do is look to see if there's already a style sheet on the document; if so, we simply insert the keyframe description into that stylesheet; this is done in lines 13-15. if there isn't already a style sheet, a new <style> element is created, and its content is set to the value of keyframes. then the new <style> element is inserted into the document's <head>, thereby adding the new style sheet to the document. view on jsfiddle ...

XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes there are two types of elements discussed here: top-level elements and instructions. a top-level element must appear as the child of either <xsl:stylesheet> or <xsl:transform>. an instruction, on the other hand, is associated with a template. a stylesheet may include several templates. a third type of element, not discussed here, is the literal result element (lre). an lre also appears in a template. it consists of any non-instruction element that should be copied as-is to the result document, for example, an <hr> element in an html conversion stylesheet. on a related note, any attribute in an lre and some attributes of a limited number of xslt elements can also include what is known as an attribut...
...g"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description of type and position, its source in the w3c recommendation and an explanation of the degree of present gecko support. use the {{listsubpages}} macro once the bcd for <xsl:fallback>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:output>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated. <xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space>...
...ports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> ...
...l:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
ents will need to be presented to human readers. because a browser provides a familiar and highly flexible interface, it is an ideal mechanism for delivering such presentation versions of xml content. built from the ground up utilizing a wide variety of xml technologies, firefox incorporates within itself all of the mechanisms needed to process both original xml documents and the specialized stylesheets used to style and lay them out for html display, reducing server load with client-side processing. at present, gecko (the layout engine behind firefox) supports two forms of xml stylesheets. for basic control of appearance — fonts, colors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further in...
...sing. at present, gecko (the layout engine behind firefox) supports two forms of xml stylesheets. for basic control of appearance — fonts, colors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further information about css, see eric meyer's css pages. our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible stylesheet language/transform and the name is apt. ...
...ors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further information about css, see eric meyer's css pages. our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible stylesheet language/transform and the name is apt. xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format (and in the case of firefox, the focus is on converting it on the fly into html which can then be displayed by the browser). xslt/xpath reference elements xsl:apply-imports (support...
...) xsl:if (supported) xsl:import (mostly supported) xsl:include (supported) xsl:key (supported) xsl:message (supported) xsl:namespace-alias (not supported) xsl:number (partially supported) xsl:otherwise (supported) xsl:output (partially supported) xsl:param (supported) xsl:preserve-space (supported) xsl:processing-instruction xsl:sort (supported) xsl:strip-space (supported) xsl:stylesheet (partially supported) xsl:template (supported) xsl:text (partially supported) xsl:transform (supported) xsl:value-of (partially supported) xsl:variable (supported) xsl:when (supported) xsl:with-param (supported) axes ancestor ancestor-or-self attribute child descendant descendant-or-self following following-sibling namespace (not supported) parent preceding preceding-siblin...

stylesheet/utils - Archive of obsolete content
experimental helper functions for working with stylesheets. globals functions loadsheet(window, uri, type) synchronously loads a style sheet from uri and adds it to the list of additional style sheets of the document. the sheets added takes effect immediately, and only on the document of the window given. parameters window : nsidomwindow uri : string, nsiuri} type : string the type of the sheet. it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". removesheet(window, uri, type) remove the document style sheet at sheeturi from the list of additional style sheets of the document. the removal takes effect immediately. parameters window : nsidomwindow uri : string, nsiuri} type : string the type of the sheet. it accepts...
... returns boolean : true if the type given is valid, otherwise false. ...
...ely. parameters window : nsidomwindow uri : string, nsiuri} type : string the type of the sheet. it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". istypevalid(type) verifies that the type given is a valid stylesheet's type. the values considered valid are: "agent", "user" and "author". parameters type : string the type of the sheet. returns boolean : true if the type given is valid, otherwise false. ...

HTML Cheatsheet - Learn web development
while using html it can be very handy to have an easy way to remember how to use html tags properly and how to apply them. mdn provides you with an extended html documentation as well as a deep instructional html how-to. however, in many cases we just need some quick hints as we go. that's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages. remember that html tags must be used for their semantic, not their appearance. it's always possible to totally change the look and feel of a given tag using css so, when using html, take the time to focus on the meaning rather than the appearance. inline elements an "element" is a single part of a webpage. some elements are large and hold smaller elements like containers. some elements ar...
... a simple paragraph <p>i'm a paragraph</p> <p>i'm another paragraph</p> i'm a paragraph i'm another paragraph an extended quotation <blockquote>the blockquote element indicates an extended quotation.</blockquote> the blockquote element indicates an extended quotation. ...
...aph</p> i'm a paragraph i'm another paragraph an extended quotation <blockquote>the blockquote element indicates an extended quotation.</blockquote> the blockquote element indicates an extended quotation. ...

CSSStyleSheet.cssRules - Web APIs
the read-only cssstylesheet property cssrules returns a live cssrulelist which provides a real-time, up-to-date list of every css rule which comprises the stylesheet. each item in the list is a cssrule defining a single rule. syntax var rules = cssstylesheet.cssrules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet. each entry in the rule list is a cssrule object describing one rule making up the stylesheet. ...
...to-date list of every css rule which comprises the stylesheet. each item in the list is a cssrule defining a single rule. syntax var rules = cssstylesheet.cssrules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet. each entry in the rule list is a cssrule object describing one rule making up the stylesheet. examples individual rules within the stylesheet can then be accessed by index: let rulelist = document.stylesheets[0].cssrules; for (let i=0; i < rulelist.length; i++) { processrule(rulelist[i]); } rules can also be accessed using for...of: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { processrule(rule); } however, because cssrule is not a proper array, you can't use foreach(). specifications ...
...< rulelist.length; i++) { processrule(rulelist[i]); } rules can also be accessed using for...of: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { processrule(rule); } however, because cssrule is not a proper array, you can't use foreach(). specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.cssrules' in that specification. working draft ...

CSSStyleSheet.ownerRule - Web APIs
the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule which imported the stylesheet into the document. if the stylesheet wasn't imported into the document using @import, the returned value is null. syntax var ownerrule = cssstylesheet.ownerrule; value a cssimportrule corresponding to the @import rule which imported the stylesheet into the document. if the stylesheet wasn't imported into the document using @import, the returned value is null. examples this snippet of code looks for rules which were not imported into the document using an @import at-rule. ...
.... syntax var ownerrule = cssstylesheet.ownerrule; value a cssimportrule corresponding to the @import rule which imported the stylesheet into the document. if the stylesheet wasn't imported into the document using @import, the returned value is null. examples this snippet of code looks for rules which were not imported into the document using an @import at-rule. ...
...if the stylesheet wasn't imported into the document using @import, the returned value is null. examples this snippet of code looks for rules which were not imported into the document using an @import at-rule. let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (!rule.ownerrule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (rule.ownerrule) { checkstylesheet(rule.ownerrule.stylesheet); } } specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.ownerrule' in that specification. working draft ...

StyleSheet - Web APIs
an object implementing the stylesheet interface represents a single style sheet. css style sheets will further implement the more specialized cssstylesheet interface. properties stylesheet.disabled is a boolean representing whether the current stylesheet has been applied or not. stylesheet.href read only returns a domstring representing the location of the stylesheet. stylesheet.media read only returns a medialist representing the intended destination medium for style information. stylesheet.ownernode read only returns a node associating this style sheet with the current document. stylesheet.parentstylesheet read only returns a stylesheet including this one, if any; returns null if there aren't any. ...
...g representing the location of the stylesheet. stylesheet.media read only returns a medialist representing the intended destination medium for style information. stylesheet.ownernode read only returns a node associating this style sheet with the current document. stylesheet.parentstylesheet read only returns a stylesheet including this one, if any; returns null if there aren't any. stylesheet.title read only returns a domstring representing the advisory title of the current style sheet. stylesheet.typeread only returns a domstring representing the style sheet language for this style sheet. specifications specification status comment css object model (cssom)the definition of 'stylesheet' in that specification. working draft no change from document ...
... domstring representing the style sheet language for this style sheet. specifications specification status comment css object model (cssom)the definition of 'stylesheet' in that specification. working draft no change from document object model (dom) level 2 style specification. document object model (dom) level 2 style specificationthe definition of 'stylesheet' in that specification. obsolete initial definition. ...

@charset - CSS: Cascading Style Sheets
the @charset css at-rule specifies the character encoding used in the style sheet. it must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. if several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is relevant. @charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content. ...
...everal @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is relevant. @charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content. as there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode byte-order character placed at the beginning of the file. the value given by the charset attribute of the content-type: http header or the equivalent in the protocol used to serve the style sheet. the @charset css at-rule. use the character encoding defined...
...ng defined in the iana-registry, and must be double-quoted, following exactly one space character (u+0020), and immediately terminated with a semicolon. if several names are associated with an encoding, only the one marked with preferred must be used. ...

shape - CSS: Cascading Style Sheets
nal designs are appropriate. round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. ...
...ape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. ...
...ipse for which distinctively rounded designs are appropriate. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. <head> <link rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> specifications specification status css round display level 1the definition of 'shape' in that specification. working draft ...

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). css gives more control over the appearance of a web page to the page creator than to the browser designer or the viewer. 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. ...
...nition 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. ...
...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. since it's likely that different browsers will choose to implement css1 somewhat dif...

Syntax - CSS: Cascading Style Sheets
the css syntax reflects this goal and its basic building blocks are: the property which is an identifier, that is a human-readable name, that defines which feature is considered. the value which describe how the feature must be handled by the engine. each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine. css declarations setting css properties to specific values is the core function of the css language. ...
...it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration. a css declaration block is visualized in the diagram below. note: the content of a css declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an html style attribute. css rulesets if style sheets could only apply a declaration to each element of a web page, they would be pretty useless. the real goal is to apply different declarations to different parts of the document. css allows this by associating conditions with declarations blocks. each (valid) declaration block is preceded by one or more comma-separated selectors, which are conditions selecting some elements of the page. a selecto...
...placing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself. this leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefore the entire rule is ignored (as invalid too). css statements rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. but there is other information that a web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. it will use other and specific kinds of statements to do that. a statement is a building block that begins with any non-space characters and ends ...

Specified value - CSS: Cascading Style Sheets
if none of the above pertain, the element's initial value will be used. ...
... if none of the above pertain, the element's initial value will be used. ...
... if none of the above pertain, the element's initial value will be used. ...

will-change - CSS: Cascading Style Sheets
ronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources. use sparingly. the normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. but adding will-change directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. so it is a good practice to switch will-change on and off using script code before and after the change occurs. don't apply will-change to elements to perform premature optimization. if your page is performing well, don...
...hand expands to. it cannot be one of the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents. the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer hint. chrome currently takes two actions, given particular css property idents: establish a new compositing layer or a new stacking context. via stylesheet it may be appropriate to include will-change in your style sheet for an application that does page flips on key presses like an album or a slide deck presentation where the pages are large and complex. this will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the key is pressed. but use caution with the will-change property directly ...
...it may cause the browser to keep the optimization in memory for much longer than it is needed. ...

Advanced Example - XSLT: Extensible Stylesheet Language Transformations
// importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.getelementbyid("example"); var clonednode = xm...
..."); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the transformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" ord...
...ns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...

XSLT: Extensible Stylesheet Language Transformations
although the process is referred to as "transformation," the original document is not changed; rather, a new xml document is created based on the content of an existing document. then, the new document may be serialized (output) by the processor in standard xml syntax or in another format, such as html or plain text. ...
...tent of an existing document. then, the new document may be serialized (output) by the processor in standard xml syntax or in another format, such as html or plain text. xslt is most often used to convert data between different xml schemas or to convert xml data into web pages or pdf documents. documentation xslt element reference reference. transforming xml with xslt xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format. using the mozilla javascript interface to xsl transformations this document describes the javascript interface to the xslt processing engine in mozilla 1.2 and up. specifying paramet...
...ificant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format. using the mozilla javascript interface to xsl transformations this document describes the javascript interface to the xslt processing engine in mozilla 1.2 and up. specifying parameters using processing instructions firefox allows stylesheet parameters to be specified when using the <?xml-stylesheet?> processing instruction. this is done using the <?xslt-param?> pi described in this document. xslt & xpath tutorial the topxml xslt tutorial introduces you to the basics of xslt concepts, syntax, and programming. xslt tutorial this w3schools tutorial teaches the reader how to use xslt to transform xml documents into other formats, li...

Stylesheet - MDN Web Docs Glossary: Definitions of Web-related terms
a stylesheet is a set of css rules used to control the layout and design of a webpage or document. internal stylesheets are placed inside a <style> element inside the <head> of a web document, and external stylesheets are placed inside a separate .css file, which is applied to a document by referencing the file inside a <link> element in the document's head. external stylesheets are generally preferred because they allow you to control the styling of multiple pages from a single place, rather than having to repeat the css across each page. ...
...al stylesheets are placed inside a separate .css file, which is applied to a document by referencing the file inside a <link> element in the document's head. external stylesheets are generally preferred because they allow you to control the styling of multiple pages from a single place, rather than having to repeat the css across each page. ...

CSSStyleSheet.addRule() - Web APIs
the obsolete cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet. you should avoid using this method, and should instead use the more standard insertrule() method. syntax var result = cssstylesheet.addrule(selector, styleblock, index); parameters selector a domstring specifying the selector portion of the css rule. the default is the string undefined. styleblock a domstring indicating the style block to apply to elements matching the selector. the default is the string undefined. index optional an optional index into the stylesheet's cssrulelist at which to insert the new rule. if index is not specified, the next index after the last item currently in the list is used (that is, the value of cssstylesheet.cssrules.length). return value always retu...
...t estoteric rules about where you can legally insert rules, it's possible that an exception may be thrown. see insertrule() for more information. usage notes this method is implemented by browsers by constructing a string using the template literal `${selector}{${styleblock}}`, then passing it into the standard insertrule() method. therefore, given existing code such as the following: cssstylesheet.addrule(selector, styles, 0); you can rewrite this to use the more standard insertrule() like this: cssstylesheet.insertrule(`${selector} {${styles}}`, 0); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.addrule()' in that specification. working draft ...

CSSStyleSheet.removeRule() - Web APIs
the obsolete cssstylesheet method removerule() removes a rule from the stylesheet object. it is functionally identical to the standard, preferred method deleterule(). note: this is a legacy method which has been replaced by the standard method deleterule(). you should use that instead. syntax cssstylesheet.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 mystyles. ...
...'s cssrulelist indicating the rule to be removed. return value undefined example this example removes the first rule from the stylesheet mystyles. mystyles.removerule(0); you can rewrite this to use the standard deleterule() method very easily: mystyles.deleterule(0); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.removerule()' in that specification. working draft ...

CSSStyleSheet.rules - Web APIs
rules is a deprecated legacy property of the cssstylesheet interface. functionally identical to the preferred cssrules property, it provides access to a live-updating list of the css rules comprising the stylesheet. note: as a legacy property, you not use rules and should instead use the preferred cssrules. while rules is unlikely to be removed soon, its availability is not as widespread and using it will result in compatibility problems for your site or app. syntax var rules = cssstylesheet.rules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet. each entry in the rule list is a cssrule object describing one rule making up the stylesheet. specifications specification status comment css object model (cssom)the defini...
...n compatibility problems for your site or app. syntax var rules = cssstylesheet.rules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet. each entry in the rule list is a cssrule object describing one rule making up the stylesheet. specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.rules' in that specification. working draft ...

Stylesheet.href - Web APIs
the href property of the stylesheet interface returns the location of the style sheet. syntax uri = stylesheet.href parameters uri is a string containing the stylesheet's uri. example // on a local machine: <html> <head> <link rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location. for inline style sheets, the value of this attribute is null. this property is read-only in firefox, opera, google chrome, and safari, and it is...
...s notes if the style sheet is a linked style sheet, the value of its attribute is its location. for inline style sheets, the value of this attribute is null. this property is read-only in firefox, opera, google chrome, and safari, and it is read/write in internet explorer. specifications specification status comment css object model (cssom)the definition of 'stylesheet: href' in that specification. working draft ...

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. ...
...<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. working draft ...

StyleSheetList - Web APIs
the stylesheetlist interface represents a list of stylesheet. it is an array-like object but can't be iterated over using array methods. however it can be iterated over in a standard for loop over its indices, or converted to an array. 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. ...
...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 'cssstylesheetlist' in that specification. working draft ...

@document - CSS: Cascading Style Sheets
@document url("https://www.example.com/") { h1 { color: green; } } syntax an @document rule can specify one or more matching functions. if any of the functions apply to a given url, the rule will take effect on that url. the functions available are: url(), which matches an exact url. url-prefix(), which matches if the document url starts with the value provided. ...
... @document is currently only supported in firefox; if you wanted to replicate using such functionality in your own non-firefox browser, you could try using this polyfill by @an-error94, which uses a combination of a user script, data-* attributes, and attribute selectors. note: there is a -moz-prefixed version of this property — @-moz-document. this has been limited to use only in user and ua sheets in firefox 59 in nightly and beta — an experiment designed to mitigate potential css injection attacks (see bug 1035091). formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples specifying document for css rule @document url("http://www.w3.org/"), url-prefix("http://www.w3.org/st...

@import - CSS: Cascading Style Sheets
syntax @import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; where: url is a <string> or a <url> representing the location of the resource to import. the url may be absolute or relative. note that the url for a mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). see here for more information. ...
... '@import' in that specification. candidate recommendation media queriesthe definition of '@import' in that specification. recommendation extended the syntax to support any media query and not only simple media types. css level 2 (revision 1)the definition of '@import' in that specification. recommendation added support for <string> to denote the url of a stylesheet, and requirement to insert the @import rule at the beginning of the css document. css level 1the definition of '@import' in that specification. recommendation initial definition ...

color-index - CSS: Cascading Style Sheets
h a table.) it is a range feature, meaning that you can also use the prefixed min-color-index and max-color-index variants to query minimum and maximum values, respectively. ...
...that you can also use the prefixed min-color-index and max-color-index variants to query minimum and maximum values, respectively. examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 colors. <link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification. candidate recommendation t...

@namespace - CSS: Cascading Style Sheets
@namespace is an at-rule that defines xml namespaces to be used in a css style sheet. syntax /* default namespace */ @namespace url(xml-namespace-url); @namespace "xml-namespace-url"; /* prefixed namespace */ @namespace prefix url(xml-namespace-url); @namespace prefix "xml-namespace-url"; description the defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace. the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html5 with inline svg or mathml, or xml that mixes multiple vocabularies. any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet. @namespace can be used to defin...
...ce. the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html5 with inline svg or mathml, or xml that mixes multiple vocabularies. any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet. @namespace can be used to define the default namespace for the style sheet. when a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements in that namespace. the @namespace rule can also be used to define a namespace prefix. when a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace and name of the element or attribute mat...

@page - CSS: Cascading Style Sheets
marks adds crop and/or registration marks to the document. ...
... marks adds crop and/or registration marks to the document. ...

Specificity - CSS: Cascading Style Sheets
al selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity. (the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity. the !important exception when an important rule is used on a style declaration, this declaration overrides any other declarations. although technically !important has nothing to do with specificity, it interacts directly with it. using !important, however, is bad practice and should be avoided because it makes debugging more diffic...
... specificity. the !important exception when an important rule is used on a style declaration, this declaration overrides any other declarations. although technically !important has nothing to do with specificity, it interacts directly with it. using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. when two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied. some rules of thumb: always look for a way to use specificity before even considering !important only use !important on page-specific css that overrides foreign css (from external libraries, like bootstrap or normalize.css). never use !imp...

CSS Tutorials - CSS: Cascading Style Sheets
editor's note: we should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built. beginner-level css tutorials getting started this guide is aimed at complete beginners: you haven't written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to resize images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the size of the screens, or...
...ndamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to resize images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. media queries are the fundamental building blocks in achieving web sites that render everywhere in their best quality. understanding z-index controlling superposition of boxes is a basic feature that is very quickly needed by web developers. though not that difficult, it requires a basic knowledge of css. intermediate-level css tutorials after the release of css 2 (le...

all - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... specifies that all the element's properties should be changed to their initial values. inherit specifies that all the element's properties should be changed to their inherited values. unset specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not. revert specifies behavior that depends on the stylesheet origin to which the declaration belongs: user-agent origin equivalent to unset. user origin rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element. author origin rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
rowsers to achieve the same thing. note that firefox and edge also support -webkit-appearance, for compatibility reasons. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the -moz-appearance property was used in xul stylesheets to design custom widgets with platform-appropriate styling. it was also used in the xbl implementations of the widgets that ship with the mozilla platform. starting with gecko/firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets. compatibility note: if you wish to use this property on websites, you should test it very carefu...
... searchfield-cancel-button div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>lorem</div> chrome safari edge snapshotted-plugin-overlay div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; } <div>lorem</div> safari sheet div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; } <div>lorem</div> none slider-vertical div{ color: black; -webkit-appearance: slider-vertical; } <div>lorem</div> chrome safari edge sliderthumb-horizontal div{ color: black; -webkit-appearance: slider-thumb-horizontal; }...

attr() - CSS: Cascading Style Sheets
it can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned. ...
...olor> the attribute value is parsed as a hash (3- or 6-value hash) or a keyword. it must be a valid css <string> value. leading and trailing spaces are stripped. currentcolor url <url> the attribute value is parsed as a string that is used inside a css url() function. relative url are resolved relatively to the original document, not relatively to the style sheet. leading and trailing spaces are stripped. the url about:invalid that points to a non-existent document with a generic error condition. integer <integer> the attribute value is parsed as a css <integer>. if it is not valid, that is not an integer or out of the range accepted by the css property, the default value is used. leading and trailing spaces are strippe...

ime-mode - CSS: Cascading Style Sheets
e. this property should only be used for private web applications or to undo the property if it was previously set by legacy code. syntax the ime-mode property is specified using one of the keyword values listed below. values auto no change is made to the current input method editor state. this is the default. normal the ime state should be normal; this value can be used in a user style sheet to override the page's setting. this value is not supported by internet explorer. active the input method editor is initially active; text entry is performed through it unless the user specifically dismisses it. not supported on linux. inactive the input method editor is initially inactive, but the user may activate it if they wish. not supported on linux. disabled the input method editor i...
...nd may not be activated by the user. description unlike internet explorer, firefox's implementation of ime-mode allows this property on <input type="password">. however, this makes for a bad user experience, and password fields should not enable the ime. users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following css into their user stylesheet: input[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value. formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | norm...

url() - CSS: Cascading Style Sheets
the url() functional notation is the value for the <url> data type. ...
...r-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ... } @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet (not to the url of the web page). the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls. in css level 2, the definition of url() wa...

CSS: Cascading Style Sheets
css describes how elements should be rendered on screen, on paper, in speech, or on other media. css among the core languages of the open web and is standardized across web browsers according to the w3c specification. previously development of various parts of css specification was done synchronously, which allowed versioning of the latest recommendation. you might have heard about css1, css2.1, css3. however, css4 has never become an official version. ...
...lopers describes every property and concept of css. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started tutorials our css learning area features multiple modules that teach css from the ground up — no previous knowledge required. css first steps css (cascading style sheets) is used to style and layout 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. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css buildi...

Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
to find out the current type, load the file in mozilla and look at the page info. or use a download tool, those usually tell the mime type. in firefox 6 and forward, you can also use the official xslt mimetype: application/xslt+xml. namespace the xslt 1.0 namespace is http://www.w3.org/1999/xsl/transform. older versions of ie used a different namespace. however these versions also used a draft version of xslt which is incompatible with what eventually became the xslt 1.0 specification. firefox only supports the official xslt 1.0 version. ...
... output document works. however firefox never serializes the output document and so the attribute isn't really applicable. while we could try to add some heuristics to serialize and reparse just the part of the output document which has disable-output-escaping applied, heuristics often get things wrong and lead to surprising results, hence we've been reluctant to add this so far. often times stylesheets contain code like <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text>, this is equivalent to simply putting &#160; in the stylesheet which will work great in all xslt engines. we do realize that the lack of disable-output-escaping is a problem and we'd like to find a solution for it, however so far we haven't found any good solutions. the <xsl:namespace-alias> element. if you'd like to ...

<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:namespace-alias> element is a rarely used device that maps a namespace in the stylesheet to a different namespace in the output tree. the most common use for this element is in generating a stylesheet from another stylesheet. to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree. syntax <xsl:namespace-alias stylesheet-prefix=name result-prefix=name /> required attributes stylesheet-prefix specifies the temporary namespace. result-prefix specifies the desired nam...
...porary namespace which is appropriately re-converted back to the xslt namespace in the output tree. syntax <xsl:namespace-alias stylesheet-prefix=name result-prefix=name /> required attributes stylesheet-prefix specifies the temporary namespace. result-prefix specifies the desired namespace for the output tree. optional attributes none. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 7.1.1 gecko support not supported at this time. ...

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
thor: jay greenspan location: http://hotwired.lycos.com/webmonkey/...l?tw=authoring what is xslt? author: g. ...
...ndex.html tutorials/examples zvon xsl programmers: http://www.zvon.org/o_html/group_xsl.html jeni's xslt pages index: http://www.jenitennison.com/xslt/ xmlpitstop.com stylesheet center: http://www.xmlpitstop.com/default.asp?datatype=ssc xsl tutorial index: http://www.nwalsh.com/docs/tutorials/xsl/ other cover pages extensible stylesheet language (xsl): http://www.oasis-open.org/cover/xsl.html xsl-list subscribe: http://www.mulberrytech.com/xsl/xsl-list/ archives: http://www.biglist.com/lists/xsl-list/archives/ the xsl-list is a very active general mailing list, hosted by mulberry technologies mozilla.dev.tech.xslt google groups: http://groups.google.com/group/mozilla.dev.tech.xslt t...

Block and Line Layout Cheat Sheet - Archive of obsolete content
it's a work-in-progress, with questions in red highlight. if you know the answer, please pass it along to me so i can update the document. objects this section presents some of the classes involved in block and line reflow, along with important members of each object that control reflow processing. nsframe the base class for all frames. mflags flags set on the frame to indicate its state. ...

CSSRule.parentStyleSheet - Web APIs
the parentstylesheet property of the cssrule interface returns the stylesheet object in which the current rule is defined. syntax var stylesheet = cssrule.parentstylesheet parameters stylesheet is a stylesheet object. example if (bgrule.parentstylesheet != mysheet) { // alien style rule! } specifications specification status comment css object model (cssom)the definition of 'cssrule: parentstylesheet' in that specification. working draft ...

CSSStyleSheet.deleteRule() - Web APIs
the cssstylesheet method deleterule() removes a rule from the stylesheet object. syntax cssstylesheet.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 mystyles. mystyles.deleterule(0); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.deleterule()' in that specification. working draft ...

StyleSheet.title - Web APIs
the title property of the stylesheet interface returns the advisory title of the current style sheet. the title is often specified in the ownernode. specifications specification status comment css object model (cssom)the definition of 'stylesheet: title' in that specification. working draft ...

StyleSheet.type - Web APIs
the type property of the stylesheet interface specifies the style sheet language for the given style sheet. syntax string = stylesheet.type example mystylesheet.type = 'text/css'; specifications specification status comment css object model (cssom)the definition of 'stylesheet: type' in that specification. working draft ...

-webkit-border-before - CSS: Cascading Style Sheets
/* border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. ...

:-webkit-autofill - CSS: Cascading Style Sheets
the :-webkit-autofill css pseudo-class matches when an <input> element has its value autofilled by the browser. note: the user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to javascript hacks. syntax :-webkit-autofill specifications not part of any standard. ...

:fullscreen - CSS: Cascading Style Sheets
the :fullscreen css pseudo-class matches every element which is currently in full-screen mode. if multiple elements have been put into full-screen mode, this selects them all. 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. examples in this example, the color of a button is changed depending on whether or not the document is in full-screen mode. 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 automaticall...

:has() - CSS: Cascading Style Sheets
> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s description the :has() pseudo-class takes a relative selector list as an argument. in earlier revisions of the css selectors level 4 specification, :has had a limitation that it couldn't be used within stylesheets. instead, it could only be used with functions like document.queryselector(); this was due to performance concerns. this limitation has been removed because no browser implemented it that way. instead, browsers currently only support the use of :has() within stylesheets. examples matching <a> elements that directly contain an <img> the following selector matches only <a> elements that directl...

:scope - CSS: Cascading Style Sheets
when used from a dom api such as queryselector(), queryselectorall(), matches(), or element.closest(), :scope matches the element on which the method was called. ...

src - CSS: Cascading Style Sheets
font face names. when a font is needed the user agent iterates over the set of references listed using the first one it can successfully activate. fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list. as with other urls in css, the url may be relative, in which case it is resolved relative to the location of the style sheet containing the @font-face rule. in the case of svg fonts, the url points to an element within a document containing svg font definitions. if the element reference is omitted, a reference to the first defined font is implied. similarly, font container formats that can contain more than one font load only one of the fonts for a given @font-face rule. fragment identifiers are used to indicate which ...

device-height - CSS: Cascading Style Sheets
the device-height css media feature can be used to test the height of an output device's rendering surface. syntax the device-height feature is specified as a <length> value. it is a range feature, meaning that you can also use the prefixed min-device-height and max-device-height variants to query minimum and maximum values, respectively. examples this html applies a special stylesheet for devices that are shorter than 800 pixels. <link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-height' in that specification. candidate recommendation deprecated in media queries level 4. media queriesthe d...

device-width - CSS: Cascading Style Sheets
the device-width css media feature can be used to test the width of an output device's rendering surface. syntax the device-width feature is specified as a <length> value. it is a range feature, meaning that you can also use the prefixed min-device-width and max-device-width variants to query minimum and maximum values, respectively. examples this html applies a special stylesheet for devices that are narrower than 800 pixels. <link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-width' in that specification. candidate recommendation deprecated in media queries level 4. media queriesthe defini...

prefers-reduced-data - CSS: Cascading Style Sheets
the following example will not work. ...

@media - CSS: Cascading Style Sheets
with it, you specify a media query and a block of css to apply to the document if and only if the media query matches the device on which the content is being used. note: in javascript, the rules created using @media can be accessed with the cssmediarule css object model interface. syntax the @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule. ...

marks - CSS: Cascading Style Sheets
crop marks and cross marks are printed outside the page box. to have room to show crop and cross marks, the final pages will have to be somewhat bigger than the page box. syntax /* keyword values */ marks: none; marks: crop; marks: cross; marks: crop cross; values crop crop marks will be displayed. cross cross marks will be displayed. ...

size - CSS: Cascading Style Sheets
it; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page. in most cases, the dimensions and orientation of the target sheet are used. landscape the content of the page is displayed in landscape mode (i.e. the longest side of the box is horizontal). portrait the content of the page is displayed in portrait mode (i.e. the longest side of the box is vertical). this is the default orientation. <length> any length value (see <length>). the first value corresponds to the width of the page box and the second one corres...

CSSOM View - CSS: Cascading Style Sheets
cssom view is a module of css that lets you manipulate the visual view of a document, in particular its scrolling behavior. reference properties scroll-behavior guides coordinate systems a guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing. specifications specification status comment css object model (cssom) view module working draft initial definition. ...

Box alignment in grid layout - CSS: Cascading Style Sheets
ibility. you could double up the properties and use both as you would for vendor prefixes. ...

Box alignment in Flexbox - CSS: Cascading Style Sheets
ll create spacing between adjacent flex lines, therefore flex-wrap must also be set to wrap for this to have any effect. reference css properties justify-content align-content place-content justify-items align-items place-items align-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in flexbox external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...

CSS Box Alignment - CSS: Cascading Style Sheets
ign-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis alignment container alignment subject fallback alignment guides css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css grid guide: box alignment in css grid layouts external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...

CSS Charsets - CSS: Cascading Style Sheets
css charsets is a module of css that lets you specify the character set used in the style sheet. reference at-rules @charset specifications specification status comment css level 2 (revision 1)the definition of '@charset' in that specification. recommendation initial definition ...

Basic Concepts of Multicol - CSS: Cascading Style Sheets
s guide explains how the specification works with some common use case examples. key concepts and terminology multicol is unlike any of the other layout methods we have in css in that it fragments the content, including all descendent elements, into columns. this happens in the same way that content is fragmented into pages when we work with css paged media, for example by creating a print stylesheet. the properties defined by the specification are: column-width column-count columns column-rule-color column-rule-style column-rule-width column-rule column-span column-fill column-gap by adding column-count or column-width to an element, that element becomes a multi-column container, or multicol container for short. the columns are anonymous boxes and described as column boxes in ...

CSS Conditional Rules - CSS: Cascading Style Sheets
css conditional rules is a css module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to. reference at-rules @document @media @supports @import specifications specification status comment css conditional rules module level 3 candidate recommendation initial definition ...

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
xploring flexbox alignment in depth is to do so alongside looking at alignment in grid layout. both specifications use the alignment properties as detailed in the box alignment specification. you can see how these properties behave when working with a grid in the mdn article box alignment in grid layout, and i have also compared how alignment works in these specifications in my box alignment cheatsheet. see also box alignment box alignment in flexbox box alignment in grid layout ...

Block and inline layout in normal flow - CSS: Cascading Style Sheets
working in english and therefore a horizontal writing mode. however, everything described should work in the same way if your document is in a vertical writing mode. as defined in the specification, the margins between two block boxes are what creates separation between the elements. we see this with a very simple layout of two paragraphs, to which i have added a border. the default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom. if we set margins on the paragraph element to 0 then the borders will touch. by default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. if we give them a width, they will continue to lay out one belo...

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
sing the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line. the specification warns authors (the csswg term for web developers) not to do this reordering. authors must use order and the grid-placement properties only for visual, not logical, reordering of content. style sheets that use these features to perform logical reordering are non-conforming. what does this mean for designing with grid layout in practice? visual not logical re-ordering any time you reorder things with grid layout – or with flexbox – you only perform visual reordering. the underlying source is what controls things like text to speech, and the tab order of the document. you can see how th...

Using CSS transitions - CSS: Cascading Style Sheets
transition-timing-function specifies a function to define how intermediate values for properties are computed. timing functions determine how intermediate values of the transition are calculated. most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. you can also choose easing from easing functions cheat sheet. transition-timing-function: ease <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transi...

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. by design, comments have no effect on the layout of a document. syntax comments can be placed wherever white space is allowed within a style sheet. they can be used on a single line, or traverse multiple lines. /* comment */ examples /* a one-line comment */ /* a comment which stretches over several lines */ /* the comment below is used to disable specific styling */ /* span { color: blue; font-size: 1.5em; } */ notes the /* */ comment syntax is used for both single and multiline comments. 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 b...

Using media queries - CSS: Cascading Style Sheets
y number of media feature expressions. multiple queries can be combined in various ways by using logical operators. media queries are case-insensitive. a media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. queries involving unknown media types are always false. note: a style sheet with a media query attached to its <link> tag will still download even if the query returns false. nevertheless, its contents will not apply unless and until the result of the query changes to true. media types media types describe the general category of a device. except when using the not or only logical operators, the media type is optional and the all type will be implied. all suitable...

Media queries - CSS: Cascading Style Sheets
pending on the presence or value of various device characteristics and parameters. they are a key component of responsive design. for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens. in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied. in the <source> element's media attribute, they define the media to which that source shoul...

CSS reference - CSS: Cascading Style Sheets
perties specificity value definition syntax css unit and value types values actual value computed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmlelement.style htmlelement.style.csstext (just style) element.classname element.classlist important methods cssstylesheet.insertrule() cssstylesheet.deleterule() ...

Replaced elements - CSS: Cascading Style Sheets
ide the scope of css; they're external objects whose representation is independent of the css formatting model. put in simpler terms, they're elements whose contents are not affected by the current document's styles. the position of the replaced element can be affected using css, but not the contents of the replaced element itself. some replaced elements, such as <iframe> elements, may have stylesheets of their own, but they don't inherit the styles of the parent document. the only other impact css can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box. see controlling object position within the content box for further information. replaced elements typical replaced elements are: <iframe> <video> <em...

Selector list - CSS: Cascading Style Sheets
syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists. ...

Shorthand properties - CSS: Cascading Style Sheets
the css specification defines shorthand properties to group the definition of common properties acting on the same theme. for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. ...

Tools - CSS: Cascading Style Sheets
useful tool, but will be!linear-gradient generatorthis tool can be used to create custom css3 linear-gradient() backgrounds. other tools css animation - stylie to check the device display information (helpful in responsive web design) - mydevice.io css menus - cssmenumaker.com a mighty, modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...

aspect-ratio - CSS: Cascading Style Sheets
nd internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification. editor's draft ...

border-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

border-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

border-block - CSS: Cascading Style Sheets
border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-color setting both the start and end in the block dimension at once. the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. ...

border-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

border-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

border-inline - CSS: Cascading Style Sheets
border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to which border-inline maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation. ...

font-family - CSS: Cascading Style Sheets
families, the first with a <family-name> and the second with a <generic-name>: font-family: gill sans extrabold, sans-serif; values <family-name> the name of a font family. for example, "times" and "helvetica" are font families. font family names containing whitespace should be quoted. <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. generic family names are keywords and must not be quoted. a generic font family should be the last item in the list of font family names. the following keywords are defined: serif glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings. e.g. lucida bright, lucida fax, palatino, "palatino linoty...

font-size-adjust - CSS: Cascading Style Sheets
ifferent aspect ratio (the ratio of the size of lowercase letters to the size of the font). to use this property in a way that is compatible with browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by. this means the value specified for the property should generally be the aspect ratio of the first choice font. for example, a style sheet that specifies: font-size: 14px; font-size-adjust: 0.5; ... is really specifying that the lowercase letters of the font should be 7px high (0.5 × 14px). this will still produce reasonable results in browsers that do not support font-size-adjust, where a 14px font will be used. syntax values none choose the size of the font based only on the font-size property. <number> choose the ...

font-variant-alternates - CSS: Cascading Style Sheets
/ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters. this property allows those human-readable names (defined in @font-feature-values) in the stylesheet. syntax this property may take one of two forms: either the keyword normal or one or more of the other keywords and functions listed below, space-separated, in any order. values normal this keyword deactivates alternate glyphs. historical-forms this keyword enables historical forms — glyphs that were common in the past but not today. it corresponds to the opentype value hist. sty...

font-variant-ligatures - CSS: Cascading Style Sheets
n-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 ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discretionary-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-discreti...

Inheritance - CSS: Cascading Style Sheets
hors to explicitly specify inheritance. it works on both inherited and non-inherited properties. you can control inheritance for all properties at once using the all shorthand property, which applies its value to all properties. 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. then it doubles the font size and applies a font-weight of "bold". see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and m...

initial - CSS: Cascading Style Sheets
full support no support no supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use. see also use unset to set a property to its inherited value if it inherits, or to its initial value if not. use revert to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist). use inherit to make an element's property the same as its parent. the all property lets you reset all properties to their initial, inherited, reverted, or unset state at once. ...

Initial value - CSS: Cascading Style Sheets
d properties, the initial value is used on the root element only, as long as no specified value is supplied. for non-inherited properties, the initial value is used on all elements, as long as no specified value is supplied. you can explicitly specify the initial value by using the initial keyword. note: the initial value should not be confused with the value specified by the browser's style sheet. specifications specification status comment css cascade 4 formal definition. css level 2 (revision 1)the definition of 'initial value' in that specification. recommendation implicit definition. ...

shape-outside - CSS: Cascading Style Sheets
defaults to margin-box. <image> the float area is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold. note: user agents must use the potentially cors-enabled fetch method defined by the html5 specification for all urls in a shape-outside value. when fetching, user agents must use "anonymous" mode, set the referrer source to the stylesheet's url, and set the origin to the url of the containing document. if this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified. interpolation when animating between one <basic-shape> and a second, the rules below are applied. the values in the shape functions interpolate as a simple list. the list values interpolate as <le...

<url> - CSS: Cascading Style Sheets
sary, since urns are almost never used in actual css. to alleviate the confusion, css level 3 returned to the narrower, initial definition. now, url() denotes only true <url>s. syntax the <url> data type is specified using the url() functional notation. it may be written without quotes, or surrounded by single or double quotes. relative urls are allowed, and are relative to the url of the stylesheet (not to the url of the web page). if you choose to write the url without quotes, use a backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the url. <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycurso...

Regular expression syntax cheatsheet - JavaScript
if you need more information on a specific topic, please follow the link on the corresponding heading to access the full article or head to the guide. character classes if you are looking to contribute to this document, please also edit the original article characters meaning . has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029. for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. ...

<xsl:apply-imports> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:apply-imports> element is fairly arcane, used mostly in complex stylesheets. import precedence requires that template rules in main stylesheets have higher precedence than template rules in imported stylesheets. sometimes, however, it is useful to be able to force the processor to use a template rule from the (lower precedence) imported stylesheet rather than an equivalent rule in the main stylesheet. syntax <xsl:apply-imports/> required attributes none. optional attributes none. type instruction, appears within a template. defined xslt, section 5.6. gecko support supported. ...

<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
l:attribute-set> required attributes name specifies the name of the attribute set. the name must be a valid qname. optional attributes use-attribute-sets builds an attribute set from other attribute sets. the names of the contributing sets must be separated with whitespace characters and must not directly or indirectly embed themselves. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 7.1.4. gecko support supported. ...

<xsl:attribute> - XSLT: Extensible Stylesheet Language Transformations
the element must be defined before any other output document element inside the output document element for which it establishes attribute values. but it may be after or inside elements that won't be part of the output (like <xsl:choose> or <xsl:apply-templates> etc.). ...

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
er. the default is (‰). zero-digit specifies the digit zero character. the default is (0). digit specifies the character used in the format pattern to stand for a digit. the default is (#). pattern-separator specifies the character separating positive and negative subpatterns in a format pattern. the default is the semi-colon (;). type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 12.3. gecko support supported as of 1.0 (mozilla 1.0, netscape 7.0). ...

<xsl:import> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:import> element is a top-level element that serves to import the contents of one stylesheet into another stylesheet. generally speaking, the contents of the imported stylesheet have a lower import precedence than that of the importing stylesheet. this is in contrast to <xsl:include> where the contents of the included stylesheet have exactly the same precedence as the contents of the including stylesheet. syntax <xsl:import href=uri /> required attributes href specifies the uri of the stylesheet to import. optional attributes none. type top-level, must appear before any other child of <xsl:stylesheet> or <xsl:transform> in the importing stylesheet. defined xslt, section 2.6.

<xsl:include> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:include> element merges the contents of one stylesheet with another. unlike the case of <xsl:import>, the contents of an included stylesheet have exactly the same precedence as the contents of the including stylesheet. syntax <xsl:include href=uri /> required attributes href specifies the uri of the stylesheet to include. optional attributes none. type top-level, may appear in any order as a child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 2.6.1. gecko support supported. ...

<xsl:key> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:key> element declares a named key which can be used elsewhere in the stylesheet with the key( ) function. syntax <xsl:key name=name match=expression use=expression /> required attributes name specifies a name for this key. must be a qname. match defines the nodes for which this key is applicable. use specifies an xpath expression that will be used to determine the value of the key for each of the applicable nodes. optional attributes none. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 12.2. gecko support supported. ...

<xsl:message> - XSLT: Extensible Stylesheet Language Transformations
it can be useful for debugging. syntax <xsl:message terminate="yes" | "no" > template </xsl:message> required attributes none. optional attributes terminate set to "yes", indicates that execution should be terminated. ...

<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
ion in the output document. cdata-section-elements lists elements whose text contents should be written as cdata sections. elements should be whitespace separated. indent (not supported.) specifies if the output should be indented to indicate its hierarchic structure. media-type (not supported.) specifies the output document mime type. type top-level, must be the child <xsl:stylesheet> or <xsl:transform>. defined xslt, section 16. gecko support partial support. see comments above. ...

<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
mes with a whitespace character. preserving whitespace is the default setting, so this element only needs to be used to counteract an <xsl:strip-space> element. syntax <xsl:preserve-space elements=list-of-element-names /> required attributes elements specifies the elements for which whitespace should be preserved. optional attributes none. type top-level, must be a child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 3.4 gecko support supported. ...

<xsl:strip-space> - XSLT: Extensible Stylesheet Language Transformations
defined xslt, section 3.4 gecko support supported. ...

<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
or this template, which can be matched by an attribute of the <xsl:apply-templates> element. this is useful for processing the same information in multiple ways. priority specifies a numeric priority for this template. this can be any number other than infinity. the processor uses this number when more than one template matches the same node. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 5.3. gecko support supported. ...

<xsl:transform> - XSLT: Extensible Stylesheet Language Transformations
gecko support supported. ...

<xsl:variable> - XSLT: Extensible Stylesheet Language Transformations
because xslt permits no side-effects, once the value of the variable has been established, it remains the same until the variable goes out of scope syntax <xsl:variable name=name select=expression > template </xsl:variable> required attributes name gives the variable a name. optional attributes select defines the value of the variable through an xpath expression. ...

Resources - XSLT: Extensible Stylesheet Language Transformations
...

The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
upported) xsl:import (mostly supported) xsl:include (supported) xsl:key (supported) xsl:message (supported) xsl:namespace-alias (not supported) xsl:number (partially supported) xsl:otherwise (supported) xsl:output (partially supported) xsl:param (supported) xsl:preserve-space (supported) xsl:processing-instruction xsl:sort (supported) xsl:strip-space (supported) xsl:stylesheet (partially supported) xsl:template (supported) xsl:text (partially supported) xsl:transform (supported) xsl:value-of (partially supported) xsl:variable (supported) xsl:when (supported) xsl:with-param (supported) axes ancestor ancestor-or-self attribute child descendant descendant-or-self following following-sibling namespace (not supported) parent preceding precedi...

Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
ting parameters while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from javascript may be even more useful. for example, javascript and xslt could be used to sort xml data and then display it. the sorting would have to alternate between ascending and descending sorting. xslt provides the xsl:param element, which is a child of the xsl:stylesheet element. xsltprocessor provides three javascript methods to interact with these parameters: xsltprocessor.setparameter(), xsltprocessor.getparameter() and xsltprocessor.removeparameter(). they all take as the first argument the namespace uri of the xsl:param (usually the param will fall in the default namespace, so passing in null will suffice.) the local name of the xsl:param is the second argum...

Building accessible custom components in XUL - Archive of obsolete content
of built-in controls than html. there is generally no need to build your own xul tab bar or treeview. firefox ships with a tabbox element and a tree element, and these elements are fully accessible out-of-the-box. however, if you are building custom controls in xul, you may need to use dhtml accessibility techniques to ensure that your custom controls are equally accessible. a super-simple spreadsheet download stage-1.zip install stage-1.xpi to build our xul spreadsheet, we'll use three built-in xul controls: a single grid element to contain the other elements and position them in rows and columns. description elements for each row and column header. label elements for each cell in the spreadsheet. the xul markup is straightforward. we define the grid, then define the headers for each row ...
...the value attribute. the flex attributes are simply for layout. note: the row and column headers are denoted by description elements, and individual cells are denoted by label elements. this is not an accessibility requirement; as we'll see in the next section, the actual xul elements are irrelevant because we will define the role of each element in a separate attribute. ...
...e flex attributes are simply for layout. note: the row and column headers are denoted by description elements, and individual cells are denoted by label elements. this is not an accessibility requirement; as we'll see in the next section, the actual xul elements are irrelevant because we will define the role of each element in a separate attribute. ...
...And 50 more matches

Index - Web APIs
in the form of a css selector. 451 cssrule api, cssom, interface, reference the cssrule interface represents a single css rule. there are several types of rules, listed in the type constants section below. 452 cssrule.csstext api, cssom, needsspectable, property, reference the csstext property of the cssrule interface returns the actual text of a cssstylesheet style-rule. 453 cssrule.parentstylesheet api, cssom, cssrule, needsspectable, property, reference the parentstylesheet property of the cssrule interface returns the stylesheet object in which the current rule is defined. 454 cssrulelist api, cssom, interface, reference a cssrulelist is an (indirect-modify only) array-like object containing an ordered coll...
...ylerule, interface, reference cssstylerule represents a single css style rule. it implements the cssrule interface with a type value of 1 (cssrule.style_rule). 466 cssstylerule.selectortext api, cssom, cssstylerule, reference the cssrule.selectortext property gets the textual representation of the selector for the rule set. this is readonly in some browsers; to set stylesheet rules dynamically cross-browser, see using dynamic styling information. 467 cssstylerule.style api, cssom, needsspectable, property, reference the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule. 468 cssstylerule.stylemap the stylemap read-only property of the cssstylerule interface returns a styleprop...
...ylerule.style api, cssom, needsspectable, property, reference the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule. 468 cssstylerule.stylemap the stylemap read-only property of the cssstylerule interface returns a stylepropertymap object which provides access the rule's property-value pairs. ...
...And 33 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
the html external resource link element (<link>) specifies relationships between the current document and an external resource. this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.css" rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet. the rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the...
..."> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked. these provide useful hints to allow the browser to choose the most appropriate icon available. you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new performance and security features have been added to the <link> element too. take this example: <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> a rel value of preload indicates that the browser should preload this resource (see ...
...And 24 more matches

How CSS is structured - Learn web development
cture of css. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works. objective: to learn css's fundamental syntax structures in detail. ...
...quisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works. objective: to learn css's fundamental syntax structures in detail. applying css to html first, let's examine three methods of applying css to a document: with an external stylesheet, with an internal stylesheet, and with inline styles. external stylesheet an external stylesheet contains css in a separate file with a .css extension. this is the most common and useful method of bringing css to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. you reference...
...es. external stylesheet an external stylesheet contains css in a separate file with a .css extension. this is the most common and useful method of bringing css to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. ...
...And 15 more matches

Style System Overview - Archive of obsolete content
a rule is a selector and a declaration block. a declaration block is a group of declarations. a declaration is a property and a value. ...
... a rule is a selector and a declaration block. a declaration block is a group of declarations. a declaration is a property and a value. ...
... a rule is a selector and a declaration block. a declaration block is a group of declarations. a declaration is a property and a value. ...
...And 13 more matches

Skinning XUL Files by Hand - Archive of obsolete content
to skin a xul file means to change the overall look of that file by changing its style information. in the very near future, it will be possible to skin xul files dynamically and completely -- by pressing a button, selecting a skin from a menu, or by accepting a skin from over the web. when this day comes, skins defined in a global skin file will be applied to a whole application -- like the mozilla browser -- so that all the various windows and parts will look consistent. ...
...in mozilla's global skin to style your elements, you may do so. but you may also want to define new classes of buttons particular to your xul file, in which case the style information will be wholly defined within your custom css file. reading the global skin it's very important to familiarize yourself with the basic style definitions in the global skin before you set out creating your own stylesheet. css can quickly become complicated. the ability to apply styles to elements of a type, to specifically identified elements, and to classes of elements creates the potential for redundancies or conflicts in the style information. to avoid this, the makers of the css specification have created some rules of precedence that look at how many different rules have been defined for an element, where th...
...dundancies or conflicts in the style information. to avoid this, the makers of the css specification have created some rules of precedence that look at how many different rules have been defined for an element, where the style definitions appear (i.e., externally in a css file or inline), where the elements themselves appear, and other esoteric variables. if you create a style in your custom stylesheet for a button with a particular id, for example, some of the more basic style information for buttons in the global skin may take precedence over your new style and cause it not to be applied. make sure you are aware of the way that the global skin defines the skin and which elements, in general, it is addressing. since the purpose of the global skin is to create a look for the entire application...
...And 12 more matches

Organizing your CSS - Learn web development
previous overview: building blocks as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging. in this article we will take a brief look at some best practices for writing your css to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability. ...
... maintainable, and some of the solutions you will find in use by others to help improve maintainability. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with css organization and team working. tips to keep your css tidy here are some general suggestions for ways to keep your stylesheets organised and tidy. does your project have a coding style guide? if you are working with a team on an existing project, the first thing to check is whether the project ...
... find it is more readable to have each property and value pair on a new line. comment your css adding comments to your css will help any future developer work with your css file, but will also help you when you come back to the project after a break. /* this is a css comment it can be broken onto multiple lines. */ a good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the css. if you use a string which won't appear in the code you can jump from section to section by searching for it — below we have used ||. /* || general styles */ ... /* || typography */ ... /* || header and main navigation */ ... you don't n...
...And 12 more matches

Using the standard theme - Archive of obsolete content
but most of the time you also want to be able to reuse the standard theme (also called the "global skin") of the base application for non-custom elements, transparently with regard to which theme the user has currently chosen. at the beginning, there is no style when creating a new xul <tt>window</tt> (or a new <tt>dialog</tt>, for that matter) in your extension, and you do not associate a style sheet with it, your widgets will be unstyled. meaning, some internal default will be applied, which does by no means correspond to the standard theme (the theme currently chosen by the user in the theme selector), or even the default theme delivered with your the base application. applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called ...
...pplied, which does by no means correspond to the standard theme (the theme currently chosen by the user in the theme selector), or even the default theme delivered with your the base application. ...
...xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme. you do not have to specify a specific file; mozilla will determine by its own which files in the directory it needs to use. if you are only going to use these global style sheets, you of course do not need a <tt>skin</tt> directory in your extension package, and also do not have to register a style in the <tt>chrome.manifest</tt>. adding custom styles in order to provide custom styling for some of your widgets (apart from the standard global skin) you can take two different routes. ...
...And 9 more matches

nsIDOMWindowUtils
mary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned ...
...tsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only! ...
...n aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only! ...
...And 9 more matches

Generating HTML - Web APIs
dy> element of the article now contains html elements (a <b> and <u> tag, see figure 2). the xml document contains both html elements and xml elements, but only one namespace is needed, namely for the xml elements. ...
...foo</myns:author> <myns:author>mr. ...
...f="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. foo</myns:author> <myns:author>mr. bar</myns:author> </myns:authors> <myns:body> the <b>rain</b> in <u>spain</u> stays mainly in the plains. ...
...And 9 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w3c equivalent existed at the time. ...
... support because no w3c equivalent existed at the time. ...
...ng features as breakpoint management, call stack inspection, and variable/object inspection. all features are accessible through the user interface or through the debugger's interactive console. with the console, you can execute arbitrary javascript in the same scope as the javascript currently being debugged. css differences mozilla-based products have the strongest support for cascading style sheets (css), including most of css1, css2.1 and parts of css3, compared to internet explorer as well as all other browsers. for most issues mentioned below, mozilla will add an error or warning entry into the javascript console. check the javascript console if you encounter css-related issues. mimetypes (when css files are not applied) the most common css-related issue is that css definitions insid...
...And 7 more matches

Index - Learn web development
ebsite, so if you're new to web development, we encourage you to start small. you won't build another facebook right away, but it's not hard to get your own simple website online, so we'll start there. 37 css basics beginner, css, codingscripting, learn, styling, web, l10n:priority like html, css is not a programming language. it's not a markup language either. css is a style sheet language. css is what you use to selectively style html elements. for example, this css selects paragraph text, setting the color to red: 38 dealing with files beginner, codingscripting, files, guide, html, l10n:priority, theory, website when you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the publis...
...you've understood our looping code article. 101 solve common problems in your javascript code beginner, javascript, learn the following links point to solutions to common problems you may encounter when writing javascript. 102 learn to style html using css beginner, css, codingscripting, debugging, landing, style, topic, length, specificity cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 103 css building blocks ...
...you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. 121 organizing your css beginner, css, codingscripting, learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging. in this article we will take a brief look at some best practices for writing your css to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability. 122 overflowing content beginner, block formatting context, css, data loss, learn, over...
...And 7 more matches

Document - Web APIs
t document. document.headread only returns the <head> element of the current document. document.hiddenread only returns a boolean value indicating if the page is considered hidden or not. document.imagesread only returns a list of the images in the current document. document.implementationread only returns the dom implementation associated with the current document. document.laststylesheetsetread only returns the name of the style sheet set that was last enabled. has the value null until the style sheet is changed by setting the value of selectedstylesheetset. document.linksread only returns a list of all the hyperlinks in the document. document.mozsyntheticdocument returns a boolean that is true only if this document is synthetic, such as a standalone image, video, audio ...
...ent returns a boolean that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like. document.pluginsread only returns a list of the available plugins. document.featurepolicy read only returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific document. ...
...is document is synthetic, such as a standalone image, video, audio file, or the like. document.pluginsread only returns a list of the available plugins. document.featurepolicy read only returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific document. document.preferredstylesheetsetread only returns the preferred style sheet set as specified by the page author. ...
...And 7 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
javascript source files. most extensions consist of a single content package2 the locale package this package is used to contain language data that can be translated. to make an extension’s gui support multiple languages, you can include multiple locale packages, one for each language. the skin package this is used to include source files used as visual elements in the gui, including style sheets and images. most extensions include only one skin package, but you can include multiple skin packages to allow the gui to change with different themes. chrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them. to register a package, you use a special uri scheme called a “chrome url” to represent the path to the file. chrome urls are...
... the clock (listing 5) and its controller (listing 6). we’ve already covered the dialog element in chapter 3. in this case, we only want to display an ok button, so we set the buttons attribute to accept. within the window are a label element and textbox element, wrapped in a hbox element so that they are arranged horizontally. ...
...and move it to a dtd file. the dtd file is located inside the locale package, and the correct file is picked automatically to match the user’s language preferences. edit clock.xul to match listing 8. add the doctype declaration that references the dtd file, and replace “clock” and “current time” with entity references. ...
...And 6 more matches

Index - Archive of obsolete content
ces system in firefox. 102 remote/child module, reference, sdk enables an sdk module loaded into a child process to access web content in the child process and communicate with modules in the main process. 103 remote/parent reference, sdk enables you to load modules, and privileged parts of your add-on in general, into child processes. 104 stylesheet/style modify styles using stylesheet files or css rules. 105 stylesheet/utils helper functions for working with stylesheets. 106 system/child_process an implementation of the node.js child_process api. 107 system/environment access, set and clear environment variables. 108 system/events api for work...
... extension components add-ons, extensions extensions with binary components sometimes need to depend on other shared libraries (for example, libraries provided by a third party). the firefox extension system does not provide automatic support for loading these dependent libraries, but it is possible to load these libraries explicitly using a component stub. 307 using the stylesheet service add-ons, extensions the stylesheet service allows extensions to manage user and ua stylesheets without having to touch usercontent.css or userchrome.css files. the api is defined in nsistylesheetservice.idl. 310 bookmarks.export() api, add-ons, bookmarks, extensions, method, non-standard, reference, webextensions, export exports bookmarks to an html bookmark...
...sion howto or faq pages helpful. 436 external cvs snapshots in mozilla-central mozilla-central contains copies of external software modules that it depends on. 437 fast graphics performance with html no summary! 439 firefox archive, firefox out-of-date information about the firefox project. 440 block and line layout cheat sheet gecko the details of block and line layout are tricky; this document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on. it's a work-in-progress, with questions in red highlight. if you know the answer, please pass it along to me so i can update the document. 441 building firefox with rust code build documentation, gec...
...And 6 more matches

Creating a Microsummary - Archive of obsolete content
n their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. in this tutorial we're going to create a microsummary generator for the spread firefox home page that displays the current firefox download count along with the label fx downloads; for example: 174475447 fx downloads. we'll build the xslt transform sheet that converts that page into its microsummary, learn how to specify that the generator applies to that page, and find out how to make the generator available for download and installation. in each step of revising the transform sheet and other code in this tutorial, new material added will be shown in boldface so you can follow along more easily. note: if you are a web site developer, and you w...
... to give users a good idea what information the microsummaries will provide. ...
...icrosummaries will provide. ...
...And 6 more matches

nsIXSLTProcessor
7 implemented by: @mozilla.org/document-transformer;1?type=xslt. ...
...string namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source); nsidomdocumentfragment transformtofragment(in nsidomnode source, in nsidomdocument output); methods clearparameters() removes all set parameters from this nsixsltprocessor. this will make the processor use the default-value for all parameters as specified in the stylesheet. void clearparameters(); parameters none. getparameter() gets a parameter if previously set by setparameter(). returns null otherwise. nsivariant getparameter( in domstring namespaceuri, in domstring localname ); parameters namespaceuri the namespaceuri of the xslt parameter. localname the local name of the xslt parameter. return value an nsivariant containing the value of the parameter. ...
...rparameters(); parameters none. getparameter() gets a parameter if previously set by setparameter(). returns null otherwise. nsivariant getparameter( in domstring namespaceuri, in domstring localname ); parameters namespaceuri the namespaceuri of the xslt parameter. localname the local name of the xslt parameter. return value an nsivariant containing the value of the parameter. ...
...And 6 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
ypewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors. ...
...content into the nodelist that matches a specified group of selectors. ...
... specified group of selectors. ...
...And 6 more matches

Challenge solutions - Developer guides
solution css supports common color names like orange, yellow, blue, green, or black. ...
...ecifying colors. how css works dom inspector challenge in domi, click on a strong node. use domi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text. solution in the menu above the right-hand pane, choose css rules. you see two items listed, one that references an internal resource and one that references your stylesheet file. the internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red. cascading and inheritance inherited styles challenge change your stylesheet so that only the red letters are underlined. solution move the declaration for underlining from the rule for <p> to the one for <strong>. the resulting file looks like this: p {color: blue; ...
...change the rule you have just added (without changing anything else), to make the first paragraph blue too. solution change the selector of the new rule to be a tag selector using p: p { color: blue; } the rules for the other colors all have more specific selectors, so they override the blue of the paragraph. readable css commenting out a rule challenge comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red. solution one way to do this is to put comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */ text styles big initial letters challenge without changing anything else, make all six initial letters twice the size in the browser's default serif font. solution add the follow...
...And 6 more matches

tabs - Archive of obsolete content
tabs.on('activate', function(tab) { var worker = tab.attach({ contentscript: 'self.port.emit("html", document.body.innerhtml);' }); worker.port.on("html", function(message) { console.log(message) }) }); note that tab.attach is tab-centric: if the user navigates to a new page in the same tab, then the worker and content scripts will be reattached to the new page. ...
...tab.attach({ contentscript: 'self.port.emit("html", document.body.innerhtml);' }); worker.port.on("html", function(message) { console.log(message) }) }); note that tab.attach is tab-centric: if the user navigates to a new page in the same tab, then the worker and content scripts will be reattached to the new page. attaching stylesheets new in firefox 34. ...
...on(message) { console.log(message) }) }); note that tab.attach is tab-centric: if the user navigates to a new page in the same tab, then the worker and content scripts will be reattached to the new page. attaching stylesheets new in firefox 34. you can't attach style sheets to a tab using tab.attach(), but from firefox 34 onwards you can attach and detach them using the low-level stylesheet/style and content/mod apis. here's an add-on that uses a toggle button to attach a stylesheet to the active tab, and detach it again. ...
...And 5 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
textbox({'id': 'coord-y', 'class': 'coord-box', 'placeholder': '0'}) ... that way you build elements hierarchy with not much interaction with dom, plus you can see tag properties and it children in a nice, structured way, just like in overlay.xul. you can find working example here. it involves using of firebug.sdk xul.js with few modifications. ...
...lass': 'coord-box', 'placeholder': '0'}) ... that way you build elements hierarchy with not much interaction with dom, plus you can see tag properties and it children in a nice, structured way, just like in overlay.xul. you can find working example here. it involves using of firebug.sdk xul.js with few modifications. 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. any css files used in any of your own xul files will function normally without any extra work needed. components.utils.import("resource://gre/modules/services.jsm"); var stylesheets = ["chrome://myextension/skin/mystylesheet.css"]; function startup(data,reason) { ... // load styleshee...
...using will need to be registered upon load and unregistered when your extension is unloaded. any css files used in any of your own xul files will function normally without any extra work needed. components.utils.import("resource://gre/modules/services.jsm"); var stylesheets = ["chrome://myextension/skin/mystylesheet.css"]; function startup(data,reason) { ... ...
...And 5 more matches

Connecting to Remote Content - Archive of obsolete content
lso be used to extract information from web pages once they load, along with the page load interception techniques discussed previously. xpath is very useful for cases when you're receiving large and complex xml files, and you only need some of the data contained in them. using xpath to parse a complete xml document is probably not a good idea performance-wise. using xslt xslt (extensible stylesheet language transformations) is another tool used to manipulate xml documents and transform them into other forms of text output, such as html, xul, and so on. we can not cover all transformations to various output formats, so we'll just look into converting an xml document to xul. first you need to create an xslt stylesheet that acts as a template. this template will transform the xml you receive...
...rmations to various output formats, so we'll just look into converting an xml document to xul. first you need to create an xslt stylesheet that acts as a template. this template will transform the xml you receive (in our case, the example xml document above) and convert it into xul. the xslt tutorial contains details for building these templates. ...
...now, the processor is ready to perform the transformation. let domparser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); let filestr...
...And 5 more matches

Using Remote XUL - Archive of obsolete content
ation as well as to build sophisticated web-based applications. [***aw: we should have a screenshot here of a xul document loaded in a content window***] this tutorial walks you through the process of building xul-based navigation for the mozilla.org web site. after completing the tutorial you should understand how to: create xul documents; serve them from a web server; use cascading style sheets (css) to change their appearance; use javascript to define their behavior. global web site navigation most web sites today have poor global navigation (features for locating and visiting pages across the entire site). it is difficult to discern the site's basic structure and available resources, which makes it hard to locate a particular page or find the one with the information you want. p...
...has no specific function in xul; it can store any data associated with the item. in our case we use it to store the url of the page to load when the user selects the item from the menu. source | rendered step 5: appearance there's an obvious problem with the menus: their labels look plain. this makes them ugly and not like menus at all. ...
... the page to load when the user selects the item from the menu. source | rendered step 5: appearance there's an obvious problem with the menus: their labels look plain. this makes them ugly and not like menus at all. in order to give them style we have to reference a stylesheet with rules for styling menus. we could write one ourselves, but we'll make our lives easier and use one of the stylesheets that comes with mozilla-based browsers. ...
...And 5 more matches

Cascade and inheritance - Learn web development
concepts before moving on. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the cascade and specificity, and how inheritance works in css. conflicting rules css stands for cascading style sheets, and that first word cascading is incredibly important to understand — the way that the cascade behaves is key to understanding css. at some point, you will be working on a project and you will find that the css you thought should be applied to an element is not working. usually the problem is that you have created two rules which could potentially apply to the same element. the cascade, and ...
... this can also cause some behavior that you might not expect. let's start by taking a quick look at the key things we are dealing with, then we'll look at each in turn and see how they interact with each other and your css. this can seem like a set of tricky concepts to understand. as you get more practice writing css, however, the way it works will become more obvious to you. the cascade stylesheets cascade — at a very simple level this means that the order of css rules matter; when two rules apply that have equal specificity the one that comes last in the css is the one that will be used. in the below example, we have two rules that could apply to the h1. the h1 ends up being colored blue — these rules have an identical selector and therefore carry the same specificity, so the last on...
...ule, which has exactly the same weight, then the one that comes last in the css will win. you can think of this as rules which are nearer the element itself overwriting early ones until the last one wins and gets to style the element. specificity once you understand the fact that source order matters, at some point you will run into a situation where you know that a rule comes later in the stylesheet, but an earlier, conflicting, rule is applied. this is because that earlier rule has a higher specificity — it is more specific, and therefore is being chosen by the browser as the one that should style the element. as we saw earlier in this lesson, a class selector has more weight than an element selector, so the properties defined on the class will override those applied directly to the elem...
...And 5 more matches

Mozilla’s UAAG evaluation report
a ui for this would be good. 2.4 allow time-independent interaction. (p1) nr need to look into this 2.5 make captions, transcripts available. (p1) na this relates to multimedia players 2.6 respect synchronization cues. (p1) na this relates ...
...a ui for this would be good. 2.4 allow time-independent interaction. ...
...a ui for this would be good. 2.10 toggle placeholders. (p3) ni 2.11 alert unsupported language. (p3) nr ? guideline 3. allow configuration not to render some content that may reduce accessibility. checkpoint title status notes/p...
...And 5 more matches

Using dynamic styling information - Web APIs
formation regarding css. initially defined in the dom level 2 style recommendation, these interfaces forms now a specification, css object model (cssom) which aims at superseding it. in many cases, and where possible, it really is best practice to dynamically manipulate classes via the classname property since the ultimate appearance of all of the styling hooks can be controlled in a single stylesheet. ...
...t practice to dynamically manipulate classes via the classname property since the ultimate appearance of all of the styling hooks can be controlled in a single stylesheet. one's javascript code also becomes cleaner since instead of being dedicated to styling details, it can focus on the overall semantics of each section it is creating or manipulating, leaving the precise style details to the stylesheet. however, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or individual elements), and that is described in further detail below. ...
...semantics of each section it is creating or manipulating, leaving the precise style details to the stylesheet. however, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or individual elements), and that is described in further detail below. note also that, as with individual element's dom styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but merely the internal representation of the document. the basic style object exposes the stylesheet and the cssstylesheet interfaces. those interfaces contain members like insertrule, selectortext, and parentstylesheet for accessing and manipulating the individual style rules that make up a css stylesheet. to get to the style objec...
...And 5 more matches

XSL Transformations in Mozilla FAQ - Web APIs
why isn't my stylesheet applied? ...
... why isn't my stylesheet applied? ...
... why isn't my stylesheet applied? ...
...And 5 more matches

Introduction to XUL - Archive of obsolete content
luded in the file. namespaces must be treated carefully. correct namespace usage dictates that the namespace be used only for the tag, not in individual attributes. rare exceptions to this rule are bugs. xul file preamble xul is xml, and a good xul file begins with the standard xml version and doctype statements. ...
...ated carefully. correct namespace usage dictates that the namespace be used only for the tag, not in individual attributes. rare exceptions to this rule are bugs. xul file preamble xul is xml, and a good xul file begins with the standard xml version and doctype statements. since xml has no implicit display semantics, there must always be associated stylesheets. mozilla includes a standard stylesheet, "xul.css". ...
...tes that the namespace be used only for the tag, not in individual attributes. rare exceptions to this rule are bugs. xul file preamble xul is xml, and a good xul file begins with the standard xml version and doctype statements. since xml has no implicit display semantics, there must always be associated stylesheets. mozilla includes a standard stylesheet, "xul.css". ...
...And 4 more matches

Examples - Archive of obsolete content
</p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla...
... </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 and internet explorer 5.5+. ...
... </p> <p> note how the css rules for the background are applied in netscape 7.x, ...
...And 4 more matches

Mozilla Style System
the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of computed values for all css properties. the handling of those computed values is the responsibility of other parts of the code. architecture the style system is split in half rather neatly. in one half (the backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into computed values. ...
...f the code. architecture the style system is split in half rather neatly. in one half (the backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into computed values. the barrier between these two halves consists of three abstract interfaces, plus some smaller structures associated with some methods on each: nsistylesheet nsistylesheet represents what one would think of as a style sheet: the in-memory representation of a css file or other source of style data. some style sheets are managed by the document; some apply to all documents. the style system actually has relatively little to do with style sheets; it instead deals with style rule processors. nsistyleruleprocessor a style rule processor represents a...
...there is also a style rule processor for style attributes (which contain css declarations) and one for presentational attributes in html. ...
...And 4 more matches

Mozilla Style System Documentation
this is useful for the pseudo-elements defined in the css specification (:before, :after, :first-line, :first-letter), but few of mozilla's custom pseudo-elements, many of which are hacks for further formatting objects that we create. the pres context forwards these calls to its style set object (stylesetimpl, interface nsistyleset), which does the real work (and also maintains the lists of stylesheets and owns the rule tree). these methods may all return an existing style context rather than a new one (see stylesetimpl::getcontext), if there is a current style context with the same parent, that matches the same rules (a check that is easy because of the ruletree), and is for the same pseudo-element (or not for a pseudo-element, or a "non-element"). this is more than just sibling-sharing since...
... functions cause an appropriate struct to be computed if it hasn't been computed already and then fill in the struct pointer. the struct is owned by the style system (either on the style context or on the rule node). these functions should only fill in a null pointer on allocation failure. ...
...riate struct to be computed if it hasn't been computed already and then fill in the struct pointer. the struct is owned by the style system (either on the style context or on the rule node). these functions should only fill in a null pointer on allocation failure. ...
...And 4 more matches

Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scratch and apply them to the page import existing stylesheets and apply them to the page to open the style editor choose the "style editor" option from the "web developer" menu (which is a submenu in the "tools" menu on the mac). the toolbox will appear at the bottom of the browser window, with the style editor activated: the style editor is divided into three main sections: the style sheet pane on the left the editor on the right the media sidebar. the style sheet pane the style sheet pane, on the left, lists all the style sheets being used by the current document. ...
...c). the toolbox will appear at the bottom of the browser window, with the style editor activated: the style editor is divided into three main sections: the style sheet pane on the left the editor on the right the media sidebar. the style sheet pane the style sheet pane, on the left, lists all the style sheets being used by the current document. you can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. you can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the list. from firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab. the editor pane on th...
...u can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the list. from firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab. the editor pane on the right is the editor pane. this is where the source for the selected style sheet is available for you to read and edit. any changes you make are immediately applied to the page. this makes it easy to experiment with, revise, and test changes. once you're satisfied with your changes, you can save a copy locally by clicking the save button on the sheet's entry in the style sheet pane. the editor provides line numbers and syntax highlighting to help make it easier to read your ...
...And 4 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
chapter, please include them. because a xul document is also an xml document, it can contain xhtml, svg, mathml, and other elements; if you use external entity references, the xml document's contents are modularized; combined with other xml-related technologies, such as dom, xlink, or xslt, you can use it for a number of different applications. <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xu...
...in/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction. on line 2 of listing 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox. we can also read in a stylesheet that we had set up ourselves. the xul box ...
...bitrary strings as their values. the action taken when pressing one of these buttons is defined by an event handler with the name ondialog<button name>. if these event handlers are not defined, pressing either the accept button or cancel button will simply close that dialog. listing 8 shows a simple dialog example, and figure 5 shows its output. ...
...And 3 more matches

Creating reusable content with CSS and XBL - Archive of obsolete content
ly reusable. note: xbl cannot be loaded over http, so this technique is only useful for local content accessed using the file:/// scheme, or from add-on code. you apply this technique in a simple demonstration. information: xbl bindings the structure provided by markup languages and css is not ideal for complex applications where parts need to be self-contained and reusable. you can place stylesheets in separate files, and you can place scripts in separate files. but you must link those files from the document as a whole. another structural limitation concerns content. you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element. mozilla provides a mechanism that overcomes these...
...ocument as a whole. another structural limitation concerns content. you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element. mozilla provides a mechanism that overcomes these limitations: xbl (xml bindings language). you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse. more details for more information about xbl bindings, see the xbl page in this wiki. action: an xbl demonstration make a new html document, doc6.html. copy and paste the content from here: <!docty...
...ed parts that are easy to maintain and reuse. more details for more information about xbl bindings, see the xbl page in this wiki. action: an xbl demonstration make a new html document, doc6.html. copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css. this stylesheet contains the document style. copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new text file, square.xbl. this file contains the xbl bind...
...And 3 more matches

XUL user interfaces - Archive of obsolete content
user interface features are built in. for example, xul provides specialized windows like dialogs and wizards, as well as status bars, menus, tool bars, and even browsers. more specialized features can be built from parts by using xul together with other technologies that you have seen in this tutorial: css style, javascript code, and xbl bindings. ...
...ipt code, and xbl bindings. like other xml-based languages, xul uses css stylesheets. more details for more information about xul user interfaces, see the xul page in this wiki. action: a xul demonstration make a new xul document as a plain text file, doc7.xul. ...
...if there is a rule that you do not understand, comment it out and refresh your browser to see the effect on the document. challenge use t...
...And 3 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. this documentation has not been fully updated for firefox quantum. support for the userchrome.css file and any of its elements described below are not guaranteed in future versions of firefox. using it may lead to hard-to-diagnose bugs or crashes. use at your own risk! this section describes how to modify the skin of a window. skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file. by applying a different skin, you can change the look of a window without changing its functionality. firefox provides a skin by default, and you may download others. ...
...larger changes can be done by creating an entirely new skin. firefox has a theme manager for changing the default skin. ...
...larger changes can be done by creating an entirely new skin. ...
...And 3 more matches

CustomizableUI.jsm
var mywidgetlistener = { onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, arguments:', arg...
... var mywidgetlistener = { onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, arguments:', arguments); if ...
...edtabswindow.alert('alert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); giving the button an icon non-style sheet method the style sheet method (below) is one way to add an icon. the other way is to watch for when your widget is dropped into an area, and give an appropriate icon. this way is simpler because you don't have to maintain a style sheet. var mywidgetlistener = { onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget moved'); var useicon; if (aarea == customizableui.area_panel) { useicon = '...
...And 3 more matches

Mozilla Web Developer FAQ
fore, the default margins for paragraphs apply even with markup such as <td><p>foo</p></td>. often the content of a cell in a table of tabular data does not constitute a paragraph. in that case, the easy solution is not to mark the contents of the cell as a paragraph. when the paragraph markup is called for but the default margins are unwanted, zero margins can be suggested using css. my style sheet doesn’t work! why? here’s the check list: does the html document validate? styling misnested markup may cause strange effects. the <link> and <style> elements should be inside the <head> element. does the css style sheet pass the syntax check? the css error handling rules require erroneous parts to be ignored rather than fixed by guessing. lengths other than zero should...
...is the colon—not the equal sign. html markup, such as <style>, does not belong in .css files. font-face is not a real css property. the property is font-family and @font-face is an at-rule. if @import is used, it should be the first thing in a css file. css parsing errors are reported to the javascript console. ...
...e is not a real css property. the property is font-family and @font-face is an at-rule. if @import is used, it should be the first thing in a css file. css parsing errors are reported to the javascript console. is the server sending the proper content-type header for css style sheets? the correct type is text/css. in the standards mode and the almost standards mode only style sheets with the correct type are applied. you can see the http headers sent by the server by using the livehttpheaders extension or by using the web sniffer. class names and ids are case-sensitive. the element selectors are case-sensitive with xml. style sheet processing instructions are only allowed in the prolog of xml documents. also, they only work in xml documents—not in documents ser...
...And 3 more matches

nsIIOService
i. aorigincharset the charset for the uri. may be null. abaseuri the base uri for the spec. may be null. if aspec is an absolute url, this parameter is ignored. aloadingnode the loadingdocument of the channel. this is the document/element that will get access to the result of this request. for example for an image load, it's the document in which the image will be loaded. and for a css stylesheet it's the document whose rendering will be affected by the stylesheet. if possible, pass in the element which is performing the load. but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead. for loads that are not related to any document, such as loads coming from addons or int...
...e used. atriggeringprincipal the triggeringprincipal of the load. the triggeringprincipal is the principal of the resource that caused this particular url to be loaded. most likely the triggeringprincipal and the loadingprincipal are identical, in which case the triggeringprincipal can be left out. in some cases the loadingprincipal and the triggeringprincipal are different however, e.g. a stylesheet may import a subresource. in that case the principal of the stylesheet which contains the import command is the triggeringprincipal, and the principal of the document whose rendering is affected is the loadingprincipal. asecurityflags the securityflags of the channel. any of the securityflags defined in nsiloadinfo. acontentpolicytype the contentpolicytype of the channel. any of the content t...
...ncipal as the loadingprincipal. parameters auri an nsiuri from which to make a channel. aloadingnode the loadingdocument of the channel. the element or document where the result of this request will be used. this is the document/element that will get access to the result of this request. for example for an image load, it's the document in which the image will be loaded. and for a css stylesheet it's the document whose rendering will be affected by the stylesheet. if possible, pass in the element which is performing the load. but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for <img>) then pass in the document node instead. for loads that are not related to any document, such as loads coming from addon...
...And 3 more matches

self.createImageBitmap() - Web APIs
the output width. resizeheight: a long integer that indicates the output height. resizequality: specifies the algorithm to be used for resizing the input to match the output dimensions. one of pixelated, low (default), medium, or high. return value a promise which resolves to an imagebitmap object containing bitmap data from the given rectangle. ...
... long integer that indicates the output height. resizequality: specifies the algorithm to be used for resizing the input to match the output dimensions. one of pixelated, low (default), medium, or high. return value a promise which resolves to an imagebitmap object containing bitmap data from the given rectangle. ...
...to be used for resizing the input to match the output dimensions. one of pixelated, low (default), medium, or high. return value a promise which resolves to an imagebitmap object containing bitmap data from the given rectangle. example creating sprites from a sprite sheet this example loads a sprite sheet, extracts individual sprites, and then renders each sprite to the canvas. a sprite sheet is an image containing multiple smaller images, each of which you want to be able to render separately. ...
...And 3 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
get by with your msaa support., and jaws can be scripted (even by external developers) to support alternative interfaces. don't use msaa if you're working with a small number of at vendors, you can get everyone to agree on a different solution, and you're sure that you won't be needing to support other assistive technologies later. deciding which msaa features to support msaa methods - cheat sheet for developers the iaccessible interface is used in a tree of iaccessible's, each one representing a data node, similar to a dom. here are the methods supported in iaccessible - a minimal implementation would contain those marked "[important]": get_accparent: get the parent of an iaccessible. [important] get_accchildcount: get the number of children of an iaccessible. [important] get_accch...
...igate: navigate to the first/last child, previous/next sibling, up, down, left or right from this iaccessible. [important, but no need to implement up/down/left/right] acchittest: find out what iaccessible exists and a specific coordinate. accdodefaultaction: perform the action described by get_accdefaultaction. put_accname: change the name. put_accvalue: change the value. msaa events cheat sheet for information on what each event does, see the msdn event constants page. check with your assistive technology partners to find out what events you need to support. there's a very good chance they won't ask for more than the events marked [important]: event_system_sound event_system_alert [can be important, to have auto-speaking for newly created role_alerts] event_system_f...
... check with your assistive technology partners to find out what states you need to support. there's a very good chance they won't ask for more than the states marked [important]: state_unavailable [important] state_selected [important] state_focused [important] state_pressed state_checked [impo...
...And 3 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
the future. external resource not allowed not allowed prev indicates that the current document is a part of a series, and that the previous document in the series is the referenced document. link link link search gives a link to a resource that can be used to search through the current document and its related pages. link link link stylesheet imports a style sheet. external resource not allowed not allowed tag gives a tag (identified by the given address) that applies to the current document. not allowed link not allowed the rel attribute is relevant to the <link>, <a>, <area>, and <form> elements, but some values only relevant to a subset of those elements. like all html keyword attribute value...
... the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. alternate indicates an alternate representation of the current document. valid for link, a, and area, the meaning depends on the values of the other attributes. with the stylesheet keyword on a <link>, it creates an alternate stylesheet. <!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation. with the type attribute, it indicates that the ...
...k references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search. if the type attribute is set to application/opensearchdescription+xml the resource is an opensearch plugin that can be easily added to the interface of some browsers like firefox or internet explorer. ...
...And 3 more matches

Preloading content with rel="preload" - HTML: Hypertext Markup Language
which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. this ensures they are available earlier and are less likely to block the page's render, improving performance. this article provides a basic guide to how <link rel="preload"> works. the basics you most commonly use <link> to load a css file to style your page with: <link rel="stylesheet" href="styles/main.css"> here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. the type of resource in the as attribute. a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js...
...eed to specify: the path to the resource in the href attribute. the type of resource in the as attribute. ...
...for example: resources that are pointed to from inside css, like fonts or images. resources that javascript can request, like json, imported scripts, or web workers. ...
...And 3 more matches

page-mod - Archive of obsolete content
o maintain, secure, debug and review. a page-mod only attaches scripts to documents loaded in tabs. it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden windows. to stop a page-mod from making any more modifications, call its destroy() method. the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings. contentstylefile lists stylesheets to attach, supplied in separate files. contentscriptoptions defines read-only values accessible to content scripts. attachto controls whether to attach scripts to tabs that were already open when the page-mod was created, and whether to attach scripts to iframes as well as the topmost document.
...ues can be any json-serializable value: a string, number, boolean, null, array of json-serializable values, or an object whose property values are themselves json-serializable. this means you can't send functions, and if the object contains methods they won't be usable. you also can't pass cyclic values. name: contentstylefile type: string,array use this option to load one or more stylesheets into the targeted documents as user stylesheets. each stylesheet is supplied as a separate file under your add-on's "data" directory, and is specified by a url typically constructed using the url() method of the self module's data object. to add multiple stylesheet files, pass an array of urls. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ inc...
...typically constructed using the url() method of the self module's data object. to add multiple stylesheet files, pass an array of urls. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: data.url("style.css") }); from firefox 34, you can use "./style.css" as an alias for the resource:// url pointing to the stylesheet in your "data" directory. so you can rewrite the code above like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: "./style.css" }); content styles specified by this option are loaded before those specified by the contentstyle option. ...
...And 2 more matches

Making it into a static overlay - Archive of obsolete content
ibution, before we package it up we need to separate the modifications into a different file and add them back in at run time via a dynamic xul overlay. a xul overlay is a xul file containing elements to be inserted into another xul file when the other xul file is rendered into an application interface. static overlays are added to a xul file via a reference at the top of the file (much like stylesheets and javascript scripts). dynamic overlays are added to a xul file via a reference in the chrome registry. overlays provide a way to break up a large xul file into several different files (one that describes the overall structure of an application window and the others to implement specific portions of the window) to improve code readability, maintainability, and extensability. dynamic overlays a...
...e without actually changing the code of the file itself, which is necessary when installing an extension like ours. we'll first make the file into a static overlay, then we'll make it into a dynamic overlay. ...
...avigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this). its next line is the stylesheet reference we previously added to navigator.xul. after that is a xul overlay element. this element is the top-level element in a xul overlay file and serves to identify the file as an overlay. within that element is the script reference we previously added to navigator.xul. then there is a statusbar element containing a statusbarpanel element. the value of the id attribute of the statusbar element...
...And 2 more matches

Anonymous Content - Archive of obsolete content
ind scopes and operate on the altered and original content models. the final modified content tree determines how css properties (e.g., fonts and colors) are inherited. an element either ends up underneath its explicit parent (just as in the content model), or it ends up being nested through a series of insertion points. when nested, it inherits from the innermost anonymous parent. binding stylesheets a binding file can load stylesheets using the stylesheet element. by default these stylesheets apply to the bound element and to all anonymous content generated by all bindings attached to the bound element. these sheets have the same origin as the sheet with the rule responsible for the binding. stylesheets loaded by bindings that are attached using the dom are treated as author-level sheets. ...
...nt generated by all bindings attached to the bound element. these sheets have the same origin as the sheet with the rule responsible for the binding. stylesheets loaded by bindings that are attached using the dom are treated as author-level sheets. [editor's note: binding inheritance complicates this cascade, since an author-level dom binding could inherit from a user-level binding. if both load sheets, what level do those sheets belong to in the cascade?] sheets are always walked from the innermost scope to the outermost scope. with this ordering a binding that defines a widget can define a default look for the widget that can then be easily overridden by a client of the widget. ...
...ould inherit from a user-level binding. if both load sheets, what level do those sheets belong to in the cascade?] sheets are always walked from the innermost scope to the outermost scope. with this ordering a binding that defines a widget can define a default look for the widget that can then be easily overridden by a client of the widget. for multiple bindings attached to the same element, the sheets are walked from the base binding down to the most derived binding. bindings can fine-tune the control of the stylesheet scoping with the inheritstyle attribute, which indicates whether or not author sheets defined at outer scopes affect the anonymous content generated by the binding. ...
...And 2 more matches

Elements - Archive of obsolete content
#required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding. a xbl binding can add anonymous content, fields, properties, methods, and event handlers to html/xml elements. a single xbl binding can be attached to an element by using style sheets or by scripting. (see bug 83830 for <table> specifics). css: div { -moz-binding: url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data: url to embed the binding inline: div { -moz-binding: url(data:...
...t field in the dom mouse event object matches the value of the attribute. command - the id of a command to invoke when the event occurs. if used in a non-chrome document, the entire handler will be ignored. preventdefault - if set to true, the default action of the event is not performed. see also preventdefault method of the event object. ...
...default - if set to true, the default action of the event is not performed. see also preventdefault method of the event object. resources <!entity % resources-content "(image?,stylesheet?)"> <!element resources %resources-content;> <!attlist property id id #implied > used for inclusion of image elements, to cache them for later use, and for inclusion of stylesheet elements. the resources tag must be used directly inside the binding tag. id - the id attribute is a document-unique identifier. ...
...And 2 more matches

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
ovide two icons for each of your toolbar buttons. ...
...hunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image: url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file and the customize toolbar window. ...
.../myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file and the customize toolbar window. to attach it to the overlay, put this processing instruction (pi) at the top of the overlay file: <?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?> note: the css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. this is very important because the toolbar customization dialog won't work correctly without this. to include the style on your chrome.manifest file: style chrome://global/content/...
...And 2 more matches

ActiveXObject - Archive of obsolete content
d as safe for scripting." to identify members of an automation object that you can use in your code, you may need to use a com object browser, such as the ole/com object viewer, if no reference documentation is available for the automation object. ...
...entify members of an automation object that you can use in your code, you may need to use a com object browser, such as the ole/com object viewer, if no reference documentation is available for the automation object. ...
...t browser, such as the ole/com object viewer, if no reference documentation is available for the automation object. to create an automation object, assign the new activexobject to an object variable: var excelapp = new activexobject("excel.application"); var excelsheet = new activexobject("excel.sheet"); this code starts the application creating the object (in this case, a microsoft excel worksheet). once an object is created, you refer to it in code using the object variable you defined. ...
...And 2 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
csp (content security policy) is used to detect and mitigate certain types of website related attacks like xss and data injections. 54 csrf glossary, security csrf (cross-site request forgery) is an attack that impersonates a trusted user and sends a website unwanted commands. 55 css css, codingscripting, glossary, web, l10n:priority css (cascading style sheets) is a declarative language that controls how webpages look in the browser. 56 css object model (cssom) css, cssom, dom, glossary, web performance the css object model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship. the cssom is very similar to the docu...
...visual presentation) audio, glossary, media, multimedia, video the term media (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. 265 media (css) css, glossary, intro, media in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine. 266 metadata codingscripting, glossary, html, metadata metadata is — in its very simplest definition — data that describes data. for example, an html document is data, but html can also contain metadata in its <head> element that describes the document — for exampl...
... traditionally in browsers the html parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed. some html parser, such as firefox since firefox 4, support speculative parsing off of the main thread. it parses ahead while scripts are being downloaded and executed. 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. the downside is that there's more work lost when the speculation fails. 430 speed index glossary, performance, ref...
...And 2 more matches

How CSS works - Learn web development
in this lesson we will take a look at how a browser takes css and html and turns that into a webpage. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of how css and html are parsed by the browser, and what happens when a browser encounters css it does not understand. ...
...content meet up. when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply. a real dom representation rather than a long, boring explanation, let's look at an example to see how a real html snippet is converted into a dom. ...
...>cascading</span> <span>style</span> <span>sheets</span> </p> in the dom, the node corresponding to our <p> element is a parent. its children are a text node and the three nodes corresponding to our <span> elements. the span nodes are also parents, with text nodes as their children: p ├─ "let's use:" ├─ span | └─ "cascading" ├─ span | └─ "style" └─ span └─ "sheets" this is how a browser interprets the previous html snippet —it renders the above dom tree and then outputs it in the browser like so: p {margin:0;} applying css to the dom let's say we added some css to our document, to style it. ...
...And 2 more matches

Gecko info for Windows accessibility vendors
ly dom support, and the keyboard api/user interface. definitions here are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applications. gecko is the internal engine that mozilla uses to render any kind of web content. it supports html, xhtml, cascading style sheets (css) and the document object model (dom). microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. if you seriously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.3.
... null. anything that is focusable or conveys important information about the structure of the document is exposed in the msaa tree of iaccessibles. windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use. gecko can render a variety of content, not just html and supports key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. embedded clients (support msaa) embedded clients use gecko only in the content window, at the moment for html and generic xml only. they typically use s...
...trings is ever localized, so they should be parsed out. dhtml accessibility is supported this means that you may encounter roles that are not typically in html content. be prepared for new combinations of roles and states in content, such as role_slider, role_progressbar and state_required. in addition, check the state_focusable bit on tables, which indicates a traversable dhtml spreadsheet. please see the dhtml accessibility documentation page for more information on this topic. iaccessibles persist unless the document changes, retrieving the iaccessible more than once for the same object will return the same iaccessible*. the uniqueid will remain the same as well. if the document does change, event_reorder, event_hide and event_show are used to indicate where the chang...
...And 2 more matches

The Firefox codebase: CSS Guidelines
above have been checked, check if the other rule you are overriding contains !important, if that is case, try putting it in question, because it might have become obsolete. afterwards, check the specificity of the other selector; if it is causing your rule to be overriden, you can try reducing its specificity, either by simplifying the selector or by changing where the rule is placed in the stylesheet. if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially relevant for different element states (:hover, :active, [checked] or [disabled]). however, never try to increase the selector of the rule you are adding as it can easily become hard to understand. finally, once you have checked all the things above, you can permit yourself t...
...99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css. if it is esthetics related, then it is likely theme css. ...
...ality related, then it is likely content css. if it is esthetics related, then it is likely theme css. when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/path/module.css" type="text/css"?> [1] -moz-appearance is tricky. generally, when specifying -moz-appearance: foo; you're giving hints as to how something should act, however -moz-appearance: none; is probably sa...
...And 2 more matches

Building the WebLock UI
document in which the user interface for the dialog and the events that initiate interaction with the web locking are defined. at the top of all xul documents, an xml declaration is followed by the root element for the document, which is usually <window/> but for dialog boxes can also be the element <dialog/>. ...
...in gecko, css is used to do virtually all of the presentation of the xul interface - its color, position, style, and to some extent its behavior as well. ...
... this case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orients its children vertically). notice also that when it's clicked, the button executes a javascript function called addthissite(), which we've already defined in the weblock.js file in client code overview above. ...
...And 2 more matches

CSSRuleList - Web APIs
a cssrulelist is an (indirect-modify only) array-like object containing an ordered collection of cssrule objects. 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 cssstylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet css. the number of rules in the list is rules.length. 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 cssstylesheet. if however, for some reason the list does need to be modified but has no ...
...in the list is rules.length. 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 cssstylesheet. ...
...t instead here, only via its parent stylesheet. in fact, .insertrule() and .deleterule() are not even methods of cssrulelist, but only of cssstylesheet. if however, for some reason the list does need to be modified but has no parent stylesheet (perhaps being a livecopy of a list that does), it cannot just be assigned one (as it has no such property), and neither can it be assigned to one (as stylesheet.cssrules is read-only), but it must unfortunately be inserted into one, rule by rule, and unless combining lists, after any existing list therein is deleted, rule by rule. ...
...And 2 more matches

XSLT Basic Example - Web APIs
first example demonstrates the basics of setting up an xslt transformation in a browser. the example will take an xml document that contains information (title, list of authors and body text) about an article and present it in an human readable form. figure 1 shows the source of the basic xslt example. the xml document (example.xml) contains the information about the article. using the ?xml-stylesheet? processing instruction, it links to the xslt stylesheet (example.xsl) via its href attribute. an xslt stylesheet starts with the xsl:stylesheet element, which contains all the templates used to create the final output. the example in figure 1 has two templates - one that matches the root node and one that matches author nodes. the template that matches the root node outputs the article's title a...
.... the example in figure 1 has two templates - one that matches the root node and one that matches author nodes. the template that matches the root node outputs the article's title and then says to process all templates (via apply-templates) that match author nodes which are children of the authors node. ...
...pply-templates) that match author nodes which are children of the authors node. figure 1 : simple xslt example xml document (example.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> <article> <title>my article</title> <authors> <author>mr. foo</author> <author>mr. ...
...And 2 more matches

XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet transformation to an xml document to produce a new xml document as output. it has methods to load the xslt stylesheet, to manipulate <xsl:param> parameter values, and to apply the transformation to documents. syntax the constructor has no parameters. new xsltprocessor() methods [throws] void xsltprocessor.importstylesheet(node stylesheet) imports the xslt stylesheet. if the given node is a document node, you can pass in a full xsl transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element. ...
...sltprocessor.importstylesheet(node stylesheet) imports the xslt stylesheet. if the given node is a document node, you can pass in a full xsl transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element. [throws] documentfragment xsltprocessor.transformtofragment(node source, document owner) transforms the node source by applying the stylesheet imported using the xsltprocessor.importstylesheet() function. the owner document of the resulting document fragment is the owner node. [throws] document xsltprocessor.transformtodocument(node source) transforms the node source applying the stylesheet given importing using the xsltprocessor.importstylesheet() function. ...
... stylesheet imported using the xsltprocessor.importstylesheet() function. the owner document of the resulting document fragment is the owner node. [throws] document xsltprocessor.transformtodocument(node source) transforms the node source applying the stylesheet given importing using the xsltprocessor.importstylesheet() function. the resultant object depends on the output method of the stylesheet: output method result type html htmldocument xml xmldocument text xmldocument with a single root element <transformiix:result> with the text as a child [throws] void xsltprocessor.setparameter(string namespaceuri, string localname, any value) sets a parameter in the xslt stylesheet that was imported. (sets the va...
...And 2 more matches

<style>: The Style Information element - HTML: Hypertext Markup Language
cument containing the <style> element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the <style> element must be included inside the <head> of the document. in general, it is better to put your styles in external stylesheets and apply them using <link> elements. if you include multiple <style> and <link> elements in your document, they will be applied to the dom in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues. in the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowin...
...if you include multiple <style> and <link> elements in your document, they will be applied to the dom in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues. in the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width. attributes this element includes the global attributes. type this attribute defines the styling language as a mime type (charset should not be specified). this attribute is optional and defaults to text/css if it is not specified; values other than the empty string or text/css are not used. note: there is very little reas...
...o all if the attribute is missing. nonce a cryptographic nonce (number used once) used to whitelist inline styles in a style-src content-security-policy. the server must generate a unique nonce value each time it transmits a policy. it is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial. ...
...And 2 more matches

CSP: style-src - HTTP
csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the style-src policy: content-security-policy: style-src <source>; content-security-policy: style-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. ...
...ipt> or <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace. see unsafe inline script for an example. in csp 2.0, this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. ...
...ing whitespace. see unsafe inline script for an example. in csp 2.0, this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. ...
...And 2 more matches

Authoring MathML - MathML
> <title>mathml in html5</title> </head> <body> <h1>mathml in html5</h1> <p> square root of two: <math> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> content mathml is not supported by browsers. it's recommended to convert your content mathml markup into presentation mathml before publishing it, for example with the help of the ctop.xsl stylesheet. tools mentioned on this page generates presentation mathml. fallback for browsers without mathml support unfortunately, some browsers are not able to render mathml equations or only have a limited support. hence you will need to use a mathml polyfill to provide some fallback rendering. if you need only basic mathematical constructions such as those used on this mdn wiki then a small mathml.css...
...s mentioned on this page generates presentation mathml. fallback for browsers without mathml support unfortunately, some browsers are not able to render mathml equations or only have a limited support. hence you will need to use a mathml polyfill to provide some fallback rendering. if you need only basic mathematical constructions such as those used on this mdn wiki then a small mathml.css stylesheet might be enough. to use it, just insert one line in your document header: <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts perform feature det...
... also good to provide a fallback with web fonts. prior to gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), it was a bit tedious to setup math fonts, see the font instructions for mozilla 2.0. for gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), this is much simpler and is compatible with any web rendering engine with mathml support. for example, here is a minimal stylesheet to use latin modern for the text and latin modern math for the mathematics: @namespace url('http://www.w3.org/1999/xhtml'); @namespace m url('http://www.w3.org/1998/math/mathml'); body, m|mtext { font-family: latin modern; } m|math { font-family: latin modern math; } you can then use the @font-face rule as usual to provide woff fallback for latin modern and latin modern math. see this ...
...And 2 more matches

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> elements implementation status unknown basic data types and interfaces change notes dommatrix or dommatrixreadonly instead of svgmatrix implementation status unknown ...
... aria state and property attributes animatable implementation status unknown styling change notes contentstyletype attribute removed implementation status unknown linkstyle on svgstyleelement implemented (bug 1239128 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.43)) inner <svg>s and <foreignobjects>s not overflow: hidden; in ua style sheet implementation status unknown overflow: hidden; on <hatch> in ua style sheet implementation status unknown 0 0 as default value of transform-origin except root <svg> and <svg> children of <foreign> implementation status unknown use of white-space instead of deprecated xml:space attribute in ua style sheet implementation status unknown @font-face, ::...
...tation status unknown 0 0 as default value of transform-origin except root <svg> and <svg> children of <foreign> implementation status unknown use of white-space instead of deprecated xml:space attribute in ua style sheet implementation status unknown @font-face, ::first-letter and ::first-line on <text> implementation status unknown svg and html style sheets in html document with inline svg applying to whole document content implementation status unknown presentation attributes on any svg namespaced element implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementation status ...
...And 2 more matches

panel - Archive of obsolete content
other applications, but means you need to take care when applying your own styles. if the panel's content is packaged along with your add-on and specified using an html file in your data directory, you can style it by embedding css directly in the html file or by referencing a css file stored under data: <!doctype html> <html> <head> <link href="panel-style.css" type="text/css" rel="stylesheet"> </head> <body> my panel content </body> </html> from firefox 31 onwards, you can style panel content using the contentstyle or contentstylefile options. you can use these options even if the panel content is not packaged along with the add-on: var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile", contentstyl...
... those specified by the contentscript property. contentscript string,array a string or an array of strings containing the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentstylefile string, array a url or an array of urls. the urls point to css stylesheets to load into the panel. the stylesheets must be packaged with the add-on under the add-on's data directory. that is, they can't refer to remote stylesheets. the urls are usually constructed using self.data.url(). stylesheets specified by this property are loaded before those specified by the contentstyle property. contentstyle string, array a string or an array ...
... contentscriptwhen string when to load the content scripts. ...
... contentscriptwhen string when to load the content scripts. ...

Extension Theming Guidelines - Archive of obsolete content
ing for an extension including css and images should exist in a chrome skin package. custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content. ...
...css and images should exist in a chrome skin package. custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content. ...
... provide their own styles for all of your content. branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. while it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly target the right windows. css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. if you are not then you run a risk of conflicting with content that other extensions add to th...
... rules for windows that you are overlaying always try to be specific with the css selector. if you are not then you run a risk of conflicting with content that other extensions add to the window. xul guidelines xbl bindings xbl bindings are applied using style rules. however these are rarely part of the style of the widgets but more about adding custom widgets. in this case you should add a stylesheet to your chrome content package and apply the bindings there. this is one of the rare cases where it is sensible to put the stylesheet into the content area. style attributes style attributes should only be used in rare circumstances. they are impossible to override from styleheets so anything you put in there cannot be adjusted by custom themes. ...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
l role in our team's willingness to try out something completely new. our engineering team actually needed the least convincing to convert over to a standards-based design, because they could also immediately envision the benefits to their workload and maintenance of the site. how is the site styled now that you've ripped out all the html-based presentation? technically, there are 13 total stylesheets used at any one time. the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternat...
...t any one time. the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink? the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb. we've noted that some of the file size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're comparing an old design...
...chnically, with the print media css file, we didn't have to generate a separate print template for stories. however, since some of our stories are broken up into 2 or 3 pages, we created a slightly altered template for print versions which pulls the entire text of the story into one (web) page. since we had a separate template to work with, we changed the media attribute of the linked print style sheet to "all", and eliminated the links to normal screen media files. this allows us to temporarily display on screen the same formatting to be used for printing that page. so what advantages does this redesign give you as a site administrator? you mean besides the fact that as designer, i can control design details on thousands of news pages with just a few files? besides the fact that the engineer...
...n how easy it is to make a change. wired news is also dramatically more accessible, without much concentrated effort at making it so. sure, we now pay more attention to our image alt attributes, and try to use heading tags appropriately. but a huge decrease in the amount [sic] of presentation markup tags also plays a big role too. since all of our content is also completely accessible sans style sheets, i think we get the best of both worlds: a well-designed, highly stylized, true-to-our-brand website which adapts in different browsing environments. what would you say to a site developer considering a similar conversion to standards-based layout, either with simple tables or no tables at all? i think the conversion is a matter of taking into account several considerations. are you tired of t...

XML data - Archive of obsolete content
this page contains an example of how you can use css with xml data. you create a sample xml document, and a stylesheet that you can use to display it in your browser. this is the 3rd section of part ii of the css tutorial. previous section: svg next section: xbl binding information: xml data xml (extensible markup language) is a general-purpose language for any kind of structured data. by default, your mozilla browser displays xml in a format very similar to the original data in the xml file. you see the actual tags that define the data's structure. by linking a css stylesheet with the xml document, you can define other ways to display it. to do this, your stylesheet uses rules that map tags in the xml document to the display types used by html. example data in an xml document ...
...that define the data's structure. by linking a css stylesheet with the xml document, you can define other ways to display it. to do this, your stylesheet uses rules that map tags in the xml document to the display types used by html. example data in an xml document uses <info> tags. you want the document's info elements to be displayed like html paragraphs. ...
...dify the structure of the display—for example, xbl can add content, and javascript can modify the dom. for more information about xml in mozilla, see the xml page in this wiki. action: an xml demonstration make a new xml file, doc9.xml. ...
...km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth: 3,900 m . . . notes about this demonstration: the superscript 2 (in "million km²") a unicode character, coded as \b2 in the css file. the heading, "oceans", has a negative top margin, moving it up so it is displayed on top of the border. challenge change the stylesheet so that it displays the document as a table. (see the tables chapter in the css specification for examples that you can adapt.) what next? if you had difficulty understanding this page, or if you have other comments about it, please contribute to its discussion page. this is the last page of the tutorial. for more information about css in mozilla, see the main css page in this wiki.

Index of archived content - Archive of obsolete content
ional 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/button/ac...
...n 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 ...
...embedding faq embedding mozilla 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 ...
... 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 words ...

XML in Mozilla - Archive of obsolete content
s and drafts from the xml family of specifications are supported, as well as other related technologies. this page is outdated. please help updating it with current information. 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. the core support is very good with few bugs. dtds and other external entities mozilla does not load external entities from the web. mozilla can load external entities whose system identifier uses the chrome protocol. this feature is used mainly to localize mozilla to different languages (the ui strings are stored in external dtd files). another exceptio...
...so make an exception with xhtml documents, see below. mozilla will read internal (dtd) subsets, and in special circumstances external dtds as explained above and will use this information to recognize id type attributes, default attribute values, and general entities. other notes a lot of the document object model (dom, w3c recommendations and drafts) applies to xml. likewise, the cascading style sheets (css, w3c recommendations and drafts) style language can be used to style xml documents. the code for most the core xml can be found in the following directories on the mozilla mercurial repository: content/xml/, parser/expat/ and parser/htmlparser/. the newsgroup to discuss xml in mozilla depends a bit on the nature of the question. for example, dom related questions should probably be discusse...
...mozilla.dev.tech.dom newsgroup, while style issues should be discussed on mozilla.dev.tech.css and so on. the catch-all newsgroup for xml discussion is mozilla.dev.tech.xml. ...
...e need something called a link manager. see some initial design documents. testing and qa we have a lot of testcases linked to from the browser standards compliance qa page. most of the core xml test documents on the mercurial repository are located in content/xml/tests. we also have a couple online: the books demo and the irs table of contents demo. both of them demonstrate xml, associating stylesheets with xml, displaying xml with css, namespaces in xml, xhtml, simple xlinks, and manipulation of xml with scripts via dom. there is an xml component in bugzilla. we also have the "xhtml" keyword for xhtml bugs (these tend to be scattered across components). how can i help? if you can code, look for helpwanted keyword in xml bugs. we don't use that always, so if you want to avoid doing duplicate w...

Custom toolbar button - Archive of obsolete content
/button.xul # thunderbird address book overlay chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul optionally remove the sections for toolbars that you do not need. save the file. explanation: this file defines the extension's content. it adds a stylesheet to the toolbar customization window. then it specifies an overlay for each toolbar. 5. create a directory named chrome. perform the following steps in that directory, creating five files there. explanation: the chrome directory contains files that specify what the extension does. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all...
.... create a directory named chrome. perform the following steps in that directory, creating five files there. explanation: the chrome directory contains files that specify what the extension does. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
...nal custombutton" /> </overlay> optionally customize the file by changing the label and tooltiptext in the last section. change the text between double-quote characters on these two lines. optionally remove the sections for toolbars that you do not need. save the file. explanation: this xul file adds the button to the application's toolbar customization palette. it also links to the stylesheet and javascript code that the button uses. the last section specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons ...
...om buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24px);} there is nothing to customize. save the file. explanation: this css stylesheet specifies how the button is displayed. it links to the button image, specifying the dimensions of the four parts of the image. 8. create a plain text file named button.js. copy the following content, and paste it into the new file: custombutton = { 1: function () { alert("just testing") }, } there is nothing to customize for now. save the file. the next section in this tutorial con...

Creating a Skin - Archive of obsolete content
easier. for this reason, we'll modify only the file findfile.css rather than the global.css file. this section assumes that you are starting with the classic skin. you may wish to make a copy of the files used by the find files dialog before editing. you need to create a file 'findfile.css' in a custom skin. or, you can temporarily place it in the content directory and refer to it using a stylesheet directive. you can modify the existing findfile.css directly to see what it looks like, or you can create a custom skin and link to that. creating a custom skin package to create a skin, do the following: (if you are using firefox 1.5 or later, see manifest files instead of below) create a directory somewhere where you want to place the skin files. copy a manifest file (contents.rdf) from t...
... can see, some simple changes to the style rules has resulted in quite a different appearance to the find files dialog. we could continue by changing the menus, the grippies on the toolbar and the input and checkbox elements. creating a global skin the skin created above is simple and only applies to the find files dialog. some of the changes made to the skin could be placed in the global style sheets (those in the global directory of the skin) to be applied to all applications. for example, having different images for the check boxes in the find files dialog as other windows looks a little odd. this change should really be moved into the global style sheet. try moving the css styles from findfile.css into global.css and then look at some of the dialogs in mozilla. (the cookie viewer is a go...
...for example, rules are already defined for buttons and tabs and so on and we defined additional rules for them. when changing the global skin, you would need to merge the changes into the existing rules. ...
...ce related style rules in the global directory rather than in individual style files. this includes colors, fonts and general widget appearances. if you change the color of something in a local skin file (such as findfile.css), the dialog may look odd if the user changes their global skin. don't expect the user to be using the default one. our find files example with this skin: source view stylesheet see also mozilla css extensions css reference the next section discusses how to make a xul application localizable. « previousnext » ...

Creating a Window - Archive of obsolete content
« previousnext » we're going to be creating a simple find files utility throughout this tutorial. first, however, we should look at the basic syntax of a xul file. creating a xul file an xul file can be given any name but it really should have a .xul extension. the simplest xul file has the following structure: <?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"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements. those will be added in the next section. in fact, there will not be shown any window at all. if you want to f...
...ded in the next section. in fact, there will not be shown any window at all. if you want to force the window to become visible you can add the width and height attribute to the window tag. here is a line by line breakdown of the code above: <?xml version="1.0"?> this line simply declares that this is an xml file. you would normally add this line as is at the top of each xul file. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line is used to specify the style sheets to use for the file. this is the syntax that xml files use to import style sheets. in this case, we import the styles found in the global part of a skin package. we didn't specify a specific file so mozilla will determine which files in the directory to use. in this case, the all-important global.css fi...
...e so mozilla will determine which files in the directory to use. in this case, the all-important global.css file is selected. this file contains all the default declarations for all of the xul elements. because xml does not have any knowledge of how elements should be displayed, the file indicates how. generally, you will put this line at the top of every xul file. you can also import other style sheets using a similar syntax. note that you would normally import the global style sheet from within your own style sheet file. <window this line declares that you are describing a window. each user interface window is described in a separate file. this tag is much like the html tag which surrounds an entire html document, except that a user interface window is described instead of a document. seve...
...evel window without any browser chrome, such as the address field or menu. only chrome urls have additional privileges. the extension developer's extension contains an xul editor that allows you to type in xul code and see the results in real-time from within mozilla! troubleshooting if the xul window fails to show up on the desktop but has an icon on the desktop tool bar, check the xml-stylesheet declaration. make sure that you have included the stylesheet correctly: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> in the next section, we will add some buttons to the window. « previousnext » ...

XUL Structure - Archive of obsolete content
h the same way as html or other types of content are handled. when you type the url of an html page into the browser's address field, the browser locates the web site and downloads the content. the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree. the tree is then converted into a set of objects that can be displayed on the screen. style sheets (css), images, and other technologies are used to control the presentation. xul functions in much the same way. in fact, in mozilla, all document types, whether they are html or xul, or even svg, are all handled by the same underlying code. this means that the same css properties may be used to style both html and xul, and many of the features can be shared between both. however, there are some...
...ferences and bookmarks and perform other privileged operations. obviously, web pages do not get these privileges, unless they are signed with a digital certificate and the user has granted permission to perform these operations. this chrome package registration is the way firefox extensions are able to add features to the browser. the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file. these packaged files can be created by using a zip utility. when the user downloads the zipped file, the packaged files will be installed onto the user's machine. the extension will hook into the browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the browser. to the user, it may see...
...lar way, but, of course, the xul for the application will be included as part of the installation, instead of having to be installed separately as an extension. however, this xul code will be registered in the chrome system such that the application can display the ui. it is worth noting that the mozilla browser itself is actually just a set of packages containing xul files, javascript and style sheets. these files are accessed via a chrome url and have enhanced privileges and work just like any other package. of course, the browser is much larger and more sophisticated than most extensions. firefox and thunderbird, as well as number of other components are all written in xul and are all accessible via chrome urls. you can examine these packages by looking in the chrome directory where firefox...
...ws and the user interface elements contained within them. these are stored in xul files, which have a .xul extension. a content package can have multiple xul files, but the main window should have a filename that is the same as the package name. for example, the editor package will have a file within it called editor.xul. scripts are placed in separate files alongside the xul files. skin - style sheets, images and other theme specific files style sheets describe details of the appearance of a window. they are stored separately from xul files to facilitate modifying the skin (theme) of an application. any images used are stored here also. locale - locale specific files all the text that is displayed within a window is stored separately. this way, a user can have a set for their own languag...

XUL Questions and Answers - Archive of obsolete content
a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done. hidechrome="true" doesn’t work on a mac? unfortunately...
... a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done. hidechrome="true" doesn’t work on a mac? unfortunately, no simple solution to this was posted. a workaround i...
... a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done. hidechrome="true" doesn’t work on a mac? unfortunately, no simple solution to this was posted. a workaround is to open the conten...
... was posted. a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument. is it possible to have checkbox support for multi column lists? the current issue is a person exploring if it is possible to have checkbox support for multi column lists. ...

The Business Benefits of Web Standards - Archive of obsolete content
s article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals. site wide consistent look and feel by separating structure (or content) from presentation, web designers have a lot to gain. specifically, presentation is defined using layout-oriented css language. storing css in a separate document (aka style sheet) and applying it to a set of html documents permits a complete change of presentation for all these documents in a snap. strict html (as opposed to the often-used transitional html markup), forces the designer not to use presentation tags in the html documents, naturally enforcing the separation of content from presentation. by locating all the style and design issues in one document - the style...
... and applying it to a set of html documents permits a complete change of presentation for all these documents in a snap. strict html (as opposed to the often-used transitional html markup), forces the designer not to use presentation tags in the html documents, naturally enforcing the separation of content from presentation. by locating all the style and design issues in one document - the style sheet - whole sites can be rethemed in one go. the blogging community are particularly dynamic in this respect where on many platforms including wordpress, textpattern and habari, the site theme is a complete and discrete entity in its own right. improved user experience: less bandwidth and fast loads html code is often much more compact (therefore easier to read and maintain) when used in conjunctio...
... studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform table-based layouts into css-based layouts. typically this reduces page size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for accessing multiple pages of a site over many visits the savings in bandwidth are huge. improve search engine optimization without costs being well-placed in search engines is one of the hardest challenges faced by webmasters. in this case, every bit helps. by using semantic markup w...
...pers, digital media creators, can be freed from the tyranny of graphics led development, code generators, and incomprehensible markup. but the real value is at the bottom line. the message to accountants, executives and shareholders alike should be irresistible. benefits of css over javascript specifically, graphics and javascript are often used for special effects on text fragments. as style sheet technology gives designers good typographic control and permits effects such as roll-overs, it greatly reduces the need for javascript programming and creation of graphics. even more importantly, it reduces bandwidth consumption by images. well-formed html code saves time and money one of the major headaches for web developers comes from web pages being displayed differently in various browsers...

Getting started with CSS - Learn web development
monly come across, however, for now, we will look at the most usual and useful way of doing so — linking css from the head of your document. create a file in the same folder as your html document and save it as styles.css. the .css extension shows that this is a css file. to link styles.css to index.html add the following line somewhere inside the <head> of the html document: <link rel="stylesheet" href="styles.css"> this <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute. you can test that the css works by adding a rule to styles.css. using your code editor add the following to your css file: h1 { color: red; } save your html and css files and reload the page in a web browser. the...
...active editor below (edit the code boxes), or in your local css document. changing the default behavior of elements when we look at a well-marked up html document, even something as simple as our example, we can see how the browser is making the html readable by adding some default styling. headings are large and bold and our list has bullets. this happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. all modern browsers display html content by default in pretty much the same way. however, you will often want something other than the choice the browser has made. this can be done by simply choosing the html element ...
...of selectors that can help you here, but for now we will look at just a couple. in our document are two <em> elements — one inside a paragraph and the other inside a list item. to select only an <em> that is nested inside an <li> element i can use a selector called the descendant combinator, which simply takes the form of a space between two other selectors. add the following rule to your stylesheet. li em { color: rebeccapurple; } this selector will select any <em> element that is inside (a descendant of) an <li>. so in your example document, you should find that the <em> in the third list item is now purple, but the one inside the paragraph is unchanged. something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in th...
...i>. so in your example document, you should find that the <em> in the third list item is now purple, but the one inside the paragraph is unchanged. something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the html. to do so place a + (an adjacent sibling combinator) between the selectors. try adding this rule to your stylesheet as well: h1 + p { font-size: 200%; } the live example below includes the two rules above. try adding a rule to make a span red, if it is inside a paragraph. you will know if you have it right as the span in the first paragraph will be red, but the one in the first list item will not change color. note: as you can see, css gives us several ways to target elements, and we've only scratched ...

Using CSS generated content - Learn web development
this article describes some ways in which you can use css to add content when a document is displayed. you modify your stylesheet to add text content or images. one of the important advantages of css is that it helps you to separate a document's style from its content. however, there are situations where it makes sense to specify certain content as part of the stylesheet, not as part of the document. you can specify text or image content within a stylesheet when that content is closely linked to the document's structure. note: content specified in a stylesheet does not become part of the dom. specifying content in a stylesheet can cause complications. for example, you might have different language versions of your document that share a stylesheet. if you specify content in your ...
... this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures. ...
... this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures. ...
...can insert text content before or after an element. to specify this, make a rule and add ::before or ::after to the selector. in the declaration, specify the content property with the text content as its value. html a text where i need to <span class="ref">something</span> css .ref::before { font-weight: bold; color: navy; content: "reference "; } output the character set of a stylesheet is utf-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways. for details, see 4.4 css style sheet representation in the css specification. individual characters can also be specified by an escape mechanism that uses backslash as the escape character. for example, "\265b" is the chess symbol for a black queen ♛. for details, see referring to charact...

CSS basics - Learn web development
css is what you use to selectively style html elements. ...
...) is the code that styles web content. css basics walks through what you need to get started. we'll answer questions like: how do i make text red? how do i make content display at a certain location in the (webpage) layout? how do i decorate my webpage with background images and colors? what is css? like html, css is not a programming language. it's not a markup language either. css is a style sheet language. css is what you use to selectively style html elements. for example, this css selects paragraph text, setting the color to red: p { color: red; } let's try it out! using a text editor, paste the three lines of css (above) into a new file. save the file as style.css in a directory named styles. to make the code work, we still need to apply this css (above) to your html document. oth...
... to make the code work, we still need to apply this css (above) to your html document. otherwise, the styling won't change the appearance of the html. (if you haven't been following our project, pause here to read dealing with files and html basics.) open your index.html file. paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css" rel="stylesheet"> save index.html and load it in your browser. you should see something like this: if your paragraph text is red, congratulations! your css is working. anatomy of a css ruleset let's dissect the css code for red paragraph text to understand how it works : the whole structure is called a ruleset. (the term ruleset is often referred to as just rule.) note the names of the individual parts...
...e example by adding more rules and information to the style.css file. first, find the output from google fonts that you previously saved from what will your website look like?. add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags). it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage. next, delete the existing rule you have in your style.css file. it was a good test, but let's not continue with lots of red text. add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your website look like?. the property fon...

CSSStyleRule.selectorText - Web APIs
if set to a selector string which cannot be parsed, a syntaxerror is thrown. ...
...if set to a selector string which cannot be parsed, a syntaxerror is thrown. ...
...if set to a selector string which cannot be parsed, a syntaxerror is thrown. ...
...if set to a selector string which cannot be parsed, a syntaxerror is thrown. ...

HTTP Index - HTTP
he accept request http header advertises which content types, expressed as mime types, the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-type response header. 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. 48 accept-ch client hints, http, http header the accept-ch header is set by the server to specify which client hints headers client should include in subsequent requests. 49 accept-ch-lifetime client hints, http, header the accept-ch-lifetime header is set by the serv...
...rigin policy. 98 csp: script-src csp, content, content-security-policy, directive, http, reference, script, security, script-src, source the http content-security-policy (csp) script-src directive specifies valid sources for javascript. 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. 99 csp: script-src-attr csp, content, content-security-policy, directive, http, reference, script, security, script-src, source the http content-security-policy (csp) script-src-attr directive specifies valid sources for javascript inline event handlers. this includes only inline script event handlers like onclick, but not urls loaded dire...
... content-security-policy (csp) script-src-elem directive specifies valid sources for javascript <script> elements, but not inline script event handlers like onclick. 101 csp: style-src csp, content, content-security-policy, directive, http, reference, security, style, source, style-src the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. 102 csp: style-src-attr csp, content, content-security-policy, directive, http, reference, security, style, source, style-src, style-src-attr the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to individual dom elements. 103 csp: style-src-elem csp, content, content-security-policy, directive, htt...
...e http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to individual dom elements. 103 csp: style-src-elem csp, content, content-security-policy, directive, http, reference, security, style, source, style-src, style-src-elem the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet". 104 csp: trusted-types the http content-security-policy (csp) trusted-types directive instructs user agents to restrict usage of known dom xss sinks to a predefined set of functions that only accept non-spoofable, typed values in place of strings. this allows authors to define rules guarding writing values to the...

Populating the page: how browsers work - Web Performance
ponse once we have an established connection to a web server, the browser sends an initial http get request on behalf of the user, which for websites is most often an html file. once the server receives the request, it will reply with relevant response headers and the contents of the html. <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received. time to...
...nd web fonts. thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. it will retrieve resources in the background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded. the optimizations the preload scanner provides reduce blockages. <link rel="stylesheet" src="styles.css"/> <script src="myscript.js" async></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" async></script> in this example, while the main thread is parsing the html and css, the preload scanner will find the scripts and image, and start downloading them as well. to ensure the script doesn't block the process, add the async attribute, or the de...
...an understand and work with. the browser goes through each rule set in the css, creating a tree of nodes with parent, child, and sibling relationships based on the css selectors. as with html, the browser needs to convert the received css rules into something it can work with. hence, it repeats the html-to-object process, but for the css. the cssom tree includes styles from the user agent style sheet. the browser begins with the most general rule applicable to a node and recursively refines the computed styles by applying more specific rules. in other words, it cascades the property values. building the cssom is very, very fast and is not displayed in a unique color in current developer tools. rather, the "recalculate style" in developer tools shows the total time it takes to parse css, cons...
...e the third step in the critical rendering path is combining the dom and cssom into a render tree.the computed style tree, or render tree, construction starts with the root of the dom tree, traversing each visible node. tags that aren't going to be displayed, like the <head> and its children and any nodes with display: none, such as the script { display: none; } you will find in user agent stylesheets, are not included in the render tree as they will not appear in the rendered output. nodes with visibility: hidden applied are included in the render tree, as they do take up space. as we have not given any directives to override the user agent default, the script node in our code example above will not be included in the render tree. each visible node has its cssom rules applied to it. the ren...

Media - Progressive web apps (PWAs)
nav-area {display: none;} } some common media types are: screen color device display print printed paged media projection projected display all all media (the default) more details there are other ways to specify the media type for a set of rules. the document's markup language might allow the media type to be specified when the stylesheet is linked to the document. for example, in html, you have the option to specify the media type with a media attribute in the link element. in css, you can use @import at the start of a stylesheet to import another stylesheet from a url, optionally specifying the media type. these are ways of separating styling rules for different media types into different files. for full details of media type...
...ge for user interfaces. action: printing a document note: this snippet only works on firefox since it erroneously increments the css counter for fix-position elemnts. it shouldn not work in other browsers. see issue on css3-page. make a new html document, doc4.html. copy and paste the content from here: <!doctype html> <html> <head> <title>print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>section a</h1> <p>this is the first section...</p> <h1>section b</h1> <p>this is the second section...</p> <div id="print-head"> heading for paged media </div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style4.css. copy and paste the content from here: /*** print sample ***/...
...:0pt; right: 0pt; font-size: 200%; text-align: center; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: page; } } /* end print only */ view this document in your browser. it uses your browser's default style. print (or print preview) the document. the stylesheet places each section on a separate page, and it adds a header and footer to each page. if your browser supports counters, it adds a page number in the footer. heading for paged media section a this is the first section... page: 1 ...
... section b this is the second section... page: 2 challenges move the print-specific style rules to a separate css file. read the @import reference page to find details of how to import the new print-specific css file into your style4.css stylesheet. make the headings turn blue when the mouse pointer is over them. see solutions to these challenges. what next? so far, all the style rules in this tutorial have been specified in files. the rules and their values are fixed. the next page describes how you can change rules dynamically by using a programming language: javascript. ...

The building blocks of responsive design - Progressive web apps (PWAs)
y the layout problem, and this can be done using media queries. note: media queries are a css3 feature that allow you to selectively apply css depending on the results of media feature tests — for more on the basics, read media queries. typical desktop layout in our example, we have a desktop layout, as we've already seen. this is created using the css rules included at the top of the stylesheet, before any media queries are encountered. mid-width layout we also have a mid-width layout, which is aimed at working well on tablets and narrow laptop screens. this is created by all of the css inside the first media query: @media all and (max-width: 1024px) { x-card:nth-child(1), x-card:nth-child(2) { width: 50%; } x-card:nth-child(3) { width: 100%; clear: left; } ...
... next up, the font-size of the buttons is set to 6.8vw. why? because the top-margin of the x-cards was set to 17vw earlier on. all buttons in the app have been set to have...
...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). next up, the font-size of the buttons is set to 6.8vw. why? because the top-margin of the x-cards was set to 17vw earlier on. all buttons in the app have been set to have a line-height of 2.5, in the default css at the top of the stylesheet (check if you don't believe me.) and 6.8 x 2.5 = 17. last, we have used flex: 1; to make the buttons always take up the same proportion of space on the line. let's have a look at the mobile layout, in the below image. but there are more tricks up our sleeves for this mobile app layout! as mentioned above, we used mozilla brick, a collection of ready-rolled mobile ui components, in the making of...
...e on using brick, read mozilla brick: ready made ui components. what's more relevant to this article is that we didn't want the brick css and javascript files being applied to the markup unless we were looking at the mobile app view. to achieve this, we applied the brick css to the page using a separate <link> element with a media attribute: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> this says that the whole stylesheet will not be linked to the html unless the viewport width is 480px or less. moving on to the javascript, <script> elements don't accept media attributes, so i had to do this a different way. fortunately there is a javascript construct called window.matchmedia(), which can conditionally run javascript constructs depending on ...

Content type - SVG: Scalable Vector Graphics
for properties defined in css2, an angle unit identifier must be provided. ...
...ementid> or #xpointer(id<elementid>)). non-local iri references, where the iri reference does contain an <absoluteiri> or <relativeiri>. for the full specification of iri references in svg, see svg 1.1 (2nd edition): iri references. length <length> a length is a distance measurement, given as a number along with a unit. lengths are specified in one of two ways. when used in a stylesheet, a <length> is defined as follows: length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")? see the css2 specification for the meanings of the unit identifiers. for properties defined in css2, a length unit identifier must be provided. for length values in svg-specific properties and their corresponding presentation attributes, the length unit identifier is optiona...
...for example, a <list-of-lengths> is represented in the svg dom using an svglengthlist or svganimatedlengthlist object. name <name> a name, which is a string where a few characters of syntactic significance are disallowed. name ::= [^,()#x20#x9#xd#xa] /* any char except ",", "(", ")" or wsp */ number <number> real numbers are specified in one of two ways. when used in a stylesheet, a <number> is defined as follows: number ::= integer | [+-]? [0-9]* "." [0-9]+ this syntax is the same as the definition in css (css2, section 4.3.1). when used in an svg attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely: number ::= integer ([ee] integer)? | [+-]? [0-9]* "." [0-9]+ ([ee] integer)? w...
...graphics element. the available options and syntax for <paint> are described in specifying paint. within the svg dom, <paint> values are represented using svgpaint objects. 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. percentage values are always relative to another value (for example, a length). each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers. within the svg dom, a <percentage> is represented using an svgnumber or svganimatednumber object. time <time> a ...

Subresource Integrity - Web security
integrity verification of a resource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin. 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. however, using cdns also comes with a risk, in that if an attacker gains control of a cdn, the attacker can inject arbitrary malicious content into files on the cdn (or replace the files completely) and thus can also potentially attack all sites that fetch files from that cdn. subresource integrity enables...
...: sha384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha384 indicates that it's a sha384 hash. 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). but it’s common to use the shorthand "hash" to mean cryptographic digest, so that's what's used in this article. tools for generating sri hashes you can generate sri hashes from the command-line with openssl using a command invocation such as this: cat filename.js | openssl dgst -sha384 -binary | openssl base64 -a or with shasum using a command invocation such as this: shasum -b -a...
...qlgyl1kpzqho1wx4jwy8wc" crossorigin="anonymous"></script> note: for more details on the purpose of the crossorigin attribute, see cors settings attributes. 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. note: for subresource-integrity verification of a resource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource...
...r stylesheet to the expected hash given in the integrity value. note: for subresource-integrity verification of a resource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin. 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. specifications specification status comment subresource integrity recommendation fetch living standard ...

Using custom elements - Web Components
/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info> note: you can see the full javascript source code here. internal vs. ...
...ers on the back of your card."></popup-info> note: you can see the full javascript source code here. internal vs. external styles in the above example we apply style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead. ...
...y style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead. for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads. many modern browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, t...
...with this optimization the performance of external and internal styles should be similar. ...

XML introduction - XML: Extensible Markup Language
e numeric character references to specify special characters; for example, &#xa9; is the "©" symbol. displaying xml xml is usually used for descriptive purposes, but there are ways to display xml data. if you don't define a specific way for the xml to be rendered, the raw xml is displayed in the browser. ...
...special characters; for example, &#xa9; is the "©" symbol. displaying xml xml is usually used for descriptive purposes, but there are ways to display xml data. if you don't define a specific way for the xml to be rendered, the raw xml is displayed in the browser. one way to style xml output is to specify css to apply to the document using the xml-stylesheet processing instruction. ...
...&#xa9; is the "©" symbol. displaying xml xml is usually used for descriptive purposes, but there are ways to display xml data. if you don't define a specific way for the xml to be rendered, the raw xml is displayed in the browser. one way to style xml output is to specify css to apply to the document using the xml-stylesheet processing instruction. ...
...but there are ways to display xml data. if you don't define a specific way for the xml to be rendered, the raw xml is displayed in the browser. one way to style xml output is to specify css to apply to the document using the xml-stylesheet processing instruction. <?xml-stylesheet type="text/css" href="stylesheet.css"?> there is also another more powerful way to display xml: the extensible stylesheet language transformations (xslt) which can be used to transform xml into other languages such as html. this makes xml incredibly versatile. <?xml-stylesheet type="text/xsl" href="transform.xsl"?> recommendations this article is obviously only a very brief introduction to what xml is, with a few small examples and references to get you started. for more details about xml, you should look around ...

dev/panel - Archive of obsolete content
however, it can receive messages from the add-on that created it, and the add-on can pass it the debuggee so it can communicate with the debugger...
...es you a javascript api to the remote debugging protocol. note that at the moment volcan.js does not support the complete remote debugging protocol. we're still working on documenting exactly which messages are supported by volcan.js. ...
... is fulfilled with an object representing the root actor: volcan.connect(debuggee).then(gotroot); function gotroot(root) { // can use root actor here } actors actors in the remote debugging protocol are volcan.js objects. the messages actors can accept are methods of those objects. the message type becomes the method name. for example, the root actor object has a method listtabs and the stylesheet actor object has a method getstylesheets. any additional parameters sent in the message become arguments to the method. if a message is expected to get a reply, then the method returns a promise which is fulfilled with the reply. if the message reply in the remote debugging protocol would contain an actor id, then in volcan.js the object that fulfills the promise contains that actor instance. if...

CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future. modules and the standardization process css level 2 needed 9 years, from august 2002 to june 2011 to reach the recommendation status. this was due to the fact that a few secondary features held back the whole specification. ...
...it plans to add the ability to clip a border (with the css border-clip, border-clip-top, border-clip-right, border-clip-bottom, and border-clip-left properties) or to control the shape of the border in a corner (using the css border-corner-shape property). css conditional rules module level 3 candidate recommendation adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. it consists mainly in allowing nested at-rules inside @media and the adding of a new css at-rule, @supports, and a new dom method css.supports(). css multi-column layout module working draft adds support for easy multi-column layouts using the css columns, column-count, co...
...flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap. css cascading and inheritance level 3 candidate recommendation adds: the initial, unset values for properties. the css all property. the scoping mechanism. clarifies: interaction of media-dependent @import statements and style sheet loading requirements. css writing modes module level 3 proposed recommendation defines the writing modes of both horizontal and vertical scripts and clarifies how the css direction and unicode-bidi properties interact with the new css text-orientation property, and extends them where needed. css counter styles level 3 candidate recommendatio...

XBL 1.0 Reference - Archive of obsolete content
s extensible binding language (xbl) 1.0 as implemented in gecko browsers. extensible binding language is a xml-based markup language to implement reusable components (bindings) that can be bound to elements in other documents. the element with a binding specified, called the bound element, acquires the new behavior specified by the binding. bindings can be bound to elements using cascading style sheets (css) or dom. one element can be bound to several bindings at once. functionally bindings should be correlated with behaviors and viewlink but being implemented as one integrated xml solution. bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is ...
...lected yet in this document. the documentation process is still in progress: please keep it in your mind while using the provided information. xbl elements xbl 1.0 elements are in the http://www.mozilla.org/xbl namespace. ...
... this example is targeted to demonstrate the xbl usage rather than to be a practically useful application. for this reason it contains many comments and some blocks could be avoided in a more co...

Complete - Archive of obsolete content
ic in chrome.manifest. for example, if you are using modern, it loads: skin/modern/allcustom/seamonkey/allcustom.css from inside the jar. when you restart after installing the extension, the skins classic and modern are both registered for the component allcustom. you can see the registration details in installed-chrome.txt and chrome.rdf. ...
...re using modern, it loads: skin/modern/allcustom/seamonkey/allcustom.css from inside the jar. when you restart after installing the extension, the skins classic and modern are both registered for the component allcustom. you can see the registration details in installed-chrome.txt and chrome.rdf. when the xul file, allcustom.xul is loaded, the stylesheet declaration near the top loads a stylesheet from chrome://allcustom/skin/. the application's chrome registry converts this to the correct css file for the theme you are using. the xul toolbarbutton tag has an id all-custom-1. the css stylesheet uses the corresponding selector #all-custom-1 to provide the appropriate image: button-1.png file structure in the new file structure, there is a skin directory for all the themes. each theme has...
...1.png file structure in the new file structure, there is a skin directory for all the themes. each theme has its own directory there. in each theme's directory, there is an allcustom directory. this is useful when files from various components and extensions and all unpacked in the same place—it keeps each set of files separate. the allcustom directory contains the icon images and the css stylesheet. the file contents.rdf contains registration data used by seamonkey. testing a theme to test a theme in seamonkey, choose view – apply theme, then choose the theme. restart seamonkey. application differences some differences between firefox etc. and seamonkey cause complications for this extension. to resolve the differences, the extension uses firefox etc. and seamonkey's different registratio...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
ve the sections for toolbars where you do not want your button. save the file. explanation: this file contains details of your extension, and specifies how it modifies seamonkey. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
...on[1]()" class="toolbarbutton-1 custombutton" /> </overlay> optionally customize the file by changing the label, accesskey and tooltiptext attributes. change the text between double-quote characters on those lines. optionally remove the sections for toolbars that you do not need. save the file. explanation: this xul file adds the button to the toolbars. it also links to the stylesheet and javascript code that the button uses. the last section specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern *...
...ustombutton:hover {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 183px 20px 164px);} remove one of the common style sections, leaving the section for the theme that you use in seamonkey. (if you leave both sections in the file, then your button's appearance will match the classic theme.) save the file. explanation: this css stylesheet specifies how the button is diaplayed. it links to the button image, specifying the dimensions of the six parts of the image. 8. create a plain text file named button.js. copy the following content, and paste it into the new file: custombutton = { 1: function () { alert("just testing") }, } there is nothing to customize for now. save the file. the next section in ...

Adding Buttons - Archive of obsolete content
as the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with. you'll see this attribute on all elements. you'll want to use this if you want to refer to the button in a style sheet or script. however, you should add this attribute to almost all elements. it isn't always placed on elements in this tutorial for simplicity. class the style class of the button. this works the same as in html. it is used to indicate the style that the button appears in. in this case the value dialog is used. in most cases, you will not use a class for a button. label the label that will ap...
...cate the style that the button appears in. in this case the value dialog is used. in most cases, you will not use a class for a button. label the label that will appear on the button. for example, ok or cancel. if this is left out, no text appears. image the url of the image to appear on the button. if this is attribute is left out, no image appears. you can also specify the image in a stylesheet using the list-style-image property. disabled if this attribute is set to true, the button is disabled. this is usually drawn with the text in grey. if the button is disabled, the function of the button cannot be performed. if this attribute is left out entirely, the button is enabled. you can switch the disabled state of the button using javascript. accesskey this should be set to a letter...
...browser windows. due to this, the buttons will appear to stretch across the window. you can add align="start" to the window tag to prevent the stretching. the findfile.xul example let's add this code to the file findfile.xul that we created in the previous section. the code needs to be inserted in-between the window tags. the code to add is shown in red below: <?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"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also. the window has been given a hori...

Adding Labels and Images - Archive of obsolete content
has an element to display images within a window. this element is appropriately named image. note that the tag name is different than html (image instead of img). you can use the src attribute to specify the url of the image file. ...
...tely named image. note that the tag name is different than html (image instead of img). you can use the src attribute to specify the url of the image file. 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. ...
.../> 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. because images vary by theme, you would usually place images in the skin directory. in the next section, we will learn how to add some input controls...

Introduction to XBL - Archive of obsolete content
perties that the xbl defined element has. binding example the box is generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself). by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...
...ox is generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself). by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...
..."?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="okcancel"> <content> <xul:button label="ok"/> <xul:button label="cancel"/> </content> </binding> </bindings> this example creates a window with a single box. the box has been declared to have a class of okcancelbuttons. the style sheet associated with the file says that boxes with the class okcancelbuttons have a specialized binding, defined in the xbl file. you may use other elements besides the box, even your own custom tags. we'll look more at the details of the xbl part in the next section. however, to summarize, it causes two buttons to be added automatically inside the box, one an ok button and the other a cancel button. ...

Styling a Tree - Archive of obsolete content
want a particular row to have a blue background color. this would be used to implement mozilla mail's labels feature. we'll use a property called 'makeitblue'. you can use whatever name you want. you can set multiple properties by separating them with spaces. set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels. you can think of the properties as functioning much like style classes, although they require a somewhat more complex syntax to use in a style sheet. this is because you can specify the style for a number of parts of the cell individually. you can style not only the cell and its text, but the twis...
... apply to any row that is 'readonly' regardless of whether other properties such as 'unread' are set. treechildren::-moz-tree-row(readonly) { border: 1px solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. you can use these extra properties to set the appearance of containers or selected rows. the following properties are automatically set as needed: checked this property is set cells whose column is type="checkbox" focus this property is set if the tree currently has the focus. selected this property is set for rows or cells that are currently selected. current this property is set if t...
...mponents.classes["@mozilla.org/atom-service;1"]. getservice(components.interfaces.nsiatomservice); props.appendelement(aserv.getatom("makeitblue")); } else { return "makeitblue"; } } } this function would be defined as part of a view object. it first checks to see which row is being requested and sets a property for cells in every fourth row. ...

nsIContentPolicy - Archive of obsolete content
ue description type_other 1 indicates content whose type is unknown, or is not interesting outside a limited use case. in general, you should try not to use this type unless none of the others is a fit. type_script 2 indicates an executable script (such as javascript). type_image 3 indicates an image (for example, <img> elements). type_stylesheet 4 indicates a stylesheet (for example, <style> elements). type_object 5 indicates a generic object (plugin-handled content typically falls under this category). type_document 6 indicates a dom document at the top-level (that is, directly within a browser tab). type_subdocument 7 indicates a document contained within another document (for exa...
...a plugin. type_dtd 13 indicates a dtd loaded by an xml document. type_font 14 indicates a font loaded via @font-face rule. type_media 15 indicates a video or audio load. type_websocket 16 indicates a websocket load. type_csp_report 17 indicates a content security policy report. type_xslt 18 indicates a style sheet transformation. type_beacon 19 indicates a beacon post. type_fetch 20 indicates a load initiated by the globalfetch.fetch() method, which is available as a global in both window and worker contexts. type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>. type_web_manifest 22 indicates a request to l...
...note: this rejection only applies to the current request on this server, not to future requests of the same type. accept 1 returned from shouldload() or shouldprocess() if the load or process request is not rejected. ...

Browser Detection and Cross Browser Support - Archive of obsolete content
dvise everyone to avoid this trap. problems caused by inappropriate browser detection excluding unknown browsers if you only provide tests for specific browsers in your detection logic, your site will not be usable if a visitor uses a different browser. consider the following example: // wrong approach - do not use! if (document.all) { // internet explorer 4+ document.write('<link rel="stylesheet" type="text/css" src="style-ie.css">'); } else if (document.layers) { // navigator 4 document.write('<link rel="stylesheet" type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in their browser. users of netscape 6, netscape 7, compuserve 7, mozilla, ...
...features not available in // other browsers. </script> </body> </html> using netscape navigator 4's css limitations it is possible to use netscape navigator 4's limitations for css support to automatically exclude certain css rules from ever being seen by navigator 4. for example, navigator 4 does not understand the @import directive in css and will not load any external css style sheets specified via @import. this technique can be used to provide basic common css rules for all browsers (including navigator 4) while providing more advanced rules in a external css file for more modern css compliant browsers. <style type="text/css"> /* navigator 4 css rules */ </style> <style type="text/css"> /* advanced css rules ignored by navigator 4 */ @import "advanced.css"; </style> a si...
...les in a external css file for more modern css compliant browsers. <style type="text/css"> /* navigator 4 css rules */ </style> <style type="text/css"> /* advanced css rules ignored by navigator 4 */ @import "advanced.css"; </style> a similar technique is available for hiding css rules from navigator 4 using the fact that navigator 4 will ignore css rules after an occurence of /*/*/ in a stylesheet. <style type="text/css"> /* navigator 4 css rules */ /*/*/ /* advanced css rules ignored by navigator 4 */ </style> devedge uses this technique to hide advanced css from navigator 4. use feature oriented object detection object detection is a powerful method of providing cross browser support in your web content. although you can use object detection as just another means of distinguishing ...

-moz-window-shadow - Archive of obsolete content
heritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the keyword values listed below. ...
...he -moz-window-shadow property is specified as one of the keyword values listed below. values default the window will have a shadow with the default window shadow style. ...
...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. ...

Animations and tweens - Game development
. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson14.html. to make the game look more juicy and alive we can use animations and tweens. this will result in a better, more entertaining experience. let's explore how to implement phaser animations and tweens in our game. ...
...live we can use animations and tweens. this will result in a better, more entertaining experience. let's explore how to implement phaser animations and tweens in our game. animations in phaser, animations, involve taking a spritesheet from an external source and displaying the sprites sequentially. as an example, we will make the ball wobble when it hits something. first of all, grab the spritesheet from github and save it in your /img directory. next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images. we will show the sprites sequentially to create the illusion of anim...
...save it in your /img directory. next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images. we will show the sprites sequentially to create the illusion of animation. the spritesheet() method's two extra paremeters determine the width and height of each single frame in the given spritesheet file, indicating to the program how to chop it up to get the individual frames. loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to animations.add() seen below: ball = game.add.sprite(50, 250, 'ball'); bal...

Debugging CSS - Learn web development
and you are trying to work out which property is causing the problem. the following video provides some useful tips on debugging css using the firefox devtools: editing values in addition to turning properties on and off, you can edit their values. perhaps you want to see if another color looks better, or wish to tweak the size of something? devtools can save you a lot of time editing a stylesheet and reloading the page. with box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. a color picker will open up and you can try out some different colors; these will update in real time on the page. in a similar fashion, you could change the width or style of the border. adding a new property you can add properties using the devtools. perhap...
...esn't seem to take the css. what is generally happening here is that a more specific selector is overriding your changes, and here devtools will really help you out. in our example file there are two words that have been wrapped in an <em> element. one is displaying as orange and the other hotpink. 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. devtools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet. inspect the <em> wi...
...for a while. sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier. do you have valid html and css? browsers expect your css and html to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. if you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. in addition, two different browsers might cope with the problem in two different ways. a good first step therefore is to run your html and css through a validator, to pick up and fix any errors. css validator html validator is the property a...

CSS first steps - Learn web development
this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e. ...
...n a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles, which will take you through all the basic theory of css, and provide opportunities for you to test out some skills. what is css? css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood? this article explains what css is, with a simple syntax example, and also covers some key terms about the language. getting started with css in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way. how css is structured now that ...
... css is structured now that you have an idea about what css is and the basics of using it, it is time to look a little deeper into the structure of the language itself. we have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing. how css works we have learned the basics of css, what it is for and how to write simple stylesheets. in this lesson we will take a look at how a browser takes css and html and turns that into a webpage. using your new knowledge with the things you have learned in the last few lessons you should find that you can format simple text documents using css, to add your own style to them. this article gives you a chance to do that. ...

CSS FAQ - Learn web development
sitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> when at all possible, you should just use the html5 doctype. why doesn't my css, which is valid, render at all? here are some possible causes: you've got the path to css file wrong. to be applied, a css stylesheet must be served with a text/css mime type. if the web server doesn't serve it with this type, it won't be applied. what is the difference between id and class? html elements can have an id and/or class attribute. the id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. the class attribute assigns a class name to the ele...
... ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique): using classes makes your styling extensible — even if you only have one element to style with a particular ruleset now, you might want to add more later. classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. shorter stylesheets are more performant. class selectors have lower specificity than id selectors, so are easier to override if needed. note: see selectors for more information. how do i restore the default value of a property? initially css didn't provide a "default" keyword and the onl...
...old; color: red; } <!-- news item text is black, but corporate name is red and in bold --> <div class="news"> (reuters) <span class="corpname">general electric</span> (ge.nys) announced on thursday... </div> in case of complex html hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style. explicitly re-defined style rule in css stylesheets, order is important. if you define a rule and then you re-define the same rule, the last definition is used. #stockticker { font-weight: bold; } .stocksymbol { color: red; } /* other rules */ /* other rules */ /* other rules */ .stocksymbol { font-weight: normal; } <!-- most text is in bold, except "ge", which is red and not bold --> <div id="stockticker"...

HTML table basics - Learn web development
ble work? the point of a table is that it is rigid. information is easily interpreted by making visual associations between row and column headers. look at the table below for example and find a jovian gas giant with 62 moons. you can find the answer by associating the relevant row and column headers. data about the planets of our solar system (planetary facts taken from nasa's planetary fact sheet - metric. name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 closest to the sun venus 4.87 12,104 5243 8.9 2802.0 108.
...applied. be under no illusion; for tables to be effective on the web, you need to provide some styling information with css, as well as good solid structure with html. in this module we are focusing on the html part; to find out about the css part you should visit our styling tables article after you've finished here. we won't focus on css in this module, but we have provided a minimal css stylesheet for you to use that will make your tables more readable than the default you get without any styling. you can find the stylesheet here, and you can also find an html template that applies the stylesheet — these together will give you a good starting point for experimenting with html tables. when should you not use html tables? html tables should be used for tabular data — this is what they ...
...instead of doing this, we can specify the information once, on a <col> element. <col> elements are specified inside a <colgroup> container just below the opening <table> tag. we could create the same effect as we see above by specifying our table as follows: <table> <colgroup> <col> <col style="background-color: yellow"> </colgroup> <tr> <th>data 1</th> <th>data 2</th> ...

CSS performance optimization - Learn web development
dditional files to reduce css render blocking. optimizing for render blocking css can scope styles to particular conditions with media queries. media queries are important for a responsive web design and help us optimize a critical rendering path. ...
...styles it knows it will not use, such the print stylesheets. by splitting the css into multiple files based on media queries, you can prevent render blocking during download of unused css. to create a non-blocking css link, move the not-immediately used styles, such as print styles, into separate file, add a <link> to the html mark up, and add a media query, in this case stating it's a print stylesheet. <link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking. ...
...g it's a print stylesheet. <link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking. tell the browser when the style sheet should be applied by adding a media attribute with the media query. when the browser sees a style sheet it knows that it only needs to apply it for a specific scenario, it still downloads the stylesheet, but doesn't render block. by separating out the css into multiple files, the main render-blocking file, in this case styles.css, is much smaller, reducing the time that rendering is blocked. ani...

Properly configuring server MIME types - Learn web development
pes as reported by web servers and web applications. what are mime types? mime types describe the media type of content either in email or served by web servers or web applications and are intended to help guide a web browser in how the content is to be processed and displayed. 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. the http specification defines a superset of mime which is used to describe the media types used on the web. why are correct mime types...
...rtant for security reasons; it's possible for malicious content to affect the user's computer by pretending to be a safe type of document when it is in fact not. note: historically, firefox has loaded css files even if they had the wrong mime type, as long as the html document that requested them was being processed in quirks mode. 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 sty...
...oaded 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. why browsers should not guess mime types apart from violating the http specification, it is a bad strategy for browsers to guess mime types for the following reasons: loss of control if the browser ignores the reported...

React resources - Learn web development
quisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to provide further resources for learning more about react. 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. create-react-app makes it possible to import css files into javascript modules, so that css is only sent to your user when the corresponding component is rendered. 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 './for...
...g component is rendered. 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. ...
... react devtools we used console.log() to check on the state and props of our application in this tutorial, and you'll also have seen some of the useful warnings and error message that react gives you both in the cli and your browser's javascript console. but there's more we can do here. ...

Handling common HTML and CSS problems - Learn web development
ser just ignores them. ie conditional comments ie conditional comments are a modified proprietary html comment syntax, which can be used to selectively apply html code to different versions of ie. this has proven to be a very effective mechanism for fixing cross browser bugs. the syntax looks like this: <!--[if lte ie 8]> <script src="ie-fix.js"></script> <link href="ie-fix.css" rel="stylesheet" type="text/css"> <![endif]--> this block will apply the ie-specific css and javascript only if the browser viewing the page is ie 8 or older. lte means "less than or equal to", but you can also use lt, gt, gte, ! for not, and other logical syntax. note: sitepoint's internet explorer conditional comments provides a useful beginner's tutorial/reference that explains the conditional comment synt...
... a useful beginner's tutorial/reference that explains the conditional comment syntax in detail. as you can see, this is especially useful for applying code fixes to old versions of ie. the use case we mentioned earlier (making modern semantic elements styleable in old versions of ie) can be achieved easily using conditional comments, for example you could put something like this in your ie stylesheet: aside, main, article, section, nav, figure, figcaption { display: block; } it isn't that simple, however — you also need to create a copy of each element you want to style in the dom via javascript, for them to be styleable; this is a strange quirk, and we won't bore you with the details here. for example: const asideelem = document.createelement('aside'); ... this sounds like a pain to...
...n automation tool to do it for you. and such tools exist: the prefix-free javascript library can be attached to a page, and will automatically detect what capabilities are possessed by browsers viewing the page and add prefixes as appropriate. it is really easy and convenient to use, although it does have some downsides (see the link above for details), and it is arguable that parsing every stylesheet in your site and add prefixes at run time can be a drain on the computer's processing power for a large site. another solution is to add prefixes automatically during development, and this (and other things besides) can be done using tools like autoprefixer and postcss. these tools can be used in a variety of ways, for example autoprefixer has an online version that allows you to enter your non-...

Displaying Places information using views
eneric and will save you a lot of time writing basic functionality so that you can focus on building your extension or application. places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places". 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. the overlay contains javascript required...
..."1" primary="true" /> <treecol id="url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in browser/components/places/content/tree.xml. see the tree reference and trees tutorial for general information about trees. 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. ...
...treecol id="url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in browser/components/places/content/tree.xml. see the tree reference and trees tutorial for general information about trees. 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. col...

Experimental features in Firefox
on desktop, but you can track the state of that just in case it changes in bug 1551302. release channel version added enabled by default? nightly 63 no developer edition 63 no beta 63 no release 63 starting in firefox 68, on android only preference name dom.visualviewport.enabled constructable stylesheets the addition of a constructor to the cssstylesheet interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the html. this makes it much easier to create reusable stylesheets for use with shadow dom. our implementation is not yet complete; see bug 1520690 for more details. release channel version added...
...kes it much easier to create reusable stylesheets for use with shadow dom. our implementation is not yet complete; see bug 1520690 for more details. release channel version added enabled by default? nightly 73 no developer edition 73 no beta 73 no release 73 no preference name layout.css.constructable-stylesheets.enabled webrtc and media the following experimental features include those found in the webrtc api, the web audio api, the media session api, the media source extensions api, the encrypted media extensions api, and the media capture and streams api. media session api the entire firefox implementation of the media session api is currently experimental. this api is used to customize the ...
...nt with new ideas, add new features, and test them on the nightly and developer edition channels before letting them go through to beta and release. the features below are the current crop of experimental developer tool features. color scheme simulation adds an option to simulate different color schemes allowing to test @prefers-color-scheme media queries. using this media query lets your style sheet specify whether it prefers a light or dark user interface. this feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting). see bug 1550804 and bug 1137699 for more details. release channel version added enabled by default? nightly 72 no developer ed...

Chrome-only CSS reference
-moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
... -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
...it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe ...

WebRequest.jsm
opt_extrainfospec argument. statuscode number http response code. types resource types the resource type string identifies the kind of resource being fetched. it's used in two places: filtering requests by type, and as the type property of the argument passed to the listener. ...
...ce://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); webrequest.onbeforerequest.addlistener(logurl, {urls: pattern}); function logurl(e) { console.log("loading: " + e.url); } this listener will be invoked for requests matching any of the three patterns, where the resource type is "stylesheet" or "image": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); webrequest.onbeforerequest.addlistener(listener...
...matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); webrequest.onbeforerequest.addlistener(listener, { urls: pattern, types: ["image", "stylesheet"] }); function listener(e) { console.log("matched: " + e.url); } canceling this example cancels requests to load content from "http://example.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("http://example.org/*"); webrequest.onbefor...

about:memory
...
...esents all javascript window objects, which includes the browser tabs and ui windows. for example, the "top(http://edition.cnn.com/, id=8)" sub-tree represents the tab open to cnn.com, and "top(chrome://browser/content/browser.xul, id=3)" represents the main browser ui window. within each window's measurements are sub-trees for javascript ("js-compartment(...)" and "js-zone(...)"), layout, style-sheets, the dom, and other things. it's clear that the cnn.com tab is using more memory than the techcrunch.com tab, which is using more than the arstechnica.com tab. sub-trees with names like "(2 tiny)" are artificial nodes inserted to allow insignificant sub-trees to be collapsed by default. if you select the "verbose" checkbox before measuring, all trees will be shown fully expanded and no artific...
...───4.00 mb (14.95%) ── pres-shell │ ├───1.79 mb (06.68%) ── frames │ ├───0.89 mb (03.33%) ── style-contexts │ ├───0.62 mb (02.33%) ── rule-nodes │ ├───0.56 mb (02.10%) ── pres-contexts │ ├───0.47 mb (01.75%) ── line-boxes │ └───0.04 mb (00.14%) ── text-runs ├───6.53 mb (24.39%) ── style-sheets ├───5.59 mb (20.89%) -- dom │ ├──3.39 mb (12.66%) ── element-nodes │ ├──1.56 mb (05.84%) ── text-nodes │ ├──0.54 mb (02.03%) ── other │ └──0.10 mb (00.36%) ++ (4 tiny) └───0.06 mb (00.21%) ── property-tables some of the trees in this section measure things that do not cross-cut the measurements in the "explicit" tree, such ...

inIDOMUtils
long getspecificity(in nsidomcssstylerule arule, in unsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setconte...
...hen the element containing the insertion point is returned instead. getruleline() returns the line number of the specified css style rule in its source file. unsigned long getruleline( in nsidomcssstylerule arule ); parameters arule the style rule to retrieve the line number of. return value the line number of the style rule; the url of the rule can be obtained from its parent style sheet object. getrulecolumn() returns the column number of the specified css style rule in its source file. unsigned long getrulecolumn( in nsidomcssstylerule arule ); parameters arule the style rule to retrieve the column number of. return value the column number of the style rule; the url of the rule can be obtained from its parent style sheet object. getusedfontfaces() returns a list...
...space. in particular, this will be false if certain css white-space styles are in effect. isinheritedproperty() determines if the specified string names a css property that is inherited by default. boolean isinheritedproperty( in astring apropertyname ); parameters apropertyname the name of the css property. return value true if the property is inherited, otherwise false. parsestylesheet() parse css and update the style sheet in place. void parsestylesheet( in nsidomcssstylesheet asheet, in domstring ainput ); parameters asheet a domcssstylesheet. ainput a domstring. the new source string for the style sheet. return value void setcontentstate() sets the given element as the current owner of the specified state, and removes that state from the previous owner. v...

Migrating from Firebug - Firefox Developer Tools
devtools have a variables side panel, which works basically the same. the main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. though you can inspect that object either via the dom property viewer or via the web console. style editor the style editor in the firefox devtools allows you to examine and edit the different css style sheets of a page like firebug's css panel does it. in addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. it also allows you to toggle individual style sheets. switch between sources the css panel of firebug allows to switch between different css sources using the css location menu. the style editor has a sidebar for this purpose. edi...
...e like firebug's css panel does it. in addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. it also allows you to toggle individual style sheets. switch between sources the css panel of firebug allows to switch between different css sources using the css location menu. the style editor has a sidebar for this purpose. edit a style sheet firebug's css panel offers three different ways for editing style sheets. the default one is to edit them inline like within the style side panel. furthermore it has a source and a live edit mode, which allow to edit the selected style sheet like within a text editor. the style editor of the devtools only has one way to edit style sheets, which corresponds to firebug's live edit mode. try out c...
...ke within a text editor. the style editor of the devtools only has one way to edit style sheets, which corresponds to firebug's live edit mode. try out css selectors firebug's selectors side panel provides a way to validate a css selector. it lists all elements matching the entered selector. the devtools don't have this feature yet, but it's requested in bug 1323746. searching within the style sheets firebug allows to search within the style sheets via the search field. the style editor in the devtools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see bug 889571) and also not via a regular expression (see bug 1362030. performance tool firebug allows to profile javascript performance via the "profile" button within...

Document.readyState - Web APIs
e loading state of the document. when the value of this property changes, a readystatechange event fires on the document object. syntax var string = document.readystate; values the readystate of a document can be one of following: loading the document is still loading. interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading. complete the document and all sub-resources have finished loading. the state indicates that the load event is about to fire. examples different states of readiness switch (document.readystate) { case "loading": // the document is still loading. break; case "interactive": // the document has finished loading. we can now access the dom elements. ...
... document and all sub-resources have finished loading. the state indicates that the load event is about to fire. examples different states of readiness switch (document.readystate) { case "loading": // the document is still loading. break; case "interactive": // the document has finished loading. we can now access the dom elements. ...
... document has finished loading. we can now access the dom elements. // but sub-resources such as images, stylesheets and frames are still loading. var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded. ...

Examples of web and XML development using the DOM - Web APIs
/> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom. in this case, you are manipulating the individual styles directly. in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><...
... color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document. you can access these stylesheets and their rules individually using the stylesheet, style, and cssrule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console. var ss = document.stylesheets; for(var i = 0; i < ss.length; i+...
...ylesheets and their rules individually using the stylesheet, style, and cssrule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console. var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way. when the body of this html document loads, an even...

PaymentRequest.show() - Web APIs
be updated between instantiating the payment interface and the user beginning to interact with it. the promise should resolve with a paymentdetailsupdate object containing the updated information. return value a promise that eventually resolves with a paymentresponse. the promise is resolved when the user accepts the payment request (such as by clicking a "pay" button in the browser's payment sheet). exceptions aborterror the returned promise rejects with an aborterror if the user agent is already showing a payment panel. only one payment panel may be visible at a time across all documents loaded by the user agent. the promise is also rejected with aborterror if the user cancels the payment request. invalidstateerror the promise rejects with an invalidstateerror if the same pay...
...ent instrument // (e.g., credit card) information to the server. // paymentresponse.methodname contains the selected payment method // paymentresponse.details contains a payment method specific response await response.complete("success"); } catch (err) { console.error("uh oh, something bad happened", err.message); } } the following example shows how to update the payment sheet as it's being presented to the end-user. async function requestpayment() { // we start with au$0 as the total. const initialdetails = { total: { label: "total", amount: { value: "0", currency: "aud" }, }, }; const request = new paymentrequest(methods, initialdetails, options); // check if the the user supports the `methods` if (!await request.canmakepayment()) { ...
... start with au$0 as the total. const initialdetails = { total: { label: "total", amount: { value: "0", currency: "aud" }, }, }; const request = new paymentrequest(methods, initialdetails, options); // check if the the user supports the `methods` if (!await request.canmakepayment()) { return; // no, so use a web form instead. } // let's update the total as the sheet is shown const updateddetails = { total: { label: "total", amount: { value: "20", currency: "aud" }, }, }; const response = await request.show(updateddetails); // check response, etc... } document.getelementbyid("buybutton").onclick = requestpayment; specifications specification status comment payment request apithe definition of 'show(option...

Link types - HTML: Hypertext Markup Language
es indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element. list of the defined link types and their significance in html link type description allowed in these elements not allowed in these elements alternate if the element is <link> and the rel attribute also contains the stylesheet type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. if the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. otherwise, the link defines an alternative page, of one of these types: for another medium, ...
... indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar. browsers, that don't have such a context will ignore this keyword. while once part of the html specification, this has been removed from the spec and is only implemented by versions of firefox prior to firefox 63. <a>, <area>, <link> <form> stylesheet defines an external resource to be used as a stylesheet. if the type is not set, the browser should assume it is a text/css stylesheet until further inspection. if used in combination with the alternate keyword, it defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. <link> <a>, <area>, <form> tag indicates...
...="_blank" links. html5the definition of 'link types' in that specification. recommendation added tag, search, prefetch, noreferrer, nofollow, icon, and author. renamed copyright to license. removed start, chapter, section, subsection, and appendix html 4.01 specificationthe definition of 'link types' in that specification. recommendation added alternate, stylesheet, start, chapter, section, subsection, appendix, and bookmark. renamed previous to prev. removed top, and search. unknownthe definition of '<link>' in that specification. obsolete added top, contents, index, glossary, copyright, next, previous, help, and search. rfc 1866: html 2.0 obsolete initial definition. ...

Common MIME types - HTTP
ideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip ...
...terface (midi) audio/midi audio/x-midi .mjs javascript module text/javascript .mp3 mp3 audio audio/mpeg .mpeg mpeg video video/mpeg .mpkg apple installer package application/vnd.apple.installer+xml .odp opendocument presentation document application/vnd.oasis.opendocument.presentation .ods opendocument spreadsheet document application/vnd.oasis.opendocument.spreadsheet .odt opendocument text document application/vnd.oasis.opendocument.text .oga ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg application/ogg .opus opus audio audio/opus .otf opentype font font/otf .png portable network graphics i...
... webm video video/webm .webp webp image image/webp .woff web open font format (woff) font/woff .woff2 web open font format (woff) font/woff2 .xhtml xhtml application/xhtml+xml .xls microsoft excel application/vnd.ms-excel .xlsx microsoft excel (openxml) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xml xml application/xml if not readable from casual users (rfc 3023, section 3) text/xml if readable from casual users (rfc 3023, section 3) .xul xul application/vnd.mozilla.xul+xml .zip zip archive application/zip .3gp 3gpp audio/video container video/3gpp audio/3gpp if it doesn't contain video .3g2 3gpp2 au...

Content Security Policy (CSP) - HTTP
cters of the inline script, event handler, or style that caused the violation. status-code the http status code of the resource on which the global object was instantiated. violated-directive the name of the policy section that was violated. sample violation report let's consider a page located at http://example.com/signup.html. ...
...le violation report let's consider a page located at http://example.com/signup.html. it uses the following policy, disallowing everything but stylesheets from cdn.example.com. content-security-policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the mistake? stylesheets are allowed to be loaded only from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp would send the following violation report as a post request to http://example.com/_/csp-reports, when the document is...
...the csp specification gives an explanation of this odd behaviour. in summary, this is done to prevent leaking sensitive information about cross-origin resources. ...

Content-Security-Policy-Report-Only - HTTP
cters of the inline script, event handler, or style that caused the violation. status-code the http status code of the resource on which the global object was instantiated. violated-directive the name of the policy section that was violated. sample violation report let's consider a page located at http://example.com/signup.html. ...
... report let's consider a page located at http://example.com/signup.html. it uses the following policy, disallowing everything but stylesheets from cdn.example.com. content-security-policy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the violation? stylesheets are only allowed to be loaded from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp will send the following violation report as a post request to http://example.com/_/csp-reports, when the document i...
...ted-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports", "disposition": "report" } } as you can see, the report includes the full path to the violating resource in blocked-uri. this is not always the case. for example, when the signup.html would attempt to load css from http://anothercdn.example.com/stylesheet.css, the browser would not include the full path but only the origin (http://anothercdn.example.com). this is done to prevent leaking sensitive information about cross-origin resources. specifications specification status comment content security policy level 3 working draft no changes. content security policy level 2 recommendation initial defin...

SVG documentation index - SVG: Scalable Vector Graphics
nt about how to optimize its color interpolation and compositing operations. 49 contentscripttype deprecated, svg, svg attribute the contentscripttype attribute specifies the default scripting language for the given document fragment on the <svg> element. 50 contentstyletype deprecated, svg, svg attribute the contentstyletype attribute specifies the style sheet language for the given document fragment on the <svg> element. 51 cursor svg, svg attribute the cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element. 52 cx svg, svg attribute the cx attribute define the x-axis coordinate of a center point. 53 cy svg, svg attribute the cy attribute define the ...
...ical attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for horizontally oriented glyph layouts. 138 max svg, svg attribute the max attribute specifies the maximum value of the active animation duration. 139 media svg, svg attribute the media attribute specifies a media query that must be matched for a style sheet to apply. 140 method experimental, needsexample, svg, svg attribute the method attribute indicates the method by which text should be rendered along the path of a <textpath> element. 141 min svg, svg attribute the min attribute specifies the minimum value of the active animation duration. 142 mode filters, svg, svg attribute the mode ...
...n an svg document. it is also useful as away of animating a palette colors. 366 <stop> element, reference, svg, svg gradient the svg <stop> element defines a color and its position to use on a gradient. this element is always a child of a <lineargradient> or <radialgradient> element. 367 <style> element, reference, svg the svg <style> element allows style sheets to be embedded directly within svg content. 368 <svg> element, reference, svg, svg container, web the svg element is a container that defines a new coordinate system and viewport. it is used as the outermost element of svg documents, but it can also be used to embed an svg fragment inside an svg or html document. 369 <switch> element, needsexample, svg, svg co...

Fills and Strokes - SVG: Scalable Vector Graphics
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. ...
...s> <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. ...
...</svg> moving styles to an area like this can make it easier to adjust properties on large groups of elements. ...

Web technology for developers
a code itself. view all... web technology references web apis reference material for each of the individual apis that comprise the web's powerful scriptability, including the dom and all of the related apis and interfaces you can use to build web content and apps. html hypertext markup language is the language used to describe and define the content of a web page. css cascading style sheets are used to describe the appearance of web content. svg scalable vector graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn. mathml the mathematical markup language makes it possible to display complex mathematical equations and syntax. temporary the stuff below here is temporary to help ke...
...of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn. mathml the mathematical markup language makes it possible to display complex mathematical equations and syntax. temporary the stuff below here is temporary to help keep track of things while organization work is ongoing. pay it no mind. ...
...iesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology referencexml: extensible markup languagexpathxslt: extensible stylesheet language transformations ...

content/mod - Archive of obsolete content
experimental provides functions to modify a page content. globals constructors functions attachto(modification, window) function applies given modification to a given window. 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. window : nsidomwindow the window to be modified. detachfrom(modification, window) function removes attached modification from a given window. if window is not spec...
...detachfrom(modification, window) function removes attached modification from a given window. if window is not specified, modification is removed from all the windows it's being attached to. 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. if window is not provided modification is removed from...

Boxes - Archive of obsolete content
wrapping contents in html you can use a div as a container and when the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
...rr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box. ...

Customizing the download progress bar - Archive of obsolete content
this example illustrates how to customize the progress bar displayed for a given download in the downloads window. first you need to overlay the downloads window so that you can add a new stylesheet. ...
...en download in the downloads window. first you need to overlay the downloads window so that you can add a new stylesheet. in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed. this is required since it contains platform-specific d...

Dialogs and Prompts - Archive of obsolete content
board events (enter/esc and more), which is good for keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script. if they ret...
...and add a dlgtype attribute to them. valid values for dlgtype are the six button types listed above. be sure to use ondialog* attributes on dialog element instead of putting oncommand on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too. ...

Chapter 1: Introduction to Extensions - Archive of obsolete content
form. one-trick gag extensions fixme: update this. there are a number of one-trick gag extensions that aren’t very useful. this is a very brief survey of a few extensions, but there are many other unique extensions available. table 1: advanced customization methods for firefox customization method does it work for web sites? does it work for firefox? user style sheets (change appearance through css) yes; you can change the usercontent.css file, or use the stylish extension. yes; you can change the userchrome.css file, or use the stylish extension. user scripts (change appearance and functionality through javascript) yes; you can use the greasemonkey extension or "bookmarklets." yes; you can change userchrom...
..." yes; you can change userchrome.js to add functionality through javascript. extensions (these can do anything) yes yes theming (this changes the look of the browser) no yes let's build an extension table 1 shows the various customization options available to a user in firefox. users have flexible customization options, using css in user style sheets and javascript/dom in user scripts (these depend on stylish, greasemonkey, and userchrome.js). in addition to css and javascript, extensions can take advantage of xul and xpcom technologies for more sophisticated features. themes, which alter firefox's appearance, are a kind of add-on. in order to create an extension, you need an idea and just a little programming ability. the following chapte...

Custom XUL Elements with XBL - Archive of obsolete content
y 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. with those 2 files properly defined, we can now use the new element. 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. in this case we're adding the "persons" dynamically, so you'll have to look into the js file to see how xshelloperson elements are created and added to the dom just like any other. addperson : function(aevent) { // ... let person = document.createelement("xshelloperson"); // ... person.setattribute...
...ethod uses the parent node to remove the person node. simple enough. you can do almost anything from xbl code, including using xpcom components, js code modules and available chrome scripts. the main setback is that you can't have script tags defined in a binding, so you depend on the scripts that have been included in the xul files that use the binding. also unlike scripts, you can include stylesheets using the stylesheet xbl element. dtd and properties files can be handled just like in regular xul. there are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. encapsulation mandates that you try to keep your xbl free of outside dependencies. that is, you shouldn't assume that script x will be included somewhere, because not ...

Creating a Firefox sidebar extension - Archive of obsolete content
"emptysidebar"> <!entity openemptysidebar.commandkey "e"> <!entity openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. ...
...y openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. ...

Specifying the appearance - Archive of obsolete content
derbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css...
...there is one rule for each possible tinderbox state. make your own icons for the four states or use the following icons: no status , succ...

Microsummary XML grammar reference - Archive of obsolete content
bute for them. child elements: <template> (required) defines how to transform pages into their microsummaries. <pages> (required) identifies the set of pages that the generator is able to summarize. <update> (optional) specifies how frequently firefox should update the microsummaries. the <template> element the <template> element contains the xslt stylesheet which transforms web pages into their microsummaries. attributes: none. 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 microsumm...
... the <pages> element the <pages> element identifies the set of pages that the generator is able to summarize. attributes: none. child elements: <include> (optional) a regular expression matching the urls of pages that the generator is able to summarize. ...

Creating XPI Installer Modules - Archive of obsolete content
rchiver[zip] to open it. all of the resources described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. ...
..."375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue. note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports communicator.css to make use of that skin's basic widget styles. the javascript file barley.js contains a single function, bar(), defined as follows: function bar() { alert("aphids"); } if you want to use the same gif image that is used in the barley package, it can be grabbed from here. while you a...

Index - Archive of obsolete content
69 using the editor from xul xul the editor in xul lives on top of a xul <iframe> element; it observes document loading in this <iframe>, and, when document loading is complete, it instantiates an editor on the loaded document. the <iframe> contents are then editable. 970 using the standard theme add-ons, extensions, themes no summary! 971 widget cheatsheet see the periodic table of xul for more examples. 972 window icons add-ons, extensions, toolkit api, xpinstall, xul starting with firefox 1.5, thunderbird 1.5, and xulrunner 1.8, you can specify an icon for a xul window by putting files named mywindow.ico (for windows) and mywindow.xpm or mywindow16.xpm (linux), where mywindow is the id of the <window> you want to a...
... elements into groups. 1007 adding methods to xbl-defined elements tutorials, xbl, xul, xul_tutorial next, we'll find out how to add custom methods to xbl-defined elements. 1008 adding properties to xbl-defined elements tutorials, xbl, xul, xul_tutorial next, we'll find out how to add custom properties to xbl-defined elements. 1009 adding style sheets tutorials, xul, xul_tutorial we have hardly modified the look of the elements we have created so far. xul uses css (cascading style sheets) to customize elements. 1010 adding more elements tutorials, xul, xul_tutorial we will conclude the discussion of boxes by adding some boxes to the find files dialog. 1011 additional install features tutorials, xu...

Building Trees - Archive of obsolete content
e tree cells. in this case, the member resource is used since that holds the photo’s url. however, it could be any other variable, a static value, or a combination of both. of course, we can’t really see the photos, since the tree’s rows are too small! it’s not normal to put photos in a tree like this—instead, the images would be used for icons. on the other hand, you could use a stylesheet to change the default height of the tree rows. you cannot make each row a different height, but you can change the height of all rows with some css: treechildren::-moz-tree-row { height: 150px; } since no elements are constructed by the tree builder, you cannot use the style or class attributes to change the style of a cell (this is the case with all trees). you must use syntax like that above...
...each node a unique "id" attribute. these are used to track the current state of the disclosure triangles. support for this was introduced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4). using tree properties since we need to use special css for trees, the properties attribute on a cell becomes extremely useful. it can be used to define extra properties for reference later in a stylesheet. for example, if the properties attribute was set to the value "?creator", you could style the photos created by different people differently. alternatively, you could also use static values (in addition to variables) in the properties attribute. for instance, consider the following css: treechildren::-moz-tree-cell(dave) { background-color: lightgreen; } this would set the background color of...

Creating Dialogs - Archive of obsolete content
p to four buttons along the bottom of the dialog forok,cancel, and so on. you do not need to include the xul for each button; however, you do need to supply code to perform the appropriate tasks when the user presses each button. this mechanism is necessary because different platforms have a specific order in which the buttons appear. ...
...e buttonlabelaccept - label to appear on the accept button egsave buttonaccesskeyaccept - access key to use for the accept button egs defaultbutton - button is activated when the enter key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996. ...

Element Positioning - Archive of obsolete content
he quick way is to simply add the width and height attributes on an element, much like you might do on an html img tag. an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this. it is not very portable and may not fit in with some themes. a better way is to use style properties, which work similarly to style sheets in html. the following css properties can be used. width this specifies the width of the element. note that the css global skin of the xul application may also specify a min-width for the buttons and other elements, thus if simply setting the width property does not set the button width as you expect, try also to modify the button min-width property. height this specifies the height of the...
...in the opposite direction. as with the pack attribute, the align attribute applies to the box containing the elements to be aligned, not to the elements themselves. for example, the first box below will have its children stretch, because that is the default. the second box has an align attribute, so its children will be placed centered. ...

Localization - Archive of obsolete content
the example above uses two entities, one for the label on the undo menu item and the second for the access key. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text strings. the entire xul file is shown below with the changes shown in red. ...
...do menu item and the second for the access key. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text strings. the entire xul file is shown below with the changes shown in red. ...

Tree View Details - Archive of obsolete content
f this. the tree will call this method to determine which containers are open and which are closed. note that the tree will call neither iscontainerempty nor iscontaineropen for rows that are not containers as indicated by the return value of the iscontainer method. a container may be rendered differently than a non-container. for instance, a container may have a folder icon beside it. a style sheet may be used to style items based on various properties such as whether a row is open. this is described in a later section. a non-empty container will be displayed with a twisty next to it so that the user may open and close the row to see child items. empty containers will not have a twisty, but will still be treated like a container. when the user clicks the twisty to open a row, the tree will...
..., we need to tell the tree to repaint the twisty in the new state. the easiest way to do this is to invalidate the row. complete example there are several other view functions we can implement but they don't need to do anything in this example, so we can create functions that do nothing for those. ...

XUL element attributes - Archive of obsolete content
mum height. the css height property may also be used. hidden type: boolean if set to true, the element is not displayed. this is similar to setting the css display property to 'none'. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after. this attribute overrides the insertbefore attribute. this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used. insertbefore type: id when an element is...
...ver the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. style type: css inline style css style rules to be applied to the element. syntax is as in the html style attribute. it is preferred to put style rules in style sheets. template type: id for template generated elements, this attribute may optionally be placed on the root node (the element with the datasources attribute) to refer to a template that exists elsewhere in the xul code. this template attribute should be set to the id of the template element. this might be used to share a single template between multiple trees or menus. if this attribute is ...

XML - Archive of obsolete content
s parent language. xul syntax & rules xul is a standards-based interface definition language. it attempts to balance precise control of layout with flexibility and ease of use, and in this respect it does a great job. 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. there are many times, for example, when you may use javascript tricks to add extra behavior. but the necessary tradeoff for xul's flexibility is a lack of implicit functionality -- the lack ofintuition, you might say, that xul has in interpreting what it is you want. in order to ...
...n the screen. mozilla is a product made with all these technologies, but gecko is the thing sitting inside that renders that product. 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. the heavy lifting is done by the ingredients rather than the chef. this arrangement creates new possibilities for truly cross-platform web applications, application serving, web appliances and embedded systems, and all sort of other thing...

prefwindow - Archive of obsolete content
nces.animatefadein, again a boolean preference. this one can be safely omitted in xulrunner-based applications but you can override the default behavior (true for mac os x and false for other platforms) setting it. for animatefadein to work properly, contents of prefpanes should be put into overlays. note for mac os x: a common way of opening modal windows on mac os x that are not attached as a sheet to the main window is to use nsiwindowwatcher.openwindow() with a null parentwindow. this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes. prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". attributes buttonalign, buttondir, buttonorient, buttonpack,...
...tons, 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="autom...

tree - Archive of obsolete content
; } to get the text value for a specific column (for example column 'age') from the currently focused row in the tree: var t = document.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following. ...
...olumn 'age') from the currently focused row in the tree: var t = document.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following. ...

window - Archive of obsolete content
or the "activate" and "deactivate" events. see window activation events. more information is available in the xul tutorial. ...
... contents have a minimum or maximum height. the css height property may also be used. hidechrome type: boolean set this attribute to true to have the chrome including the titlebar hidden. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. lightweightthemes type: boolean true if the window supports lightweight themes, otherwise false. lightweightthemesfooter type: id specifies the id of an...

Windows and menus in XULRunner - Archive of obsolete content
ay also contain other top-level declarations for css and dtd, which i will discuss in a moment. <window> is the basic windowing element in xul. it has attributes to set the title/caption as well as to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <window> element per xul file. 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"/> ... </window> notice the references to css and dtd files. the css is used to apply formatting to elements, just as it would in html. the d...
...ons. you can learn how to do it in the article window icons. menus and toolbars most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application’s available commands. xul provides elements to support both menus and toolbars. ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
y possible to produce a single page application which could also include any number of external assets such as a popular third party framework. listing 6 shows the beginning of our application which takes advantage of some of these concepts. ...
...takes advantage of some of these concepts. ...

Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
he following rule is derived from mozilla's html.css file: *|*:-moz-list-bullet, *|*:-moz-list-number {font-size: 1em;} this rule tells gecko-based browsers to use the computed value of font-size for the marker's parent, which is the list item itself. thus the font sizes of the marker and the content will be the same. since this rule is not valid css, it will prevent the validation of any stylesheet that contains it. one solution is to move the rule into its own stylesheet, and accept that the stylesheet in question will never validate. this might also be a place to put any explorer-specific css-like rules (such as scrollbar styling rules), which also will not validate. authors who are not concerned with making sure the rule applies across all namespaces can use a slightly more simplified r...
...rs who are not concerned with making sure the rule applies across all namespaces can use a slightly more simplified rule: *:-moz-list-bullet, *:-moz-list-number {font-size: 1em;} recommendations if it is important to make list item markers match the font size of the content, use one of the suggested rules. in situations where validation is a priority, segregate the rule into a separate stylesheet so that the rule will not confuse css validators run against the main stylesheet. related links bug 110360 bug 97351 original document information author(s): eric a. meyer, netscape communications last updated date: published 04 oct 2002; revised 07 mar 2003 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part...

Gecko FAQ - Gecko Redirect 1
velopment at mozilla.org. gecko has been known previously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dispute. for more information see the wikipedia article on gecko. what is a layout engine? 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. it paints the browser's content area, which is the blank area inside the browser window's chrome. formally, a layout engine defines the placement policy for a document and places content on a page. gecko's core is a very fast layout engine. gecko also offers the ability to parse various document types (html, xml,...
...-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 a spe...

Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
typically, this is a screen—but it may also be a printer, a speech synthesizer, braille display, or another type of device. css offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device. ...
...her values) of the viewer's device. learn more general knowledge using media queries technical reference media queries define a set of characteristics or parameters required to apply the css styles that are specified within the curly braces of the media query; for example: only applying certain css styles for devices below 768 pixels. @media at-rule conditionally apply part of a stylesheet, based on the result of a media query. window.matchmedia() test the viewing device against a media query. ...

Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
traditionally in browsers the html parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed. some html parser, such as firefox since firefox 4, support speculative parsing off of the main thread. it parses ahead while scripts are being downloaded and executed. 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. the downside is that there's more work lost when the speculation fails. this document helps you avoid the kind of things that ma...
...if you use a <base> element to override the base uri of your page, put the element in the non-scripted part of the document. don't add it via document.write() or document.createelement. ...

MDN Web Docs Glossary: Definitions of Web-related terms
snap positions soap spa (single-page application) specification speculative parsing speed index sql sql injection sri stacking context state machine statement static method static typing strict mode string stun style origin stylesheet svg svn symbol symmetric-key cryptography synchronous syntax syntax error synthetic monitoring t tag tcp tcp handshake tcp slow start telnet texel thread three js time to first byte time to interactive tld ...
... 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet vector image ...

What is accessibility? - Learn web development
disabilities. the key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users. the main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ats). note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some form of disability", and "between 110 million and 190 million adults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness. many people with visual impairments use screen magnifiers that ar...
...or providing textual alternatives to audio content which range from simple text transcripts to text tracks (i.e. captions) that can be displayed along with video. an article, later on, will discuss these. hearing-impaired people also represent a significant userbase — "466 million people worldwide have disabling hearing loss", says the world health organization's deafness and hearing loss fact sheet. people with mobility impairments these people have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps b...

Images, media, and form elements - Learn web development
s a final step, we can wrap up the various properties discussed above into the following "form reset" to provide a consistent base to work from. this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the css. they are not as important as they once were, as browsers are typically more consistent than in the past. however if you want to ...
...jects. typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the css. they are not as important as they once were, as browsers are typically more consistent than in the past. however if you want to take a look at one example, check out normalize.css, which is a very popular stylesheet used as a base by many projects. for further information on styling forms, take a look at the two articles in the html section of these guides. styling web forms advanced form styling test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move ...

Styling tables - Learn web development
with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer. next, create a new file called style.css and save it in the same directory as your other files. ...
...suitable for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...

Responsive design - Learn web development
the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide. the css for the .container selector will only be applied if these two things are true. @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. the points at which a media query is introduced, and the layout changed, are known as breakpoints. a common approach when using media queries is to create a simple single-column layout for narrow-screen devices (e.g mobile phones), then check for larger screens and implement a multiple-column layout when you know t...
...the grid layout version is even simpler as we can define the columns on the .wrapper: example, source code. responsive images the simplest approach to responsive images was as described in marcotte's early articles on responsive design. basically, you would take an image that was at the largest size that might be needed, and scale it down. 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. the image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window. in addition, you may not want the same image aspect ratio on ...

What is CSS? - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to learn what css is. in the introduction to html module we covered what html is, and how it is used to mark up documents. these documents will be readable in a web browser. headings will look larger than regular text, paragraphs break onto a new line and have space between them. ...
...n a value that we'd like to give the property. before the colon, we have the property, and after the colon, the value. css properties have different allowable values, depending on which property is being specified. in our example, we have the color property, which can take various color values. we also have the font-size property. this property can take various size units as a value. a css stylesheet will contain many such rules, written one after the other. h1 { color: red; font-size: 5em; } p { color: black; } you will find that you quickly learn some values, whereas others you will need to look up. the individual property pages on mdn give you a quick way to look up properties and their values when you forget, or want to know what else you can use as a value. note: you can...

Web fonts - Learn web development
.woff, .woff2, etc.; the exact fonts provided will be updated over time as browser support requirements change). as mentioned above, multiple fonts are needed for cross browser support — this is fontsquirrel's way of making sure you've got everything you need. a demo html file for each font — load these in your browser to see what the font will look like in different usage contexts. ...
...ure you've got everything you need. a demo html file for each font — load these in your browser to see what the font will look like in different usage contexts. a stylesheet.css file, which contains the generated @font-face code you'll need. to implement these fonts in your demo, follow these steps: rename the unzipped directory to something easy and simple, like fonts. open up the stylesheet.css file and copy both the @font-face blocks contained inside into your web-font-start.css file — you need to put them at the very top, before any of your css, as the fonts need to be imported before you can use them on your site. each of the url() functions points to a font file that we want to import into our css — we need to make sure the paths to the files are correct, so add fonts/ to t...

Learn to style HTML using CSS - Learn web development
while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. ...
...b before proceeding with this topic. however, doing so isn't absolutely necessary as much of what is covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. 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. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css build...

What is a web server? - Learn web development
and a search engine. objective: you will learn what a web server is and gain a general understanding of how it works. summary the term web server can refer to hardware or software, or both of them working together. on the hardware side, a web server is a computer that stores web server software and a website's component files. (for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web. on the software side, a web server includes several parts that control how web users access hosted files. at a minimum, this is an http server. an http server is software that understands urls (web addresses) and http (the protocol your browser uses to vie...
...your browser sends a request to the web server, which searches for the requested file in its own storage space. upon finding the file, the server reads it, processes it as-needed, and sends it to the browser. let's look at those steps in more detail. hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images, css stylesheets, javascript files, fonts, and video. technically, you could host all those files on your own computer, but it's far more convenient to store files all on a dedicated web server because: a dedicated web server is typically more available. (up and running) excusing downtime and systems troubles, a dedicated web server is always connected to the internet. a dedicated web server can have the s...

Styling web forms - Learn web development
s can be used easily with any widget (and yes, you can use @font-face with form widgets). however, browser behavior is often inconsistent. by default, some widgets do not inherit font-family and font-size from their parents. many browsers use the system default appearance instead. to make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size: 100%; } the inherit property value causes the property value to match the computed value of the property of its parent element; inheriting the value of the parent. the screenshots below show the difference. on the left is the default rendering of an <input type="text">, <input type="date">, <select>, <textarea>, <input typ...
...he css for the example. add all the code blocks shown below inside the <style> element, one after another. overall layout first, we prepare by defining our @font-face rules, and all the basic styles set on the <body> and <form> elements. ...

Getting started with the Web - Learn web development
evelopment. what will your website look like? before you start writing the code for your website, you should plan it first. what information are you showcasing? what fonts and colors are you using? what will your website look like? we outline a simple method you can follow to plan out your site's content and design. dealing with files a website consists of many files: text content, code, stylesheets, media content, and so on. when you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. dealing with files explains how to set up a sensible file structure for your website and what issues you should be aware of. html basics hypertext markup language (html) is the code that you use to structure your web content and give ...
.... html basics hypertext markup language (html) is the code that you use to structure your web content and give it meaning and purpose. for example, is my content a set of paragraphs or a list of bullet points? do i have images inserted on my page? do i have a data table? without overwhelming you, html basics provides enough information to make you familiar with html. css basics cascading stylesheets (css) is the code that you use to style your website. for example, do you want the text to be black or red? where should content be drawn on the screen? what background images and colors should be used to decorate your website? css basics takes you through what you need to get started. javascript basics javascript is the programming language that you use to add interactive features to your web...

Document and website structure - Learn web development
owing code (you can also find the example in our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...
... our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...

What’s in the head? Metadata in HTML - Learn web development
websites you'll use in the modern day will employ css to make them look cool, and javascript to power interactive functionality, such as video players, maps, games, and more. these are most commonly applied to a web page using the <link> element and the <script> element, respectively. the <link> element should always go inside the head of your document. ...
...to make them look cool, and javascript to power interactive functionality, such as video players, maps, games, and more. these are most commonly applied to a web page using the <link> element and the <script> element, respectively. the <link> element should always go inside the head of your document. this takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file: <link rel="stylesheet" href="my-css-file.css"> the <script> element should also go into the head, and should include a src attribute containing the path to the javascript you want to load, and defer, which basically instructs the browser to load the javascript at the same time as the page's html. this is useful as it makes sure t...

Adding vector graphics to the Web - Learn web development
ou can make the image into a hyperlink easily by nesting the <img> inside an <a> element. the svg file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future. cons you cannot manipulate the image with 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 restyle the image with css pseudoclasses (like :focus). troubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg. this being the case,...
...it your loading time. you can assign classes and ids to svg elements and style them with css, either within the svg or wherever you put the css style rules for your html document. in fact, you can use any svg presentation attribute as a css property. inlining svg is the only approach that lets you use css interactions (like :focus) and css animations on your svg image (even in your regular stylesheet.) you can make svg markup into a hyperlink by wrapping it in an <a> element. cons this method is only suitable if you're using the svg in only one place. duplication makes for resource-intensive maintenance. extra svg code increases the size of your html file. the browser cannot cache inline svg as it would cache regular image assets, so pages that include the image will not load faster a...

Drawing graphics - Learn web development
t to load, and add an onload event handler that will cause the draw() function to fire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display. ...
...ire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display. let sprite = 0; let posx = 0; let's explain the spritesheet image (which we have respectfully borrowed from mike thomas' create a sprite sheet walk cycle using css animation). the image looks like this: it contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. to display each sprite cleanly we will have to use drawimage() to chop out a single sprite image from the spritesheet and display only that part, like we did above with the firefox logo. the x coordinate of the slic...

Web performance resources - Learn web development
traffic); for example, by using the loading attribute on the <img> element it is also crucial to realize what is really important to your users. it might not be absolute timing, but user perception. quick wins css web performance is all about user experience and perceived performance. ...
...ink tag with rel="stylesheet" is synchronous and blocks rendering. optimize the rendering of your page by removing blocking css. to load css asynchronously one can simpy set the media type to print and then change to all once loaded. the following snippet includes an onload attribute, requiring javascript, so it is important to include a noscript tag with a traditional fallback. <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 unstyled 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 ...

Implementing feature detection - Learn web development
atches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). if (window.matchmedia("(max-width: 480px)").matches) { deck.shuffleto(1); } using modernizr to implement featu...
... a look at how modernizr works in terms of selectively applying css. first, make a copy of supports-feature-detect.html and supports-styling.css. save them as modernizr-css.html and modernizr-css.css. update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-css.css" rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below. this needs to be applied to the page before any css (or javascript) that might make use of it. <script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, try loading your page, and you'll ge...

CSS -moz-bool-pref() @supports function
html <div id="pref-test"> this will have a green background if the <code>test</code> preference is enabled. ...
... html <div id="pref-test"> this will have a green background if the <code>test</code> preference is enabled. ...

HTML parser threading
the parser-thread tokenizer. likewise for the tree builders. the "last was carriage return" flag is copied over also. a runnable is dispatched to the parser thread to call to mark the parser uninterrupted and to call nshtml5streamparser::parseavailabledata() on the parser thread. mtokenizermutex is released. speculative loads when the tree builder on the parser thread encounters html script, stylesheet link, video (with a poster frame), base or img or svg script, style or image elements, preload operations are appended to a speculative load queue. there speculative load operations are flushed to the main thread (via the staging area) whenever tree ops are flushed and also whenever nshtml5streamparser::parseavailabledata() is about to stop working. that is, when the parser thread is parsing spec...
...ilder synchronously also sends speculative loads to the tree op executor. the executor acts on the speculative load queue when the runnable dispatched by nshtml5streamparser::parseavailabledata() fires and right before executing tree ops whenever tree ops are executed. when the executor acts on speculative loads, it starts speculative http fetches for images (including video poster frames), style sheets and scripts. additionally, the speculative load queue is used for transferring information from the parser thread to the main thread when the information needs to arrive before starting any speculative loads and when the information is known not to be speculative. there are two such pieces of information: the manifest url for an app cache manifest and the character encoding for the document. ...

L20n
"o {{ brandname.locative }}"> for developers documentation for developers wanting to implement localization functionality on their web apps using l20n. internationalization for your web app first read for developers looking to use the l20n infrastructure. l20n's html bindings tutorial on implementing l20n in your html code. l20n javascript api an api for l20n.js. l20n syntax cheatsheet for developers a simple cheatsheet to help developers as they add l20n to their localization infrastructure. for localizers documentation for localizers creating localized content for a project that uses l20n. learn the l20n syntax how to naturally localize applications using l20n. complete with use cases and examples of l20n in action. localization use-cases how to naturally localize...
...0n syntax how to naturally localize applications using l20n. complete with use cases and examples of l20n in action. localization use-cases how to naturally localize applications using l20n. complete with use cases and examples of l20n in action. l20n and translation memory exchange (tmx) how l20n impacts the translation memory exchange standard for translation memory data. l20n syntax cheatsheet for localizers a simple cheatsheet to help localizers as they localize projects with l20n. additional resources some additional resources for developers and localizers involved with l20n. l20n.org you can try l20n live in your browser on the project page. l20n tinker test out your own l20n code in l20n tinker. github where the main code for the l20n infrastructure and design spec li...

Main Windows
oxes. two are stacked showing either a brief or expanded view of the headers. the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e. file, edit, view, etc). osx only: macmenuoverlay.xul a special overlay for osx that adds a few items to the window menu. customizetoolbar.xul and customizetoolbarsheet.xul these are two old files from when the original customizable toolbars were ported from firefox (phoenix at the time) to thunderbird (minotaur at the time). customizetoolbar.xul looks and acts a whole lot like the toolkit's customizetoolbar.xul. items have the same id’s, and contain the same structure. a few odd pieces are missing though. for instance, the “add new toolbar” buttons from ...
...able toolbars were ported from firefox (phoenix at the time) to thunderbird (minotaur at the time). customizetoolbar.xul looks and acts a whole lot like the toolkit's customizetoolbar.xul. items have the same id’s, and contain the same structure. a few odd pieces are missing though. for instance, the “add new toolbar” buttons from toolkit aren’t in the thunderbird version. customizetoolbarsheet.xul is a similar implementation written for osx to give a more native appearance. at compile time these files are added to the toolkit directory so that their chrome addresses are in global, the same as firefox’s. why this is this way, i’m not sure at the moment. i assume that customizetoolbars was originally not in the toolkit, but in firefox's chrome, or that there were some special change...

Zombie compartments
object-type-tables [2] │ │ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pr...
... └──0.01 mb (00.00%) ── nsblockframe │ │ │ │ ├──0.01 mb (00.00%) ── pres-contexts │ │ │ │ ├──0.01 mb (00.00%) ── line-boxes │ │ │ │ └──0.00 mb (00.00%) ── text-runs │ │ │ ├──3.78 mb (00.76%) ++ js-compartment(https://www.google.de/?gws_rd=ssl) │ │ │ ├──0.51 mb (00.10%) ── style-sheets │ │ │ ├──0.33 mb (00.07%) -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── element-nodes │ │ │ │ ├──0.02 mb (00.00%) ── other │ │ │ │ ├──0.01 mb (00.00%) ── orphan-nodes │ │ │ │ └──0.00 mb (00.00%) ── event-targets │ │ │ ...

Index - Firefox Developer Tools
ng the browser takes to download the different parts of your site. 53 throttling 110n:priority, debugging, dev tools, firefox, guide, networking, tools the network monitor allows you to throttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types. 54 page inspector css, dom, html, stylesheets, web development, web development:tools, l10n:priority use the page inspector to examine and modify the html and css of a page. 55 how to links for various how to's can be found here. these links describe in depth the how to techniques. 56 css flexbox inspector: examine flexbox layouts guide, inspector, tools, flexbox the flexbox inspector allows ...
.../ session storage dev tools, firefox, guide, local storage, session storage, storage, storage inspector, tools, l10n:priority when an origin corresponding to local storage or session storage is selected within the storage inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table. 111 style editor css, stylesheets, tools, web development, web development:tools the style editor enables you to: 112 taking screenshots screenshot, tools you can use the developer tools to take a screenshot of the entire page, or of a single element in the page. 113 the firefox javascript debugger debugger, debugging, dev tools, javascript, tools, l10n:priority the javascript debu...

Examine and edit CSS - Firefox Developer Tools
feature); change the display based on print media rules. a warning icon appears next to unsupported css properties or rules that have invalid values. this can help you understand why certain styles are not being applied. in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations. highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector. overridden declaration: declarations that are overridden by later rules are crossed out. see overridden declarations. inactive rules (not shown): if a rule is inactive (e.g., ...
...te: you can view changes made to the rules view only. if you edit the css using the style editor, the changes will not be shown in the changes pane. also remember, as noted above, that changes you make to the css rules are temporary and will be reset if you reload the page. if you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet. right-click on the changes panel and select copy rule from the context menu. the copy rule command copies the entire element, class, or id definition, including any unchanged rules and the rules that describe your changes. for example, copying the changes in the preceding image, you get the following: .text-content p { box-sizing:border-box; max-width:24rem; text-decoration: underline; c...

CSSRule.cssText - Web APIs
the csstext property of the cssrule interface returns the actual text of a cssstylesheet style-rule. note: do not confuse this property with element-style cssstyledeclaration.csstext. be aware that this property can no longer be set directly, as it is now specified to be functionally modify-only, and silently so. in other words, attempting to set it does absolutely nothing, and doesn't even omit a warning or error. furthermore, it has no settable sub-properties. therefore, to modify it, use the stylesheet's cssrules[index] properties .selectortext and .style (or its sub-properties). see using dynamic styling information for details. ...
...othing, and doesn't even omit a warning or error. furthermore, it has no settable sub-properties. therefore, to modify it, use the stylesheet's cssrules[index] properties .selectortext and .style (or its sub-properties). see using dynamic styling information for details. 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. working draft ...

CSSRule - Web APIs
the cssrule interface represents a single css rule. there are several types of rules, listed in the type constants section below. the cssrule interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types. references to a cssrule may be obtained by looking at a cssstylesheet's cssrules list. properties common to all cssrule instances cssrule.csstext represents the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }" or "@import 'url'". to access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the specialized interface for the rule's type. cssrule.parentrule read only returns the containing rule, oth...
...h1,h2 { font-size: 16pt }" or "@import 'url'". to access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the specialized interface for the rule's type. cssrule.parentrule read only returns the containing rule, otherwise null. e.g. if this rule is a style rule inside an @media block, the parent rule would be that cssmediarule. cssrule.parentstylesheet read only returns the cssstylesheet object for the style sheet that contains this rule cssrule.type read only one of the type constants indicating the type of css rule. constants type constants the cssrule interface specifies integer constants that can be used in conjunction with a cssrule's type property to discern the rule type (and therefore, which specialized interface it implements)...

CSSStyleDeclaration.setProperty() - Web APIs
for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section). we know that the rule we want to alter to do this is contained inside the second stylesheet applied to the page, so we grab a reference to it using document.stylesheets[1]. we then loop through the different rules contained inside the stylesheet, which are contained in the array found at stylesheet.cssrules; for each one, we check whether its cssstylerule.selectortext property is equal to the selector .box p, which indicates it is the one we want. if so, we store a reference to this cs...
...ryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const stylesheet = document.stylesheets[1]; let boxpararule; for(let i = 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbg...

CSSStyleDeclaration - Web APIs
the cssstyledeclaration interface represents an object that is a css declaration block, and exposes style information and various style-related methods and properties. a cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <div style="...">). via the cssstylesheet api. for example, document.stylesheets[0].cssrules[0].style returns a cssstyledeclaration object on the first css rule in the document's first stylesheet. via window.getcomputedstyle(), which exposes the cssstyledeclaration object as a read-only interface. attributes cssstyledeclaration.csstext textual representation of the declaration block. setting this attribute changes the style. cssstyledeclaration.lengthread only ...
...y() removes a property from the css declaration block. cssstyledeclaration.setproperty() modifies an existing css property or creates a new css property in the declaration block. cssstyledeclaration.getpropertycssvalue() only supported via getcomputedstyle in firefox. returns the property value as a cssprimitivevalue or null for shorthand properties. example var styleobj = document.stylesheets[0].cssrules[0].style; console.log(styleobj.csstext); for (var i = styleobj.length; i--;) { var namestring = styleobj[i]; styleobj.removeproperty(namestring); } console.log(styleobj.csstext); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration' in that specification. working draft merged the dom level...

CSS Object Model (CSSOM) - Web APIs
users to read and modify css style dynamically. ...
...ule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle 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, mouseevent, and svgelement. css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixco...

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. bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none a different event, load, should be used only to detect a fully-loaded page. it is a common mistake to use load where domcontentloaded would be more appropriate. synchronous javascript pauses parsing of the dom. ...
...property none a different event, load, should be used only to detect a fully-loaded page. it is a common mistake to use load where domcontentloaded would be more appropriate. synchronous javascript pauses parsing of the dom. 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. examples basic usage document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loa...

Document.createProcessingInstruction() - Web APIs
y, after the target. the data is up to you, but it can't contain ?>, since that closes the processing instruction. ...
...ruction target is invalid — it should be a valid xml name that doesn't contain "xml", "xml", or any case combination of the two, other than standardized ones such as <?xml-stylesheet ?>. the closing processing instruction sequence (?>) is part of the data. example var doc = new domparser().parsefromstring('<foo />', 'application/xml'); var pi = doc.createprocessinginstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); doc.insertbefore(pi, doc.firstchild); console.log(new xmlserializer().serializetostring(doc)); // displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/> specifications specification status comment domthe definition of 'createprocessinginstruction()' in that specification. living standard no change ...

FetchEvent.respondWith() - Web APIs
sponse.url value will be propagated to the intercepted network request as the final resolved url. if the response.url value is the empty string, then the fetchevent.request.url is used as the final url. in the past the fetchevent.request.url was used as the final url in all cases. the provided response.url was effectively ignored. this means, for example, if a service worker intercepts a stylesheet or worker script, then the provided response.url will be used to resolve any relative @import or importscripts() subresource loads (bug 1222008). for most types of network request this change has no impact because you can't observe the final url. there are a few, though, where it does matter: if a fetch() is intercepted, then you can observe the final url on the result's response.url. if a ...
...st types of network request this change has no impact because you can't observe the final url. there are a few, though, where it does matter: if a fetch() is intercepted, then you can observe the final url on the result's response.url. if a worker script is intercepted, then the final url is used to set self.location and used as the base url for relative urls in the worker script. if a stylesheet is intercepted, then the final url is used as the base url for resolving relative @import loads. note that navigation requests for windows and iframes do not use the final url. the way the html specification handles redirects for navigations ends up using the request url for the resulting window.location. this means sites can still provide an "alternate" view of a web page when offline withou...

HTMLLinkElement - Web APIs
htmlelement, and linkstyle. htmllinkelement.as is a domstring representing the type of content being loaded by the html link. htmllinkelement.crossorigin is a domstring that corresponds to the cors setting for this link element. see cors settings attributes for details. htmllinkelement.disabled is a boolean which represents whether the link is disabled; currently only used with style sheet links. htmllinkelement.href is a domstring representing the uri for the target resource. htmllinkelement.hreflang is a domstring representing the language code for the linked resource. htmllinkelement.media is a domstring representing a list of one or more media formats to which the resource applies. htmllinkelement.referrerpolicy is a domstring that reflects the referrerpolicy html att...
...ch referrer to use. htmllinkelement.rel is a domstring representing the forward relationship of the linked resource from the document to the resource. htmllinkelement.rellist read only is a domtokenlist that reflects the rel html attribute, as a list of tokens. htmllinkelement.sizes read only is a domsettabletokenlist that reflects the sizes html attribute, as a list of tokens. linkstyle.sheet read only returns the stylesheet object associated with the given element, or null if there is none. htmllinkelement.type is a domstring representing the mime type of the linked resource. obsolete properties htmllinkelement.charset is a domstring representing the character encoding for the target resource. htmllinkelement.rev is a domstring representing the reverse relationship of...

HTMLStyleElement.media - Web APIs
the htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
...leelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...

MediaList.mediaText - Web APIs
each one is separated by a comma, for example screen and (min-width: 480px), print. ...
...arated by commas, e.g. screen, print. note that the medialist is a live list; updating the list via mediatext will immediately update the behavior of the document. also note that is you try to set mediatext to null, it will be treated as an empty string, i.e. the value will be set to "". 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. working draft ...

MediaList - Web APIs
those set using a <link> element's media attribute. note: medialist is a live list; updating the list using properties or methods listed below will immediately update the behavior of the document. properties medialist.mediatext a stringifier that returns a domstring representing the medialist as text, and also allows you to set a new medialist. medialist.length read only returns the number of media queries in the medialist. methods medialist.appendmedium() adds a media query to the medialist. medialist.deletemedium() removes a media query from the medialist. ...
...hods medialist.appendmedium() adds a media query to the medialist. medialist.deletemedium() removes a media query from the medialist. medialist.item() a getter that returns a cssomstring representing a media query as text, given the media query's index value inside the medialist. 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. working draft ...

Payment Request API - Web APIs
g a html form. advantages of using the payment request api with "basic-card" (card-based payments): fast purchase experience: users enter their details once into the browser and are then ready to pay for goods and services on the web. they no longer have to fill out the same details repeatedly across different sites. consistent experience on every site (that supports the api): as the payment sheet is controlled by the browser, it can tailor the experience to the user. this can include localizing the ui into the user's preferred language. accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. a browser could also adjust the font size or colo...
... credentials management: users can manage their credit cards and shipping addresses directly in the browser. ...

Window.getComputedStyle() - Web APIs
individual css property values are accessed through apis provided by the object, or by indexing with css property names. syntax var style = window.getcomputedstyle(element [, pseudoelt]); element the element for which to get the computed style. pseudoeltoptional a string specifying the pseudo-element to match. omitted (or null) for real elements. ...
...es.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property. however, the two objects have different purposes: the object from getcomputedstyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet. the element.style object should be used to set styles on that element, or inspect styles directly added to it from javascript manipulation or the global style attribute. the first argument must be an element. non-elements, like a text node, will throw an error. defaultview in many code samples, getcomputedstyle is used from the document.defaultview object. in nearly all cases, this is needl...

Window - Web APIs
sage to the console. window.find() searches for a given string in a window. window.focus() sets focus on the current window. window.getcomputedstyle() gets computed style for the specified element. computed style indicates the computed values of all css properties of the element. window.getdefaultcomputedstyle() gets default computed style for the specified element, ignoring author stylesheets. window.getselection() returns the selection object representing the selected item(s). window.matchmedia() returns a mediaquerylist object representing the specified media query string. window.maximize() fixme: needscontents window.minimize() (top-level xul windows only) minimizes the window. window.moveby() moves the current window by a specified amount. window.moveto() moves the wi...
...perty. popstate fired when the active history entry changes. also available using the onpopstate event handler property. load & unload events beforeunload fired when the window, the document and its resources are about to be unloaded. also available via the onbeforeunload property. domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. load fired when the whole page has loaded, including all dependent resources such as stylesheets images. also available via the onload property. unload fired when the document or a child resource is being unloaded. also available via the onunload property. manifest events appinstalled fired when the browser has successfully installed a page a...

Introduction - Web APIs
introduction one noticeable trend in w3c standards has been the effort to separate content from style. this would allow the same style to be reused for multiple content, as well as simplify maintenance and allow a quick (only modify one file) way to change the look of content. css (cascade style sheets) was one of the first ways proposed by the w3c. css is a simple way to apply style rules to a web document. these style rules define how the document (the content) should be laid out. ...
...ts) was one of the first ways proposed by the w3c. css is a simple way to apply style rules to a web document. these style rules define how the document (the content) should be laid out. however, it has several limitations, such as lack of programming structures and ability to create complex layout models. css also has limited support for changing the position of an element. xsl (extensible stylesheet language) transformations are composed of two parts: xsl elements, which allow the transformation of an xml tree into another markup tree and xpath, a selection language for trees. xslt takes an xml document (the content) and creates a brand new document based on the rules in the xsl stylesheet. this allows xslt to add, remove and reorganize elements from the original xml document and thus allows...

Web APIs
rategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent c...
...speechrecognitionerror speechrecognitionerrorevent speechrecognitionevent speechrecognitionresult speechrecognitionresultlist speechsynthesis speechsynthesiserrorevent speechsynthesisevent speechsynthesisutterance speechsynthesisvoice staticrange stereopannernode storage storageestimate storageevent storagemanager storagequota stylepropertymap stylepropertymapreadonly stylesheet stylesheetlist submitevent subtlecrypto syncevent syncmanager t taskattributiontiming text textdecoder textencoder textmetrics textrange texttrack texttrackcue texttracklist timeevent timeranges touch touchevent touchlist trackdefault trackdefaultlist trackevent transferable transformstream transitionevent treewalker typeinfo u uievent ulongrange url urlsearchparams urlutilsre...

Accessibility Information for Web Authors - Accessibility
rast by lighthouse international). a study has established that about 8 percent of all men have some form of color deficiency. color contrast analyzer algorithm is based on the formula provided in techniques for accessibility evaluation and repair tools from w3c. the juicy studio css analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets. the future: accessible dhtml dhtml accessibility roadmap: a peek into how dhtml will be made accessible in the future. this document gives a plan which is being developed by ibm, mozilla and wai protocols and formats working group (pfwg) to address the issue of accessible dhtml. dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with javascript ra...
...be the behavior of custom widgets such as menus and tree views. these widgets are usually not even keyboard focusable. furthermore, assistive technologies do not understand what these widgets are supposed to be, or what state they are in or what they are capable of. this document tackles such difficulties and shows several interactive desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices. join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to c...

EXSLT
)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. exslt modules to use an exslt function, you need to declare the namespace the function is in, and then use the appropriate prefix when calling the function. ...
...the namespace for the common package is http://exslt.org/common. ...

HTML5 - Developer guides
frame> using the sandbox and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element. mathml allows directly embedding mathematical formulas. introduction to html5 this article introduces how to indicate to the browser that you are using html5 in your web design or web application. html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web developer tools. the guide is downloadable for ease of use and access. this page was created with help from the w3c as a quick guide for those who have some basic familiarity and experience using html5. downloadable html5 guide a quick guide to html5, including the common html tags as well as the new html5 tags. downloadable in pdf and png for...
...generators, code examples and web developer tools. the guide is downloadable for ease of use and access. this page was created with help from the w3c as a quick guide for those who have some basic familiarity and experience using html5. downloadable html5 guide a quick guide to html5, including the common html tags as well as the new html5 tags. downloadable in pdf and png formats. html5 cheat sheet a handy html 5 cheat sheet for beginners who want to master html 5, its elements, event attributes and compatibility. html5-compliant parser the parser, which turns the bytes of an html document into a dom, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid html. this leads to far greater predictability and interoperability between html5...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
imer introducing each of the ways css color can be used in html. fortunately, adding color to your html is actually really easy to do, and you can add color to nearly anything. we're going to touch on most of what you'll need to know when using color, including a list of what you can color and what css properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts. we'll also take a look at how to let the user pick a color. then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. things that can have color at the element level, everything in html can have color applied to it. instead, let's look at things in term...
...in degrees (deg). using color now that you know what css properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. as you may have seen from the list under things that can have color, there are plenty of things you can color with css. let's look at this from two sides: using color within a stylesheet, and adding and changing color using javascript code to alter the styles of elements. specifying colors in stylesheets the easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the css that's used when rendering elements. while we won't use every single property mentioned previously, we'll look at a couple of examples. the concept is the same...

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
p> this wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence. note: you don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. in other words, simplifying this to just <kbd>ctrl</kbd>+<kbd>n</kbd> would be perfectly valid. ...
...denote the components of the sequence. note: you don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. in other words, simplifying this to just <kbd>ctrl</kbd>+<kbd>n</kbd> would be perfectly valid. depending on your style sheet, though, you may find it useful to do this kind of nesting. ...

HTML documentation index - HTML: Hypertext Markup Language
l <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. 108 <head>: the document metadata (header) element element, html, html document metadata, html:metadata content, reference, web the html <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. 109 <header> element, html, html sections, reference the html <header> element represents introductory content, typically a group of introductory or navigational aids. it may contain some heading elements but also a logo, a search form, an author name, and other elements. 110 <hgroup> element, experimental, html, html sections, html5, reference, web the...
... the html <li> element is used to represent an item in a list. 149 <link>: the external resource link element element, html, html document metadata, link, reference, web, web performance, metadata the html external resource link element (<link>) specifies relationships between the current document and an external resource. this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. 150 <listing> element, html, obsolete, reference, web the html listing element (<listing>) renders text between the start and end tags without interpreting the html in between and using a monospaced font. the html 2 standard reco...

Index - HTTP
he accept request http header advertises which content types, expressed as mime types, the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-type response header. 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. 3 accept-charset content negotiation, http, http header, reference, request header the accept-charset request http header advertises which character set the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the clien...
...g the execution of plugins and scripts, and enforcing a same-origin policy. 47 csp: script-src csp, directive, http, reference, security the http content-security-policy (csp) script-src directive specifies valid sources for javascript. 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. 48 csp: style-src csp, directive, http, reference, security the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. 49 csp: upgrade-insecure-requests csp, directive, http, reference, security the http content-security-policy (csp) upgrade-insecure-requests directive instructs...

Referrer-Policy - HTTP
for <style> elements or style attributes, the owner document's referrer policy is used. examples policy document navigation to referrer n...
... on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets. these resources follow a referrer policy as well: external css stylesheets use the default policy (no-referrer-when-downgrade), unless it's overwritten via a referrer-policy http header on the css stylesheet’s response. for <style> elements or style attributes, the owner document's referrer policy is used. examples policy document navigation to referrer no-referrer https://example.com/page anywhere (no referrer) no...

Regular expressions - JavaScript
characters, such as /abc/, or a combination of simple and special characters, such as /ab*c/ or /chapter (\d+)\.\d*/. the last example includes parentheses, which are used as a memory device. the match made with this part of the pattern is remembered for later use, as described in using groups. note: if you are already familiar with the forms of a regular expression, you may also read the cheatsheet for a quick lookup for a specific pattern/construct. using simple patterns simple patterns are constructed of characters for which you want to find a direct match. for example, the pattern /abc/ matches character combinations in strings only when the exact sequence "abc" occurs (all characters together and in that order). such a match would succeed in the strings "hi, do you know your abc's?" ...
... escaping if you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by putting a backslash in front of it. for instance, to search for "a" followed by "*" followed by "b", you'd use /a\*b/ — the backslash "escapes" the "*", making it literal instead of spe...

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. ...
...aw 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. examples "background_color": "red" specification specification status comment feedback web app manifestthe definition of 'background_color' in that specification. working draft initia...

contentStyleType - SVG: Scalable Vector Graphics
the contentstyletype attribute specifies the style sheet language for the given document fragment on the <svg> element. this language is used for all instances of style that do not specify their own styling language, such as the style attribute that is available on many elements. the value specifies a media type, per mime part two: media types [rfc2046]. usage notes value one of the content types specified in the media types default value text/css animatable no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyletype is ommitted, the attribute is not well supported in user agents. ...
...o: media types [rfc2046]. usage notes value one of the content types specified in the media types default value text/css animatable no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyletype is ommitted, the attribute is not well supported in user agents. if other style sheet languages become more popular they might not use the style attribute, instead it could be easily declared which style language is used in the <style>'s type attribute. the use of contentstyletype is therefore deprecated. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'contentscripttype' in that specif...

overflow - SVG: Scalable Vector Graphics
fied on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped. within svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip. although the initial value for overflow is auto, it is overwritten in the user agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <pattern> element, and the <marker> element to be hidden by default. note: as a presentation attribute, overflow can be used as a css property. see the css opacity property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements:...
...property. specifications specification status comment css level 2 (revision 1)the definition of 'overflow' in that specification. recommendation definition in css scalable vector graphics (svg) 2the definition of 'overflow' in that specification. candidate recommendation simplifies the definition and outlines the values within the user agent stylesheet. scalable vector graphics (svg) 1.1 (second edition)the definition of 'overflow' in that specification. recommendation initial definition ...

<style> - SVG: Scalable Vector Graphics
value type: <string>; default value: text/css; animatable: no media this attribute defines to which media the style applies. ...
...s as the corresponding element in html (see html's <style> element). html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string. value type: <string>; default value: text/css; animatable: no media this attribute defines to which media the style applies. value type: <string>; default value: all; animatable: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets. value type: <string>; default value: none; animatable: no ...

SVG and CSS - SVG: Scalable Vector Graphics
fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the document in your svg-enabled browser. move your mouse pointer over the graphic to see what happens. result notes about this demonstration: the svg document links the stylesheet in the usual way. svg has its own css properties and values. some of them are similar to css properties for html. challenge change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work. see a solution to this challenge. simplified structure the svg structure shown above could be wr...
...this is also true for html and xul documents. but you can use css for general-purpose xml documents, where there is no predefined way to display the elements. the next page demonstrates this: xml data ...

Mixed content - Web security
ge is public and has no sensitive data about the user, using mixed active content still provides the attacker with the opportunity to redirect the user to other http pages and steal http cookies from those sites. 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). <object> (data attribute) navigator.sendbeacon (url attribute) other resource types like web fonts and workers may be considered active mixed content, as they are in chrome. warnings in web console the firefox web console ...
...an be blocked by setting a preference). to make it easier for web developers to find mixed content errors, all blocked mixed content requests are logged to the security pane of the web console, as seen below: to fix this type of error, all requests to http content should be removed and replaced with content served over https. some common examples of mixed content include javascript files, stylesheets, images, videos, and other media. note: since firefox 55, the loading of mixed content is allowed on http://127.0.0.1/ (see bug 903966). chrome allows mixed content on http://127.0.0.1/ and http://localhost/. safari does not allow any mixed content. ...

Tutorials
stering and logging in, sending feedback, buying products, and more. this module gets you started with creating the client-side parts of forms. tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection. ...
...ry level css basics css (cascading style sheets) is the code you use to style your webpage. css basics takes you through what you need to get started. we'll answer questions like: how do i make my text black or red? how do i make my content show up in such-and-such a place on the screen? how do i decorate my webpage with background images and colors? 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. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. cs...

Using shadow DOM - Web Components
/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."> internal versus external styles in the above example we apply style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead. for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linke...
... code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads. many modern browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet. with this optimization the performance of external and internal styles should be similar. ...

Loading Content Scripts - Archive of obsolete content
the document element for the page is inserted into the dom. at this point the dom content hasn't been loaded yet, so the script won't be able to interact with it. "ready" loads the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires. at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading. "end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires. the default value is "end". the contentscriptoptions is a json that is exposed to content scripts as a read only value under self.options property. any kind of jsonable value (object, array, string, etc.) c...

Content Scripts - Archive of obsolete content
fter the document element for the page is inserted into the dom. at this point the dom content hasn't been loaded yet, so the script won't be able to interact with it. "ready": load the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires. at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading. "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires. the default value is "end". note that tab.attach() doesn't accept contentscriptwhen, because it's generally called after the page has loaded. passing configuration options the contentscriptoptions is a json objec...

ui/frame - Archive of obsolete content
the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your add-ons "data" directory. ...

ui/sidebar - Archive of obsolete content
like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself. <!doctype html> <html> <head> <link href="stuff.css" type="text/css" rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property. this will change the sidebar's content across all windows. communicating with sidebar scripts you can't directly access your sidebar's content from your main add-on code, but you can send messages between your main add-o...

Low-Level APIs - Archive of obsolete content
listen to changes to the preferences system in firefox. preferences/service access the preferences system in firefox. remote/child enables an sdk module loaded into a child process to access web content in the child process and communicate with modules in the main process. remote/parent enables you to load modules, and privileged parts of your add-on in general, into child processes. stylesheet/style modify styles using stylesheet files or css rules. stylesheet/utils helper functions for working with stylesheets. system/child_process an implementation of the node.js child_process api. system/environment access, set and clear environment variables. system/events api for working with the application observer service. system/runtime access to information about firefox's runtime ...

Release notes - Archive of obsolete content
e after this release entered aurora. bugs fixed between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools. jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. adde...

Storing annotations - Archive of obsolete content
n browser window rather than the panel. so the content script binds a click handler to the links which will send the url to the add-on. save this file in data/list as annotation-list.js. ...

Developing for Firefox Mobile - Archive of obsolete content
supported lang/type supported loader/cuddlefish supported loader/sandbox supported net/url supported net/xhr supported places/bookmarks not supported places/favicon not supported places/history not supported platform/xpcom supported preferences/service supported stylesheet/style supported stylesheet/utils supported system/environment supported system/events supported system/runtime supported system/unload supported system/xul-app supported tabs/utils supported test/assert supported test/harness supported test/httpd supported test/runne...

Embedding SVG - Archive of obsolete content
w3.org/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.

Examples and demos from articles - Archive of obsolete content
hen current document changes. do something if an external page has changed since last visit here is a possible example of how to show an alert message when an external page changes. import scripts here is a possible example of how to dynamically import scripts with javascript. css css tutorial aimed at complete beginners, this css tutorial for beginners introduces you to cascading style sheets (css). it guides you through the basic features of the language with practical examples that you can try for yourself on your own computer and illustrates the standard features of css that work in modern browsers. dropdown menus rules how to create pure-css dropdown menus. ...

Scrollbar - Archive of obsolete content
crollbars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx. ...

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
the language. all elements can carry a "namespace uri" identifier, which is unique for each language. for example, even though xhtml and svg have elements with the same name, these can be distinguished. the namespace uri for xhtml is "http://www.w3.org/1999/xhtml" ; for svg is it "http://www.w3.org/2000/svg". css: a style language to alter the display of xml documents like xml, cascading style sheets (css) is a technical specification established by the w3c; it is a style-description language defining the display of data marked up in xml and html. as shown in listing 1, it has an extremely simple syntax. by separating the structure of the data, expressed through html or xml, and the display style, indicated by css, data can be reused better than it is when structural and stylistic markup are...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
above, and others for older systems. in this example we won't bother. there is a separate skin directory for each system, with the unix theme as the default (as most other systems are unix-based). this makes it easy to keep the themes separate and to make changes to one of them without having to worry about the rest. on the other hand, it is often the case that there are multiple images and css sheets that are the same for all systems. for example, your extension logo icon will probably be the same. having multiple copies of these files can be wasteful, so you may want to have a "common" directory. image files use the most space in an extension package, by far. most extensions are a few hundred kilobytes in size or smaller. if your file is getting too big, you should look into optimizing yo...

Appendix F: Monitoring DOM changes - Archive of obsolete content
inserted', listener, false); }; } } xbl xbl is similar in approach to the above animation-based method. bindings are attached to dom nodes via css and are given the opportunity to run code via their constructors when new matching dom nodes are created. 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. as it is currently possible to attach only a single binding to a given dom node at once, it is important when using this method to detach your binding from a node once your constructor has run. this is most easily done by adding a :not clause to the css selector that attaches your binding. for instance, when using the selector div:not([foo-binding-done]), you ...

The Essentials of an Extension - Archive of obsolete content
ral forms that are also language-dependent. skin styling xul is very similar to styling html. we'll look into some of the differences when we cover the xul box model, and other more advanced topics. 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. forgetting to include this file in a xul window usually leads to interesting and often unwanted results. in our case we don't really need to include it, since we're over...

Adding preferences to an extension - Archive of obsolete content
own() routines automatically when the browser window is loaded and unloaded. window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); window.addeventlistener("unload", function(e) { stockwatcher.shutdown(); }, false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog. ...

Notes on HTML Reflow - Archive of obsolete content
s are dispatched en masse when the presentation shell's incremental reflow queue is asynchronously serviced. a resize reflow is performed when the presentation shell's dimensions change; e.g., because the user resized the shell's window. a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font. a dirty reflow is never performed directly from the presentation shell. instead, a dirty reflow is detected when an incremental reflow reaches its target frame , described below. reflow metrics the reflow metrics object, nshtmlreflowmetrics, is used to propagate information from child frames back to the parent. for example, the dimensions ...

Source code directories overview - Archive of obsolete content
arsing, interpretting and executing javascript scripts. this code originated in mozilla classic. l10n contains code for building localizations. layout contains the c interfaces and code for the layout engine. the layout engine decides how to divide up the "window real estate" among all the pieces of content. it resizes and aligns pieces of content according to the css1 and css2 (cascading style sheets), alignment styles and the content itself. it does not actually render the content; it just assigns different pieces of the window to various content items. this is known as "reflowing" the content. this code is also known by the names, "nglayout" and "gecko." lib contains c code used for reference by developers in programming the mac. it is not used. it shows how to embed the mozilla browser i...

Adding the structure - Archive of obsolete content
that shows whether or not a loaded document was encrypted with ssl). status bars comprise a series of panels, each one defined by a statusbarpanel xul element. each status bar panel displays a different kind of status information. graphical panels (like the one we are creating here that displays an icon) are given the statusbarpanel-iconic class so they can be styled accordingly by the css stylesheet that defines these elements' appearance. the status attribute is not part of the xul definition for the statusbarpanel element, but is used by our extension to store the current tinderbox state. we'll update the value of that attribute each time we retrieve tinderbox's status from the server, and we'll define css rules that change the appearance of the icon depending on the value of that attribu...

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
content sub-subdirectory: tinderstatusoverlay.xul tinderstatus.js tinderstatus.css tb-busted.png tb-nostatus.png tb-success.png tb-testfailed.png these are the files we're going to put into the xpi. ...

Content states and the style system - Archive of obsolete content
expensive operation, however, so the style system tries to minimize the number of style reresolves it does. to this end, when a <code>contentstateschanged</code> notification is dispatched for a content node the first thing that's done is to is to check whether the content state change something could affect any styles. this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. for each selector in this list we check whether it might have stopped matching the node or started matching it. if that has happened, then the style could depend on the state that changed and we have to reresolve style. the way we determine w...

Layout System Overview - Archive of obsolete content
des a specialized storage heap for frames, called an arena, that is used to make allocation and deallocation of frames faster and less likely to fragment the global heap. the presentation shell also owns the root of the style system, the style set. in many cases the presentation shell provides pass-through methods to the style set, and generally uses the style set to do style resolution and style sheet management. one of the critical aspects of the presentation shell is the handling of frame formatting, or reflow. the presentation shell owns and maintains a reflow queue where requests for reflow are held until it is time to perform a reflow, and then pulled out and executed. it is also important to see the presentation shell as an observer of many kinds of events in the system. for example, the...

jspage - Archive of obsolete content
mpute(d[e].value,c[e].value,b),parser:d[e].parser}); });a.$family={name:"fx:css:value"};return a;},serve:function(c,b){if($type(c)!="fx:css:value"){c=this.parse(c);}var a=[];c.each(function(d){a=a.concat(d.parser.serve(d.value,b)); });return a;},render:function(a,d,c,b){a.setstyle(d,this.serve(c,b));},search:function(a){if(fx.css.cache[a]){return fx.css.cache[a];}var b={};array.each(document.stylesheets,function(e,d){var c=e.href; if(c&&c.contains("://")&&!c.contains(document.domain)){return;}var f=e.rules||e.cssrules;array.each(f,function(j,g){if(!j.style){return;}var h=(j.selectortext)?j.selectortext.replace(/^\w+/,function(i){return i.tolowercase(); }):null;if(!h||!h.test("^"+a+"$")){return;}element.styles.each(function(k,i){if(!j.style[i]||element.shortstyles[i]){return;}k=string(j.style[i]...

Microsummary topics - Archive of obsolete content
r-initiated and microsummary-related requests when firefox updates a microsummary generated by a microsummary generator add-on, it automatically downloads the html content of the page being summarized. it does not generally download related content like embedded images and javascript scripts referenced by the page. however, because of a technical limitation (bug 340746), it does download css stylesheets referenced by the page. firefox includes the x-moz request header with these requests. it sets the value of the header to the string microsummary. thus, to differentiate requests initiated manually by users for the purpose of viewing a web page from those initiated automatically by firefox for the purpose of summarizing that page, check for the presence and value of the x-moz request header. if ...

LIR - Archive of obsolete content
in nanojit, lir is the source language for compilation to machine code. lir stands for low-level intermediate representation. it is a typed assembly language. the lir instruction set is best learnt by reading nanojit/liropcode.tbl. code for manipulating lir is in nanojit/lir.h. nanojit lir instruction cheat sheet.also in pdf format see attachment. category op code code name return type featured description miscellaneous 0 start void start of a fragment 1 regfence void a register fence causes no code to be generated, but it affects register allocation so that no registers are live when it is reached. 2 skip void links code chunks. 3 parami integer 32 bit load an int parameter (register or stack location). 4 paramq ...

Styling - Archive of obsolete content
simply add the webapp.css to the bundle and it will be injected into the web application, regardless of the platform or os. it is also possible to create platform-specific styles. in this scenario, the css file is specific to an os. ...

Prism - Archive of obsolete content
desktop integration: support of desktop features can make using the app more natural and convenient for end users. this includes the ability to create desktop shortcuts, to place the application icon in the tray or dock and to display pop-up notifications. customization: apps can be run using a shared browser runtime and customized using client-side script (similar to greasemonkey). custom stylesheets can be used to tweak the ui. architectural overview prism is a xulrunner application. in addition to the browser engine included in xulrunner, it consists of: web app bundle management: code for creating new web app bundles and loading existing bundles. shortcut creation ui: a dialog box lets the user specify attributes of the web app (name, uri, icon, shortcut locations). javascript api...

New Skin Notes - Archive of obsolete content
wordpress skins need footer information. -- dria when a page is redirected, need to say-so and what it was redirected from, (see document for an example of such.) this is only an issue in mw1.5 so far. devmo skin vs cavendish skin --callek i can probably pull-off this patch if needed (quickly), so dria or others do not have to hunt up "how". --callek add "what not to do" css class to stylesheet, as discussed on talk:core javascript 1.5 reference. what's the class called? --maian 21:08, 1 sep 2005 (pdt) in the new mw1.5 skin (not the one currently available here) there's class "wrong" and class "wrong-inline". those will be available after we do the wiki upgrades in the near future. --dria headers need a little padding. h1 could be smaller. --dria is it just me or visited links a...

Same origin policy for XBL - Archive of obsolete content
he policy used for other content. this article provides a description of how the same origin policy for xbl works. when mozilla needs to decide whether or not xbl is allowed to be loaded, it looks at the nsiprincipal originating the load and the nsiuri to be loaded. determining the originating principal the principal originating the load is determined using the following steps: for external stylesheets (<link>, <?xml-stylesheet?>, user sheets, and ua sheets), it depends on where the sheet is loaded from, just like it would for an html document loaded from a similar source. for inline stylesheets (<style> and style attributes), the principal of the element node involved (meaning the <style> element or the element whose style attribute is being looked at). for the nsidomdocumentxbl interface's n...

The life of an HTML HTTP request - Archive of obsolete content
arser is temporarily blocked). (7) since the presentation shell (nspresshell) has registred as an documentobserver with the nsidocument it also gets notified of changes in the document/content tree. this is used to create and update the nsiframe hierarchy. this is done by the nscssframeconstructor, which creates frames for each content node according to the rules specified in the user agent stylesheet (ua.css) and the document specific style sheets. each content node corresponds to one or more nsiframe, except content with displaytype "none". if there are several frames created from a content node, then the first of these are called the "primary" node, and the following frames can be found by using the getnextinflow() method of nsiframe. the initial reflow is done by the nshtmlcontentsink::sta...

Example Sticky Notes - Archive of obsolete content
d they do not require any additional downloads or initializations. --> <binding id="default"> <!-- a separate binding. you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. --> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="...

A XUL Bestiary - Archive of obsolete content
on strings are just a dtd, and the content is just the xul. the chrome url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their related files. 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. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/conten...

id - Archive of obsolete content
« xul reference home id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. example <button id="foo" label="click me" oncommand="dosomething()"/> <script> function dosomething(){ var mybutton = document.getelementbyid('foo'); mybutton.setattribute('label','the button was pressed'); } </script> a more abstract version of the above would be a <button id="foo" label="click me" oncommand="setwidgetlabel(this, 'i was pressed')"/> <script> function setwidgetlabel(idname, newcaption){ document.getelementbyid( idname.id ).setattribute('label',newcaption) } </script> not specifying the id attribute for a window or a prefwi...

onchange - Archive of obsolete content
y is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

state - Archive of obsolete content
open the content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed. ...

style - Archive of obsolete content
...

How to implement a custom XUL query processor component - Archive of obsolete content
ace and follow some conventions for when registering the component. in this example, we will create a simple javascript xpcom component. the component will hold a small array of javascript objects as its datasource. in practice, you would use your own custom source of data. ...

MenuItems - Archive of obsolete content
menuitem-iconic" label="add bookmark" image="addbookmark.png"/> as the image appears on a menu item, you will want to ensure you use a fairly small image. although the exact size will vary depending on the theme being used, the size of menu item images should generally be around 16 by 16 pixels. 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. <menuitem id="bookmark" class="menu-iconic" label="bookmarks" image="bookmarks.png"/> menu icon animation in order to animate the menu item icon on hover a -...

Panels - Archive of obsolete content
upporting temporary popup displays for selecting or entering data. the panel element the panel element is used to create panels. the panel will display whatever elements are placed as children of the panel element. for example, the following panel displays a textbox for entering a name. note that the panel is not placed in a separate file and is instead placed inside another window. <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example. when the button is pressed, the panel is...

Positioning - Archive of obsolete content
o how the popup should be opened. positioning using coordinates a popup can be positioned further using the x and y arguments to openpopup. after the popup is positioned using the anchor, the x and y arguments may be used to offset the popup by a certain distance. the section on the openpopup method provides an example of this. if a menupopup, panel or tooltip has a margin specified in a style sheet or using the inline style attribute, this margin will be applied around the outside of the popup. in the following example, the menupopup has a 2ex margin above it, so when opened, the popup will be placed a distance of 2ex below the bottom of the button. <button label="popup" type="menu"> <menupopup style="margin-top: 2ex;"> <menuitem label="cat"/> <menuitem label="dog"/> </menupopu...

Sorting and filtering a custom tree view - Archive of obsolete content
ting and filtering a custom tree view, that is, a tree whose values are loaded via javascript. this will not work for other types of trees, for example rdf-backed or ones created with dom methods. for the sake of simplicity, strings are not localized and the data loaded is hard coded. because of bug 340478, this code will only work from privileged script. ...

Attribute Substitution - Archive of obsolete content
er^?nationality"/> the caret is considered a separator between variables, however it will not appear in the output. it can also be used to separate a variable with normal text: <label value="?name" class="?gender^german"/> these last two examples have been setting the class attribute on a label. the effect will be that a label will have either the 'malegerman' or 'femalegerman' class. in a stylesheet, you could set properties for each of these classes such that different values appear differently without having to use multiple rules. although not common, you may also wish to insert a question mark or caret into an attribute value. to do this, just use two question marks or two carets in a row. for instance: <label value="what is my name?? my name is ?name"/> in this example, the label might ...

Using Recursive Templates - Archive of obsolete content
ote how similar content corresponding to the action body is created for both the groups as well as the people. the template builder has also added container and empty attributes to the groups. this is done with all nodes that have children to indicate that the node contains generated children as well as whether the node is empty. these hints are used for trees, but they can also be used in a stylesheet to provide a different appearance for containers with children, empty containers, as well as non-containers. in this example, both the parent groups and child people are displayed the same. you could use multiple rules as well, in order to generate different output for each level. in this next example, an assign element is used to assign the local name of the node is to the variable ?type. in an ...

textbox (Toolkit autocomplete) - Archive of obsolete content
y is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

Textbox (XPFE autocomplete) - Archive of obsolete content
y is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

The Joy of XUL - Archive of obsolete content
velopers invest a significant amount of effort to achieve these results in their dhtml web applications but at the cost of complexity and performance and without any supporting standards. based on existing standards xul is an xml language based on w3c standard xml 1.0. applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition 3 (ecmascript); xml 1.0. platform portability like html, xul is designed to be platform-neutral, making applications easily portable to all of the operating systems on which mozilla runs. considering the broad range of platforms that currently support mozilla, this may be one of the ...

Adding HTML Elements - Archive of obsolete content
outermost html element. xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul. this must be entered exactly as shown or it won't work correctly. note that mozilla does not actually download this url, but it does recognize it as being html. ...

Box Model Details - Archive of obsolete content
ttribute which is used to center the buttons horizontally. the align attribute aligns the buttons vertically. the result is that the buttons will be centered in the box in both directions. this example will work with a vertical box as well, although the second button will be underneath the first one, instead of beside it. ...

Creating a Wizard - Archive of obsolete content
are familiar to the user of a particular os. a typical layout will include a title across the top, a set of navigation buttons across the bottom and the page contents in between. the title across the top is created using the title attribute, much like one would use for regular windows. the navigation buttons are created automatically. ...

Cross Package Overlays - Archive of obsolete content
it stores this information in the chrome/overlayinfo directory. you do not need to manually modify the files in this directory. it is automatically generated and modified when mozilla is first run or when new packages are installed. however, you can force the data to be rebuilt by deleting this directory and the chrome.rdf file. 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. « previousnext » ...

Custom Tree Views - Archive of obsolete content
above. we can assign a value to this property at any time to set or change the view. function setview(){ document.getelementbyid('my-tree').view = treeview; } the following presents the example together. an inline script has been used here to simplify the example. normally, you would put the script in an external script file. ...

Focus and Selection - Archive of obsolete content
command dispatcher. these methods move the focus to the next element in sequence or the previous element respectively. this is what happens when the user presses tab or shift+tab. for textboxes, a special attribute, focused is added whenever the element has the focus. 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. it will have the value true if the textbox has the focus and, if the textbox does not have the focus, the attribute will not be present. suppose you wanted to move the focus from where it currently is, to the next place the browser thinks it should be. a user typically does this by hitting the "tab" key. you can do this anywhere you have a xul browser document by simply: document.commanddi...

More Button Features - Archive of obsolete content
he xul file. an example is shown below. 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. in general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out entire...

More Wizards - Archive of obsolete content
d. in the following example, the user must enter a secret code into a textbox on the first page of the wizard. the function checkcode() is called whenever the first page is shown as indicated by the onpageshow attribute. it is also called whenever a key is pressed in the textbox, to determine whether the next button should be enabled again. ...

Persistent Data - Archive of obsolete content
« previousnext » ...

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

XUL Tutorial - Archive of obsolete content
ject model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xbl example specialized window types features of a window creating dialo...

XUL Template Primer - Bindings - Archive of obsolete content
cified in a rule's <conditions>. this is different from the variables specified in the rule's conditions, where a value must be found for each variable for the rule to match. if a <binding> can't be matched, the rule will still fire. example to illustrate how <bindings> work, we'll examine this xul document, which builds a simple content model an rdf/xml file. ...

XUL Event Propagation - Archive of obsolete content
even by the event target itself. the combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the focus of this article. ...

colorpicker - Archive of obsolete content
y is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

dialog - Archive of obsolete content
, 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 labe...

dialogheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a heading row for a dialog box. this element should be placed inside a dialog element. the header may have a title and a description. ...

preference - Archive of obsolete content
y is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

splitter - Archive of obsolete content
above the splitter resizes. farthest the element that is the farthest away from the splitter to the left or above the splitter resizes. flex the closest flexible element resizes. state type: one of the values below indicates whether the splitter has collapsed content or not. this attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state. open the content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed. collapsed the content either before or after the splitter is collapsed and is not visible. dragging the user is current adjusting the position of the splitter, typically by dragging it with the mouse. ...

toolbox - Archive of obsolete content
ovided by the toolbox's externaltoolbars property. more information is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events. ...

treecol - Archive of obsolete content
on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image. however, chrome://global/skin/checkbox/cbox-check.gif is available in seamonkey on mac os x.. treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style ...

wizard - Archive of obsolete content
be shared among all pages. more information is available in the xul tutorial. ...

CommandLine - Archive of obsolete content
</window> original document information ...

Dialogs in XULRunner - Archive of obsolete content
ve" dialogs so users get a consistent experience across applications. custom dialogs building dialogs in xul is very similar to creating windows. each dialog is described in its own xul file. xul provides a dialog element to act as the container for the dialog. dialog xul files can have dtd, css, and javascript, just like windows. ...

Getting started with XULRunner - Archive of obsolete content
described in further detail in xulrunner:specifying startup chrome window. the debugging preferences are discussed in debugging a xulrunner application step 7: create some xul finally, we need to create a simple xul window, which is described in the file main.xul. nothing fancy here, just the minimum we need to make a window. no menus or anything. ...

Gecko Compatibility Handbook - Archive of obsolete content
on the web server to specify the correct mime type. gecko does not try to 'sniff' the mime type for a document in order to reduce the possibility of unsecure, dangerous content masquerading as as a safe mime type. use perl's head utitility to determine the actual mime type being used by the web server. correct any incorrect server mime types. (related article) stylesheet is not being recognized the presence of the title attribute in a link element that references an external stylesheet can cause the stylesheet may be causing the external stylesheet to be ignored. make sure that any stylesheet which should always be applied is persistent instead of preferred. (related article) connecting to a secure site fails, but connects in in...

2006-11-17 - Archive of obsolete content
emory leak. win2xul asks for any quick pointers, opinions, experience, suggestions or ideas on where xulrunner might leak memory bug 319654 was fixed on trunk recently. nickolay ponomarev lets us know that processing instructions are now added to xul document's dom this also means, you can no longer use document.firstchild in xul scripts to get the root element of a xul document and the xml-stylesheet and xul-overlay processing instructions outside the prolog no longer have any effect peter.sei...@gmail.com runs into some difficulties deploying xulrunner 1.8 on os x? please see mozilla.dev.platform faq for solution. peter naulls makes the suggestion in use and maintenance of xlib code that he become the nominal maintainer of the xlib code. meetings no meetings this week ...

2006-11-10 - Archive of obsolete content
olve this issue. block images discussion on how where to change source code so that images could be blocked in mozilla. this can be defined within the nsicontentpolicy. applying site- and page-specific settings during layout discussion on the best possible solution for integrating firefox 3 with the ability to apply site- and page-specific user settings during layout. the idea of using a single sheet and the per-site selectors that dbaron implemented would allow for a quick proof of concept. the pro's and con's of using a single sheet was discussed. meetings none this week. ...

Proposal - Archive of obsolete content
extension module used for iptv and ipradio/podcasting. spec exists newsgator feed extension created to make rss feeds work better with newsgator software. lets you specify an image, up to 277x78 pixels. and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook. the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically. spec exists rss disposition hinting a proposal to make it so iptv and ipradio/podcasting works better with rss. uses an http "content-type" parameter to hint at an rss feeds disposition type -- to hint at what is being syndicated. in development rsshints a module that adds elements to a feed that help an aggregator process them. draft exists...

Theme changes in Firefox 4 - Archive of obsolete content
ment in the main browser window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette. use of the iconsize attribute on toolbar elements add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar. iconsize value actual add-on toolbar button icon dimensions (assuming correct stylesheet and images) small 16x16 pixels large 24x24 pixels note: for stock buttons, the theme is free to use icons of any size. however, the theme should be designed in such a way that the above add-on button icon sizes fit correctly. note: add-ons always use a 24x24 pixels icon when the button is displayed in the toolbar customization palette. default values of the ic...

-moz-stack-sizing - Archive of obsolete content
. ...

-ms-filter - Archive of obsolete content
ence for details. examples the following example shows how to use the -ms-filter attribute in internet explorer 8. 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 h...

Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
it. moving css and javascript into separate files is the safe approach with regard to changes in how your xhtml is served. follow the xhtml 1.0 html compatibility guidelines the xhtml 1.0 html compatibility guidelines help make xhtml documents backwardly compatible with older user agents which do not understand xml. please note that for pure xhtml documents, you do not need to use the xml-stylesheet processing instruction, but should instead use link to reference external files containing css. see also writing javascript for xhtml original document information author(s): bob clary last updated date: march 14th, 2003 copyright © 2001-2003 netscape. ...

Archived open Web documentation - Archive of obsolete content
uide section links to an interesting document discussing how to create and use private variables in objects, which is great if you want to protect the various properties within an object from being poked at accidentally. i also just read a document on proper inheritance using apply(). well if you combine the two, you can have inherited private variables: scope cheatsheet javascript with mozilla extensions has both function-scoped vars and block-scoped lets. along with hoisting and dynamic behavior, scope in javascript is sometimes surprising. server-side javascript here's a radical idea: use one language to write entire web apps -- the same language which billions of web pages already use, every day. ...

Archive of obsolete content
; instead, refer to the downloadable sample code or to the previous sample for further details. creating a status bar extension many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox. css3 css3 is the latest evolution of the cascading style sheets language and aims at extending css2.1. it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. element events archived event pages firefox developer tools these are articles related to the fire...

Index - Game development
entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) 36 square tilemaps implementation: scrolling maps canvas, games, javascript, atlas, scrolling, spritesheet, tilemap, tiles this article covers how to implement scrolling square tilemaps using the canvas api. 37 square tilemaps implementation: static maps canvas, games, javascript, static, atlas, spritesheet, tilemap, tilemaps, tiles this article covers how to implement static square tilemaps using the canvas api. 38 webrtc data channels api, games, needsconten...

Unconventional controls - Game development
d, and these have exactly the same key codes as the arrow keys on the remote. how do you know the codes for the other remote keys? you can check them by printing the responses out in the console: window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console. you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game. all that is needed is checking for key presses: window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break;...

Square tilemaps implementation: Static maps - Game development
ment static square tilemaps using the canvas api. note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article. the tile atlas a tilemap might use one or several atlases — or spritesheets — that contain all of the tile images. this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context. we need to supply the atlas image, the coordinates and dimensions of the tile inside the atlas, and the target coordinates and size (a different tile size in h...

Tiles and tilemaps overview - Game development
ding graph, or handling collisions) or to create a level editor. some popular games that use this technique are super mario bros, pacman, zelda: link's awakening, starcraft, and sim city 2000. think about any game that uses regularly repeating squares of background, and you'll probably find it uses tilemaps. the tile atlas the most efficient way to store the tile images is in an atlas or spritesheet. this is simply all of the required tiles grouped together in a single image file. when it's time to draw a tile, only a small section of this bigger image is rendered on the game canvas. the below images shows a tile atlas of 8 x 4 tiles: using an atlas also has the advantage of naturally assigning every tile an index. this index is perfect to use as the tile identifier when creating the tile...

Buttons - Game development
leave that decision to the player by adding a start button they can press. let's investigate how to do that. new variables we will need a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button. add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation. add the following to the bottom of the preload() function: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high. you also need to grab the button spritesheet from github, and save it in your /img directory. adding the button to the game a...

2D maze game with device orientation - Game development
reloader.prototype = { preload: function() { this.preloadbg = this.add.sprite((ball._width-297)*0.5, (ball._height-145)*0.5, 'preloaderbg'); this.preloadbar = this.add.sprite((ball._width-158)*0.5, (ball._height-50)*0.5, 'preloaderbar'); this.load.setpreloadsprite(this.preloadbar); this.load.image('ball', 'img/ball.png'); // ... this.load.spritesheet('button-start', 'img/button-start.png', 146, 51); // ... this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']); }, create: function() { this.game.state.start('mainmenu'); } }; there are single images, spritesheets and audio files loaded by the framework. in this state the preloadbar is showing the progress on the screen.

CDN - MDN Web Docs Glossary: Definitions of Web-related terms
a cdn (content delivery network) is a group of servers spread out over many locations. these servers store duplicate copies of data so that servers can fulfill data requests based on which servers are closest to the respective end-users. cdns make for fast service less affected by high traffic. cdns are used widely for delivering stylesheets and javascript files (static assets) of libraries like bootstrap, jquery etc. using cdn for those library files is preferable for a number of reasons: serving libraries' static assets over cdn lowers the request burden on an organization's own servers. most cdns have servers all over the globe, so cdn servers may be geographically nearer to your users than your own servers. geographical distance affects latency proportionally. cdns are already...

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
the browser applies css style declarations to selected elements to display them properly. a style declaration contains the properties and their values, which determine how a webpage looks. css is one of the three core web technologies, along with html and javascript. css usually styles html elements, but can be also used with other markup languages like svg or xml. a css rule is a set of properties associated with a selector. ...

Media - MDN Web Docs Glossary: Definitions of Web-related terms
about the web; it takes on different meanings depending on the context. media (audio-visual presentation) the term media (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. media (css) in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine. learn more media on wikipedia ...

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
ments representing different types of fruits. would you know what part of the dom is being selected with div > ul > li, or .fruits__item? semantics in html in html, for example, the <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, most browser's user agent stylesheet will style an <h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted). on the other hand, you could make any element look like a top level heading. consider the following: <span style="font-size: 32px; margin: 21px 0;">is this a top level heading?</span> this will render it to look like a top level heading, but it has no semanti...

Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
any css that the user of the web browser has added. these may be from adding styles using a developer tool or from a browser extension that automatically applies custom styles to content, such as stylus or stylish. author origin the author origin is the style origin which contains all of the styles which are part of the document, whether embedded within the html or loaded from an external stylesheet file. the style origins are used to determine where to stop rolling back (or backtracking through) the cascade of styles that have been applied to an element when removing styles, such as when using the unset or revert keywords. learn more technical information css cascading and inheritance: cascading origins ...

XSLT - MDN Web Docs Glossary: Definitions of Web-related terms
extensible stylesheet language transformations (xslt) is a declarative language used to convert xml documents into other xml documents, html, pdf, plain text, and so on. xslt has its own processor that accepts xml input, or any format convertible to an xquery and xpath data model. the xslt processor produces a new document based on the xml document and an xslt stylesheet, making no changes to the original files in the process. learn more technical reference xslt on wikipedia xslt documentation on mdn ...

CSS and JavaScript accessibility best practices - Learn web development
reason why you want this content to be hidden from screen readers. note: invisible content just for screen reader users has a lot more useful detail surrounding this topic. accept that users can override styles accept that users can override your styles it is possible for users to override your styles with their own custom styles, for example: see sarah maddox's how to use a custom style sheet (css) with firefox for a useful guide covering how to do this manually in firefox, and how to use a custom style sheet (css) with internet explorer by adrian gordon for the equivalent ie instructions. it is probably easier to do it using an extension, for example the stylish extension is available for firefox, safari, opera, and chrome. users might do this for a variety of reasons. a visually ...

Accessible multimedia - Learn web development
'll need to provide audio descriptions of some kind to describe that extra content. in many cases this will simply take the form of video, in which case you can implement captions using the techniques described in the next section of the article. however, there are some edge cases. you might for example have an audio recording of a meeting that refers to an accompanying resource such as a spreadsheet or chart. in such cases, you should make sure that the resources are provided along with the audio + transcript, and specifically link to them in the places where they are referred to in the transcript. this of course will help all users, not just people who are deaf. note: an audio transcript will in general help multiple user groups. as well as giving deaf users access to the information cont...

Backgrounds and borders - Learn web development
files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the background and border of boxes. styling backgrounds in css the css background property is a shorthand for a number of background longhand properties that we will meet in this lesson. if you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once. .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you ca...

Fundamental CSS comprehension - Learn web development
t with some text inside it to indicate that this is a set of general styles for the overall page. "general page styles" would do. also add three more comments at the bottom of the css file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents. from now on, subsequent styles added to the stylesheet should be organized in an appropriate place. taking care of the selectors and rulesets provided in the css resource file: next up, we'd like you to look at the four selectors, and calculate the specificity for each one. write these down somewhere where they can be found later on, such as in a comment at the top of your css. now it's time to put the right selector on the right rule set! you'...

Type, class, and ID selectors - Learn web development
ment and a descendant combinator). in the following example we have used the universal selector to remove the margins on all elements. this means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily. this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling. since the universal selector makes global changes, we use it to deal with very specific situations such as the one outlined below. using the universal selector to make your selectors easier to read one use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. for example, if i wanted to sel...

CSS building blocks - Learn web development
styling techniques highlighted. debugging css sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect. this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you find out what is going on. 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. in this article, we will take a brief look at some best practices for writing your css to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability. assessments want to test your css skills? the following assessments will test your understanding o...

Test Your Skills: Fundamental layout comprehension - Learn web development
ou get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below. basic setup you can download the html, css, and a set of six images here. save the html document and stylesheet into a directory on your computer, and add the images into a folder named images. opening the index.html file in a browser should give you a page with basic styling but no layout, which should look something like the image seen below. this starting point has all of the content of your layout as displayed by the browser in normal flow. if you don't want to work locally then using a tool such as...

Legacy layout methods - Learn web development
the skeleton website, and choose "download" to download the zip file. unzip this and copy the skeleton.css and normalize.css files into a new directory. make a copy of our html-skeleton.html file and save it in the same directory as the skeleton and normalize css. include the skeleton and normalize css in the html page, by adding the following to its head: <link href="normalize.css" rel="stylesheet"> <link href="skeleton.css" rel="stylesheet"> skeleton includes more than a grid system — it also contains css for typography and other page elements that you can use as a starting point. we’ll leave these at the defaults for now, however — it’s the grid we are really interested in here. note: normalize is a really useful little css library written by nicolas gallagher, which automatic...

Multiple-column layout - Learn web development
int contains some very simple html; a wrapper with a class of container inside which is a heading and some paragraphs. the <div> with a class of container will become our multicol container. we switch on multicol by using one of two properties column-count or column-width. the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column. column-count example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1>...

Supporting older browsers - Learn web development
t a basic level for users of older browsers. a basic level of support comes from structuring your content well so that the normal flow of your page makes sense. a user with a very limited feature phone might not get much of your css, but the content will flow in a way that makes reading easy. therefore, a well-structured html document should always be your starting point. if you remove your stylesheet, does your content make sense? one option is to leave this plain view of the site as the fallback for people using very old or limited browsers. if you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on modern browsers. it would be better to spend the time on things which make ...

Using your new knowledge - Learn web development
a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. a link to the actual task or assessment page, so we can find the question you want help with. what's next? congratulations on finishing this first module. you should now have a good general understanding of css, and be able to understand much of what is happening in a stylesheet. in the next module, css building blocks, we will go on to look at a number of key areas in depth. previous overview: first steps in this module what is css? getting started with css how css is structured how css works using your new knowledge ...

Fundamental text and font styling - Learn web development
xt, it is usually a good idea to set the base font-size of the document to 10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. after doing that, you can easily size the different types of text in your document to what you want. it is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find. our new result is like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a w...

How to structure a web form - Learn web development
y as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why. to start with, make a local copy of our blank template file and the css for our payment form in a new directory on your computer. apply the css to the html by adding the following line inside the html <head>: <link href="payment-form.css" rel="stylesheet"> next, create your form by adding the outer <form> element: <form> </form> inside the <form> tags, add a heading and paragraph to inform users how required fields are marked: <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> next we'll add a larger section of code into the form, below our previous entry. here you'll see t...

Dealing with files - Learn web development
when you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server. dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your website. ...

The web and web standards - Learn web development
you can wrap (mark up) content in to give it meaning (semantics) and structure. simple html looks like this: <h1>this is a top-level heading</h1> <p>this is a paragraph of text.</p> <img src="cat.jpg" alt="a picture of my cat"> if we adopted a house-building analogy, html would be like the foundations and walls of the house, which give it structure and hold it together. cascading style sheets (css) is a rule-based language used to apply styles to your html, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. as a simple example, the following code would turn our html paragraph red: p { color: red; } in the house analogy, css is like the paint, wallpaper, carpets and paintings you'd use to make the house look ...

Getting started with HTML - Learn web development
at this point, you should understand what html looks like, and how it works at a basic level. you should also be able to write a few elements and attributes. the subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language. note: as you start to learn more about html, consider learning the basics of cascading style sheets, or css. css is the language used to style web pages. (for example, changing fonts or colors, or altering the page layout) html and css work well together, as you will soon discover. ...

HTML table advanced features and accessibility - Learn web development
nique id to each <th> element. you add a headers attribute to each <td> element. each headers attribute has to contain a list of the ids of all the <th> elements that act as a header for that cell, separated by spaces. this gives your html table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. for it to work well, the table really needs both column and row headers. returning to our spending costs example, the previous two snippets could be rewritten like this: <thead> <tr> <th id="purchase">purchase</th> <th id="location">location</th> <th id="date">date</th> <th id="evaluation">evaluation</th> <th id="cost">cost (€)</th> </tr> </thead> <tbody> <tr> <th i...

Manipulating documents - Learn web development
inkpara.remove(); this method is not supported in older browsers. they have no method to tell a node to remove itself, so you'd have to do the following. linkpara.parentnode.removechild(linkpara); have a go at adding the above lines to your code. manipulating styles it is possible to manipulate css styles via javascript in a variety of ways. to start with, you can get a list of all the stylesheets attached to a document using document.stylesheets, which returns an array-like object with cssstylesheet objects. you can then add/remove styles as wished. however, we're not going to expand on those features because they are a somewhat archaic and difficult way to manipulate style. there are much easier ways. the first way is to add inline styles directly onto elements you want to dynamically ...

Third-party APIs - Learn web development
on third party servers. to access them from javascript you first need to connect to the api functionality and make it available on your page. 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. for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which t...

What is JavaScript? - Learn web development
ent in the two contexts, but related, and both approaches (server-side and client-side) usually work together. a web page with no dynamically updating content is referred to as static — it just shows the same content all the time. how do you add javascript to your page? javascript is applied to your html page in a similar manner to css. whereas css uses <link> elements to apply external stylesheets and <style> elements to apply internal stylesheets to html, javascript only needs one friend in the world of html — the <script> element. let's learn how this works. internal javascript first of all, make a local copy of our example file apply-javascript.html. save it in a directory somewhere sensible. open the file in your web browser and in your text editor. you'll see that the html cre...

Aprender y obtener ayuda - Learn web development
job and children to provide for. it is still possible to achieve your goals, but you have to be realistic about how quickly you can do it. if you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you! when you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook! also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example: html and css basics learnt by summer javascript basics learnt by december example website project built by next april etc. keep thinking about how much progress you are making, and adjust your plan if needs be. staying motivated it...

Framework main features - Learn web development
, plus one. styling components each framework offers a way to define styles for your components — or for the application as a whole. although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. with the addition of some helper modules, you can style your framework apps in sass or less, or transpile your css stylesheets with postcss. handling dependencies all major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. as with other features, the exact mechanism will differ between frameworks, but the end result is the same. components tend to import components into other components using the standard javascript module sy...

Beginning our React todo list - Learn web development
use or keyboard. delete any task, using the mouse or keyboard. edit any task, using the mouse or keyboard. view a specific subset of tasks: all tasks, only the active task, or only the completed tasks. we'll tackle these stories one-by-one. pre-project housekeeping create-react-app has made a few files we won't be using at all for our project. we're not going to write per-component stylesheets, so first delete the app.css import from the top of app.js. we are also not going to be using the logo.svg file, so remove that import too. then, copy and paste the following commands into your terminal to delete some unneeded files. make sure you’re starting in the app's root directory! # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css log...

Deployment and next steps - Learn web development
tory (like https://your-user.gitlab.io/mdn-svelte-todo), we'll have to make the references to the javascript and css files in our public/index.html file relative. to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now. now we just have to commit and push our changes to gitlab. do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file and fixed index.html absolute paths" > git push counting obje...

Getting started with Svelte - Learn web development
he code in src/main.js to reference the features of each component. finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component. as you can see, bundle.js is the only javascript file referenced by ...

Styling Vue components with CSS - Learn web development
include the removal of the list bullets, background color changes, and changes to the base button and input styles. adding global styles to single file components now that we've reset our css to be uniform across browsers, we need to customize the styles a bit more. there are some styles that we want to apply across components in our app. while adding these files directly to the reset.css stylesheet would work, we'll instead add them to the <style> tags in app.vue to demonstrate how this can be used. there are already some styles present in the file. let's remove those and replace them with the styles below. these styles do a few things — adding some styling to buttons and inputs, and customizing the #app element and its children. update your app.vue file’s <style> element so it looks ...

Accessibility API cross-reference
graphic is aria's and html's img? graphic n/a n/a img <img> a cell in a grid or treegrid. grid a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g. a spreadsheet. gridcell a type of mouse pointer used for resizing windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a section of the page. in aria, the heading level is expressed with the aria-level attribute. ...

Accessibility Features in Firefox
illa can follow the system appearance whether it's high or low contrast, with large or small fonts. text files used in configuration (techies only): configuration files are easily edited with any text editor. for example, prefs.js gives access to a large number of configuration options not available in the preferences window. also, usercontent.css allows users knowledgeable about cascading style sheets to customize the appearance of all pages that are displayed. finally, bookmarks.html contains all your bookmarks, and is easy to move around from computer to computer. view selection source (techies only): when you select some text and right click or press shift+f10, you can "view selection source". this will show the html source for only the selected text, which is useful for understanding acc...

Accessibility information for UI designers and developers
forms in forms, provide labels for all controls. this includes form elements like inputs and select boxes, but also buttons. for form elements, it should be clear what kind of input is expected. placeholders are best avoided for this, as they are often too low in contrast. it is more helpful to describe what an input element is for in text just above or un...

Embedding API for Accessibility
ttings per url a powerful possibility is that we design an interface for setting certain preferences based on the url. if we can find a clean way to present it to the user, this would be extremely useful. for example, settings per url would allow a user to accept scripts from their known benign web pages, but not others. users may want similarity abilities with applets, background images, style sheets, etc. we have a permissions system for cookies and images based on url's. perhaps it can be extended to store accessibility preferences. this is a ui issue we'll need to settle before we know where to go with the embedding accessibility interface. ...

Mozilla's Section 508 Compliance
in options for making animated images still. (i) color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. complete. caveat: normally mozilla uses a color change to indicate when a link has been visited. however, the visited link appearance can be altered via a user style sheet. (j) when a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided. complete. mozilla's appearance preferences panel contains a large number of color possibilities. (k) software shall not use flashing or blinking text, objects, or other element...

Accessible Toolkit Checklist
ly focused on the parent window. alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visibl...

A bird's-eye view of the Mozilla framework
ui) control. the various x toolkit implementations provide a set of widgets for ui controls such as menus, command buttons, dialog boxes and scroll bars. the mozilla xptoolkit module provides a similar set of facilities for building cross-platform ui controls implemented as xml user interface language (xul) packages. a xul package consists of a xul description of the ui widget cascading style sheets customizing appearance javascript services implementing the ui behavior a package (also known as chrome) is really just a bundling of a set of ui widgets and associated services implementing a particular application feature. chrome and extensions are examples of packages. content (dom) the mozilla document object model (dom) specifies a logical tree structure for storing ui and document con...

Chrome registration
ving the uri chrome://packagename/skin/... . the skinname is an opaque string identifying an installed skin. if more than one skin is registered for a package, the chrome registry will select the best-fit skin using the user's preferences. style style overlays (custom css which will be applied to a chrome page) are registered with the following syntax: style chrome://uri-to-style chrome://stylesheet-uri [flags] note: only stylesheets at chrome uris can be applied in this way. override in some cases an extension or embedder may wish to override a chrome file provided by the application or xulrunner. in order to allow for this, the chrome registration manifest allows for "override" instructions: override chrome://package/type/original-uri.whatever new-resolved-uri [flags] note: override...

Installing headers using EXPORTS
file is produced from the idl files. ...

Contributing to the Mozilla code base
has been reviewed. ...

Developer guide
of automated performance tests against the tree. crash tracking information about the socorro crash reporting system. callgraph a tool to help perform static analysis of the mozilla code by generating callgraphs automatically. developer forums a topic-specific list of discussion forums and mailing lists where you can talk about mozilla development issues. mozilla platform development cheat sheet (archive.org) brian bondy's list of frequently referenced information for platform developers. brian bondy took down codefirefox.com, but the archived cheatsheet might still be useful. firefox development video tutorials brian bondy's video tutorials on firefox development. ...

overflow-clip-box-block
ues */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. formal syntax syntax not found in db! examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div clas...

overflow-clip-box-inline
/ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. formal syntax syntax not found in db! examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div clas...

overflow-clip-box
alues */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. prior to firefox 29, this behavior was hardcoded; since then it uses this property that can be used elsewhere too. note that this property is activated by default only in the ua stylesheet and chrome contexts. initial valuepadding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. formal syn...

Gecko Chrome
this page contains information specific to chrome code running in gecko. chrome-only api referencethis page lists apis that only run in gecko chrome code (and sometimes in other privileged circumstances.)chrome-only css referencethis page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg. ua stylesheets.) chrome-only events referencethis page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg. ua widgets). ...

How Mozilla determines MIME Types
introduction all data handling in mozilla is based on the mime type of the content. this means that every time an uri is loaded, mozilla must find out its mime type. the several ways how this happens are described in this document. content-type "hints" mozilla has a concept of "content-type hints". this means that, for example, if mozilla encounters a <link type="text/css" rel="stylesheet" href="..."> element, a type of text/css will be assumed. this is, however, overridden by the actual mime type the server sends (if any). (for this specific example, the server override only happens in standards-compliant mode. see mozilla's quirks mode or web author faq). similar handling happens for <a href="..." type="foo/bar">, starting in mozilla 1.6alpha. http for http uris mozilla usually ...

source-editor.jsm
" an integer value that specifies the number of spaces per tab. editor mode constants these constants are used to set the syntax highlighting mode for the editor by calling its setmode() method, or in the configuration object when first initializing the editor using its init() method. constant value description sourceeditor.modes.css "css" cascading style sheet. sourceeditor.modes.html "html" html document. sourceeditor.modes.javascript "js" javascript source code. sourceeditor.modes.text "text" utf-8 text document. sourceeditor.modes.xml "xml" xml document. theme constants these constants are used to identify the available themes that can be used by the syntax highlighter. only one is ...

Creating localizable web applications
ing sure that it can be localized. listed below are good practices and recommendations that should be followed in order to make your content easily localizable. note: most of the code snippets used in the examples below come from an early version of the getpersonas.com website. in some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity. cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure. don't put text or numbers in images. don't forget about right-to-left locales. take advantage of printf() (or equivalents) and use variables in the english strings. write semantic code (e.g. don't use text and <img/> for decorations; instead, use css). document your code so that local...

Fonts for Mozilla's MathML engine
atical alphabetic symbols. if you are likely to need these characters, we recommend to install the xits or amiri fonts. installation without administrator privilege if you need to install fonts on a system without adminstrator privilege, the easiest option is to use math font the mathml-fonts add-on. note that using the add-on is not optimal since it forces your gecko browser to load a css stylesheet on each page you visit as well as web math fonts on all pages with mathml content. a better alternative on unix systems is to install the otf files for latin modern math and stix into some local font folder and (if necessary) to run fc-cache on it. on os x and linux, the standard paths are ~/library/fonts/ and ~/.fonts. fonts with a math table you can actually render mathml using any font with ...

Fonts for Mozilla 2.0's MathML engine
tract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime type. finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets. if necessary, you might want to modify the font-family on the <math> elements and, for gecko, the on ::-moz-math-stretchy pseudo element too. for example to force the use of stix f...

Updates
he apc magazine where mitchell baker mentions roger sidje's work on mathml. june 5, 2002 mozilla 1.0 released "by virtue of embedding gecko, mozilla 1.0 and products based on mozilla code support more web standards, more deeply, more consistently across more platforms than any others. mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathml has landed. september 18, 1999 status report - ...

Mozilla MathML Project
ex. demo of some mathml tags: mfrac, mo, mtable, mspace, mmultiscripts, msqrt-mroot. mathml extras - technology demonstration of some interesting upshots from building natively upon the browser environment. various mathml tests - these pages were imported from layout/mathml/tests/. blog with comments that include mathml. create mathml documents authoring mathml editors converters stylesheets original document information author(s): roger b. sidje other contributors: frédéric wang last updated date: april 4, 2010 copyright information: portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a creative commons license | details. ...

Mozilla Quirks Mode Behavior
img a 3px margin (bug 58899). residual style tags' size info does not take precedence over heading tags' size (bug 77352). use box-sizing:border-box for most input types and textarea. give form a margin-bottom:1em (bug 41806). in quirks mode css class and id names are case insensitive. in standards mode they are case sensitive. (this also applies to getelementsbyclassname.) stylesheets linked in the document with an advisory mime type of text/css will still be treated as css even if the server gives a content-type header other than text/css. the css parser accepts colors not beginning with #, except in shorthands. the css parser interprets unitless numbers as px (except for line-height and any other properties where they have distinct meaning, and except in shorthands). in ...

Gecko Roles
an item in a list. role_outline represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. role_outlineitem represents an item in an outline or tree structure. role_pagetab represents a page tab, it is a child of a page tab list. role_propertypage represents a property sheet. role_indicator represents an indicator, such as a pointer graphic, that points to the current item. role_graphic represents a picture. role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. role_text_leaf represents selectable text that allows edits or is designated ...

AT APIs Support
een keyboards, magnification software and other assitive technologies can support gecko-based software. we provide for them the support of these products on windows, linux/unix and os x platforms. accessible gecko gecko is a rendering engine that firefox, seamonkey, netscape and yelp use. gecko can render a variety of content, not just html and supports key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. gecko based applications gecko can be used in two ways to create application: embedded clients embedded clients use gecko only in the content window, at the ...

Index
e. this method is generally called within a loop to iterate over the strings in the enumerator. 928 nsistructuredclonecontainer interfaces, interfaces:scriptable, needscontent you can copy an object into an nsistructuredclonecontainer using initfromvariant() or initfrombase64(). it is an error to initialize an nsistructuredclonecontainer more than once. 929 nsistylesheetservice interfaces, interfaces:scriptable, stylesheets, xpcom, xpcom api reference, xpcom interface reference allows extensions or embeddors to add to the built-in list of user or agent style sheets. 930 nsisupports interfaces, interfaces:scriptable, xpcom, xpcom interface reference notifies the object that an interface pointer has been duplicated. 931 add...

TakeFocus
this method focuses this accessible node. void takefocus(); remarks the state state_focusable indicates whether this node is normally focusable. it is the callers responsibility to determine whether this node is focusable.acctakefocus on a node that is not normally focusable (such as a table), will still set focus on that node, although normally that will not be visually indicated in most style sheets. see also nsiaccessible.focusedchild ...

nsIAccessibleRole
a hierarchical list and allows the user to expand and collapse branches. is is used for role="tree". role_outlineitem 36 represents an item in an outline or tree structure. it is used for role="treeitem". role_pagetab 37 represents a page tab, it is a child of a page tab list. it is used for xul:tab, role="treeitem". also refer to role_pagetablist. role_propertypage 38 represents a property sheet. it is used for xul:tabpanel, role="tabpanel". role_indicator 39 represents an indicator, such as a pointer graphic, that points to the current item. role_graphic 40 represents a picture. is is used for xul:image, html:img. role_statictext 41 represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. is is used f...

nsIFeedResult
bozo boolean the feed processor sets the bozo bit when a feed triggers a fatal error during xml parsing. there may still be feed metadata and entries that were parsed before the error occurred. doc nsifeedcontainer the parsed feed or entry. null if a non-feed was processed. headers nsiproperties the http response headers that accompanied the feed. stylesheet nsiuri an xslt stylesheet available to transform the source of the feed. some feeds include this information in a processing instruction. it's generally intended for use by clients designed to work with specific feeds. uri nsiuri the address from which the feed was fetched. version astring the version of the feed; null if a non-feed is processed. this value wil...

nsIFileView
" would only return jpg files. void setfilter( in astring filterstring ); parameters filterstring the filter to be applied to the file list. sort() set the method used for sorting. void sort( in short sorttype, in boolean reversesort ); parameters sorttype one of the sort* constants. reversesort true, results will be sorted in ascending order. ...

Building an Account Manager Extension
h a special on load command. furthermore you should include the accountmanager.js script and accountmanage.css styles. it is common practice to use for the javascript of the new panel, the same naming as used for the xul. this means in our example, the javascript file should be located in chrome://example@mozilla.org/content/am-devmo-account.js. ...

nsIWebProgressListener
vent may indicate some combination of these flags). constant value description state_is_request 0x00010000 this flag indicates that the state transition is for a request, which includes but is not limited to document requests. (see below for a description of document requests.) other types of requests, such as requests for inline content (for example images and stylesheets) are considered normal requests. state_is_document 0x00020000 this flag indicates that the state transition is for a document request. this flag is set in addition to state_is_request. a document request supports the nsichannel interface and its loadflags attribute includes the nsichannel::load_document_uri flag. a document request does not complete until all requests ass...

nsIXSLTException
read only. ...

XPCOM Interface Reference
anagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandardurlnsistreamconverternsistreamlistenernsistringbundlensistringbundleoverridensistringbundleservicensistringenumeratornsistructuredclonecontainernsistylesheetservicensisupportsnsisupports proxiesnsisupportsarraynsisupportscstringnsisupportscharnsisupportsdoublensisupportsfloatnsisupportsidnsisupportsinterfacepointernsisupportsprboolnsisupportsprint16nsisupportsprint32nsisupportsprint64nsisupportsprtimensisupportspruint8nsisupportspruint16nsisupportspruint32nsisupportspruint64nsisupportsprimitivensisupportsprioritynsisupportsstringnsisupportsvoidnsisupp...

XPCOM Interface Reference by grouping
der nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalsc...

XUL Overlays
e layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided. any number of overlays can be loaded into a master document, and an overlay can also load other 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. loading overlays dynamically the chrome registry makes it possible to load xul overlays dynamically -- or only when necessary. the chrome registry, which is a special rdf datasource into which user-specific information is persisted, or stored, contains information about the components or additi...

Building a Thunderbird extension 6: Adding JavaScript
more than one day. this allows us to call the startup function repeatedly with an interval of 60000ms (every minute). further documentation more functions for the dom objects are listed on: dom/window (api reference for the window object) dom/document (api reference for the document object) gecko dom reference (overview of all dom objects in gecko) you may also find the javascript cheat sheet very useful. « previousnext » ...

Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...

Theme Packaging
this document describes only how themes are packaged in order to be shown in firefox's themes window. ...

Working with windows in chrome code
windowwatcher.openwindow is a bit less trivial . ...

Mozilla
interesting github repositories containing mozilla project code. mozilla quirks mode behavior the following is a rough list of the differences that exist between mozilla's standards mode and quirks mode behavior. mozilla style system the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of computed values for all css properties. the handling of those computed values is the responsibility of other parts of the code. mozilla style system documentation see also the style techtalk for more complete although less detailed documentation. mozilla svg project since you have come this far, you...

DOM Inspector FAQ - Firefox Developer Tools
om the dom nodes viewer, select the node and bring up the context menu. you should notice the set pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes. there is currently no way to inspect dynamically-applied rules for other pseudo-classes or any pseudo-elements from the dom inspector ui. you can, however, find any rule in its parent style sheet (e.g., to modify it) by using the style sheets viewer in the document pane, and locating it in the css rules viewer in the object pane. original document information author(s): christopher aillon last updated date: november 11, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license |...

Introduction to DOM Inspector - Firefox Developer Tools
iewer gives various metrics about xul and html elements, including placement and size. the xbl bindings viewer lists the xbl bindings attached to elements. if a binding extends another binding, the binding menulist will list them in descending order to to "root" binding. the css rules viewer shows the css rules that are applied to the node. alternatively, when used in conjunction with the style sheets viewer, the css rules viewer lists all recognized rules from that style sheet in order. properties may be also be edited. rules applying to pseudo-elements do not appear. the javascript object viewer gives a hierarchical tree of the object pane's subject. the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menuitem in the context menu. basic actions...

Network request list - Firefox Developer Tools
ost domain shows resources coming from a specifc domain. domain:mozilla.org remote-ip shows resources coming from a server with the specified ip. remote-ip:63.245.215.53 remote-ip:[2400:cb00:2048:1::6810:2802] cause shows resources matching a specific cause type. the types can be found in the description of the cause column. cause:js cause:stylesheet cause:img transferred shows resources having a specific transferred size or a transferred size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024. transferred:1k size shows resources having a specific size (after decompression) or a size close to the one specified. k can be used as suffix f...

Edit Shape Paths in CSS - Firefox Developer Tools
circle basic shape. clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its center. if you move or resize the circle past the margin box, the edges become clipped by it. in the rules panel you can see the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape. the ellipse() value works in much the same way as circle() in the shape path editor. an ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon. inset() if the value of shape-outside ...

Edit fonts - Firefox Developer Tools
case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). you can copy the url to the font file by clicking on the icon to the right of the url. the @font-face descriptor that loads the font into the page, in the case of web fonts. the descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet. a text sample, to give you an idea of what the font looks like when rendered. the default text for the sample is "abc" but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. once entered, all of the sample text will be set to the same custom value. variable font support in firefox developer tools firefox 62 added support for vari...

Tips - Firefox Developer Tools
m before even after navigation. check "enable timestamps" in the settings to show timestamps besides the logged messages. debugger skip javascript libraries in debugging sessions via the black box icon (). press ctrl+alt+f to search in all scripts. press ctrl+d to search for a function definition. press ctrl+l to go to a specific line. style editor the black box icon () in the style sheet pane toggles the visibility of a style sheet. click an @media rule to apply it in responsive design mode. click the import button () to import a style sheet or the create button () to create a new one. click the options button in the style sheet pane and click "show original sources" to toggle the display of css preprocessor files. network monitor click the request summary to compare perf...

Console messages - Firefox Developer Tools
nes: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again. open url in new tab opens the url in a new browser tab. if the resource is an image, the image will be opened in a new tab. if the resource is a stylesheet, you will see the css rules, etc. js javascript errors contain a "learn more" link that takes you to the javascript error reference containing additional advice for fixing issues: source maps the web console understands source maps. this means that if your javascript sources are compressed, you can supply a source map for them. then any messages or errors your source generates will show...

CSSGroupingRule - Web APIs
ssrule and inherits all properties of this class. it has one specific property: cssgroupingrule.cssrules read only returns a cssrulelist of the css rules in the media rule. methods common to all cssgroupingrule instances the cssgroupingrule derives from cssrule and inherits all methods of this class. it has two specific methods: cssgroupingrule.deleterule deletes a rule from the style sheet. cssgroupingrule.insertrule inserts a new style rule into the current style sheet. specification specification status comment css object model (cssom)the definition of 'cssgroupingrule' in that specification. working draft initial definition. ...

CSSStyleDeclaration.cssText - Web APIs
the csstext property of the cssstyledeclaration interface returns or sets the text of the element's inline style declaration only. to be able to set a stylesheet rule dynamically, see using dynamic styling information. not to be confused with stylesheet style-rule cssrule.csstext. example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification. working draft ...

CSSStyleDeclaration.getPropertyPriority() - Web APIs
pertypriority(property); parameters property is a domstring representing the property name to be checked. return value priority is a domstring that represents the priority (e.g. "important") if one exists. if none exists, returns the empty string. example the following javascript code checks whether margin is marked as important in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var isimportant = declaration.getpropertypriority('margin') === 'important'; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertypriority()' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstylede...

CSSStyleDeclaration.getPropertyValue() - Web APIs
erty. syntax var value = style.getpropertyvalue(property); parameters property is a domstring representing the property name to be checked. return value value is a domstring containing the value of the property. if not set, returns the empty string. example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in t...

CSSStyleDeclaration.parentRule - Web APIs
e that is the parent of this style block, e.g. a cssstylerule representing the style for a css selector. syntax var rule = styles.parentrule; value the css rule that contains this declaration block or null if this cssstyledeclaration is not attached to a cssrule. example the following javascript code gets the parent css style rule from a cssstyledeclaration: var declaration = document.stylesheets[0].rules[0].style; var rule = declaration.parentrule; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.parentrule' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification. obsolete ...

CSSStyleDeclaration.removeProperty() - Web APIs
operty names are hyphenated and not camel-cased. return value oldvalue is a domstring equal to the value of the css property before it was removed. exceptions domexception no_modification_allowed_err: if the property or declaration block is read only. example the following javascript code removes the background-color css property from a selector rule: var declaration = document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('background-color'); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.removeproperty()' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that spe...

CSSStyleRule.style - Web APIs
the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule. syntax styleobj = cssrule.style example function stilo() { alert(document.stylesheets[0].cssrules[0].style.csstext); } // displays "background-color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces). ...

CSSValue.cssText - Web APIs
the csstext property of the cssvalue interface represents the current computed css property value. syntax csstext = cssvalue.csstext; value a domstring representing the current css property value. example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.csstext); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.csstext' in that specification. obsolete initial definition ...

CSSValue.cssValueType - Web APIs
tance of the cssprimitivevalue interface can be obtained by using binding-specific casting methods on this instance of the cssvalue interface. css_value_list the value is a cssvalue list and an instance of the cssvaluelist interface can be obtained by using binding-specific casting methods on this instance of the cssvalue interface. example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.cssvaluetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification. obsolete initial definition ...

Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc. 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. it takes two parameters. the first is the name we give the worklet — this is the name we will use in our css as the parameter of the pain...

Using the CSS Typed Object Model - Web APIs
olor (including caret-color, outline-color, text-decoration-color, column-rule-color, etc.) would return rgb(255, 0, 0). the link has inherited font-weight: bold; from the paragraph's styles, listing it as font-weight: 700. custom properties, like our --color: red , are properties. as such, they are accessible via get(). you'll note that custom properties retain the value as written in the stylesheet, whereas computed styles will be listed as the computed value — color was listed as an rgb() value and the font-weight returned was 700 even though we use a named color and and the bold keyword. cssunitvalue and csskeywordvalue the power of the css typed om is that values are separate from units; parsing and concatenating string values may become be a thing of the past. every css property in ...

DocumentOrShadowRoot - Web APIs
ocus. documentorshadowroot.fullscreenelementread only returns the element that's currently in full screen mode for this document. documentorshadowroot.pointerlockelement read only returns the element set as the target for mouse events while the pointer is locked. it returns null if lock is pending, the pointer is unlocked, or if the target is in another document. documentorshadowroot.stylesheetsread only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document. methods documentorshadowroot.caretpositionfrompoint() returns a caretposition object containing the dom node containing the caret, and caret's character offset within that node. documentorshadowroot.elementfrompoint() returns the topmost element at the specified...

Document Object Model (DOM) - Web APIs
s described using the document interface, which is extended by the html specification to include various html-specific features. in particular, the element interface is enhanced to become htmlelement and various subclasses, each representing one of (or a family of closely related) elements. the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateelement svganimatecolorelement svganimatemotionelement svganimatetransformelement svgcircleelement svgclippathelement svgco...

Element.classList - Web APIs
configurable: 0, set: function(val){this.classname = val} }); } catch(e) { // less performant fallback for older browsers (ie 6-8): window[" ucl"] = polyfillclasslist; // the below code ensures polyfillclasslist is applied to all current and future elements in the doc. document.documentelement.firstchild.appendchild(document.createelement('style')).stylesheet.csstext=( '_*{x-uclp:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' + // ie6 '[class]{x-uclp/**/:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' //ie7-8 ); } })(window); // 3. patch in unsupported methods in domtokenlist (function(domtokenlistproto, testclass){ if (!domtokenlistproto.item) domtokenlistproto.item...

ElementCSSInlineStyle.style - Web APIs
to get the values of all css properties for an element you should use window.getcomputedstyle() instead. the following code snippet demonstrates the difference between the values obtained using the element's style property and that obtained using the getcomputedstyle() method: <!doctype html> <html> <body style="font-weight:bold;"> <div style="color:red" id="myelement">..</div> </body...

FontFace.stretch - Web APIs
the stretch property of the fontface interface retrieves or sets how the font stretches. it is equivalent to the font-stretch descriptor. syntax var stretchdescriptor = fontface.stretch; fontface.stretch = stretchdescriptor; value a cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule. specifications specification status comment css font loading module level 3the definition of 'stretch' in that specification. working draft initial definition. ...

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. working draft initial definition. ...

FontFace.unicodeRange - Web APIs
the unicoderange property of the fontface interface retrieves or sets the range of unicode codepoints encompassing the font. it is equivalent to the unicode-range descriptor. syntax var unicoderangedescriptor = fontface.unicoderange; fontface.unicoderange = unicoderangedescriptor; value a cssomstring containing a descriptor as it would appear in a style sheet's @font-face rule. specifications specification status comment css font loading module level 3the definition of 'unicoderange' in that specification. working draft initial definition. ...

FontFace.variant - Web APIs
the variant property of the fontface interface programatically retrieves or sets font variant values. it is equivalent to the font-variant descriptor. syntax var variantsubproperty = fontface.variant; fontface.variant = variantsubproperty; value a cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule. specifications specification status comment css font loading module level 3the definition of 'variant' in that specification. working draft initial definition. ...

FontFace.weight - Web APIs
the weight property of the fontface interface retrieves or sets the weight of the font. it is equivalent to the font-weight descriptor. syntax var weightdescriptor = fontface.weight; fontface.weight = weightdescriptor; value a cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule. specifications specification status comment css font loading module level 3the definition of 'weight' in that specification. working draft initial definition. ...

HTMLLinkElement.rel - Web APIs
the htmllinkelement.rel property reflects the rel attribute. it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <link> element and the current document. the most common use of this attribute is to specify a link to an external style sheet: the property is set to stylesheet, and the href attribute is set to the url of an external style sheet to format the page. syntax var relstr = linkelt.rel; linkelt.rel = relstr; example var links = document.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment html living standardthe definition of 'rel' in that specification. living sta...

HTMLStyleElement - Web APIs
s: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle. htmlstyleelement.media is a domstring representing the intended destination medium for style information. htmlstyleelement.type is a domstring representing the type of style being applied by this statement. htmlstyleelement.disabled is a boolean value representing whether or not the stylesheet is disabled (true) or not (false). linkstyle.sheet read only returns the stylesheet object associated with the given element, or null if there is none htmlstyleelement.scoped is a boolean value indicating if the element applies to the whole document (false) or only to the parent's sub-tree (true). methods no specific method; inherits properties from its parent, htmlelement, and linkst...

HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
et explorer and microsoft edge. syntax htmlvideoelement.msislayoutoptimalforplayback: domstring; value boolean value set to true indicates that video is being rendered optimally (better performance and using less battery power). if false, improvements can be made to optimize performance. for msislayoutoptimalforplayback to be true, avoid the following: video elements with cascading style sheets (css) outlines set. rendering a video element through a canvas element. embedding video elements in a scalable vector graphics (svg). you can listen to the onmsvideooptimallayoutchanged event to be notified when the msislayoutoptimalforplayback property changes. *to enable stereo 3d playback, msislayoutoptimalforplayback must be true. see also htmlvideoelement microsoft api extensions ...

Ajax navigation example - Web APIs
st_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); } function ajaxerror () { alert("unknown...

Key Values - Web APIs
ey_mycomputer (0x1008ff33) gdk_key_explorer (0x1008ff5d) "launchphone" the phone key. opens the phone dialer application (if one is present). gdk_key_phone (0x1008ff6e) qt::key_phone (0x010000e3) "launchscreensaver" [5] the screen saver key. gdk_key_screensaver (0x1008ff2d) qt::key_screensaver (0x010000ba) "launchspreadsheet" [4] the spreadsheet key. this key may be labeled with an icon. gdk_key_excel (0x1008ff5c) qt::key_excel (0x010000d4) "launchwebbrowser" [4] the web browser key. this key is frequently labeled with an icon. gdk_key_www (0x1008ff2e) qt::key_www (0x010000bb) keycode_explorer (64) "launchwebcam" [5] the webcam key. opens the webcam appl...

KeyboardEvent.key - Web APIs
2 for both keyboard layouts because the modifier shift key is no longer active. example this example uses eventtarget.addeventlistener() to listen for keydown events. when they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet). window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // do nothing if the event was already processed } switch (event.key) { case "down": // ie/edge specific value case "arrowdown": // do something for "down arrow" key press. break; case "up": // ie/edge specific value case "arrowup": // do something for "up ar...

KeyframeEffect.getKeyframes() - Web APIs
.getkeyframes(); parameters none. return value returns a sequence of objects with the following format: property value pairs as many property value pairs as are contained in each keyframe of the animation. offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. this will be null if the keyframe is automatically spaced using keyframeeffect.spacing. computedoffset the computed offset for this keyframe, calculated when the list of computed keyframes was produced according to keyframeeffect.spacing. unlike offset, above, the computedoffset is never null. easing the timing function used from this keyframe until the next keyfram...

KeyframeEffect.setKeyframes() - Web APIs
since "float" is not an animatable css property. offset, which must be written as cssoffset since "offset" represents the keyframe offset as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be auto if the composite operation specif...

LinkStyle - Web APIs
the linkstyle interface provides access to the associated css style sheet of a node. linkstyle is a raw interface and no object of this type can be created; it is implemented by htmllinkelement and htmlstyleelement objects. properties there is no inherited property. linkstyle.sheet read only returns the cssstylesheet object associated with the given element, or null if there is none. methods this interface implements no method. specifications specification status comment css object model (cssom)the definition of 'linkstyle' in that specification. working draft linkstyle.sheet returns more specialized cssstylesheet instead of stylesheet document object model (dom) level 2 style specificationthe definition of 'linkstyle' in that specification. ...

Node.nodeType - Web APIs
constants constant value description node.element_node 1 an element node like <p> or <div>. node.text_node 3 the actual text inside an element or attr. node.cdata_section_node 4 a cdatasection, such as <!cdata[[ … ]]>. node.processing_instruction_node 7 a processinginstruction of an xml document, such as <?xml-stylesheet … ?>. node.comment_node 8 a comment node, such as <!-- … -->. node.document_node 9 a document node. node.document_type_node 10 a documenttype node, such as <!doctype html>. node.document_fragment_node 11 a documentfragment node. deprecated node type constants the following constants have been deprecated and should not be u...

PaintWorklet - Web APIs
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. @supports (background: paint(id)) { background-image: paint(checkerboard); } specifications specification status ...

PaymentRequest.shippingOption - Web APIs
d of the selected paymentshippingoption var shippingoption = request.shippingoption; example in the example below, the paymentrequest.onshippingoptionchange and the paymentrequest.onshippingaoptionchange events are dispatched. in each calls to updatedetails() are made, one using a promise, and the other with a plain js object. this demotrates synchrounous and asynchronous updates to a payment sheet. const request = new paymentrequest(methoddata, details, options); // async update to details request.onshippingaddresschange = ev => { ev.updatewith(checkshipping(request)); }; // sync update to the total request.onshippingoptionchange = ev => { const shippingoption = shippingoptions.find( option => option.id === request.id ); const newtotal = { currency: "usd", label: "tot...

ProcessingInstruction - Web APIs
argeting a specific application but that can be ignored by any other applications which don't recognize the instruction. a processing instruction is different from the xml declaration. user-defined processing instructions cannot begin with "xml", as xml-prefixed processing-instruction target names are reserved by the xml specification for particular, standard uses (see, for example, <?xml-stylesheet ?>). the processinginstruction interface inherits methods and properties from node. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/w...

Push API - Web APIs
this lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. push concepts and usage when implementing pushmanager subscriptions, it is vitally important that you protect against csrf/xsrf issues in your app. see the following articles for more information: cross-site request forgery (csrf) prevention cheat sheet preventing csrf and xsrf attacks for an app to receive push messages, it has to have an active service worker. when the service worker is active, it can subscribe to push notifications, using pushmanager.subscribe(). the resulting pushsubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data. the s...

ShadowRoot - Web APIs
erties included from documentorshadowroot the shadowroot interface includes the following properties defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. documentorshadowroot.activeelement read only returns the element within the shadow tree that has focus. documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document. methods the shadowroot interface includes the following methods defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. documentorshadowroot.getselection() ...

Storage Access API - Web APIs
ully, all other iframes from tracker.example on foo.example top-level origins will immediately gain storage access as well, without needing to call requeststorageaccess() separately. if an embedded page from tracker.example has previously successfully obtained storage access on top-level origin foo.example, all embedded subresources from tracker.example on foo.example (e.g. scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send cookie headers and honor incoming set-cookie headers. in firefox, when the promise returned from requeststorageaccess() is resolved, the embedded page will gain access to its entire first-party storage, not just cookies. this includes access to apis such as web storage, indexeddb, dom cache, and so on. in fir...

Keyframe Formats - Web APIs
since "float" is not an animatable css property. offset, which must be written as cssoffset since "offset" represents the keyframe offset as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be auto if the composite operation specif...

Using the Web Animations API - Web APIs
this api was designed to underlie implementations of both css animations and css transitions, and leaves the door open to future animation effects. it is one of the most performant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe(). with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior. we no longer need to rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction. and unlike pure, declarative css, javascript also lets us dynamically set values from properties to durations. for building custom animation libraries and creating interactive animations, the web an...

Window: DOMContentLoaded event - Web APIs
bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none the original target for this event is the document that has loaded. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on the document: domcontentloaded event. ...

Window: load event - Web APIs
this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading. ...

Privileged features - Web APIs
alog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. they are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. on mac systems, dialog windows have a different window border and they may get turned into a sheet. modal if on, the new window is said to be modal. the user cannot return to the main window until the modal window is closed. a typical modal window is created by the alert() function. the exact behavior of modal windows depends on the platform and on the mozilla release version. note: as of gecko 1.9, the internet explorer equivalent to this feature is the window.showmodaldialog() method. ...

Browser Differences - Web APIs
netscape 6.x only partially supported xslt 1.0. ...

ARIA: application role - Accessibility
application must take full responsibility for not letting users get stuck in a focus limbo or trap focus inside something the user cannot exit of. all aspects of interaction, including returning to the regular web content on other parts of the page, must be handled. use wisely, and cautiously! examples some prominent web applications that use the application role properly are: google docs, sheets and slides ckeditor and tinymce wysiwyg web editors, like the one used on the mozilla developer network some parts of gmail accessibility concerns improperly using the application role can unintentionally take away access from information on a web page, so be very mindful of using it. think hard on if you actually need it and cannot just use a set of other, known, widgets to accomplish the ...

ARIA: gridcell role - Accessibility
r or columnheader applied to them via aria-describedby, it allows assistive technology to understand the position and relationship of the gridcell element to the rest of the table-style grouping of content. interactive grids and treegrids editable cells both td elements and elements with a role of gridcell applied to them can be made editable, mimicking functionality similar to editing a spreadsheet. this is done by applying the html contenteditable attribute. <td contenteditable="true">notes</td> <div role="gridcell" contenteditable="true">item cost</div> contenteditable will make the element it is applied to focusable via the tab key. if a gridcell is conditionally toggled into a state where editing is prohibited, toggle aria-readonly on the gridcell element. expandable cells in a t...

Web accessibility for seizures and physical reactions - Accessibility
feature the more often the screen is refreshed, the more stable it appears to the human eye, and the less it "flickers". the vast majority of modern technology refreshes at a rate that does not cause problems with photosensitivity. however, not everybody is wealthy enough to be able to afford the most recent technology: older or underpowered computers can have low refresh rates. abilitynet's factsheet (november 2015) computers and epilepsy (pdf) describes more of the details on refresh rates. a very old article, tech republic's epilepsy and crt/lcd screen flicker, had an interesting response concerning the refresh rates in hz. "this effect is noticable, and documented, up to 70 hz." "these studies would seem to indicate that you should stay away from refresh rates under 70 hz, and use a r...

Printing - Developer guides
ages for a better result. you want to adjust the user experience of printing, such as presenting a specially-formatted version of your content before printing begins. there may be other cases in which you want to manage the printing process, but these are some of the most common scenarios. this article provides tips and techniques for helping your web content print better. 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. you can use this to adjust the user interface presented durin...

Developer guides
these articles provide how-to information to help make use of specific web technologies and apis. html learning area hypertext markup language (html) is the core language of nearly all web content. most of what you see on screen in your browser is described, fundamentally, using html. css learning area cascading style sheets (css) is a stylesheet language used to define the presentation of a document written in html. audio and video delivery we can deliver audio and video on the web in several ways, ranging from 'static' media files to adaptive live streams. this article is intended as a starting point for exploring the various delivery mechanisms of web-based media and compatibility with popular browsers. audio and video manipulation the beauty of the web is that you can co...

<b>: The Bring Attention To element - HTML: Hypertext Markup Language
r <mark> elements. the <strong> element represents text of certain importance, <em> puts some emphasis on the text and the <mark> element represents text of certain relevance. the <b> element doesn't convey such special semantic information; use it only when no others fit. similarly, do not mark titles and headings using the <b> element. for this purpose, use the <h1> to <h6> tags. further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold. it is a good practice to use the class attribute on the <b> element in order to convey additional semantic information as needed (for example <b class="lead"> for the first sentence in a paragraph). this makes it easier to manage multiple use cases of <b> if your stylistic needs chan...

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

<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
note: <head> primarily holds information for machine processing, not human-readability. for human-visible information, like top-level headings and listed authors, see the <header> element. content categories none. permitted content if the document is an <iframe> srcdoc document, or if title information is available from a higher level protocol (like the subject line in html email), zero or more elements of metadata content. ...

<input type="search"> - HTML: Hypertext Markup Language
ded, or an invalid value is given, the browser's default maximum number of entries is used. using search inputs <input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms. they are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them). basic example <form> <div> <input type="search" id="mysearch" name="q"> <button>search</button> </div> </form> this renders like so: q is the most common name given to search inputs, although it's not mandatory. when submitted, the data name/value pair sent to the server will be q=searchterm. you must remember to set a name for your input, oth...

<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
stly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks. content-type if specified, the content attribute must have the value "text/html; charset=utf-8". note: can only be used in documents served with a text/html mime type — not in documents served with an xml mime type. default-style sets the name of the default css style sheet set. x-ua-compatible if specified, the content attribute must have the value "ie=edge". user agents are required to ignore this pragma. refresh this instruction specifies: the number of seconds until the page should be reloaded - only if the content attribute contains a positive integer. the number of seconds until the page should redirect to another - only if the con...

HTML elements reference - HTML: Hypertext Markup Language
for styles and scripts may be defined in the page or link to another file that has the information. element description <base> the html <base> element specifies the base url to use for all relative urls in a document. <head> the html <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. <link> the html external resource link element (<link>) specifies relationships between the current document and an external resource. this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. <meta> the html <meta> eleme...

Data URLs - HTTP
ise, you can specify base64 to embed base64-encoded binary data. you can find more info on mime types here and here. a few examples: data:,hello%2c%20world! simple text/plain data. note the use of percent-encoding (url-encoding) for the quote and space characters. also, for csv data (mime type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet. data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-encoded version of the above data:text/html,%3ch1%3ehello%2c%20world!%3c%2fh1%3e an html document with <h1>hello, world!</h1> data:text/html,<script>alert('hi');</script> an html document that executes a javascript alert. note that the closing script tag is required. encoding data into base64 format base64 is a group of binary-to-text e...

Reason: CORS request not HTTP - HTTP
t http what went wrong? cors requests may only use the https url scheme, but the url specified by the request is of a different type. this often occurs if the url specifies a local file, using a file:/// url. to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets. local file security in firefox 68 when a user opened a page using a file:/// uri in firefox 67 and earlier, the origin of the page was defined as the directory from which the page was opened. resources in the same directory and its subdirectories were treated as having the same origin for purposes of the cors same-origin rule. in response to cve-2019-11730, firefox 68 and later define the or...

HTTP caching - HTTP
uce an additional change to often variable resources. when these are read, the new versions of the others are also read. this technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. this is very important when web sites have css stylesheets or js scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same html elements. the revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. it can be anything that prevent collisions, like a hash or a date. cache validation when a cached document's expirat...

List of default Accept values - HTTP
. user agent value comment firefox */* see bug 170789 safari, chrome */* source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 application/javascript, */*;q=0.8 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a css stylesheet when a css stylesheet is requested, via the <link rel="stylesheet"> html element, most browsers use specific values. user agent value comment firefox 4 text/css,*/*;q=0.1 see bug 170789 source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 text/css see fiddler is better with...

Accept - HTTP
he accept request http header advertises which content types, expressed as mime types, the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-type response header. 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. header type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del). syntax accept: <mime_ty...

CSP: require-sri-for - HTTP
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. syntax content-security-policy: require-sri-for script; content-security-policy: require-sri-for style; content-security-policy: require-sri-for script style; script requires sri for scripts. style requires sri for style sheets. script style requires sri for both, scripts and style sheets. examples if you set your site to require sri for script and styles using this directive: content-security-policy: require-sri-for script style <script> elements like the following will be loaded as they use a valid integrity attribute. <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mq300m779n2...

CSP: script-src - HTTP
csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. ...

CSP: style-src-elem - HTTP
csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...

Content-Security-Policy - HTTP
tch-directive (e.g., explicitly set object-src 'none' if possible). prefetch-src specifies valid sources to be prefetched or prerendered. script-src specifies valid sources for javascript. script-src-elem specifies valid sources for javascript <script> elements. script-src-attr specifies valid sources for javascript inline event handlers. style-src specifies valid sources for stylesheets. style-src-elem specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet". style-src-attr specifies valid sources for inline styles applied to individual dom elements. worker-src specifies valid sources for worker, sharedworker, or serviceworker scripts. document directives document directives govern the properties of a document or worker envi...

Link prefetching FAQ - HTTP
for the link: header is described in rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. some more examples follow: <link rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched? no, only <link> tags with a relation type of next or prefetch are prefetched. however, if there is sufficient interest, we may expand link prefetching support to include prefetching <a> tags, which include a relation type of next or prefetch in the future. doing so would prob...

HTTP
rigin resource sharing (cors) cross-site http requests are http requests for resources from a different domain than the domain of the resource making the request. for instance, an html page from domain a (http://domaina.example/) makes a request for an image on domain b (http://domainb.foo/image.jpg) via the img element. web pages today very commonly load cross-site resources, including css stylesheets, images, scripts, and other resources. cors allows web developers to control how their site reacts to cross-site requests. evolution of http a brief description of the changes between the early versions of http, to the modern http/2, the emergent http/3 and beyond. mozilla web security guidelines a collection of tips to help operational teams with creating secure web applications. htt...

CSS Houdini
, it is included in that first cycle — creating renderable, understandable styles. houdini provides an object-based api for working with css values in javascript. houdini's css typed om is a css object model with types and methods, exposing values as javascript objects making for more intuitive css manipulation than previous string based htmlelement.style manipulations. every element and style sheet rule has a style map which is accessible via its stylepropertymap. a feature of css houdini is the worklet. with worklets, you can create modular css, requiring a single line of javascript to import configureable components: no pre-processors, post-processors or javascript frameworks needed. <script> css.paintworklet.addmodule('csscomponent.js'); </script> this added module contains registe...

Assertions - JavaScript
do not forget to edit it as well, thanks! boundary-type assertions characters meaning ^ matches the beginning of input. ...

Character classes - JavaScript
do not forget to edit it as well, thanks! characters meaning . has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029. for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. ...

Groups and ranges - JavaScript
do not forget to edit it as well, thanks! characters meaning x|y matches either "x" or "y". for example, /green|red/ matches "green" in "green apple" and "red" in "red apple". [xyz] [a-c] a character set. matches any one of the enclosed characters. ...

Quantifiers - JavaScript
do not forget to edit it as well, thanks! note: in the following, item refers not only to singular characters, but also includes character classes, unicode property escapes, groups and ranges. characters meaning x* matches the preceding item "x" 0 or more times. for example, /bo*/ matches "boooo" in "a ghost booooed" and "b" in "a bird warbled", but nothing in "a goat grunted". x+ matches the preceding item "x" 1 or more times. equivalent to {1,}. ...

Unicode property escapes - JavaScript
which indicates a string must be considered as a series of unicode code points. see also regexp.prototype.unicode. note: some unicode properties encompasses much more characters than some character classes (such as \w which matches only latin letters, a to z) but the latter is better supported among browsers (as of january 2020). syntax the following section is also duplicated on this cheatsheet. do not forget to edit it as well, thanks! // non-binary values \p{unicodepropertyvalue} \p{unicodepropertyname=unicodepropertyvalue} // binary and non-binary values \p{unicodebinarypropertyname} // negation: \p is negated \p \p{unicodepropertyvalue} \p{unicodebinarypropertyname} general_category (gc) script (sc) script_extensions (scx) see also propertyvaluealiases.txt unicodebina...

<maction> - MathML
ements the selection value. the syntax is: <maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionn </maction>. tooltip: when the pointer moves over the expression, a tooltip box with a message is displayed near the expression. the syntax is: <maction actiontype="tooltip"> expression message </maction>. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. selection the child element which is addressed by the action. the default value is 1, which is the first child element. examples the following ex...

<math> - MathML
p-level element in mathml is <math>. every valid mathml instance must be wrapped in <math> tags. in addition you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it. attributes in addition to the following attributes, the <math> element accepts any attributes of the <mstyle> element. class, id, style provided for use with stylesheets. dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. display this enumerated attribute specifies how the enclosed mathml ...

<menclose> - MathML
href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. notation a list of notations, separated by white space, to apply to the child elements. the symbols are each drawn as if the others are not present, and therefore may overlap. ...

<merror> - MathML
ed to display contents as error messages. in firefox this error message is rendered similar to the typical xml error message. note that this error is not thrown when your mathml markup is wrong or not well-formed xml. you will still get an xml parsing error (in case of the xhtml notation of mathml), which has nothing to do with <merror>. attributes class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. examples <math> <merror> <mrow> <mtext> division by zero: </mtext> <mfrac> <mn> 1 </mn> <mn> 0 </mn> </mfrac> </mrow> ...

<mfenced> - MathML
the deprecated mathml <mfenced> element used to provide the possibility to add custom opening and closing parentheses (such as brackets) and separators (such as commas or semicolons) to an expression. it has been removed from the latest mathml standard and modern browsers no longer support it. use the <mrow> and <mo> elements instead. attributes class, id, style provided for use with stylesheets. close a string for the closing delimiter. the default value is ")" and any white space is trimmed. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. open a string for the opening delimiter. the defa...

<mfrac> - MathML
d. if true, the fraction line is bevelled, which means that numerator and denominator are displayed side by side and separated by a slash (/). otherwise, if set to false (which is the default value), numerator and denominator are on top of each other. this attribute is deprecated and will be removed in the future. use u+2044 (fraction slash) instead. class, id, style provided for use with stylesheets. denomalign the alignment of the denominator under the fraction. possible values are: left, center (default), and right. this attribute is deprecated and will be removed in the future. use css text-align instead. href used to set a hyperlink to a specified uri. linethickness the thickness of the horizontal fraction line. this attributes accepts any length values. the values medium, thi...

<mglyph> - MathML
sed to display non-standard symbols where existing unicode characters are not available. it may be used within token elements. attributes alt this attribute defines the alternative text describing the image. users will see this displayed if the image url is wrong, the image is not in one of the supported formats, or until the image is downloaded. class, id, style provided for use with stylesheets. height the height of the image. href used to set a hyperlink to a specified uri. mathbackground the background color (if the image has transparency). you can use #rgb, #rrggbb and html color names. src the image url. valign specifies the vertical alignment with respect to the current baseline. width the width of the image. examples <math> <mi><mglyph src="my-glyph.png" alt="my ...

<mi> - MathML
dir the text direction. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. ...

<mlabeledtr> - MathML
s used to represent a label in a row either on the left or on the right side (determined using the side attribute on the <mtable> element). child elements of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <mtable> for this row. possible values are: left, center and right. groupalign href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertic...

<mmultiscripts> - MathML
rated by the empty tag <mprescripts/> (only one <mprescripts /> element is allowed, otherwise you will get an duplicatemprescripts error in the error console and "invalid-markup" in your rendering). in addition you are able to use <none/> as a placeholder for empty scripts (not for the base). see the examples section for a correct usage. attributes class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. subscriptshift the minimum space by which to shift the subscript below the baseline of the expression, as a css length. this property is deprecated and will be removed in the fut...

<mn> - MathML
dir the text direction. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyperlink to a specified uri. ...

<mo> - MathML
ides operators in strict mathematical meaning, this element also includes "operators" like parentheses, separators like comma and semicolon, or "absolute value" bars. attributes accent if the operator is used as an under- or overscript this attribute specifies whether the operator should be treated as an accent. allowed values are true or false. class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). fence there is no visual effect for this attribute, but it specifies whether the operator is a fence (such as parentheses). allowed values are true or false. form specifies the role of the operator in an enclosed expression, which affects spacing and other default properties. for ordinary opera...

<mover> - MathML
accent if true the over-script is an accent, which is drawn closer to the base expression. if false (default value) the over-script is a limit over the base expression. align the alignment of the over-script. possible values are: left, center, and right. this attribute is deprecated and will be removed in the future. use css text-align instead. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples sample rendering: rendering in your browser: x + y + z ⏞ <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> ...

<mpadded> - MathML
depth sets or increments the depth. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . height sets or increments the height. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . href used to set a hyperlink to a specified uri. lspace sets or increments the horizontal position. ...

<mphantom> - MathML
mathbackground the background color. you can use #rgb, #rrggbb and html color names. ...

<mroot> - MathML
href used to set a hyperlink to a specified url. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the color of the root symbol itself. you can use #rgb, #rrggbb and html color names. ...

<mrow> - MathML
the expression. proper grouping helps the rendering of the expression in several ways: it can improve the display by possibly affecting spacing. it allows for more intelligent line-breaking and indentation. it simplifies the interpretation of the expression by automated systems such as computer algebra systems and audio renderers. attributes class, id, style provided for use with stylesheets. dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples <math> <mrow> <mn> 1 </mn> <mo> + </mo> <m...

<ms> - MathML
ouble quotes (&quot;); by using the lquote and rquote attributes, you can set custom characters to display. note that quotation marks should not be specified unless they are part of the string literal. the content of an <ms> element is not an ascii string per se, but rather a sequence of characters and <mglyph> and <malignmark> elements. attributes class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). lquote the opening quote character (depends on dir) to enclose the content. the default value is "&quot;". href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb...

<mspace> - MathML
depth the desired depth (below the baseline) of the space (see length for values and units). height the desired height (above the baseline) of the space (see length for values and units). linebreak indicates a line-break at the space. possible values: auto (default value), newline, nobreak, goodbreak, badbreak. starting with mathml 3, it is preferred to use <mo> to control linebreaking. mathbackground the background color. ...

<msqrt> - MathML
href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the color of the root symbol itself. you can use #rgb, #rrggbb and html color names. ...

<msub> - MathML
href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. subscriptshift the minimum space by which to shift the subscript below the baseline of the expression, as a length value. this attribute is deprecated and will be removed in the future. ...

<msubsup> - MathML
href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. ...

<msup> - MathML
href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. superscriptshift the minimum space by which to shift the superscript up from the baseline of the expression, as a length value. ...

<mtable> - MathML
nteger value counts rows from the bottom of the table. starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has been corrected (bug 601436). in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) the parsing has been updated to treat whitespace correctly. alignmentscope unimplemented class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of the cells. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnalign="left right center"). possible values are: left, center (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none non...

<mtd> - MathML
columnalign specifies the horizontal alignment of this cell and overrides values specified by <mtable> or <mtr>. possible values are: left, center and right. columnspan a non-negative integer value that indicates on how many columns does the cell extend. groupalign unimplemented href used to set a hyperlink to a specified uri. ...

<mtext> - MathML
dir the text direction. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. ...

<mtr> - MathML
columnalign overrides the horizontal alignment of cells specified by <mtable> for this row. possible values are: left, center and right. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. ...

<munder> - MathML
accentunder if true, the element is an accent, which is drawn closer to the base expression. if false (default value), the element is a limit under the base expression. align the alignment of the underscript. possible values are: left, center, and right. this attribute is deprecated and will be removed in the future. use css text-align instead. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples sample rendering: rendering in your browser: x + y + z ⏟ <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y <...

<munderover> - MathML
e underscript is an accent, which is drawn closer to the base expression. if false (default value), the underscript is a limit under the base expression. align the alignment of both underscript and overscript. possible values are: left, center, and right. this attribute is deprecated and will be removed in the future. use css text-align instead. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples sample rendering: rendering in your browser: ∫ 0 ∞ <math displaystyle="true"> <munderover > <mo> &#x222b; <!--integral--> </mo> <mn> 0 </mn> ...

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
epresentatives from chrome were onboard with the idea. due to this work, browsers are working on adding a new mechanism for sizing images before the actual image is loaded. firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements, and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <table>, and <video>, in addition to actual images (<img> and <input type="image">). when such an element has wid...

Critical rendering path - Web Performance
nd responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen. a request for a web page or app starts with an html request. the server returns the html - response headers and data. the browser then begins parsing the html, converting the received bytes to the dom tree. the browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. some requests are blocking, which means the parsing of the rest of the html is halted until the imported asset is handled. the browser continues to parse the html making requests and building the dom, until it gets to the end, at which point it constructs the css object model. with the dom and cssom complete, the browser builds the render tree, computing t...

Performance fundamentals - Web Performance
es and submitting bugs if the firefox and chrome developer tools don't help you find a problem, or if they seem to indicate that the web browser has caused the problem, try to provide a reduced test case that maximally isolates the problem. that often helps in diagnosing problems. see if you can reproduce the problem by saving and loading a static copy of an html page (including any images/stylesheets/scripts it embeds). if so, edit the static files to remove any private information, then send them to others for help (submit a bugzilla report, for example, or host it on a server and share the url). you should also share any profiling information you've collected using the tools listed above. ...

Lazy loading - Web Performance
t tag with type="module" is treated like a javascript module and is deferred by default. css by default, css is treated as a render blocking resource, so the browser won't render any processed content until the cssom is constructed. css must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that. fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. it is possible to override the default behaviour and pre...

Optimizing startup performance - Web Performance
han rolling your own or using one from the original codebase. the provided one is almost certainly significantly faster, and will reduce your app size to boot. in addition, the browser may automatically parallelize these decoders. any data processing that can be done in parallel should be. don't do one chunk of data after another; do them all at once when possible! don't include scripts or stylesheets that don't participate in the critical path in your startup html file. load them only when needed. reduce the side of your javascript files. try to send the minify version of the file to the browser and use compression like gzip or brotli. utilize resource hints (like preconnect or preload) whenever possible to indicate to the browser which files are more critical for your application. the m...

Progressive web app structure - Progressive web apps (PWAs)
e 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 href=...

Progressive loading - Progressive web apps (PWAs)
ite access and completion of loading, the user sees a blank page, which is a bad experience. to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure. we can also split css files and add media types to them: <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> this will tell the browser to load them only when the condition is met. in our js13kpwa demo app, the css is simple enough to leave it all in a single file with no specific rules as to how to load them. we could go even further and move everything from style.css to the <style> tag in the <head> of index.html — this wou...

Mobile first - Progressive web apps (PWAs)
there is very little going on here, and anyone with a basic understanding of css should be able to understand most of it by just looking at the source code in app.css. particular bits of interest to point out are as follows. article { display: table; } nav { display: table-caption; caption-side: bottom; } this is a rather nice hacky bit of cs...

Structural overview of progressive web apps - Progressive web apps (PWAs)
e 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 href=...

Web technology reference
ten using angle brackets. some introduce content into the page directly, others provide information about document text and may include other tags as sub-elements. obviously, browsers do not display them, since they are used to interpret the content of the page. introduction to html | learn html | html5 | developer guide | element reference | reference css — styling the web cascading style sheets are used to describe the appearance of web content. introduction to css | getting started with css | learn css | common css questions | reference javascript — dynamic client-side scripting the javascript programming language is used to add interactivity and other dynamic features to web sites. learn javascript | developer guide | reference ...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
there are 3 properties you can use: mask, clip-path, and filter. note: references to svg in external files must be to the same origin as the referencing document. using embedded svg to apply an svg effect using css styles, you first need to create the css style that references the svg to apply. ...

class - SVG: Scalable Vector Graphics
for general use by the browser. you can use this class to style svg content using css. ...

clip-rule - SVG: Scalable Vector Graphics
ode will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ... /> </g> as a presentation attribute, it also can be used as a property directly inside a css stylesheet usage context categories presentation attribute value nonzero | evenodd | inherit animatable yes normative document svg 1.1 (2nd edition) nonzero see description of fill-rule property. evenodd see description of fill-rule property. example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!--...

cursor - SVG: Scalable Vector Graphics
svg attribute reference home the cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element. this attribute behaves exactly like the css cursor property except that if the browser supports the <cursor> element, you should be able to use it with the <funciri> notation. as a presentation attribute, it also can be used as a property directly inside a css stylesheet, see css cursor for further information. usage context categories presentation attribute value [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit animatable yes normative document svg 1.1 (2nd edition) <fu...

externalResourcesRequired - SVG: Scalable Vector Graphics
the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element. this attribute applies to all types of resource references, including style sheets, color profiles and fonts specified by a reference using a <font-face> element or a css @font-face specification. in particular, if an element sets externalresourcesrequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element. the externalresourcesrequired attribute is not inheritable (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container. because setting externalresour...

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. specificat...

style - SVG: Scalable Vector Graphics
g this attribute. html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none animatable no <style> the syntax of style data depends on the style sheet language. by default, the style sheet language is css. note: in theory, the contentstyletype attribute could be used to specify styling languages other than css, like xsl(t). however, this was never implemented satisfactorily in browsers, so you should not rely on it. specifications specification status comment scalable vector graphics (svg) 2the definition of ...

<svg> - SVG: Scalable Vector Graphics
s baseprofile deprecated since svg 2 the minimum svg language profile that the document requires. value type: <string> ; default value: none; animatable: no contentscripttype deprecated since svg 2 the default scripting language used by the svg fragment. value type: <string> ; default value: application/ecmascript; animatable: no contentstyletype deprecated since svg 2 the default style sheet language used by the svg fragment. value type: <string> ; default value: text/css; animatable: no height the displayed height of the rectangular viewport. (not the height of its coordinate system.) value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio how the svg fragment must be deformed if it is displayed with a different aspect ratio. value type: (...

SVG as an Image - SVG: Scalable Vector Graphics
ecko 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. external resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris. :visited-link styles aren't rendered. platform-native widget styling (based on os theme) is disabled. note that the above restrictions are specific to image contexts; they don't apply when svg content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements. specification...

SVG: Scalable Vector Graphics
. applying svg effects to html content svg works together with html, css and javascript. use svg to enhance a regular html page or web application. view all... community view mozilla forums... mailing list newsgroup rss feed tools svg test suite markup validator more tools... other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript. this allows developers to create rich animations and interactive images. ...