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.
...And 5 more matches

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.
...And 5 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.
...And 5 more matches

StyleSheet.disabled - Web APIs
the disabled property of the stylesheet interface determines whether the style sheet is prevented from applying to the document.
... a style sheet may be disabled by manually setting this property to true or if it's an inactive alternative style sheet.
... note that disabled == false does not guarantee the style sheet is applied (it could be removed from the document, for instance).
...And 4 more matches

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.
...And 3 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.
...And 3 more matches

revert - CSS: Cascading Style Sheets
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).
... if used in a user's custom stylesheet, or if the style was applied by the user (the user origin), revert rolls back the cascaded value to the user agent's default style.
...the only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).
...And 3 more matches

XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
a top-level element must appear as the child of either <xsl:stylesheet> or <xsl:transform>.
...a stylesheet may include several templates.
...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.
...And 3 more matches

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
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.
... our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet.
...And 3 more matches

CSSStyleSheet.addRule() - Web APIs
the obsolete cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet.
... syntax var result = cssstylesheet.addrule(selector, styleblock, index); parameters selector a domstring specifying the selector portion of the css rule.
... index optional an optional index into the stylesheet's cssrulelist at which to insert the new rule.
...And 2 more matches

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.
... 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.
...And 2 more matches

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.
...And 2 more matches

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.
... syntax var rules = cssstylesheet.rules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet.
...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.
...And 2 more matches

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.
...And 2 more matches

@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.
... 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.
...And 2 more matches

<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.
...And 2 more matches

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.
... learn more general knowledge css first steps stylesheets on wikipedia ...

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.

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.

CSSStyleSheet.removeRule() - Web APIs
the obsolete cssstylesheet method removerule() removes a rule from the stylesheet object.
... 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.
... 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.

StyleSheet.ownerNode - Web APIs
the ownernode property of the stylesheet interface returns the node that associates this style sheet with the document.
... this is usually an html <link> or <style> element, but can also return a processing instruction node in the case of <?xml-stylesheet ?>.
... syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <button onclick="alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
... specifications specification status comment css object model (cssom)the definition of 'stylesheet: ownernode' in that specification.

At-rules - CSS: Cascading Style Sheets
/* 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.
... 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.
... @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.

Detecting CSS animation support - CSS: Cascading Style Sheets
animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to perform our animation.
...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.

Syntax - CSS: Cascading Style Sheets
the basic goal of the cascading stylesheet (css) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations.
... css rulesets if style sheets could only apply a declaration to each element of a web page, they would be pretty useless.
... 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.

<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.
... type top-level, may appear in any order as a child of <xsl:stylesheet> or <xsl:transform>.

<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.
... syntax <xsl:namespace-alias stylesheet-prefix=name result-prefix=name /> required attributes stylesheet-prefix specifies the temporary namespace.
... type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

Basic Example - XSLT: Extensible Stylesheet Language Transformations
</myns:body> </myns:article> figure 5 : xslt stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/cs...
...test="@company"> :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> </xsl:template> <xsl:template match="myns:body"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:stylesheet> the example loads using synchronous xmlhttprequest both the .xsl (xslstylesheet) and the .xml (xmldoc) files into memory.
... the .xsl file is then imported (xsltprocessor.importstylesheet(xslstylesheet)) and the transformation run (xsltprocessor.transformtofragment(xmldoc, document)).
... figure 6 : example var xslstylesheet; var xsltprocessor = new xsltprocessor(); var mydom; var xmldoc; function init(){ // load the xslt file, example1.xsl var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xsl", false); myxmlhttprequest.send(null); xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); xmldoc = myxmlhttprequest.responsexml; var fragment = xsltprocessor.transformtofragment(xmldoc, document); document.getelementbyid("exa...

JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
once instantiated, an xsltprocessor has an xsltprocessor.importstylesheet() method that takes as an argument the xslt stylesheet to be used in the transformation.
... the stylesheet has to be passed in as an xml document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet().
... : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
... // 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 = xmlref.importnode(mynode, true); // add the cloned dom into the xml document xmlref.appendchild(clonednode); once the stylesheet has been imported, xsltprocessor has to perform two methods for the actual transformation, namely xsltprocessor.transformtodocument() and xsltprocessor.transformtofragment().

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.
... example given an <ul> (list) element with the id "sheetlist", you can populate it with the names of all the available style sheet sets with code like this: let list = document.getelementbyid('sheetlist'); let sheets = document.stylesheetsets; list.innerhtml = ''; for (let i = 0; i < sheets.length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i]; list.appendchild(item); } notes the list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the document.stylesheets attribute, adding the title of each style sheet that has a title to the list.

DocumentOrShadowRoot.styleSheets - Web APIs
the stylesheets read-only property of the documentorshadowroot interface returns a stylesheetlist of cssstylesheet objects, for stylesheets explicitly linked into or embedded in a document.
... examples function getstylesheet(unique_title) { for (var i=0; i<document.stylesheets.length; i++) { var sheet = document.stylesheets[i]; if (sheet.title == unique_title) { return sheet; } } } notes the returned list is ordered as follows: stylesheets retrieved from <link> headers are placed first, sorted in header order.
... stylesheets retrieved from the dom are placed after, sorted in tree order.

StyleSheet.media - Web APIs
the media property of the stylesheet interface specifies the intended destination media for style information.
... example <!doctype html> <html> <head> <link rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style rel="stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); if (isheetindex === 0) document.stylesheets[isheetindex].media.appendmedium('handheld'); if (isheetindex === 1) document.stylesheets[isheetindex].media.deletemedium('print'); console.log('document.styl...
...esheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object model (cssom)the definition of 'stylesheet: media' in that specification.

StyleSheetList - Web APIs
the stylesheetlist interface represents a list of stylesheet.
... examples get document stylesheet objects with for loop for (let i = 0; i < document.stylesheets.length; i++) { let stylesheet = document.stylesheets[i]; } get all css rules for the document using array methods const allcss = [...document.stylesheets] .map(stylesheet => { try { return [...stylesheet.cssrules] .map(rule => rule.csstext) .join(''); } catch (e) { console.log('access to stylesheet %s is denied.
... ignoring...', stylesheet.href); } }) .filter(boolean) .join('\n'); specifications specification status comment css object model (cssom)the definition of 'cssstylesheetlist' in that specification.

@namespace - CSS: Cascading Style Sheets
@namespace is an at-rule that defines xml namespaces to be used in a css style sheet.
... 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.

Comments - CSS: Cascading Style Sheets
a css comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet.
... syntax comments can be placed wherever white space is allowed within a style sheet.
...there is no other way to specify comments in external style sheets.

Questions about CSS - CSS: Cascading Style Sheets
cascading style sheets (css) is a rule-based language allowing developers to define styles to apply to html elements (or other markup structures).
...with css, the sources of style definition for a given document element are in this order of precedence: the style attribute on an individual element tag the style element that defines a specific style sheet containing style declarations or a link element that links to a separate document containing the style element.
... 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.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the -moz-appearance property was used in xul stylesheets to design custom widgets with platform-appropriate styling.
...starting with gecko/firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets.
... 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; }...

Specified value - CSS: Cascading Style Sheets
the specified value of a css property is the value it receives from the document's style sheet.
... the specified value for a given property is determined according to the following rules: if the document's style sheet explicitly specifies a value for the property, the given value will be used.
... if the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.

will-change - CSS: Cascading Style Sheets
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.
... 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.
...but use caution with the will-change property directly in stylesheets.

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

Advanced Example - XSLT: Extensible Stylesheet Language Transformations
div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory xmlref = document.implementation.createdocument("", "", null); // we want to move a part of the dom from an html document to an xml document.
..."); 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...
...er="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...

XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents.
... 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.
... specifying parameters using processing instructions firefox allows stylesheet parameters to be specified when using the <?xml-stylesheet?> processing instruction.

HTML Cheatsheet - Learn web development
that's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages.
... aditional information <details><summary>html cheatsheet</summary><p>inline elements</p><p>block elements</p></details> html cheatsheet inline elements block elements an unordered list <ul> <li>i'm an item</li> <li>i'm another item</li> </ul> i'm an item i'm another item an ordered list <ol> <li>i'm the first item</li> <li>i'm the second item</li> ...

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

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.

:has() - CSS: Cascading Style Sheets
in earlier revisions of the css selectors level 4 specification, :has had a limitation that it couldn't be used within stylesheets.
...instead, browsers currently only support the use of :has() within stylesheets.

@document - CSS: Cascading Style Sheets
it is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.
...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).

@import - CSS: Cascading Style Sheets
the @import css at-rule is used to import style rules from other style sheets.
... 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.

color-index - CSS: Cascading Style Sheets
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.

device-height - CSS: Cascading Style Sheets
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.

device-width - CSS: Cascading Style Sheets
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.

shape - CSS: Cascading Style Sheets
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.

Media queries - CSS: Cascading Style Sheets
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.

Specificity - CSS: Cascading Style Sheets
(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.
...using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

CSS Tutorials - CSS: Cascading Style Sheets
it explains the fundamental concepts of the language and guides you in writing basic stylesheets.
... media queries the size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays.

all - CSS: Cascading Style Sheets
it can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.
... revert specifies behavior that depends on the stylesheet origin to which the declaration belongs: user-agent origin equivalent to unset.

aspect-ratio - CSS: Cascading Style Sheets
this appears in the browser's internal ua stylesheet.
... 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.

attr() - CSS: Cascading Style Sheets
the attr() css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
... relative url are resolved relatively to the original document, not relatively to the style sheet.

ime-mode - CSS: Cascading Style Sheets
normal the ime state should be normal; this value can be used in a user style sheet to override the page's setting.
...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.

url() - CSS: Cascading Style Sheets
depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet.
...} @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).

CSS: Cascading Style Sheets
cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as svg, mathml or xhtml).
... 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.

Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
mime types your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml.
...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.

<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.
... type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

Block and Line Layout Cheat Sheet - Archive of obsolete content
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.

-webkit-border-before - CSS: Cascading Style Sheets
the -webkit-border-before css property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.

:-webkit-autofill - CSS: Cascading Style Sheets
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.

:fullscreen - CSS: Cascading Style Sheets
syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.

:scope - CSS: Cascading Style Sheets
/* selects a scoped element */ :scope { background-color: lime; } currently, when used in a stylesheet, :scope is the same as :root, since there is not at this time a way to explicitly establish a scoped element.

src - CSS: Cascading Style Sheets
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.

prefers-reduced-data - CSS: Cascading Style Sheets
in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+01...

@media - CSS: Cascading Style Sheets
the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.

marks - CSS: Cascading Style Sheets
cross marks are used to align sheets.

size - CSS: Cascading Style Sheets
in most cases, the dimensions and orientation of the target sheet are used.

@page - CSS: Cascading Style Sheets
in the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.

CSSOM View - CSS: Cascading Style Sheets
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.

Box alignment in grid layout - CSS: Cascading Style Sheets
reference css properties justify-content align-content place-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in grid layout external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...

Box alignment in Flexbox - CSS: Cascading Style Sheets
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.

Basic Concepts of Multicol - CSS: Cascading Style Sheets
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.

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.

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
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.

Block and inline layout in normal flow - CSS: Cascading Style Sheets
the default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
style sheets that use these features to perform logical reordering are non-conforming.

Using CSS transitions - CSS: Cascading Style Sheets
you can also choose easing from easing functions cheat sheet.

Using media queries - CSS: Cascading Style Sheets
note: a style sheet with a media query attached to its <link> tag will still download even if the query returns false.

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
some replaced elements, such as <iframe> elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.

Selector list - CSS: Cascading Style Sheets
/* selects all matching elements */ span, div { border: red 2px solid; } to reduce the size of style sheets, one can group selectors in comma-separated lists.

Shorthand properties - CSS: Cascading Style Sheets
using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

Tools - CSS: Cascading Style Sheets
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 ...

border-block-end - CSS: Cascading Style Sheets
the border-block-end css property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.

border-block-start - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.

border-block - CSS: Cascading Style Sheets
the border-block css property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.

border-inline-end - CSS: Cascading Style Sheets
the border-inline-end css property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.

border-inline-start - CSS: Cascading Style Sheets
the border-inline-start css property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.

border-inline - CSS: Cascading Style Sheets
the border-inline css property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

font-family - CSS: Cascading Style Sheets
<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.

font-size-adjust - CSS: Cascading Style Sheets
for example, a style sheet that specifies: font-size: 14px; font-size-adjust: 0.5; ...

font-variant-alternates - CSS: Cascading Style Sheets
this property allows those human-readable names (defined in @font-feature-values) in the stylesheet.

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

initial - CSS: Cascading Style Sheets
use revert to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).

Initial value - CSS: Cascading Style Sheets
note: the initial value should not be confused with the value specified by the browser's style sheet.

shape-outside - CSS: Cascading Style Sheets
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.

<url> - CSS: Cascading Style Sheets
relative urls are allowed, and are relative to the url of the stylesheet (not to the url of the web page).

Regular expression syntax cheatsheet - JavaScript
this page provides an overall cheat sheet of all the capabilities of regexp syntax by aggregating the content of the articles in the regexp guide.

<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:attribute> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:attribute> element creates an attribute in the output document, using any values that can be accessed from the stylesheet.

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:message> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:message> element outputs a message (to the javascript console in ns) and optionally terminates execution of the stylesheet.

<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child <xsl:stylesheet> or <xsl:transform>.

<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be a child of <xsl:stylesheet> or <xsl:transform>.

<xsl:strip-space> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be a child of <xsl:stylesheet> or <xsl:transform>.

<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:transform> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:transform> element is exactly equivalent to the <xsl:stylesheet> element.

<xsl:variable> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:variable> element declares a global or local variable in a stylesheet and gives it a value.

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
ken holman location: http://www.xml.com/pub/a/2000/08/holman/index.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 ...

Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).

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
xslt provides the xsl:param element, which is a child of the xsl:stylesheet element.

Building accessible custom components in XUL - Archive of obsolete content
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.
...label elements for each cell in the spreadsheet.
...<code> <grid class="spreadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description value="entry #"/> <description value="1"/> <description value="2"/> <description value="3"/> <description value="4"/> <description value="5"/> <description value="6"/> <description value="7"/> </column> <column flex="1"> <descripti...
...And 43 more matches

Index - Web APIs
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.
...this is readonly in some browsers; to set stylesheet rules dynamically cross-browser, see using dynamic styling information.
...And 36 more matches

How CSS is structured - Learn web development
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.
...you can link a single css file to multiple web pages, styling all of them with the same css stylesheet.
...And 17 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.
... 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.
...And 16 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
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.
... 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.
...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.
...And 15 more matches

Skinning XUL Files by Hand - Archive of obsolete content
in xul, skins are created with cascading style sheets and images.
... 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.
...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.
...And 14 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.
...And 12 more matches

Style System Overview - Archive of obsolete content
style system style sheets & rules ↓ rule tree ↓ style context interface style sheets & rules nsistyleruleprocessor and nsistylesheet describe in c++ what a css stylesheet can do nsistylerule describes in c++ what a css style rule can do main implementations are for css, but we have other implementations in c++ that: do what css can't do do things faster than css would css style sheets at basic level, sheet is collection of rules other special things: @import, @media, @namespace, etc.
... fdr said <quote>"we have nothing to fear but <span class="emph">fear itself.</span>"</quote> </para> </doc> example document tree doc ↙ ↓ ↘ title para class="emph" para ↓ ↓ quote quote ↓ span class="emph" example stylesheet doc { display: block; text-indent: 1em; } title { display: block; font-size: 3em; } para { display: block; } [class="emph"] { font-style: italic; } css style rule representation each declaration block is represented by an nscssdeclaration an cssstyleruleimpl contains each selector associated with that declaration, and the declaration, and is the most important implement...
... various rules in nshtmlstylesheet.cpp do other things with presentational color-related attributes and with tables.
...And 11 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
they include: html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resourc...
... 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.
...below is an example: var xslstylesheet; var xsltprocessor = new xsltprocessor(); // load the xslt file, example1.xsl var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xsl", false); myxmlhttprequest.send(null); // get the xml document and import it xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new x...
...And 10 more matches

Using Remote XUL - Archive of obsolete content
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.
...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 10 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 ...
... void removesheet(in nsiuri sheeturi, in unsigned long type); void resumetimeouts(); void sendcompositionevent(in astring atype); obsolete since gecko 9 void sendcompositionevent(in astring atype, in astring adata, in astring alocale); obsolete since gecko 38.0 void sendcontentcommandevent(in astring atype, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean send...
... select_character 0 select_cluster 1 select_word 2 select_line 3 select_beginline 4 select_endline 5 select_paragraph 6 select_wordnospace 7 agent_sheet 0 a possible type of a style sheet loaded/removed with loadsheet()/removesheet().
...And 10 more matches

Challenge solutions - Developer guides
why use css colors challenge without looking up a reference, find five more color names that work in your stylesheet.
... 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.
...And 10 more matches

Index - Archive of obsolete content
104 stylesheet/style modify styles using stylesheet files or css rules.
... 105 stylesheet/utils helper functions for working with stylesheets.
... 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.
...And 9 more matches

Using dynamic styling information - Web APIs
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.
... 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.
...And 9 more matches

page-mod - Archive of obsolete content
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.
... name: contentstylefile type: string,array use this option to load one or more stylesheets into the targeted documents as user stylesheets.
...And 8 more matches

Anonymous Content - Archive of obsolete content
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.
...And 8 more matches

nsIXSLTProcessor
to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview void clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source); nsidomdocumentfragment transformtofragment(in nsidomnode source, in nsidomdocument output); methods clearparameters() removes al...
...this will make the processor use the default-value for all parameters as specified in the stylesheet.
...importstylesheet() imports the specified stylesheet into this xsltprocessor for transformations.
...And 8 more matches

XSL Transformations in Mozilla FAQ - Web APIs
why isn't my stylesheet applied?
... make sure the mime type for both source and stylesheet are set to an xml mimetype, namely text/xml or application/xml.
...use the <?xml-stylesheet ?> processing instruction instead of the non-standard xml:stylesheet.
...And 8 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.
... new xsltprocessor() methods [throws] void xsltprocessor.importstylesheet(node stylesheet) imports the xslt stylesheet.
...And 8 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<?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.
... 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.
...And 7 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the skin package this is used to include source files used as visual elements in the gui, including style sheets and images.
... listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js"/> <hbox align="center"> <label value="current time:" /> <textbox id="currenttime" /> </hbox> </dialog> listing...
... listing 8: revisions to clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <!doctype dialog system "chrome://helloworld/locale/clock.dtd"> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&helloworld.clock;" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js" /> <hbox align="center"> <label value="&hello...
...And 7 more matches

Cascade and inheritance - Learn web development
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.
... 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.
... 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.
...And 7 more matches

Index - Learn web development
css is a style sheet language.
... 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.
... 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.
...And 7 more matches

Generating HTML - Web APIs
since there is no html namespace, and using the xhtml namespace would force the xsl to create an xml document that would not behave like a html document, the xsl:output in the xsl stylesheet will make sure the resulting document will be handled as html.
... figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... </myns:body> </myns:article> the xsl stylesheet used will need to have two namespaces - one for the xslt elements and one for our own xml elements used in the xml document.
...And 7 more matches

Creating reusable content with CSS and XBL - Archive of obsolete content
you can place stylesheets in separate files, and you can place scripts in separate files.
...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.
...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.
...And 6 more matches

Using CSS generated content - Learn web development
you modify your stylesheet to add text content or images.
...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.
...And 6 more matches

Mozilla’s UAAG evaluation report
longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this.
... noscript for script: must use user style sheets to render this.
... longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this.
...And 6 more matches

nsIIOService
and for a css stylesheet it's the document whose rendering will be affected by the stylesheet.
...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.
...And 6 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
link link link stylesheet imports a style sheet.
... 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.
...And 6 more matches

Creating a Microsummary - Archive of obsolete content
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.
...since our generator will be creating microsummaries displaying the firefox download count, let's give it the name "firefox download count": <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> </generator> adding an xslt transform sheet generators must include an xslt transform sheet (also known as an xslt stylesheet) which transforms the page content into its microsummary.
...And 5 more matches

Modifying the Default Skin - Archive of obsolete content
« previousnext » as of firefox 69, you must set the toolkit.legacyuserprofilecustomizations.stylesheets preference to true in about:config in order to load userchrome.css or usercontent.css files.
... skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file.
...the xul for any skins is the same, however the style sheets and images used are different.
...And 5 more matches

Using the standard theme - Archive of obsolete content
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.
... applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?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.
...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>.
...And 5 more matches

Mozilla Style System Documentation
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).
... style contexts and the rule tree when the style system creates a style context, it walks through the style sheets (interface nsistylesheet) attached to a document in the order defined by the css cascade and finds the style rules (interface nsistylerule) thatmatch the content node or content node + pseudo-element pair.
... (the "non-element" style contexts are defined never to match any rules.) these interfaces nsistylesheet and nsistylerule correspond to the css concepts of style sheets and style rules, except they are more general, and are used by other code that needs to add style information to the document.
...And 5 more matches

Migrating from Firebug - Firefox Developer Tools
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.
...And 5 more matches

Document - Web APIs
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.preferredstylesheetsetread only returns the preferred style sheet set as specified by the page author.
...And 5 more matches

panel - Archive of obsolete content
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.
...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.
...And 4 more matches

tabs - Archive of obsolete content
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 4 more matches

Introduction to XUL - Archive of obsolete content
since xml has no implicit display semantics, there must always be associated stylesheets.
... mozilla includes a standard stylesheet, "xul.css".
... you can load as many style sheets as you wish using repeated processing directives, although you should always make sure to load the xul.css file initially.
...And 4 more matches

Creating a Window - Archive of obsolete content
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.
... <?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.
...And 4 more matches

Examples - Archive of obsolete content
<!-- this file should have a .html extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 4 - xhtml 1.0 strict as text/html</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>example 4 - xhtml 1.0 strict as text/html</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/html</code>.
... </p> <p> this document references css rules contained in an external stylesheet via <code>link</code>.
...ample 5 <!-- this file should have a .xml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 5 - xhtml 1.0 strict as text/xml</title> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </style> </head> <body> <h1>example 5 - xhtml 1.0 strict as text/xml</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/xml</code>.
...And 4 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
55 css css, codingscripting, glossary, web, l10n:priority css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
... 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.
...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.
...And 4 more matches

CustomizableUI.jsm
defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.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.
...this way is simpler because you don't have to maintain a style sheet.
...one issue with this method, is that when the icon is removed to the "customize toolbox" (when you right click and say customize and it opens that tab), it doesn't give it the 32x32 icon it needs (i have to figure out how and update the docs, its probably onwidgetremoved or something) giving the button an icon via style sheet method the above code creates your widget with click functionality.
...And 4 more matches

Mozilla Web Developer FAQ
my style sheet doesn’t work!
... does the css style sheet pass the syntax check?
... is the server sending the proper content-type header for css style sheets?
...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 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.
...And 4 more matches

Connecting to Remote Content - Archive of obsolete content
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.
... first you need to create an xslt stylesheet that acts as a template.
... <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <xsl:template match="/data"> <xul:vbox> <xsl:for-each select="shops/name"> <xul:hbox> <xul:label value="name:" /> <xul:label> <xsl:value-of select="." /> </xul:label> </xul:hbox> </xsl:for-each> <xul:hbox> <xul:label value="total:" /> <xul:label> <xsl:value-of select="total" /> </xul:label> </xul:h...
...And 3 more matches

XML data - Archive of obsolete content
you create a sample xml document, and a stylesheet that you can use to display it in your browser.
...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.
...And 3 more matches

XUL user interfaces - Archive of obsolete content
like other xml-based languages, xul uses css stylesheets.
...copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> ...
...on day of week calculator date: 6/27/2005 day: sunday monday tuesday wednesday thurdsay friday saturday clear today june 27, 2005 notes about this demonstration: the xul document links the stylesheet as usual, and it also links the script.
...And 3 more matches

Elements - Archive of obsolete content
a single xbl binding can be attached to an element by using style sheets or by scripting.
... 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.
... stylesheet <!element stylesheet empty> <!attlist stylesheet id id #implied src uri #required > the stylesheet element declares a style sheet used by the binding.
...And 3 more matches

ActiveXObject - Archive of obsolete content
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).
...in the following example, you access properties and methods of the new object using the object variable excelsheet and other excel objects, including the application object and the activesheet.cells collection.
...excelsheet.application.visible = true; // place some text in the first cell of the sheet.
...And 3 more matches

Gecko info for Windows accessibility vendors
it supports html, xhtml, cascading style sheets (css) and the document object model (dom).
...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.
...in addition, check the state_focusable bit on tables, which indicates a traversable dhtml spreadsheet.
...And 3 more matches

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...
... return value the line number of the style rule; the url of the rule can be obtained from its parent style sheet object.
... return value the column number of the style rule; the url of the rule can be obtained from its parent style sheet object.
...And 3 more matches

CSSRuleList - Web APIs
description each cssrule can be accessed as rules.item(index), or simply rules[index], where rules is an object implementing the cssrulelist interface (such as cssstylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet css.
... note that being indirect-modify (changeable but only having read-methods), rules are not added or removed from the list directly, but instead here, only via its parent stylesheet.
... in fact, .insertrule() and .deleterule() are not even methods of cssrulelist, but only of cssstylesheet.
...And 3 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
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.
... msaa events cheat sheet for information on what each event does, see the msdn event constants page.
...ction] event_object_statechange [important for checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defactionchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the msdn state constants page.
...And 3 more matches

Preloading content with rel="preload" - HTML: Hypertext Markup Language
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.
... a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on.
... this example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of html as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are.
...And 3 more matches

Extension Theming Guidelines - Archive of obsolete 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.
...And 2 more matches

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
the dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 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 ...
...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.
...yntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <seq about="urn:mozilla:skin:classic/1.0:packages"> <li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> </chrome:packages> </description> <seq about="urn:mozilla:stylesheets"> <li resource="chrome://global/content/customizetoolbar.xul"/> </seq> <seq about="chrome://global/content/customizetoolbar.xul"> <li>chrome://myextension/skin/toolbar-button.css</li> </seq> </rdf> the skin/contents.rdf file is denigrated in developing for later releases of firefox.
...And 2 more matches

Creating a Skin - Archive of obsolete content
or, you can temporarily place it in the content directory and refer to it using a stylesheet directive.
...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.
...this change should really be moved into the global style sheet.
...And 2 more matches

How CSS works - Learn web development
previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
... take the following html code: <p> let's use: <span>cascading</span> <span>style</span> <span>sheets</span> </p> in the dom, the node corresponding to our <p> element is a parent.
...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

CSS performance optimization - Learn web development
the browser blocks rendering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets.
...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.
...And 2 more matches

The Firefox codebase: CSS Guidelines
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.
... 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.
...And 2 more matches

XSLT Basic Example - Web APIs
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.
...And 2 more matches

Link types - HTML: Hypertext Markup Language
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.
... <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.
...And 2 more matches

Authoring MathML - MathML
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.
...if you need only basic mathematical constructions such as those used on this mdn wiki then a small mathml.css stylesheet might be enough.
...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.
...And 2 more matches

Media - Progressive web apps (PWAs)
the document's markup language might allow the media type to be specified when the stylesheet is linked to the document.
... in css, you can use @import at the start of a stylesheet to import another stylesheet from a url, optionally specifying the media type.
...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.
...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, ::...
...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 unknown :focus and ::selection styles implementation status unknown geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but 100% on <svg> n...
...And 2 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
step 7: manually handle global css stylesheets any global css style sheets which you are using will need to be registered upon load and unregistered when your extension is unloaded.
... components.utils.import("resource://gre/modules/services.jsm"); var stylesheets = ["chrome://myextension/skin/mystylesheet.css"]; function startup(data,reason) { ...
... // load stylesheets let stylesheetservice= components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); stylesheetservice.loadandregistersheet(stylesheeturi, stylesheetservice.author_sheet); } ...
... // unload stylesheets let stylesheetservice = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); if (stylesheetservice.sheetregistered(stylesheeturi, stylesheetservice.author_sheet)) { stylesheetservice.unregistersheet(stylesheeturi, stylesheetservice.author_sheet); } } ...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
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 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?
...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.
...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.

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

Making it into a static overlay - Archive of obsolete content
static overlays are added to a xul file via a reference at the top of the file (much like stylesheets and javascript scripts).
...to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status...
...its next line is the stylesheet reference we previously added to navigator.xul.
... <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <?xul-overlay href="chrome://navigator/content/navigatoroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/navextraoverlay.xul"?> <?xul-overlay href="chrome://navigator/content/linktoolbaroverlay.xul"?> <?xul-overlay href="chrome://navigat...

Microsummary XML grammar reference - Archive of obsolete content
the <template> element the <template> element contains the xslt stylesheet which transforms web pages into their microsummaries.
...child elements: <stylesheet> or <transform> (required) the xslt stylesheet which performs the transformation.
... per xslt, you may specify the stylesheet child element using either the <stylesheet> or the <transform> tag, which are interchangeable.
... note: although the <template> element must be in the microsummaries namespace (http://www.mozilla.org/microsummaries/0.1), its <stylesheet>/<transform> child element must be in the xslt namespace (http://www.w3.org/1999/xsl/transform).

XML in Mozilla - Archive of obsolete content
supported core xml w3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with css, manipulating xml documents with scripts via dom, associating stylesheets with xml documents, and namespaces in xml.
...likewise, the cascading style sheets (css, w3c recommendations and drafts) style language can be used to style xml documents.
... specification or technology status and/or further documentation xml 1.0 w3c recommendation namespaces in xml w3c recommendation associating stylesheets with xml documents w3c recommendation styling xml documents with css manipulating xml documents with scripts through dom serializing xml dom trees to javascript object trees (jxon) other supported xml w3c recommendations specification or technology documentation xhtml ...
...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.

Custom toolbar button - Archive of obsolete content
it adds a stylesheet to the toolbar customization window.
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- firefox --> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbar...
...it also links to the stylesheet and javascript code that the button uses.
... explanation: this css stylesheet specifies how the button is displayed.

Styling a Tree - Archive of obsolete content
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.
... 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.
... example style sheet treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } note that you can ...

XUL Structure - Archive of obsolete content
style sheets (css), images, and other technologies are used to control the presentation.
...the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file.
... it is worth noting that the mozilla browser itself is actually just a set of packages containing xul files, javascript and style sheets.
... skin - style sheets, images and other theme specific files style sheets describe details of the appearance of a window.

The Business Benefits of Web Standards - Archive of obsolete content
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.
... by locating all the style and design issues in one document - the style sheet - whole sites can be rethemed in one go.
... the style sheet only needs to load once and then it is cached.
...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.

Animations and tweens - Game development
animations in phaser, animations, involve taking a spritesheet from an external source and displaying the sprites sequentially.
... 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.
...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.

Debugging CSS - Learn web development
devtools can save you a lot of time editing a stylesheet and reloading the page.
...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.
... 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.

Getting started with CSS - Learn web development
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.
...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.
... add the following rule to your stylesheet.
... try adding this rule to your stylesheet as well: h1 + p { font-size: 200%; } the live example below includes the two rules above.

CSS FAQ - Learn web development
to be applied, a css stylesheet must be served with a text/css mime type.
... 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.
... explicitly re-defined style rule in css stylesheets, order is important.

CSS basics - Learn web development
previous overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
...css is a style sheet language.
...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.
...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.

HTML table basics - Learn web development
data about the planets of our solar system (planetary facts taken from nasa's planetary fact sheet - metric.
... 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.
...> <td style="background-color: yellow">jazz</td> </tr> </table> which gives us the following result: data 1 data 2 calcutta orange robots jazz this isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet).

Properly configuring server MIME types - Learn web development
examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime types are available in iana | mime media types.
...for security reasons, gecko 2.0 will no longer do this for stylesheets loaded from a different origin than the requesting document.
... if your stylesheet comes from a different origin than the document, you must serve it with the correct mime type (text/css).
... gecko 1.9.1.11 (firefox 3.5.11) and gecko 1.9.2.5 (firefox 3.6.5) also implement this security fix, but to improve compatibility, there was a temporary heuristic that allows the load if the first line in the style sheet appears to be a well-formed css construct; the heuristic has been removed in firefox 4, and you have to properly set the text/css mime types to have your css pages recognized.

Displaying Places information using views
every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views.
... if you would like your tree view to be styled in the same manner that firefox styles its uses of the view, you should include the following stylesheet.
... note that this stylesheet is different from the one given above, which must be included if you use a built-in places view.
... the following stylesheet is optional and only applies styles and icons to the built-in tree view: <?xml-stylesheet href="chrome://browser/skin/places/places.css" ?> for examples of instantiating a tree view from javascript rather than xul, see programmatic generation of the built-in tree view.

Experimental features in Firefox
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.
... 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.
...using this media query lets your style sheet specify whether it prefers a light or dark user interface.

Building the WebLock UI
the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_ui" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" persist="screenx screeny" screenx="24" screeny="24"> </dialog> note that this part of the xul file also contains a stylesheet declaration, which imports css rules and applies them to particular par...
... weblock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_mgg" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox f...
...here is that xul file in its entirety: the weblock overlay <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/weblock.css" type="text/css"?> <overlay id="weblockoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://weblock/content/weblock.js"/> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="weblock-status" ...
...note that the weblock.xul file in which the manager is defined imports only the global skin: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> save weblock.css in your working directory.

Examples of web and XML development using the DOM - Web APIs
in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents.
... 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++) { 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.

WindowOrWorkerGlobalScope.setInterval() - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { function clean () { clearinterval(nintervid); btyping = false; bstart = true; ocurrent = null; asheets.length = nidx = 0; } function scroll (osheet, npos, beraseandstop) { if (!osheet.hasownproperty('parts') || amap.length < npos) { return true; } var orel, bexit = false; if (amap.length === npos) { amap.push(0); } while (amap[npos] < osheet.parts.length) { orel = osheet.parts[amap[npos]]; scroll(orel, npos + 1, beraseandstop) ?
... amap[npos]++ : bexit = true; if (beraseandstop && (orel.ref.nodetype - 1 | 1) === 3 && orel.ref.nodevalue) { bexit = true; ocurrent = orel.ref; spart = ocurrent.nodevalue; ocurrent.nodevalue = ''; } osheet.ref.appendchild(orel.ref); if (bexit) { return false; } } amap.length--; return true; } function typewrite () { if (spart.length === 0 && scroll(asheets[nidx], 0, true) && nidx++ === asheets.length - 1) { clean(); return; } ocurrent.nodevalue += spart.charat(0); spart = spart.slice(1); } function sheet (onode) { this.ref = onode; if (!onode.haschildnodes()) { return; } this.parts = array.prototype.slice.call(onode.childnodes); for (var nchild = 0; nchild < this.parts.length; nchild+...
...+) { onode.removechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping...
... = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); /* default frame rate is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underli...

<style>: The Style Information element - HTML: Hypertext Markup Language
in general, it is better to put your styles in external stylesheets and apply them using <link> elements.
... 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.
... title this attribute specifies alternative style sheet sets.
... examples a simple stylesheet in the following example, we apply a very simple stylesheet to a document: <!doctype html> <html> <head> <style> p { color: red; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> multiple style elements in this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.

Content Security Policy (CSP) - HTTP
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> ...
...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).
...for example, if the signup.html attempted 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).

Content-Security-Policy-Report-Only - HTTP
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> ...
...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).
...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).

HTTP Index - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
...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.
... 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.
... 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".

background_color - Web app manifests
type string mandatory no the background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded.
... this value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
... therefore background_color should match the background-color css property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.
... note: the background_color member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the background-color css property when the progressive web app stylesheet is available.

Populating the page: how browsers work - Web Performance
<!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.
... <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.
... the cssom tree includes styles from the user agent style sheet.
... 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.

The building blocks of responsive design - Progressive web apps (PWAs)
this is created using the css rules included at the top of the stylesheet, before any media queries are encountered.
...isplay: flex; } nav button { font-size: 6.8vw; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; border-left: 1px solid rgba(100,100,100,0.4); } nav button:first-child { border-left: 0; } } in this last set of rules, we change the display value of the <nav> to flex to make it show (it was set to none in the default css at the top of the stylesheet, as it wasn't needed for the other views.) we then use absolute positioning and z-index to make it take up no space in the document flow, and sit on top of the x-cards (this is why we gave the x-cards that top-margin earlier).
...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.
...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.

Content type - SVG: Scalable Vector Graphics
when used in the value of a property in a stylesheet, an <angle> is defined as follows: angle ::= number (~"deg" | ~"grad" | ~"rad")?
...when used in a stylesheet, a <length> is defined as follows: length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
...when used in a stylesheet, a <number> is defined as follows: number ::= integer | [+-]?
... percentage <percentage> percentages are specified as a number followed by a "%" character: percentage ::= number "%" note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute.

Subresource Integrity - Web security
how subresource integrity helps using content delivery networks (cdns) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth.
... note: an integrity value's "hash" part is, strictly speaking, a cryptographic digest formed by applying a particular hash function to some input (for example, a script or stylesheet file).
... how browsers handle subresource integrity browsers handle sri by doing the following: when a browser encounters a <script> or <link> element with an integrity attribute, before executing the script or before applying any stylesheet specified by the <link> element, the browser must first compare the script or stylesheet to the expected hash given in the integrity value.
... if the script or stylesheet doesn’t match its associated integrity value, the browser must refuse to execute the script or apply the stylesheet, and must instead return a network error indicating that fetching of that script or stylesheet failed.

dev/panel - Archive of obsolete content
the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
... to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = eve...
...for example, the root actor object has a method listtabs and the stylesheet actor object has a method getstylesheets.

CSS3 - Archive of obsolete content
css3 is the latest evolution of the cascading style sheets language and aims at extending css2.1.
... 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.
... clarifies: interaction of media-dependent @import statements and style sheet loading requirements.

XBL 1.0 Reference - Archive of obsolete content
bindings can be bound to elements using cascading style sheets (css) or dom.
... bindings binding content children implementation constructor destructor field property getter setter method parameter body handlers handler resources stylesheet image binding attachment and detachment attachment using css attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> ...
... handling dom changes event flow and targeting flow and targeting across scopes focus and blur events mouseover and mouseout events anonymous content and css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation.

Index - Archive of obsolete content
971 widget cheatsheet see the periodic table of xul for more examples.
... 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.

Complete - Archive of obsolete content
when the xul file, allcustom.xul is loaded, the stylesheet declaration near the top loads a stylesheet from chrome://allcustom/skin/.
...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.
...the allcustom directory contains the icon images and the css stylesheet.

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-buttons"> <toolbarbutton id="custom-button-1"/> ...
...it also links to the stylesheet and javascript code that the button uses.
... explanation: this css stylesheet specifies how the button is diaplayed.

Adding Buttons - Archive of obsolete content
you'll want to use this if you want to refer to the button in a style sheet or script.
...you can also specify the image in a stylesheet using the list-style-image property.
...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.

Adding Labels and Images - Archive of obsolete content
the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image url.
... a later section will describe how to use style sheets, but an example will be shown here for completeness.
...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.

XML - Archive of obsolete content
using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
... gecko was designed to be lightweight, standards-compliant and cross-platform, so rather than defining on its own how these widgets should be rendered, gecko depends for all but the most basic behavioral and presentational aspects of the widgets upon cascading stylesheets.
... the combination of structure, as defined in the xul, style as defined by the stylesheets, and the other standards are rendered by gecko into the interface.

nsIContentPolicy - Archive of obsolete content
type_stylesheet 4 indicates a stylesheet (for example, <style> elements).
... type_xslt 18 indicates a style sheet transformation.
... other 0 obsolete since gecko 1.8 script 1 obsolete since gecko 1.8 image 2 obsolete since gecko 1.8 stylesheet 3 obsolete since gecko 1.8 object 4 obsolete since gecko 1.8 subdocument 5 obsolete since gecko 1.8 control_tag 6 obsolete since gecko 1.8 raw_url 7 obsolete since gecko 1.8 document 8 obsolete since gecko 1.8 methods shouldload() called to let your content policy implementation decide whether or not the res...

Browser Detection and Cross Browser Support - Archive of obsolete content
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.
... for example, navigator 4 does not understand the @import directive in css and will not load any external css style sheets specified via @import.
... <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.

Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
since this rule is not valid css, it will prevent the validation of any stylesheet that contains it.
... one solution is to move the rule into its own stylesheet, and accept that the stylesheet in question will never validate.
... in situations where validation is a priority, segregate the rule into a separate stylesheet so that the rule will not confuse css validators run against the main stylesheet.

Buttons - Game development
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.

Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
the html parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively.
... the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images.
... to make speculative loads of linked scripts, style sheets and images successful, avoid document.write.

CSS first steps - Learn web development
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.
... css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
... how css works we have learned the basics of css, what it is for and how to write simple stylesheets.

React resources - Learn web development
component-level styles although this tutorial doesn't use this approach, many react applications define their styles on a per-component basis, rather than in a single, monolithic stylesheet.
...however, it also fragments your stylesheet across your codebase, and this fragmentation might not be worthwhile.
... you can read more about component stylesheets in the create-react-app docs.

Handling common HTML and CSS problems - Learn web development
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.
...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.
...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.

WebRequest.jsm
the following types are supported: "main_frame" "sub_frame" "stylesheet" "script" "image" "object" "xmlhttprequest" http headers https headers are represented as objects with two properties, name and value: name type description name string header name, for example "content-type" value string header value, for example "image/png" chrome incompatibilities although thi...
...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...
..., { 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.onbeforerequest.addlistener(cancelrequest, {urls: pattern}, ["blocking"]); function cancelrequest(e) { console.log("canceling: " + e.url); return {cancel: true}; } this code cancels requests for imag...

about:memory
��24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ── style-sheets │ │ │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.75%) ++ dom │ │ │ │ └──0.05 mb (00.02%) ── property-tables │ │ │ └───9.61 mb (05.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ �...
... within each window's measurements are sub-trees for javascript ("js-compartment(...)" and "js-zone(...)"), layout, style-sheets, the dom, and other things.
...───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 ...

Tips - Firefox Developer Tools
style editor the black box icon () in the style sheet pane toggles the visibility of a style sheet.
... 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.

CSSRule.cssText - Web APIs
the csstext property of the cssrule interface returns the actual text of a cssstylesheet style-rule.
...therefore, to modify it, use the stylesheet's cssrules[index] properties .selectortext and .style (or its sub-properties).
... syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specifications specification status comment css object model (cssom)the definition of 'cssrule: csstext' in that specification.

CSSStyleDeclaration.setProperty() - Web APIs
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.
...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
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.
... 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.

Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets.
... if loaded as usual, stylesheets slow down dom parsing as they're loaded in parallel, "stealing" traffic from the main html document.

Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... // but sub-resources such as images, stylesheets and frames are still loading.
... console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded...

LinkStyle - Web APIs
the linkstyle interface provides access to the associated css style sheet of a node.
... linkstyle.sheet read only returns the cssstylesheet object associated with the given element, or null if there is none.
... 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.

MediaList.mediaText - Web APIs
syntax medialistinstance.mediatext; medialistinstance.mediatext = string; value a domstring representing the media queries of a stylesheet.
... examples the following would log to the console a textual representation of the medialist of the first stylesheet applied to the current document.
... const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'mediatext' in that specification.

MediaList - Web APIs
the medialist interface represents the media queries of a stylesheet, e.g.
... examples the following would log to the console a textual representation of the medialist of the first stylesheet applied to the current document.
... const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'medialist' in that specification.

PaymentRequest.show() - Web APIs
the promise is resolved when the user accepts the payment request (such as by clicking a "pay" button in the browser's payment sheet).
... // 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.
... } // 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...

Payment Request API - Web APIs
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.
... 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 color contrast of the payment sheet, making it more comfortable for the user to make a payment.

Window - Web APIs
window.getdefaultcomputedstyle() gets default computed style for the specified element, ignoring author stylesheets.
... 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.

self.createImageBitmap() - Web APIs
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.
... var canvas = document.getelementbyid('mycanvas'), ctx = canvas.getcontext('2d'), image = new image(); // wait for the sprite sheet to load image.onload = function() { promise.all([ // cut out two sprites from the sprite sheet createimagebitmap(image, 0, 0, 32, 32), createimagebitmap(image, 32, 0, 32, 32) ]).then(function(sprites) { // draw each sprite onto the canvas ctx.drawimage(sprites[0], 0, 0); ctx.drawimage(sprites[1], 32, 32); }); } // load the sprite sheet from an image file image.src = 'sprites.png'; specifications specification status comment html living standardthe definition of 'createimagebitmap' in that specification.

Introduction - Web APIs
css (cascade style sheets) was one of the first ways proposed by the w3c.
... 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.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
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.
...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.

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

CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets.
... examples violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes...
...if 'unsafe-eval' isn't specified with the style-src directive, the following methods are blocked and won't have any effect: cssstylesheet.insertrule() cssgroupingrule.insertrule() cssstyledeclaration.csstext specifications specification status comment content security policy level 3the definition of 'style-src' in that specification.

Index - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
...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.

contentStyleType - SVG: Scalable Vector Graphics
the contentstyletype attribute specifies the style sheet language for the given document fragment on the <svg> element.
... 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.

media - SVG: Scalable Vector Graphics
the media attribute specifies a media query that must be matched for a style sheet to apply.
...edia="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.

<style> - SVG: Scalable Vector Graphics
the svg <style> element allows style sheets to be embedded directly within svg content.
... 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: all; animatable: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets.

SVG documentation index - SVG: Scalable Vector Graphics
50 contentstyletype deprecated, svg, svg attribute the contentstyletype attribute specifies the style sheet language for the given document fragment on the <svg> element.
... 139 media svg, svg attribute the media attribute specifies a media query that must be matched for a style sheet to apply.
... 367 <style> element, reference, svg the svg <style> element allows style sheets to be embedded directly within svg content.

SVG and CSS - SVG: Scalable Vector Graphics
result notes about this demonstration: the svg document links the stylesheet in the usual way.
... 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.
...the stylesheet only modifies the display in certain ways.

Using custom elements - Web Components
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(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.

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

XML introduction - XML: Extensible Markup Language
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.
... <?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.

Web technology for developers
css cascading style sheets are used to describe the appearance of web content.
... accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper 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 languag...
...expathxslt: extensible stylesheet language transformations ...

content/mod - Archive of obsolete content
for example, the following code applies a style to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the target.
... for example, the following code applies and removes a style to a content window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ...

Low-Level APIs - Archive of obsolete content
stylesheet/style modify styles using stylesheet files or css rules.
... stylesheet/utils helper functions for working with stylesheets.

Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"...
...this keeps the image from stretching inside the box: <?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"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/e...

Customizing the download progress bar - Archive of obsolete content
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.

Dialogs and Prompts - Archive of obsolete content
<?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.
... example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and proper...

Chapter 1: Introduction to Extensions - Archive of obsolete content
user style sheets (change appearance through css) yes; you can change the usercontent.css file, or use the stylish extension.
...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).

Custom XUL Elements with XBL - Archive of obsolete content
if you look at file bindingdialog.xul, you'll see that the css stylesheet is included, which means that the xshelloperson tag can now be used just like any xul tag.
...also unlike scripts, you can include stylesheets using the stylesheet xbl element.

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...
..."?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.

Content states and the style system - Archive of obsolete content
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.

Same origin policy for XBL - Archive of obsolete content
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).

Example Sticky Notes - Archive of obsolete content
--> <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.

Creating XPI Installer Modules - Archive of obsolete content
the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="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" autostr...
...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.

Building Trees - Archive of obsolete content
on the other hand, you could use a stylesheet to change the default height of the tree rows.
... it can be used to define extra properties for reference later in a stylesheet.

Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } function docancel(){ aler...
... example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cance...

Cross Package Overlays - Archive of obsolete content
as a side note, you can use a similar technique to apply extra style sheets.
... the following example shows how: <rdf:seq about="urn:mozilla:stylesheets"> <rdf:li resource="chrome://messenger/content/messenger.xul"/> </rdf:seq> <rdf:seq about="chrome://messenger/content/messenger.xul"> <rdf:li>chrome://blueswayedshoes/skin/myskinfile.css</rdf:li> </rdf:seq> next, we'll see how to create an installer for a xul application.

Element Positioning - Archive of obsolete content
a better way is to use style properties, which work similarly to style sheets in html.
... example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yesno" title="question" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you can also use the style properties ...

Introduction to XBL - Archive of obsolete content
xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> css (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.
...the style sheet associated with the file says that boxes with the class okcancelbuttons have a specialized binding, defined in the xbl file.

Tree View Details - Archive of obsolete content
a style sheet may be used to style items based on various properties such as whether a row is open.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"]...

XUL Questions and Answers - Archive of obsolete content
support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
...the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label...

XUL element attributes - Archive of obsolete content
you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets.
...it is preferred to put style rules in style sheets.

prefwindow - Archive of obsolete content
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.
...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...

window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
...you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets.

Windows and menus in XULRunner - Archive of obsolete content
here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... building on the simple window code, here is what xul menus and toolbars look like: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem la...

Gecko Compatibility Handbook - Archive of obsolete content
(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.

2006-11-10 - Archive of obsolete content
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.

-moz-window-shadow - Archive of obsolete content
sheet the window will have the shadow style that's appropriate for sheet windows.
... formal syntax default | menu | tooltip | sheet | none example .kui-panel { -moz-window-shadow: none; } ...

Index - Game development
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.

2D maze game with device orientation - Game development
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.

Gecko FAQ - Gecko Redirect 1
basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
...-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
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.
... @media at-rule conditionally apply part of a stylesheet, based on the result of a media query.

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

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

Images, media, and form elements - Learn web development
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.
...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.

Styling tables - Learn web development
link the css to the html by placing the following line of html inside your <head>: <link href="style.css" rel="stylesheet" type="text/css"> spacing and layout the first thing we need to do is sort out the spacing/layout — default table styling is so cramped!
... first, add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the previous addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } there is noth...

Responsive design - Learn web development
@media screen and (min-width: 800px) { .container { margin: 1em 2em; } } you can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes.
...this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach.

What is CSS? - Learn web development
overview: first steps next css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
... a css stylesheet will contain many such rules, written one after the other.

Web fonts - Learn web development
a stylesheet.css file, which contains the generated @font-face code you'll need.
... 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.

Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html.
... 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.

What is a web server? - Learn web development
(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.
... 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.

Styling web forms - Learn web development
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.
...if the fontsquirrel output was different to what we described above, you can find the correct @font-face blocks inside your downloaded webfont kit, in the stylesheet.css file (you'll need to replace the below @font-face blocks with them, and update the paths to the font files): @font-face { font-family: 'handwriting'; src: url('fonts/journal-webfont.woff2') format('woff2'), url('fonts/journal-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typewriter'; src: url('fonts/vete...

Getting started with the Web - Learn web development
dealing with files a website consists of many files: text content, code, stylesheets, media content, and so on.
... css basics cascading stylesheets (css) is the code that you use to style your website.

Adding vector graphics to the Web - Learn web development
(external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus).
... 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.

Drawing graphics - Learn web development
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).
...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.

Web performance resources - Learn web development
as we learned in the critical rendering path document, linking css with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering.
... <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of 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.

Implementing feature detection - Learn web development
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).
... 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.

Developer guide
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.

CSS -moz-bool-pref() @supports function
the -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.
... example warning: this will only work when loaded from a gecko chrome stylesheet.

Chrome-only CSS reference
ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these.
...yles to tree rows.::-moz-tree-row(hover)the ::-moz-tree-row(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over a tree row.::-moz-tree-separatoractivated by the properties attribute.::-moz-tree-twistyactivated by the properties attribute.css -moz-bool-pref() @supports functionthe -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.css <display-xul> component</display-xul>firefox supports the following -moz- prefixed xul display values:overflow-clip-boxthe overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow.

HTML parser threading
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.
...when the executor acts on speculative loads, it starts speculative http fetches for images (including video poster frames), style sheets and scripts.

L20n
l20n syntax cheatsheet for developers a simple cheatsheet to help developers as they add l20n to their localization infrastructure.
... l20n syntax cheatsheet for localizers a simple cheatsheet to help localizers as they localize projects with l20n.

XUL Overlays
because an overlay is superimposed on the master document, there are no ambiguities relating to scoping of style sheets or scripts.
... style sheets and scripts loaded by the overlay simply apply to the entire master document.

Main Windows
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).
...customizetoolbarsheet.xul is a similar implementation written for osx to give a more native appearance.

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

Examine and edit CSS - Firefox Developer Tools
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.
... if you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet.

CSSGroupingRule - Web APIs
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.

CSSRule - Web APIs
references to a cssrule may be obtained by looking at a cssstylesheet's cssrules list.
... 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.

CSSStyleDeclaration.cssText - Web APIs
to be able to set a stylesheet rule dynamically, see using dynamic styling information.
... not to be confused with stylesheet style-rule cssrule.csstext.

CSSStyleRule.selectorText - Web APIs
this is readonly in some browsers; to set stylesheet rules dynamically cross-browser, see using dynamic styling information.
... syntax string = cssrule.selectortext example // for cssrule: body { background-color: darkblue; } var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.

Document.createProcessingInstruction() - Web APIs
exceptions dom_invalid_character throws if either of the following are true: the processing instruction 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 ?>.
... 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.

FetchEvent.respondWith() - Web APIs
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).
... if a stylesheet is intercepted, then the final url is used as the base url for resolving relative @import loads.

HTMLLinkElement - Web APIs
htmllinkelement.disabled is a boolean which represents whether the link is disabled; currently only used with style sheet links.
... linkstyle.sheet read only returns the stylesheet object associated with the given element, or null if there is none.

HTMLStyleElement - Web APIs
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).

Window.getComputedStyle() - Web APIs
the window.getcomputedstyle() method returns an object containing the values of all css properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
...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.

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
the juicy studio css analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets.
... 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.

EXSLT
for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...
... </xsl:template> </xsl:stylesheet> common the exslt common package provides basic functions that expand upon the capabilities of xslt.

HTML5 - Developer guides
html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web developer tools.
... html5 cheat sheet a handy html 5 cheat sheet for beginners who want to master html 5, its elements, event attributes and compatibility.

Printing - Developer guides
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.

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
depending on your style sheet, though, you may find it useful to do this kind of nesting.
... result the output looks like this without a style sheet applied: with custom styles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> result the result is just what we want!

HTML elements reference - HTML: Hypertext Markup Language
<head> the html <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
...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.

HTML documentation index - HTML: Hypertext Markup Language
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.
...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.

CSP: require-sri-for - HTTP
style requires sri for style sheets.
... script style requires sri for both, scripts and style sheets.

Content-Security-Policy - HTTP
style-src specifies valid sources for stylesheets.
... style-src-elem specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".

Referrer-Policy - HTTP
="origin"> or set it for individual requests with the referrerpolicy attribute 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.

Regular expressions - JavaScript
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.
...\0, \xhh, \uhhhh, \uhhhhh, [\b] character classes ^, $, x(?=y), x(?!y), (?<=y)x, (?<!y)x, \b, \b assertions (x), (?:x), (?<name>x), x|y, [xyz], [^xyz], \number groups and ranges *, +, ?, x{n}, x{n,}, x{n,m} quantifiers \p{unicodeproperty}, \p{unicodeproperty} unicode property escapes note: a larger cheatsheet is also available (only aggregating parts of those individual articles).

externalResourcesRequired - SVG: Scalable Vector Graphics
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.

overflow - SVG: Scalable Vector Graphics
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.
... candidate recommendation simplifies the definition and outlines the values within the user agent stylesheet.

style - SVG: Scalable Vector Graphics
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.

Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth).
...some common examples of mixed content include javascript files, stylesheets, images, videos, and other media.

Tutorials
css tutorials introductory level css basics css (cascading style sheets) is the code you use to style your webpage.
... css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Loading Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.

Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.

ui/frame - Archive of obsolete content
for example, this html document defines a <select> element and a couple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the fram...

ui/sidebar - Archive of obsolete content
<!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.

Release notes - Archive of obsolete content
"./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs.

Storing annotations - Archive of obsolete content
annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="text/css" href="annotation-list.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body> </html> here's the corresponding css: #annotation-list .annotation-details { padding: 10px; margin: 10px; ...

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
css css tutorial aimed at complete beginners, this css tutorial for beginners introduces you to cascading style sheets (css).

Scrollbar - Archive of obsolete content
example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
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.

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
on the other hand, it is often the case that there are multiple images and css sheets that are the same for all systems.

Appendix F: Monitoring DOM changes - Archive of obsolete content
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.

The Essentials of an Extension - Archive of obsolete content
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.

Adding preferences to an extension - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> ...

Notes on HTML Reflow - Archive of obsolete content
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.

Source code directories overview - Archive of obsolete content
it resizes and aligns pieces of content according to the css1 and css2 (cascading style sheets), alignment styles and the content itself.

Creating a Firefox sidebar extension - Archive of obsolete content
chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title...

Adding the structure - Archive of obsolete content
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.

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
we need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-...

Layout System Overview - Archive of obsolete content
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.

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
however, because of a technical limitation (bug 340746), it does download css stylesheets referenced by the page.

LIR - Archive of obsolete content
nanojit lir instruction cheat sheet.also in pdf format see attachment.

Styling - Archive of obsolete content
this file will be loaded into the web application content stylesheet and can override the web application's native styles.

Prism - Archive of obsolete content
custom stylesheets can be used to tweak the ui.

New Skin Notes - Archive of obsolete content
--callek add "what not to do" css class to stylesheet, as discussed on talk:core javascript 1.5 reference.

The life of an HTML HTTP request - Archive of obsolete content
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.

A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.

id - Archive of obsolete content
you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets.

onchange - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"...

state - Archive of obsolete content
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.

style - Archive of obsolete content
it is preferred to put style rules in style sheets.

How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?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"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> ...

MenuItems - Archive of obsolete content
instead of specifying the icon with the image attribute, you can also reference the image in a style sheet with the 'list-style-image' property.

Panels - Archive of obsolete content
<?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.

Positioning - Archive of obsolete content
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.

Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfi...

Attribute Substitution - Archive of obsolete content
in a stylesheet, you could set properties for each of these classes such that different values appear differently without having to use multiple rules.

Using Recursive Templates - Archive of obsolete content
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.

textbox (Toolkit autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"...

Textbox (XPFE autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"...

The Joy of XUL - Archive of obsolete content
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.

Adding HTML Elements - Archive of obsolete content
here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you...

Box Model Details - Archive of obsolete content
a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c...

Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menui...

Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: fun...

Focus and Selection - Archive of obsolete content
you can check for the presence of this attribute to determine if the element has the focus, either from a script or within a style sheet.

Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <scri...

More Button Features - Archive of obsolete content
note that you really should put the style declarations in a separate style sheet.

More Wizards - Archive of obsolete content
wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label val...

Persistent Data - Archive of obsolete content
find files example so far : source view next, we'll look at using style sheets with xul files.

XBL Example - Archive of obsolete content
<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.

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
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.co...

XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> ...

colorpicker - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"...

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
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the ...

preference - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"...

splitter - Archive of obsolete content
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.

toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutto...

tree - Archive of obsolete content
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" editable="true" /> <treecol la...

treecol - Archive of obsolete content
eechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).

wizard - Archive of obsolete content
attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="en...

CommandLine - Archive of obsolete content
["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?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" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...

Dialogs in XULRunner - Archive of obsolete content
here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" ...

Getting started with XULRunner - Archive of obsolete content
main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="more-te...

2006-11-17 - Archive of obsolete content
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?

Proposal - Archive of obsolete content
the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically.

Theme changes in Firefox 4 - Archive of obsolete content
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.

-moz-stack-sizing - Archive of obsolete content
formal syntax ignore | stretch-to-fit examples .mainsheet { -moz-stack-sizing: ignore; } ...

-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.

Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
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.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 6 - creating the user interface <link href="/jaxer_examples/js/ext-2.1/resources/css/ext-all.css" type="text/css" rel="stylesheet"/> <script src="/jaxer_examples/js/ext-2.1/adapter/ext/ext-base.js"/> <script src="/jaxer_examples/js/ext-2.1/ext-all.js"/> <link href="/jaxer_examples/css/main.css" type="text/css" rel="stylesheet"/> <script runat="both" src="/jaxer_examples/js/validatecomments.js"/> <script> var txt_name; var txt_email; var txt_message; var btn_comments; var form_comments; ext.onready( function() { // crea...

Archived open Web documentation - Archive of obsolete content
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.

Archive of obsolete content
css3 css3 is the latest evolution of the cascading style sheets language and aims at extending css2.1.

Unconventional controls - Game development
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.

Square tilemaps implementation: Static maps - Game development
the tile atlas a tilemap might use one or several atlases — or spritesheets — that contain all of the tile images.

Tiles and tilemaps overview - Game development
the tile atlas the most efficient way to store the tile images is in an atlas or spritesheet.

CDN - MDN Web Docs Glossary: Definitions of Web-related terms
cdns are used widely for delivering stylesheets and javascript files (static assets) of libraries like bootstrap, jquery etc.

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
css (cascading style sheets) is a declarative language that controls how webpages look in the browser.

Media - MDN Web Docs Glossary: Definitions of Web-related terms
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.

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
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).

Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
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.

CSS and JavaScript accessibility best practices - Learn web development
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.

Accessible multimedia - Learn web development
you might for example have an audio recording of a meeting that refers to an accompanying resource such as a spreadsheet or chart.

Backgrounds and borders - Learn web development
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.

Fundamental CSS comprehension - Learn web development
from now on, subsequent styles added to the stylesheet should be organized in an appropriate place.

Type, class, and ID selectors - Learn web development
this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling.

CSS building blocks - Learn web development
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.

Test Your Skills: Fundamental layout comprehension - Learn web development
save the html document and stylesheet into a directory on your computer, and add the images into a folder named images.

Legacy layout methods - Learn web development
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.

Multiple-column layout - Learn web development
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.

Supporting older browsers - Learn web development
if you remove your stylesheet, does your content make sense?

Using your new knowledge - Learn web development
you should now have a good general understanding of css, and be able to understand much of what is happening in a stylesheet.

Fundamental text and font styling - Learn web development
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.

How to structure a web form - Learn web development
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.

Dealing with files - Learn web development
previous overview: getting started with the web next a website consists of many files: text content, code, stylesheets, media content, and so on.

The web and web standards - Learn web development
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.

Document and website structure - Learn web development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body> <!-- here is our main header that is used across all t...

Getting started with HTML - Learn web development
note: as you start to learn more about html, consider learning the basics of cascading style sheets, or css.

What’s in the head? Metadata in HTML - Learn web development
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 tim...

HTML table advanced features and accessibility - Learn web development
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.

Manipulating documents - Learn web development
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.

Third-party APIs - Learn web development
this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library.

What is JavaScript? - Learn web development
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.

Aprender y obtener ayuda - Learn web development
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!

Framework main features - Learn web development
with the addition of some helper modules, you can style your framework apps in sass or less, or transpile your css stylesheets with postcss.

Beginning our React todo list - Learn web development
we're not going to write per-component stylesheets, so first delete the app.css import from the top of app.js.

Deployment and next steps - Learn web development
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.

Getting started with Svelte - Learn web development
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.

Styling Vue components with CSS - Learn web development
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.

Accessibility API cross-reference
a spreadsheet.

Accessibility Features in Firefox
also, usercontent.css allows users knowledgeable about cascading style sheets to customize the appearance of all pages that are displayed.

Accessibility information for UI designers and developers
ng: set line height (leading) to at least 1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface.

Embedding API for Accessibility
users may want similarity abilities with applets, background images, style sheets, etc.

Mozilla's Section 508 Compliance
however, the visited link appearance can be altered via a user style sheet.

Accessible Toolkit Checklist
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.

A bird's-eye view of the Mozilla framework
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 registration
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.

Installing headers using EXPORTS
here is an example <tt>makefile.in</tt> which has both c++ and idl headers: module = content xpidl_module = content_base exports = \ nsicontent.h \ nsidocument.h \ nsistylesheet.h \ $(null) xpidlsrcs = \ nsicontentpolicy.idl \ nsiselectioncontroller.idl \ $(null) include $(topsrcdir)/config/rules.mk ...

Contributing to the Mozilla code base
we'll be integrating some information from these pages soon, but until then you may find them interesting in their current form: a guide to learning the mozilla codebase a beginner's guide to spidermonkey, mozilla's javascript engine mozilla platform development cheatsheet (archive.org) ...

overflow-clip-box-block
note that this property is activated by default only in the ua stylesheet and chrome contexts.

overflow-clip-box-inline
note that this property is activated by default only in the ua stylesheet and chrome contexts.

overflow-clip-box
note that this property is activated by default only in the ua stylesheet and chrome contexts.

Gecko Chrome
ua stylesheets.) chrome-only events referencethis page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.

How Mozilla determines MIME Types
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.

source-editor.jsm
constant value description sourceeditor.modes.css "css" cascading style sheet.

Creating localizable web applications
cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure.

Fonts for Mozilla's MathML engine
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.

Fonts for Mozilla 2.0's MathML engine
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.

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

Mozilla MathML Project
create mathml documents authoring mathml editors converters stylesheets original document information author(s): roger b.

Mozilla Quirks Mode Behavior
(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.

Gecko Roles
role_propertypage represents a property sheet.

AT APIs Support
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.

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

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

nsIAccessibleRole
role_propertypage 38 represents a property sheet.

nsIFeedResult
stylesheet nsiuri an xslt stylesheet available to transform the source of the feed.

nsIFileView
example <?xml version="1.0" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview relies on the treecols section --> <tr...

Building an Account Manager Extension
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://messenger/skin/accountmanage.css" type="text/css"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="parent.onpanelloaded('am-devmo-account.xul');"> <script type="application/javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chrome://example@mozilla.org/content/am-devmo-account.

nsIWebProgressListener
(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.

nsIXSLTException
stylenode nsidomnode the node in the stylesheet that triggered the exception.

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

Building a Thunderbird extension 6: Adding JavaScript
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.

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
pre-requisites making a theme for thunderbird requires knowledge of cascading stylesheets (css), probably xbl, and some graphic design and aesthetic skill (...or maybe not).

Working with windows in chrome code
todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.lengt...

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

DOM Inspector FAQ - Firefox Developer Tools
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.

Introduction to DOM Inspector - Firefox Developer Tools
alternatively, when used in conjunction with the style sheets viewer, the css rules viewer lists all recognized rules from that style sheet in order.

Network request list - Firefox Developer Tools
cause:js cause:stylesheet cause:img transferred shows resources having a specific transferred size or a transferred size close to the one specified.

Edit Shape Paths in CSS - Firefox Developer Tools
you can then copy these values back into your stylesheet to create the new, tweaked shape path.

Edit fonts - Firefox Developer Tools
the descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet.

Console messages - Firefox Developer Tools
if the resource is a stylesheet, you will see the css rules, etc.

CSSStyleDeclaration.getPropertyPriority() - Web APIs
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.

CSSStyleDeclaration.getPropertyValue() - Web APIs
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.

CSSStyleDeclaration.parentRule - Web APIs
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.

CSSStyleDeclaration.removeProperty() - Web APIs
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.

CSSStyleRule.style - Web APIs
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
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.

CSSValue.cssValueType - Web APIs
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.

CSS Object Model (CSSOM) - Web APIs
reference animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule 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,...

Using the CSS Painting API - Web APIs
to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.

Using the CSS Typed Object Model - Web APIs
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.

DocumentOrShadowRoot - Web APIs
documentorshadowroot.stylesheetsread only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.

Document Object Model (DOM) - Web APIs
the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth.

Element.classList - Web APIs
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.

ElementCSSInlineStyle.style - Web APIs
le leaving other inline style values untouched elt.style.color = "blue"; getting style information the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets.

FontFace.stretch - Web APIs
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.

FontFace.style - Web APIs
syntax var style = fontface.style; fontface.style = value; value a cssomstring containing the descriptors defined in the style sheet's @font-face rule.

FontFace.unicodeRange - Web APIs
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.

FontFace.variant - Web APIs
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.

FontFace.weight - Web APIs
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.

HTMLLinkElement.rel - Web APIs
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.

HTMLStyleElement.media - Web APIs
example <!doctype html> <html> <head> <link id="linkedstyle" rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living standar...

HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
for msislayoutoptimalforplayback to be true, avoid the following: video elements with cascading style sheets (css) outlines set.

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
gdk_key_screensaver (0x1008ff2d) qt::key_screensaver (0x010000ba) "launchspreadsheet" [4] the spreadsheet key.

KeyboardEvent.key - Web APIs
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).

KeyframeEffect.getKeyframes() - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.

KeyframeEffect.setKeyframes() - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.

Node.nodeType - Web APIs
node.processing_instruction_node 7 a processinginstruction of an xml document, such as <?xml-stylesheet … ?>.

PaintWorklet - Web APIs
<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.

PaymentRequest.shippingOption - Web APIs
this demotrates synchrounous and asynchronous updates to a payment sheet.

ProcessingInstruction - Web APIs
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 ?>).

Push API - Web APIs
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.

ShadowRoot - Web APIs
documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.

Storage Access API - Web APIs
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.

Keyframe Formats - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.

Using the Web Animations API - Web APIs
with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior.

Window: 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.

Window: load event - Web APIs
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

Privileged features - Web APIs
on mac systems, dialog windows have a different window border and they may get turned into a sheet.

Browser Differences - Web APIs
ie 5.0 and 5.5 (both windows) supported only the working draft of xslt, and thus are not compatible with xslt 1.0 stylesheets.

ARIA: application role - Accessibility
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.

ARIA: gridcell role - Accessibility
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.

Web accessibility for seizures and physical reactions - Accessibility
abilitynet's factsheet (november 2015) computers and epilepsy (pdf) describes more of the details on refresh rates.

Developer guides
css learning area cascading style sheets (css) is a stylesheet language used to define the presentation of a document written in html.

<b>: The Bring Attention To element - HTML: Hypertext Markup Language
further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.

<button>: The Button element - HTML: Hypertext Markup Language
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 { }.

<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
the html <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

<input type="search"> - HTML: Hypertext Markup Language
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).

<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
default-style sets the name of the default css style sheet set.

Data URLs - HTTP
also, for csv data (mime type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet.

Reason: CORS request not HTTP - HTTP
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.

HTTP caching - HTTP
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.

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.

Accept - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.

CSP: script-src - HTTP
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.

CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".

Link prefetching FAQ - HTTP
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?

HTTP
web pages today very commonly load cross-site resources, including css stylesheets, images, scripts, and other resources.

CSS Houdini
every element and style sheet rule has a style map which is accessible via its stylepropertymap.

Assertions - JavaScript
types the following section is also duplicated on this cheatsheet.

Character classes - JavaScript
types the following table is also duplicated on this cheatsheet.

Groups and ranges - JavaScript
types the following section is also duplicated on this cheatsheet.

Quantifiers - JavaScript
types the following table is also duplicated on this cheatsheet.

Unicode property escapes - JavaScript
syntax the following section is also duplicated on this cheatsheet.

<maction> - MathML
class, id, style provided for use with stylesheets.

<math> - MathML
class, id, style provided for use with stylesheets.

<menclose> - MathML
attributes class, id, style provided for use with stylesheets.

<merror> - MathML
attributes class, id, style provided for use with stylesheets.

<mfenced> - MathML
attributes class, id, style provided for use with stylesheets.

<mfrac> - MathML
class, id, style provided for use with stylesheets.

<mglyph> - MathML
class, id, style provided for use with stylesheets.

<mi> - MathML
attributes class, id, style provided for use with stylesheets.

<mlabeledtr> - MathML
attributes class, id, style provided for use with stylesheets.

<mmultiscripts> - MathML
attributes class, id, style provided for use with stylesheets.

<mn> - MathML
attributes class, id, style provided for use with stylesheets.

<mo> - MathML
class, id, style provided for use with stylesheets.

<mover> - MathML
class, id, style provided for use with stylesheets.

<mpadded> - MathML
attributes class, id, style provided for use with stylesheets.

<mphantom> - MathML
attributes class, id, style provided for use with stylesheets.

<mroot> - MathML
attributes class, id, style provided for use with stylesheets.

<mrow> - MathML
attributes class, id, style provided for use with stylesheets.

<ms> - MathML
attributes class, id, style provided for use with stylesheets.

<mspace> - MathML
attributes class, id, style provided for use with stylesheets.

<msqrt> - MathML
attributes class, id, style provided for use with stylesheets.

<msub> - MathML
attributes class, id, style provided for use with stylesheets.

<msubsup> - MathML
attributes class, id, style provided for use with stylesheets.

<msup> - MathML
attributes class, id, style provided for use with stylesheets.

<mtable> - MathML
alignmentscope unimplemented class, id, style provided for use with stylesheets.

<mtd> - MathML
attributes class, id, style provided for use with stylesheets.

<mtext> - MathML
attributes class, id, style provided for use with stylesheets.

<mtr> - MathML
attributes class, id, style provided for use with stylesheets.

<munder> - MathML
class, id, style provided for use with stylesheets.

<munderover> - MathML
class, id, style provided for use with stylesheets.

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
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">).

Critical rendering path - Web Performance
the browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references.

Performance fundamentals - Web Performance
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).

Lazy loading - Web Performance
<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.

Optimizing startup performance - Web Performance
don't include scripts or stylesheets that don't participate in the critical path in your startup html file.

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

Mobile first - Progressive web apps (PWAs)
i> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" href="#bottom">jump to menu</a> <h1>my article</h1> </header> <div class="main"> <p>lorem ipsum … </p> <a id="bottom" href="#top">back to top</a> </div> </article> <button id="install-btn">install</button> default mobile css for the css, i first added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout.

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

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
you may specify svg in styles either within the same document or an external style sheet.

class - SVG: Scalable Vector Graphics
an element's class name serves two key roles: as a style sheet selector, for when an author assigns style information to a set of elements.

clip-rule - SVG: Scalable Vector Graphics
/> </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.

cursor - SVG: Scalable Vector Graphics
as a presentation attribute, it also can be used as a property directly inside a css stylesheet, see css cursor for further information.