CSSStyleRule.styleMap - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...And 5 more matches

column-rule-style - CSS: Cascading Style Sheets
the column-rule-style css property sets the style of the line drawn between columns in a multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the column-rule-style css property sets the style of the line drawn between columns in a multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the column-rule-style css property sets the style of the line drawn between columns in a multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 4 more matches

border-block-end-style - CSS: Cascading Style Sheets
the border-block-end-style css property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...rder-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-end-style: dashed; border-block-end-style: dotted; border-block-end-style: groove; related properties are border-block-start-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall el...
...tyle: groove; related properties are border-block-start-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. ...
...And 2 more matches

border-block-start-style - CSS: Cascading Style Sheets
the border-block-start-style css property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...rder-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove; related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toal...
...-style: groove; related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. ...
...And 2 more matches

border-inline-start-style - CSS: Cascading Style Sheets
the border-inline-start-style css property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...rder-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element. ...
...style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete values <'border-style'> the line style of the border. see border-style. ...
...And 2 more matches

list-style-position - CSS: Cascading Style Sheets
the list-style-position css property sets the position of the ::marker relative to a list item. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand list-style. note: this property is applied to list items, i.e., elements with display: list-item;. by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
... note: this property is applied to list items, i.e., elements with display: list-item;. by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
...ems. note that there is variance among browsers regarding behavior when a block element is placed first within a list element declared as list-style-position: inside. chrome and safari both place this element on the same line as the marker box, whereas firefox, internet explorer, and opera place it on the next line. for more information on this, see bug 36854. syntax /* keyword values */ list-style-position: inside; list-style-position: outside; /* global values */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; the list-style-position property is specified as one of the keyword values listed below. values inside the ::marker is the first element among the list item's contents. outside the ::marker is outside the principal block box. forma...
...And 2 more matches

border-block-style - CSS: Cascading Style Sheets
the border-block-style css property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-block-style: dashed; border-block-style: dotted; border-block-style: groove; the border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial va...
...lock-style: groove; the border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. ...
... editor's draft initial definition ...
... editor's draft initial definition ...

border-inline-end-style - CSS: Cascading Style Sheets
the border-inline-end-style css property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...rder-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-end-style: dashed; border-inline-end-style: dotted; border-inline-end-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-start-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall ...
...style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-start-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. ...
...le. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification. editor's draft initial definition ...

border-inline-style - CSS: Cascading Style Sheets
the border-inline-style css property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-inline-style: dashed; border-inline-style: dotted; border-inline-style: groove; the border style in the other dimension can be set with border-block-style, which sets border-block-start-style, and border-block-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial valuenonea...
...-inline-style: groove; the border style in the other dimension can be set with border-block-style, which sets border-block-start-style, and border-block-end-style. syntax values <'border-style'> the line style of the border. see border-style. ...
... editor's draft initial definition ...
... editor's draft initial definition ...

text-decoration-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an html tag, like <del> or <s>. as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. ...
...e text has been deleted, authors are encouraged to denote this meaning using an html tag, like <del> or <s>. as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. syntax /* keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: unset; values solid draws a single line. double draws a double line. dotted draws a dotted line. dashed draws a dashed line. wavy draws a wavy line...
...no line. use text-decoration-line: none instead. formal definition initial valuesolidapplies toall elements. ...
...s to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax solid | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment css text decoration module level 3the definition of 'text-decoration-style' in tha...

<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:stylesheet> element (or the equivalent <xsl:transform> element) is the outermost element of a stylesheet. namespace declaration a pseudo-attribute required to identify the document as an xslt stylesheet. typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform". syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet. optional attributes exclude-result-prefixes specifies any namespace used in this document that shou...
...-mode defines the default value for the mode attribute of all <xsl:template> and <xsl:apply-templates> elements within its scope. default-validation defines the default value of the validation attribute of all relevant instructions appearing within its scope. expand-text determines whether descendant text nodes of the element are treated as text value templates. ...
... attribute of all <xsl:template> and <xsl:apply-templates> elements within its scope. default-validation defines the default value of the validation attribute of all relevant instructions appearing within its scope. expand-text determines whether descendant text nodes of the element are treated as text value templates. id specifies an id for this stylesheet. this is most often used when the stylesheet is embedded in another xml document. input-type-annotations specifies whether type annotations are stripped from the element so the same results are produced whether the source documents have been validated against a schema or not. use-when determines whether the element and all the nodes that have it as ancestor are excluded from the stylesheet. xpath-default-namespace specifies the n...
...re produced whether the source documents have been validated against a schema or not. use-when determines whether the element and all the nodes that have it as ancestor are excluded from the stylesheet. xpath-default-namespace specifies the namespace that will be used if the element name is unprefixed or an unprefixed type name within an xpath expression. type required outermost element of stylesheet. specifications specification status comment xslt 3.0the definition of '<xsl:stylesheet>' in that specification. recommendation added the attributes default-mode, expand-text, and use-when. xslt 2.0 added the attributes xpath-default-namespace, default-validation, default-collation, and input-type-annotations and made all attributes except ...

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

list-style-image - CSS: Cascading Style Sheets
the list-style-image css property sets an image to be used as the list item marker. it is often more convenient to use the shorthand list-style. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: this property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
...ve examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: this property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. syntax /* keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; values <url> location of image to use as the marker. none specifies that no image is used as the marker. if this value is set, the marker defined in list-style-type will be used instead. formal definition initial va...
...image is used as the marker. if this value is set, the marker defined in list-style-type will be used instead. formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification. working draft extends support to any <image> data type. css level 2 (revision 1)the definition of 'list-style-image' in that specification. r...

text-emphasis-style - CSS: Cascading Style Sheets
the text-emphasis-style css property sets the appearance of emphasis marks. it can also be set, and reset, using the text-emphasis shorthand. /* initial value */ text-emphasis-style: none; /* no emphasis marks */ /* <string> values */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25b2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* should not be used. ...
...also be set, and reset, using the text-emphasis shorthand. /* initial value */ text-emphasis-style: none; /* no emphasis marks */ /* <string> values */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25b2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* should not be used. it may be computed to or rendered as 'f' only */ /* keyword values */ text-emphasis-style: filled; text-emphasis-style: open; text-emphasis-style: dot; text-emphasis-style: circle; text-emphasis-style: double-circle; text-emphasis-style: triangle; text-emphasis-style: filled sesame; text-emphasis-style: open sesame; /* global values */ text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-style: unset; syntax values none no emphasis marks. filled the shap...
...ld not specify more than one character in <string>. the ua may truncate or ignore strings consisting of more than one grapheme cluster. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification. candidate recommendation initial definition ...

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

StyleSheet.parentStyleSheet - Web APIs
the parentstylesheet property of the stylesheet interface returns the style sheet, if any, that is including the given style sheet. syntax objref = stylesheet.parentstylesheet example // find the top level stylesheet if (stylesheet.parentstylesheet) { sheet = stylesheet.parentstylesheet; } else { sheet = stylesheet; } notes this property returns null if the current stylesheet is a top-level stylesheet or if stylesheet inclusion is not supported. specifications specification status comment css object model (cssom)the definition of 'stylesheet: parentstylesheet' in that specification. working draft ...

CSS Counter Styles - CSS: Cascading Style Sheets
css counter styles is a module of css that lets you define your own counter styles. reference properties counter-increment counter-reset at-rules @counter-style system additive-symbols negative prefix suffix range pad speak-as fallback guides using css counters describes how to use counters to number any html element or to perform complex counting. specifications specification status comment css counter styles level 3 candidate recommendation initial definition. ...

filter - CSS: Cascading Style Sheets
age. the value of radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
... to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
...into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
...And 59 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. a rule is a selector and a declaration block. a declaration block is a group of declarations. a declaration is a property and a value. ...
... rule applies to matched elements. “cascaded” value for property + element: if 0 rules matching the element have the property: some properties inherit and some properties use initial value. inherited: 'font-size', 'color', etc. ...
... rule applies to matched elements. “cascaded” value for property + element: if 0 rules matching the element have the property: some properties inherit and some properties use initial value. inherited: 'font-size', 'color', etc. “reset”: 'border', 'background', etc. ...
...And 45 more matches

Applying styles and colors - Web APIs
« previousnext » in the chapter about drawing shapes, we used only the default line and fill styles. here we will explore the canvas options we have at our disposal to make our drawings a little more attractive. you will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. colors up until now we have only seen methods of the drawing context. if we want to apply colors to a shape, there are two important properties we can use: fillstyle and strokestyle. fillstyle = color sets the style used when filling shapes. strokestyle = color sets the style for shapes' outlines. color is a string representing a css <color>, a gradient object, or a pattern object. we'll look at gradient and pattern objects later. by default, the stro...
...fillstyle and strokestyle. fillstyle = color sets the style used when filling shapes. strokestyle = color sets the style for shapes' outlines. color is a string representing a css <color>, a gradient object, or a pattern object. we'll look at gradient and pattern objects later. by default, the stroke and fill color are set to black (css color value #000000). note: when you set the strokestyle and/or fillstyle property, the new value becomes the default for all shapes being drawn from then on. for every shape you want in a different color, you will need to reassign the fillstyle or strokestyle property. the valid strings you can enter should, according to the specification, be css <color> values. each of the following examples describe the same color. ...
...the resulting image should look something like the screenshot. there is nothing too spectacular happening here. ...
...And 34 more matches

Mozilla Style System Documentation
see also the style techtalk for more complete although less detailed documentation. style context management a style context (class nsstylecontext, currently also interface nsistylecontext although the interface should go away when all of the style systems can be moved back into the layout dll) represents the style data for a css formatting object. in the layout system, these formatting objects are described as frames (interface nsiframe), although a pair of frames represents table formatting objects. the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. ...
...ystem, these formatting objects are described as frames (interface nsiframe), although a pair of frames represents table formatting objects. the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. ...
...matting objects. the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. (mozilla has a bunch of its pseudo-elements that are not in the css specification.) we also create style contexts for some things that are not css formatting objects: text nodes and placeholder frames. these three types of style contexts correspond to the three ways of creating a style context: nsiprescontext::resolvestylecontextfor, nsiprescontext::resolvepseudostylecontextfor, and.nsiprescontext::resolvestylecontextfornonelement there is also a fourth method, nsiprescontext::probepseudostylecontextfor, which creates a style context only if there are style rules that match the pseudo-element. this is useful for the pseu...
...And 32 more matches

system - CSS: Cascading Style Sheets
if the algorithm specified in the system descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fallback system provided. ...
...es */ system: cyclic; system: numeric; system: alphabetic; system: symbolic; system: additive; system: fixed; /* combined values */ system: fixed 3; system: extends decimal; this may take one of three forms: one of the keyword values cyclic, numeric, alphabetic, symbolic, additive, or fixed. the keyword value fixed along with an integer. the keyword value or extends along with a @counter-style name. cyclic cycles through the list of symbols provided. once the end of the list of symbols is reached, it will loop back to the beginning and start over. this system is useful for simple bullet styles with just one symbol, or for styles having multiple symbols. at least one symbol must be specified in the symbols descriptor, or the counter style is not valid. fixed defines a finite ...
...also an optional <integer> can be specified after the the system, as the value of the first symbol. if this integer is omitted, value of the first integer is taken as 1. symbolic cycles through the provided list of symbols. ...
...And 24 more matches

CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the style-src policy: content-security-policy: style-src <source>; content-security-policy: style-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal...
......
...ce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inline' which could still be set for older browsers without nonce support. '<hash-algorithm>-<base64-value>' a sha256, sha384 or sha512 hash of scripts or styles. the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace. see unsafe inline script for an example. in csp 2.0, this applie...
...And 23 more matches

Using the Stylesheet Service - Archive of obsolete content
the examples in this document are all written in javascript using xpcom. using the api the string "chrome://myext/content/myext.css" in the examples below is just an example. replace it with the url of the css file you want to load. you can replace user_sheet with agent_sheet or author_sheet, depending where in the css cascade you want the sheet to be placed. ...
... the examples in this document are all written in javascript using xpcom. using the api the string "chrome://myext/content/myext.css" in the examples below is just an example. replace it with the url of the css file you want to load. you can replace user_sheet with agent_sheet or author_sheet, depending where in the css cascade you want the sheet to be placed. ...
...cument are all written in javascript using xpcom. using the api the string "chrome://myext/content/myext.css" in the examples below is just an example. replace it with the url of the css file you want to load. you can replace user_sheet with agent_sheet or author_sheet, depending where in the css cascade you want the sheet to be placed. see the css specification for more details. ...
...And 18 more matches

Box-shadow generator - CSS: Cascading Style Sheets
et" data-topic="height" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute...
...s.max - this.min; var offset = this.pointer.clientwidth + 4; // border width * 2 if (pos < 0) pos = 0; if (pos > width) pos = width; var value = pos * delta / width | 0; var precision = value % this.step; value = value - precision + this.min; if (precision > this.step / 2) value = value + this.step; if (this.snap) pos = (value - this.min) * width / delta; this.pointer.style.left = pos - offset/2 + "px"; this.value = value; node.setattribute('data-value', value); notify.call(this); } var setvalue = function setvalue(topic, value) { var slider = sliders[topic]; if (value > slider.max || value < slider.min) return; var delta = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (val...
...ata-value', value); notify.call(this); } var setvalue = function setvalue(topic, value) { var slider = sliders[topic]; if (value > slider.max || value < slider.min) return; var delta = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove"...
...And 18 more matches

font - CSS: Cascading Style Sheets
that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values. constituent properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, t...
...lect a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value. line-height must immediately follow font-size, preceded by "/", like this: "16px/3" font-family must be the last v...
... <'font-variant'> see the font-variant css property. <'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the font-family css property. ...
...And 17 more matches

CSSStyleSheet - Web APIs
the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet. it inherits properties and methods from its parent, stylesheet. a stylesheet consists of a collection of cssrule objects representing each of the rules in the stylesheet. the rules are contained in a cssrulelist, which can be obtained from the stylesheet's cssrules property. for example, one rule might be a cssstylerule object containing a style such as: h1, h2 { font-size: 16pt; } another rule might be an at-rule such as @import or @media, and so forth. see the notes section for the various ways a cssstylesheet object can be obtained. properties inherits properties from its parent, stylesheet. cssrules read only returns a live cssrulel...
... a style such as: h1, h2 { font-size: 16pt; } another rule might be an at-rule such as @import or @media, and so forth. see the notes section for the various ways a cssstylesheet object can be obtained. properties inherits properties from its parent, stylesheet. cssrules read only returns a live cssrulelist which maintains an up-to-date list of the cssrule objects that comprise the stylesheet. this is normally used to access individual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.length-1 to add or remove items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods. ...
...et. cssrules read only returns a live cssrulelist which maintains an up-to-date list of the cssrule objects that comprise the stylesheet. this is normally used to access individual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.length-1 to add or remove items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods. ownerrule read only if this stylesheet is imported into the document using an @import rule, the ownerrule property returns the corresponding cssimportrule; otherwise, this property's value is null. methods inherits methods from its parent, stylesheet. ...
...And 16 more matches

Introducing the CSS Cascade - CSS: Cascading Style Sheets
this article explains what the cascade is, the order in which css declarations cascade, and how this affects you, the web developer. which css entities participate in the cascade only css declarations, that is property/value pairs, participate in the cascade. this means that at-rules containing entities other than declarations, such as a @font-face rule containing descriptors, don't participate in the cascade. ...
...e, only the at-rule as a whole is selected via the cascade algorithm. finally, note that @import and @charset obey specific algorithms and aren't affected by the cascade algorithm. origin of css declarations the css cascade algorithm's job is to select css declarations in order to determine the correct values for css properties. ...
... whole is selected via the cascade algorithm. finally, note that @import and @charset obey specific algorithms and aren't affected by the cascade algorithm. origin of css declarations the css cascade algorithm's job is to select css declarations in order to determine the correct values for css properties. ...
...And 16 more matches

Adding Style Sheets - Archive of obsolete content
« previousnext » we have hardly modified the look of the elements we have created so far. xul uses css (cascading style sheets) to customize elements. style sheets a style sheet is a file which contains style information for elements. it was originally designed for html elements but can be applied to xul elements also, or to any xml for that matter. the style sheet contains information such as the fonts, colors, borders, and size of elements. mozilla applies a default style sheet to each xul window. in many cases, it will suffice to leave the defaults as is. other times, however, you will want to provide a custom style sheet. in general, you will associate a single style sheet with each xul file. you can place a style sheet anywhere you wish. if your xul file is stored remotely...
...this method has the disadvantage because it means your application will not be themeable. the second method involves placing your files as part of a theme. ...
...want to provide a custom style sheet. in general, you will associate a single style sheet with each xul file. you can place a style sheet anywhere you wish. if your xul file is stored remotely and accessed via an http url, you can store the style sheet remotely as well. if you are creating a xul package to be installed as part of the chrome system, you have two choices. first, you could store the style sheet in the same directory as the xul file. this method has the disadvantage because it means your application will not be themeable. the second method involves placing your files as part of a theme. ...
...And 15 more matches

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

CSSStyleSheet.insertRule() - Web APIs
the default is 0. ...
...the default is 0. ...
...the default is 0. ...
...And 13 more matches

CSS reference - CSS: Cascading Style Sheets
use this css reference to browse an alphabetical index of all of the standard css properties, pseudo-classes, pseudo-elements, data types, and at-rules. you can also browse key css concepts and a list of selectors organized by type. also included is a brief dom-css / cssom reference. basic rule syntax style rule syntax style-rule ::= selectors-list { properties-list } ... ...
...e-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] see the index of selectors, pseudo-classes, and pseudo-elements below. the syntax for each specified value depends on the data type defined for each specified property. style rule examples strong { color: red; } div.menu-bar li:hover > ul { display: block; } for a beginner-level introduction to the syntax of selectors, see our guide on css selectors. be aware that any syntax error in a rule definition invalidates the entire rule. invalid rules are ignored by the browser. note that css rule definitions are entirely (ascii) text-based, whereas dom-css / cssom (t...
... whereas dom-css / cssom (the rule management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...And 13 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
ng_area.clientwidth; if (x > size) x = size; if (y > size) y = size; if (x < 0) x = 0; if (y < 0) y = 0; var value = 100 - (y * 100 / size) | 0; var saturation = x * 100 / size | 0; if (this.picker_mode === 'hsv') this.color.sethsv(this.color.hue, saturation, value); if (this.picker_mode === 'hsl') this.color.sethsl(this.color.hue, saturation, value); this.color_picker.style.left = x + 'px'; this.color_picker.style.top = y + 'px'; this.updatealphagradient(); this.updatepreviewcolor(); this.notify('value', value); this.notify('lightness', value); this.notify('saturation', saturation); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); notify(this.
...********/ colorpicker.prototype.updatepickerposition = function updatepickerposition() { var size = this.picking_area.clientwidth; var value = 0; if (this.picker_mode === 'hsv') value = this.color.value; if (this.picker_mode === 'hsl') value = this.color.lightness; var x = (this.color.saturation * size / 100) | 0; var y = size - (value * size / 100) | 0; this.color_picker.style.left = x + 'px'; this.color_picker.style.top = y + 'px'; }; colorpicker.prototype.updatesliderposition = function updatesliderposition(elem, pos) { elem.style.left = pos + 'px'; }; colorpicker.prototype.updatehuepicker = function updatehuepicker() { var size = this.hue_area.clientwidth; var pos = (this.color.hue * size / 360 ) | 0; this.hue_picker.style.left = pos + 'px'; }; co...
...= pos + 'px'; }; colorpicker.prototype.updatehuepicker = function updatehuepicker() { var size = this.hue_area.clientwidth; var pos = (this.color.hue * size / 360 ) | 0; this.hue_picker.style.left = pos + 'px'; }; colorpicker.prototype.updatealphapicker = function updatealphapicker() { var size = this.alpha_mask.clientwidth; var pos = (this.color.a * size) | 0; this.alpha_picker.style.left = pos + 'px'; }; /*************************************************************************/ // update background colors /*************************************************************************/ colorpicker.prototype.updatepickerbackground = function updatepickerbackground() { var nc = new color(this.color); nc.sethsv(nc.hue, 100, 100); this.picking_area.style.backgroundc...
...And 13 more matches

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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation. it correspo...
...ing-mode, direction, and text-orientation. related properties are border-block-start, border-block-end, and border-inline-start, which define the other borders of the element. ...
...s are border-block-start, border-block-end, and border-inline-start, which define the other borders of the element. ...
...And 13 more matches

Color picker tool - CSS: Cascading Style Sheets
ng_area.clientwidth; if (x > size) x = size; if (y > size) y = size; if (x < 0) x = 0; if (y < 0) y = 0; var value = 100 - (y * 100 / size) | 0; var saturation = x * 100 / size | 0; if (this.picker_mode === 'hsv') this.color.sethsv(this.color.hue, saturation, value); if (this.picker_mode === 'hsl') this.color.sethsl(this.color.hue, saturation, value); this.color_picker.style.left = x - picker_offset + 'px'; this.color_picker.style.top = y - picker_offset + 'px'; this.updatealphagradient(); this.updatepreviewcolor(); this.notify('value', value); this.notify('lightness', value); this.notify('saturation', saturation); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.c...
...icker.prototype.updatepickerposition = function updatepickerposition() { var size = this.picking_area.clientwidth; var value = 0; var offset = 5; if (this.picker_mode === 'hsv') value = this.color.value; if (this.picker_mode === 'hsl') value = this.color.lightness; var x = (this.color.saturation * size / 100) | 0; var y = size - (value * size / 100) | 0; this.color_picker.style.left = x - offset + 'px'; this.color_picker.style.top = y - offset + 'px'; }; colorpicker.prototype.updatesliderposition = function updatesliderposition(elem, pos) { elem.style.left = math.max(pos - 3, -2) + 'px'; }; colorpicker.prototype.updatehuepicker = function updatehuepicker() { var size = this.hue_area.clientwidth; var offset = 1; var pos = (this.color.hue * size / 360 ) | ...
...'px'; this.color_picker.style.top = y - offset + 'px'; }; colorpicker.prototype.updatesliderposition = function updatesliderposition(elem, pos) { elem.style.left = math.max(pos - 3, -2) + 'px'; }; colorpicker.prototype.updatehuepicker = function updatehuepicker() { var size = this.hue_area.clientwidth; var offset = 1; var pos = (this.color.hue * size / 360 ) | 0; this.hue_picker.style.left = pos - offset + 'px'; }; colorpicker.prototype.updatealphapicker = function updatealphapicker() { var size = this.alpha_area.clientwidth; var offset = 1; var pos = (this.color.a * size) | 0; this.alpha_picker.style.left = pos - offset + 'px'; }; /*************************************************************************/ // update background colors /*********************...
...And 12 more matches

StylePropertyMapReadOnly - Web APIs
the stylepropertymapreadonly interface of the the css typed object model api provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration. retrieve an instance of this interface using element.computedstylemap(). properties stylepropertymapreadonly.size returns an unsinged long integer containing the size of the stylepropertymapreadonly object. methods stylepropertymapreadonly.entries() returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). stylepropertymapreadonly.foreach() executes a provided function once for each element of stylepropertymapreadonly. ...
.... methods stylepropertymapreadonly.entries() returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). stylepropertymapreadonly.foreach() executes a provided function once for each element of stylepropertymapreadonly. stylepropertymapreadonly.get() returns the value of the specified property. stylepropertymapreadonly.getall() returns an array of cssstylevalue objects containing the values for the provided property. stylepropertymapreadonly.has() indicates whether the specified property is in the stylepropertymapreadonly object. ...
...cutes a provided function once for each element of stylepropertymapreadonly. stylepropertymapreadonly.get() returns the value of the specified property. stylepropertymapreadonly.getall() returns an array of cssstylevalue objects containing the values for the provided property. stylepropertymapreadonly.has() indicates whether the specified property is in the stylepropertymapreadonly object. stylepropertymapreadonly.keys() returns a new array iterator containing the keys for each item in stylepropertymapreadonly. stylepropertymapreadonly.values() returns a new array iterator containing the values for each index in the stylepropertymapreadonly object. ...
...And 11 more matches

border - CSS: Cascading Style Sheets
the border shorthand css property sets an element's border. it sets the values of border-width, border-style, and border-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the values of border-width, border-style, and border-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below. the order of the values does not matter. no...
... <color> sets the color of the border. defaults to currentcolor if absent. see border-color. ...
...And 11 more matches

Variable fonts guide - CSS: Cascading Style Sheets
they let you access all the variations contained in a given font file via css and a single @font-face reference. this article will give you all you need to know to get you started using variable fonts. warning: in order to use variable fonts on your operating system, you need to make sure that it is up to date. ...
...onts in web pages or the firefox developer tools. variable fonts: what they are, and how they differ to better understand what's different about variable fonts, it is worth reviewing what non-variable ones are like and how they compare. standard (or static) fonts in the past, a typeface would be produced as a number of individual fonts, and each font would represent one specific width/weight/style combination. so you would have separate files for 'roboto regular', 'roboto bold', and 'roboto bold italic' — meaning that you could end up with 20 or 30 different font files to represent a complete typeface (it could be several times that for a large typeface that has different widths as well). in such a scenario, in order to use a typeface for typical use on a site for body copy you would ne...
...ing downloaded (usually around 20k or more per file). variable fonts with a variable font, all of those permutations can be contained in a single file. that file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately. this allows for common typographic techniques such as setting different size headings in different weights for better readability at each size, or using a slightly narrower width for data-dense displays. for comparison, it is typical in a typographic system for a magazine to use 10–15 or...
...And 10 more matches

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. individual css property values are accessed through apis provided by the object, or by indexing with css property names. syntax var style = window.getcomputedstyle(element [, pseudoelt]); element the element for which to get the computed style. pseudoeltoptional a string specifying the pseudo-element to match. omitted (or null) for real elements. the returned style is a live cssstyledeclaration object, which updates automatically when the element's styles are changed. throws typeerror if the passed object is not an element or the pseudoelt is not a valid pseudo-element sel...
...omatically when the element's styles are changed. throws typeerror if the passed object is not an element or the pseudoelt is not a valid pseudo-element selector or is ::part() or ::slotted(). note: valid pseudo-element selector refers to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the text content of the <p>. ...
...supported. examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the text content of the <p>. html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property. however, the two objects have...
...And 9 more matches

-moz-image-rect - CSS: Cascading Style Sheets
tage>, of the sub-image within the specified image. left the left edge, specified as an <integer> or <percentage>, of the sub-image within the specified image. description this property allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content. this works very similarly to the -moz-image-region property, which is used with the list-style-image property to use parts of an image as the bullets in lists. however, this can be used for any css background. the syntax for the rectangle is similar to the rect() function generating a <<shape>()> css type. all four values are relative to the upper left corner of the image. examples this example loads an image and uses it in four segments to draw the firefox logo in four <div> blocks. cl...
...nerating a <<shape>()> css type. all four values are relative to the upper left corner of the image. examples this example loads an image and uses it in four segments to draw the firefox logo in four <div> blocks. clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks. css the css defines one container style, then the styles for the four boxes that comprise the complete image. the container looks like this: #container { width:267px; height:272px; top:100px; left:100px; position:absolute; font-size:16px; text-shadow:white 0px 0px 6px; text-align:center; } then the four boxes defining the segments of the image are defined. let's look at them one at a time. #box1 { background-image...
...these four segments are all contained within a larger <div> block whose primary purpose is to re...
...And 9 more matches

Border-image generator - CSS: Cascading Style Sheets
ooltip2[data-info='bottom'] { top: -10px; right: -50px; } #subject .tooltip2[data-info='left'] { bottom: -30px; right: -20px; } /* preview */ #preview { width: 30%; height: 50%; background-color: #fff; text-align: center; overflow: hidden; position: absolute; z-index: 10; left: 60%; top: 15%; border-radius: 2px; border-image-width: 20px; border-image-repeat: round; border-style: solid; box-shadow: 0 0 3px 0 #bababa; } #preview .resize-handle { width: 10px; height: 10px; background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } #preview .resize-handle:hover { cursor: nw-resize; } /* * general controls menu */ #general-controls { padding: 10px 30px; background-color: #fff; op...
...rty .value { width: 65%; padding: 0 2.5%; word-break: break-all; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign)...
...onent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resi...
...And 9 more matches

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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation.
...r-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-end, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-start is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. ...
...And 9 more matches

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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writi...
...r-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-block-end, and border-inline-end, which define the other borders of the element. values the border-inline-start is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. ...
...And 9 more matches

Index - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes found 54 pages: # page tags and summary 1 xslt: extensible stylesheet language transformations landing, web, xslt extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents. 2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml. to find out the current type, load the file in mozilla and look at the page info. or use a download tool, those usually tell the mime type. 3 index index, reference, xslt found 54 pages: 4 ...
...presentable form and then add it into an existing document. since the xml data loaded only contains the raw information without any presentation data, it can load quickly even on dialup. 10 javascript/xslt bindings dom, javascript, xml, xslt javascript can run xslt transformations through the xsltprocessor object. 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(). this can be done via xmlhttprequest or xmldocument.load(). 11 resources xslt no summary! 12 setting parameter...
... itself, unhindered by a need to provide any indication about how this data should eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network. 14 an overview needshelp, needsmarkupwork, transforming_xml_with_xslt, xml, xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows. 15 for further reading needscontent, needshelp, transforming_xml_with_xslt, xml, xslt http://www.amazon.com/xslt-pr...
...And 9 more matches

CSSCounterStyleRule - Web APIs
the csscounterstylerule interface represents an @counter-style at-rule. ...
... the csscounterstylerule interface represents an @counter-style at-rule. ...
... the csscounterstylerule interface represents an @counter-style at-rule. ...
...And 8 more matches

StyleSheet.media - Web APIs
the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
...And 8 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
-left. if you were using a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. ...
...ng a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. ...
...ing margin-top. ...
...And 8 more matches

Using media queries - CSS: Cascading Style Sheets
media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. syntax a media query is composed of an optional media type and any number of ...
...and any number of media feature expressions. multiple queries can be combined in various ways by using logical operators. media queries are case-insensitive. a media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. queries involving unknown media types are always false. note: a style sheet with a media query attached to its <link> tag will still download even if the query returns false. nevertheless, its contents will not apply unless and until the result of the query changes to true. media types media types describe the general category of a device. except when using the not or only logical operators, the media type is optional and the all type will be implied. all su...
...g true if the query would otherwise return false. if present in a comma-separated list of queries, it will only negate the specific query to which it is applied. if you use the not operator, you must also specify a media type. note: in level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query. only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens. if you use the only operator, you must also specify a media type. , (comma) commas are used to combine...
...And 8 more matches

Specificity - CSS: Cascading Style Sheets
lectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). id selectors (e.g., #example). universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity. (the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity. the !important exception when an important rule is used on a style declaration, this declaration overrides any other declarations. although technically !important has nothing to do with specificity, it interacts directly with ...
...when two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied. ...
...be green because that rule is most specific. (also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules) as a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify. ...
...And 8 more matches

An Overview - XSLT: Extensible Stylesheet Language Transformations
« transforming xml with xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows. an xslt stylesheet is an xml document. unlike css, which has its own specialized syntax, an xslt stylesheet is an xml document, which must conform to all xml rules, including well-formedness. so the model for transformation is that one xml document is used to transform another xml document. an xslt stylesheet is marked as such by the inclusion of a standard xslt heading. ...
...this element will include at least one namespace declaration and the mandatory version attribute. other namespaces and three optional attributes may also be included. ...
...this element will include at least one namespace declaration and the mandatory version attribute. other namespaces and three optional attributes may also be included. the mandatory namespace for xslt is "http://www.w3.org/1999/xsl/transform". ...
...And 8 more matches

nsIStyleSheetService
allows extensions or embeddors to add to the built-in list of user or agent style sheets. layout/base/nsistylesheetservice.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports implemented by: @mozilla.org/content/style-sheet-service;1. ...
... allows extensions or embeddors to add to the built-in list of user or agent style sheets. layout/base/nsistylesheetservice.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports implemented by: @mozilla.org/content/style-sheet-service;1. ...
...to the built-in list of user or agent style sheets. layout/base/nsistylesheetservice.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports implemented by: @mozilla.org/content/style-sheet-service;1. ...
...And 7 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. you can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to t...
...vided into three main sections: the style sheet pane on the left the editor on the right the media sidebar. the style sheet pane the style sheet pane, on the left, lists all the style sheets being used by the current document. you can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. you can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the list. from firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab. the editor pane on the right is the editor pane. this is where the source for the selected style sheet is available for you to read and edit. an...
...ew tab. the editor pane on the right is the editor pane. this is where the source for the selected style sheet is available for you to read and edit. any changes you make are immediately applied to the page. this makes it easy to experiment with, revise, and test changes. once you're satisfied with your changes, you can save a copy locally by clicking the save button on the sheet's entry in the style sheet pane. the editor provides line numbers and syntax highlighting to help make it easier to read your css. it also supports a number of keyboard shortcuts. the style editor automatically de-minimizes style sheets that it detects, without affecting the original. this makes it much easier to work on pages that have been optimized. the style editor supports autocomplete. just start typing, and...
...And 7 more matches

Border-radius generator - CSS: Cascading Style Sheets
return input; } var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mousemove", slidermotion); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - start...
...&& y == 'top') handle.classname = 'handle handle-top-left' if (x === 'right' && y == 'top') handle.classname = 'handle handle-top-right'; if (x === 'right' && y == 'bottom') handle.classname = 'handle handle-bottom-right'; if (x === 'left' && y == 'bottom') handle.classname = 'handle handle-bottom-left'; handle.addeventlistener("mousedown", function(e) { active = true; this.radius.style.display = 'block'; previewmousetracking.subscribe(this.updatecontainer.bind(this)); }.bind(this)); document.addeventlistener("mouseup", function(e) { this.radius.style.display = 'none'; if (active === true) previewmousetracking.unsubscribe(this.updatecontainer.bind(this)); }.bind(this)); inputslidermanager.subscribe(this.topic + '-w', this.setwidth.bind(this)); inputslide...
...updatecontainer.bind(this)); }.bind(this)); inputslidermanager.subscribe(this.topic + '-w', this.setwidth.bind(this)); inputslidermanager.subscribe(this.topic + '-h', this.setheight.bind(this)); inputslidermanager.subscribe(this.topic, this.setradius.bind(this)); buttonmanager.subscribe(this.topic, function(value) { this.rounded = value; if (value === true) { unitw.container.style.display = 'none'; unith.container.style.display = 'none'; unitr.container.style.display = 'block'; sliderw.style.display = 'none'; sliderh.style.display = 'none'; sliderr.style.display = 'block'; this.setunitr(this.unitr); this.updateradius(); } if (value === false) { unitw.container.style.display = 'block'; unith.container.style.display = 'block'; u...
...And 7 more matches

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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds ...
...r-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-end is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. ...
...And 7 more matches

<mstyle> - MathML
the mathml <mstyle> element is used change the style of its children. it accepts all attributes of all mathml presentation elements with some exceptions and additional attributes listed below. attributes dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). decimalpoint this attribute is specifying the character for the alignment point within <mstack> and <mtable> columns, if the decimalpoint value is used to specify the alignment. displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. see also largeop and movable...
...the values before, after and duplicate are allowed. scriptlevel controls mostly the font-size. the higher the scriptlevel, the smaller the font size. ...
...the values before, after and duplicate are allowed. scriptlevel controls mostly the font-size. the higher the scriptlevel, the smaller the font size. this attribute accepts a non-negative integer, as well as a "+" or a "-" sign, which increments or decrements the current value. ...
...And 7 more matches

Basic Example - XSLT: Extensible Stylesheet Language Transformations
4 : xml file <?xml version="1.0"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr. foo</myns:author> <myns:author>mr. bar</myns:author> </myns:authors> <myns:body> the <b>rain</b> in <u>spain</u> stays mainly in the plains. ...
...ns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr. foo</myns:author> <myns:author>mr. bar</myns:author> </myns:authors> <myns:body> the <b>rain</b> in <u>spain</u> stays mainly in the plains. ...
...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/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/m...
...And 7 more matches

Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html documents using the <link rel="stylesheeet"> element, but it is important to use the element's title attribute properly. this is because the title attribute on a <link rel="stylesheeet"> element makes it either preferred or an alternative style sheet. this can lead to a stylesheet being ignored, which is typically not what an author intends to do. why titles matter the title attribute affects how your external stylesheet is applied to a document. in fact, the use of the title attribute is so significant that html 4.01 categorizes stylesheets according to the presence or absence of a title. ...
... a stylesheet being ignored, which is typically not what an author intends to do. why titles matter the title attribute affects how your external stylesheet is applied to a document. in fact, the use of the title attribute is so significant that html 4.01 categorizes stylesheets according to the presence or absence of a title. by including a title attribute, you can control whether a particular stylesheet always affects a document, or if it is only used under certain circumstances. there are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets. authors will be most familiar with persistent stylesheets, of which any number may be applied to a document at once. ...
...le. by including a title attribute, you can control whether a particular stylesheet always affects a document, or if it is only used under certain circumstances. there are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets. authors will be most familiar with persistent stylesheets, of which any number may be applied to a document at once. a persistent stylesheet is one which has no title attribute and a value of stylesheet supplied for the rel attribute. a document may refer to one or more persistent stylesheets, all of which are used in the presentation of the document. a preferred stylesheet, on the other hand, is one that has a value of stylesheet supplied for the rel attribute, and any value at all for the title attribute. here are two examples...
...And 6 more matches

CSSStyleDeclaration.setProperty() - Web APIs
value optional is a domstring containing the new property value. if not specified, treated as the empty string. note: value must not contain "!important" -- that should be set using the priority parameter. priority optional is a domstring allowing the "important" css priority to be set. if not specified, treated as the empty string. ...
...ot specified, treated as the empty string. the following values are accepted: string value "important" keyword undefined string empty value "" return value undefined exceptions domexception (nomodificationallowederror): if the property or declaration block is read only. ...
...e empty string. the following values are accepted: string value "important" keyword undefined string empty value "" return value undefined exceptions domexception (nomodificationallowederror): if the property or declaration block is read only. ...
...And 6 more matches

CanvasRenderingContext2D.strokeStyle - Web APIs
gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
... gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
... gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
...And 6 more matches

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

HTMLStyleElement - Web APIs
the htmlstyleelement interface represents a <style> element. it inherits properties and methods from its parent, htmlelement, and from linkstyle. this interface doesn't allow to manipulate the css it contains (in most case). to manipulate css, see using dynamic styling information for an overview of the objects used to manipulate specified css properties using the dom. ...
...tmlstyleelement interface represents a <style> element. it inherits properties and methods from its parent, htmlelement, and from linkstyle. this interface doesn't allow to manipulate the css it contains (in most case). to manipulate css, see using dynamic styling information for an overview of the objects used to manipulate specified css properties using the dom. ...
...nkstyle. this interface doesn't allow to manipulate the css it contains (in most case). to manipulate css, see using dynamic styling information for an overview of the objects used to manipulate specified css properties using the dom. ...
...And 6 more matches

OpenType font features guide - CSS: Cascading Style Sheets
these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using opentype font features in css. ...
...these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using opentype font features in css. ...
...h all you need to know about using opentype font features in css. some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios. in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages. in the latter case, these alterations are actually necessary to properly express ...
...And 6 more matches

border-bottom - CSS: Cascading Style Sheets
the border-bottom shorthand css property sets an element's bottom border. it sets the values of border-bottom-width, border-bottom-style and border-bottom-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-bottom-style: dotted; border-bottom: thick green; ... is actually the same as ... border-bottom-style: dotted; border-bottom: none thick green; ... and the value of border-bo...
...nd properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-bottom-style: dotted; border-bottom: thick green; ... is actually the same as ... border-bottom-style: dotted; border-bottom: none thick green; ... and the value of border-bottom-style given before border-bottom is ignored. since the default value of border-bottom-style is none, not specifying the border-style part results in no border. ...
... <color> see border-bottom-color. ...
...And 6 more matches

column-rule - CSS: Cascading Style Sheets
note: as with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). ...
... in a multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color. note: as with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). syntax column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit; column-rule: initi...
...id 8px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit; column-rule: initial; column-rule: unset; the column-rule property is specified as one, two, or three of the values listed below, in any order. values <'column-rule-width'> is a <length> or one of the three keywords, thin, medium, or thick. see border-width for details. ...
...And 6 more matches

counter() - CSS: Cascading Style Sheets
perimental, and support for the type-or-unit parameter is sparse. check the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counter, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. ...
...pport for the type-or-unit parameter is sparse. check the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counter, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. ...
...heck the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counter, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. ...
...And 6 more matches

Element.computedStyleMap() - Web APIs
the computedstylemap() method of the element interface returns a stylepropertymapreadonly interface which provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration. syntax var stylepropertymapreadonly = element.computedstylemap() parameters none. return value a stylepropertymapreadonly interface. examples we start with some simple html: a paragraph with a link, and a definition list to which we will add all the css property / value pairs. <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap(). // get the ele...
...airs. <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap(). ...
...</dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap(). ...
...And 5 more matches

FontFace.style - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...And 5 more matches

Window.getDefaultComputedStyle() - Web APIs
the getdefaultcomputedstyle() method gives the default computed values of all the css properties of an element, ignoring author styling. that is, only user-agent and user styles are taken into account. syntax var style = window.getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for which to get the computed style. pseudoelt optional a string specifying the pseudo-element to match. must be null (or not specified) for regular elements. return value the returned style is a cssstyledeclaration object. the object is of the same type as the object returned by window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
...ptional a string specifying the pseudo-element to match. must be null (or not specified) for regular elements. return value the returned style is a cssstyledeclaration object. the object is of the same type as the object returned by window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
...pseudo-element to match. must be null (or not specified) for regular elements. return value the returned style is a cssstyledeclaration object. the object is of the same type as the object returned by window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
...And 5 more matches

:host-context() - CSS: Cascading Style Sheets
e shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the dom hierarchy. in other words, this allows a custom element, or anything within that custom element's shadow dom, to apply different styles based on its position within the outer dom or classes/attributes applied to ancestor elements. one typical use of this is with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>. another typical use would be to allow inner elements to react to classes or attributes on any anscestor elements - for example, applying a di...
...' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
... following snippets are taken from our host-selectors example (see it live also). ...
...And 5 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
solete since gecko 2 -moz-background-originobsolete since gecko 2 -moz-background-inline-policyobsolete since gecko 32 [superseded by the standard version box-decoration-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz-border-image -moz-border-start [superseded by the standard version border-inline-start] -moz-border-start-color [superseded by the standard version border-inline-start-color] -moz-border-start-style [superseded by the standard versio...
...standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz-border-image -moz-border-start [superseded by the standard version border-inline-start] -moz-border-start-color [superseded by the standard version border-inline-start-color] -moz-border-start-style [superseded by the standard version border-inline-start-style] -moz-border-start-width [superseded by the standard version border-inline-start-width] -moz-box-sizing [prefixed version still accepted] c clip-path [applying to more than svg] -moz-column-count [prefixed version still accepted] -moz-column-fill [prefixed version still accepted] -moz-column-gap [prefixed version still accepted] -moz-column-width [prefixed version still...
...] c clip-path [applying to more than svg] -moz-column-count [prefixed version still accepted] -moz-column-fill [prefixed version still accepted] -moz-column-gap [prefixed version still accepted] -moz-column-width [prefixed version still accepted] -moz-column-rule [prefixed version still accepted] -moz-column-rule-width [prefixed version still accepted] -moz-column-rule-style [prefixed version still accepted] -moz-column-rule-color [prefixed version still accepted] -moz-context-properties f–m filter [applying to more than svg] -moz-font-feature-settings [prefixed version still accepted] -moz-font-language-override [prefixed version still accepted] -moz-hyphens [prefixed version still accepted] -moz-margin-end [superseded by the standard ...
...And 5 more matches

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. border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to which border-inline maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation. ...
...entation. it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-block, which sets border-block-start, and border-block-end. ...
... the borders in the other dimension can be set with border-block, which sets border-block-start, and border-block-end. initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is specified with one or more of the following, in any order: <'border-width'> the width of the border. ...
...And 5 more matches

border-left - CSS: Cascading Style Sheets
epository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-left always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-left-style: dotted; border-left: thick green; ... is actually the same as ... border-left-style: dotted; border-left: none thick green; ... and the value of border-left-style given before border-left is ignored. since the default value of border-left-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css prop...
... <color> see border-left-color. ...
... constituent properties this property is a shorthand for the following css properties: border-left-color border-left-style border-left-width syntax border-left: 1px; border-left: 2px dotted; border-left: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-left-width. <br-style> see border-left-style. <color> see border-left-color. formal definition initial valueas each of the properties of the shorthand:border-left-width: mediumborder-left-style: noneborder-left-color: currentcolorapplies toall elements. it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-left-width: the absolute length or 0 if border-left-...
...And 5 more matches

border-right - CSS: Cascading Style Sheets
ository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-right always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-right-style: dotted; border-right: thick green; ... is actually the same as ... border-right-style: dotted; border-right: none thick green; ... and the value of border-right-style given before border-right is ignored. since the default value of border-right-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following cs...
... <color> see border-right-color. ...
...tuent properties this property is a shorthand for the following css properties: border-right-color border-right-style border-right-width syntax border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-right-width. <br-style> see border-right-style. <color> see border-right-color. formal definition initial valueas each of the properties of the shorthand:border-right-width: mediumborder-right-style: noneborder-right-color: currentcolorapplies toall elements. it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-right-width: the absolute length or 0 if border...
...And 5 more matches

border-top - CSS: Cascading Style Sheets
repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-top always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-top-style: dotted; border-top: thick green; ... is actually the same as ... border-top-style: dotted; border-top: none thick green; ... and the value of border-top-style given before border-top is ignored. since the default value of border-top-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties...
... <color> see border-top-color. ...
...order. constituent properties this property is a shorthand for the following css properties: border-top-color border-top-style border-top-width syntax border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-top-width. <br-style> see border-top-style. <color> see border-top-color. formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elements. ...
...And 5 more matches

outline - CSS: Cascading Style Sheets
ty set all the outline properties in a single declaration. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below. the order of the values does not matter...
... style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below. the order of the values does not matter. note: the outline will be invisible for many elements if its style is not defined. this is because the style defaults to none. a notable exception is input elements, which are given default styling by browsers. values <'outline-color'> sets the color of the outline. defaults to currentcolor if absent. see outline-color. <'outline-style'> sets the style of the outline. defaults to none if absent. see outline-style. <'outline-width'> sets the thickness o...
...ers in the following ways: outlines never take up space, as they are drawn outside of an element's content. according to the spec, outlines don't have to be rectangular, although they usually are. as with all shorthand properties, any omitted sub-values will be set to their initial value. accessibility concerns assigning outline a value of 0 or none will remove the browser's default focus style. if an element can be interacted with it must have a visible focus indicator. provide obvious focus styling if the default focus style is removed. how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, cur...
...And 5 more matches

text-decoration - CSS: Cascading Style Sheets
the text-decoration shorthand css property sets the appearance of decorative lines on text. it is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. text decorations are drawn across descendant text elements. this means that if an element specifies a text decoration, then a child element can't remove the decoration. ...
...ke to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. text decorations are drawn across descendant text elements. this means that if an element specifies a text decoration, then a child element can't remove the decoration. for example, in the markup <p>this text has <em>some emphasized words</em> in it.</p>, the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. the style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. however, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words". constituent properties this property is a shorthand for the foll...
...ned. the style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. however, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words". constituent properties this property is a shorthand for the following css properties: text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness syntax the text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties. values text-decoration-line sets the kind of decoration used, such as underline or line-through. text-decoration-color sets the color of the decoration. ...
...And 5 more matches

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

SVGStyleElement - Web APIs
svg style interface the svgstyleelement interface corresponds to the svg <style> element. ...
... svg style interface the svgstyleelement interface corresponds to the svg <style> element. ...
... svg style interface the svgstyleelement interface corresponds to the svg <style> element. ...
...And 4 more matches

StylePropertyMap - Web APIs
the stylepropertymap interface of the the css typed object model api provides a representation of a css declaration block that is an alternative to cssstyledeclaration. ...
... the stylepropertymap interface of the the css typed object model api provides a representation of a css declaration block that is an alternative to cssstyledeclaration. ...
... the stylepropertymap interface of the the css typed object model api provides a representation of a css declaration block that is an alternative to cssstyledeclaration. ...
...And 4 more matches

StylePropertyMapReadOnly.get() - Web APIs
the get() method of the stylepropertymapreadonly interface returns a cssstylevalue object for the first value of the specified property. syntax var declarationblock = stylepropertymapreadonly.get(property) parameters property the name of the property to retrieve the value of. return value a cssstylevalue object. examples let's get just a few properties and values. ...
.... ...
...ng a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object. we create an array of properties of interest and use the stylepropertymapreadonly's get() method to get only those values. // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.
...And 4 more matches

-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. /* border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. it maps to a physical border depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the valu...
...-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. ...
...ding on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. ...
...And 4 more matches

fallback - CSS: Cascading Style Sheets
the fallback descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value. syntax /* keyword values */ fallback: lower-alpha; fallback: custom-gangnam-style; description if the specified fallback style is also unable to construct a representation, then its fallback style will be used. if a valid fallback style is not specified, it defaults to decimal. a couple of scenarios where a fallback style will be used are: when the range descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range. ...
...yle will be used. if a valid fallback style is not specified, it defaults to decimal. a couple of scenarios where a fallback style will be used are: when the range descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range. when the fixed system is used and there are not enough symbols to cover all the list items, the fallback style will be used for the rest of the list items. ...
...of scenarios where a fallback style will be used are: when the range descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range. when the fixed system is used and there are not enough symbols to cover all the list items, the fallback style will be used for the rest of the list items. ...
...And 4 more matches

speak-as - CSS: Cascading Style Sheets
the speak-as descriptor specifies how a counter symbol constructed with a given @counter-style will be represented in the spoken form. for example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue. syntax /* keyword values */ speak-as: auto; speak-as: bullets; speak-as: numbers; speak-as: words; speak-as: spell-out; /* @counter-style name value */ speak-as: <counter-style-name>; values auto if the value of speak-as is specified as auto, then the effective value of speak-as will be determined based on the value of the system descriptor: if the value of system is alphabetic, the effective value of speak-as will be spell-out. if system is cyclic, the effective value of speak-as will be bullets. if system is ex...
...s specified as auto, then the effective value of speak-as will be determined based on the value of the system descriptor: if the value of system is alphabetic, the effective value of speak-as will be spell-out. if system is cyclic, the effective value of speak-as will be bullets. if system is extends, the value of speak-as will be the same as if speak-as: auto is specified on the extended style. for all other cases, specifying auto has the same effect as specifying speak-as: numbers. bullets a phrase or an audio cue defined by the user agent for representing an unordered list item will be read out. numbers the numerical value of the counter will be read out in the document language. words the user agent will generate a counter value as normal and read it out as a word in the...
...language. words the user agent will generate a counter value as normal and read it out as a word in the document language. spell-out the user agent will generate a counter representation as normal and would read it out letter by letter. if the user agent doesn't know how to read out a partiular counter symbol, the user agent might read it out as if the value of speak-as was numbers. <counter-style-name> the name of another counter style, specified as a <custom-ident>. if included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the fallback descriptor. if the specified style does not exist, speak-as defaults to auto. accessibility concerns assistive technology support is very limited for the speak-as property. do not rely on it to co...
...And 4 more matches

Detecting CSS animation support - CSS: Cascading Style Sheets
rticle, based on this blog post by chris heilmann, demonstrates a technique for doing this. ...
...we assume that animation is not supported by setting animation to false. we set the animationstring to animation which is the p...
...'-'; animation = true; break; } } } for starters we define a few variables. we assume that animation is not supported by setting animation to false. we set the animationstring to animation which is the property we want to set later on. we create an array of browser prefixes to loop over and we set pfx to an empty string. then we check if the css animation-name property on the style collection for the element specified by the variable elem is set. this means the browser supports css animation without any prefix, which, to date, none of them do. if the browser does not support non-prefixed animation and animation is still false, we iterate over all the possible prefixes, since all the major browsers are currently prefixing this property and changing its name to animationname...
...And 4 more matches

CSS Fonts - CSS: Cascading Style Sheets
css fonts is a module of css that defines font-related properties and how font resources are loaded. it lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
...ces are loaded. it lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
...p</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. ...
...And 4 more matches

Privacy and the :visited selector - CSS: Cascading Style Sheets
before about 2010, the css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. this was done through window.getcomputedstyle and other techniques. this process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. ...
...determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page. if you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited. in rare scenarios, if you're using nested link elements and the element being matched is differe...
...e. if you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited. in rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well. limits to visited link styles you can style visited links, but there are limits to which styles you can use. ...
...And 4 more matches

background - CSS: Cascading Style Sheets
the background shorthand css property sets all background style properties at once, such as color, image, origin and size, or repeat method. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...hub.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas. the syntax of each layer is as follows: each layer may include zero or one occurrences...
...r-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas. the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%". the <box> value may be included zero, one, or two times. if included once, it sets both background-origin and background-clip. if it is included twice, the first occurrence sets background-origin, and the second sets background-clip. the <background-color> val...
...And 4 more matches

border-block - CSS: Cascading Style Sheets
the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. ...
...the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. ...
...er-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-inline, which sets border-inline-start, and border-inline-end. constituent properties this property is a shorthand for the following css properties: border-block-color border-block-style border-block-width syntax values the border-block is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color. formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumb...
...And 4 more matches

font-variant-alternates - CSS: Cascading Style Sheets
the font-variant-alternates css property controls the usage of alternate glyphs. these alternate glyphs may be referenced by alternative names defined in @font-feature-values. ...
... syntax this property may take one of two forms: either the keyword normal or one or more of the other keywords and functions listed below, space-separated, in any order. values normal ...
... syntax this property may take one of two forms: either the keyword normal or one or more of the other keywords and functions listed below, space-separated, in any order. ...
...And 4 more matches

mask-repeat - CSS: Cascading Style Sheets
at round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). ...
...nd, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). syntax one or more <repeat-style> values, separated by commas. ...
...y be entirely covered). the position of the non-repeated mask image is defined by the mask-position css property. ...
...And 4 more matches

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

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

CSSStyleDeclaration - Web APIs
the cssstyledeclaration interface represents an object that is a css declaration block, and exposes style information and various style-related methods and properties. a cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <div style="...">). via the cssstylesheet api. for example, document.stylesheets[0].cssrules[0].style returns a cssstyledeclaration object on the first css rule in the document's first stylesheet. via window.getcomputedstyle(), which exposes the cssstyledeclaration object as a read-only interface. attributes cssstyledeclaration.csstext textual representation of the declaration block. setting this attribute changes the style. ...
...t api. for example, document.stylesheets[0].cssrules[0].style returns a cssstyledeclaration object on the first css rule in the document's first stylesheet. via window.getcomputedstyle(), which exposes the cssstyledeclaration object as a read-only interface. attributes cssstyledeclaration.csstext textual representation of the declaration block. setting this attribute changes the style. cssstyledeclaration.lengthread only the number of properties. see the item() method below. cssstyledeclaration.parentruleread only the containing cssrule. css properties cssstyledeclaration.cssfloat special alias for the float css property. cssstyledeclaration named properties dashed and camel-cased attributes for all supported css properties. ...
...bute changes the style. cssstyledeclaration.lengthread only the number of properties. see the item() method below. cssstyledeclaration.parentruleread only the containing cssrule. css properties cssstyledeclaration.cssfloat special alias for the float css property. cssstyledeclaration named properties dashed and camel-cased attributes for all supported css properties. methods cssstyledeclaration.getpropertypriority() returns the optional priority, "important". cssstyledeclaration.getpropertyvalue() returns the property value given a property name. cssstyledeclaration.item() returns a css property name by its index, or the empty string if the index is out-of-bounds. an alternative to accessing nodelist[i] (which instead returns undefined when i is out-of-bounds). this is ...
...And 3 more matches

DocumentOrShadowRoot.styleSheets - Web APIs
specifications specification status comment shadow domthe definition of 'documentorshadowroot' in that specification. ...
... specifications specification status comment shadow domthe definition of 'documentorshadowroot' in that specification. ...
... specifications specification status comment shadow domthe definition of 'documentorshadowroot' in that specification. ...
...And 3 more matches

:host() - CSS: Cascading Style Sheets
' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
... following snippets are taken from our host-selectors example (see it live also). ...
...ost-selectors example (see it live also). ...
...And 3 more matches

:host - CSS: Cascading Style Sheets
t */ :host { font-weight: bold; } syntax :host examples styling the shadow host the following snippets are taken from our host-selectors example (see it live also). ...
... following snippets are taken from our host-selectors example (see it live also). ...
...ost-selectors example (see it live also). ...
...And 3 more matches

negative - CSS: Cascading Style Sheets
syntax /* <symbol> values */ negative: "-"; /* prepends '-' if value is negative */ negative: "(" ")"; /* surrounds value by '(' and ')' if it is negative */ values first <symbol> this symbol will be prepended to the representation when the counter is negative. second <symbol> if present, this symbol will be appended to the representation when the counter is negative. ...
...representation when the counter is negative. description if the counter value is negative, the symbol provided as value for the descriptor is prepended to the counter representation; and a second symbol if specified, will be appended to the representation. ...
...ified, will be appended to the representation. the negative descriptor has effect only if the system value is symbolic, alphabetic, numeric, additive, or extends, if the extended counter style itself uses a negative sign. if the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored. ...
...And 3 more matches

range - CSS: Cascading Style Sheets
syntax /* keyword value */ range: auto; /* range values */ range: 2 5; range: infinite 10; range: 6 infinite; range: infinite infinite; /* multiple range values */ range: 2 5, 8 10; range: infinite 6, 10 infinite; values auto the range depends on the counter system: for cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity. for alphabetic and symbolic systems, the range is 1 to positive infinity. ...
... the range depends on the counter system: for cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity. for alphabetic and symbolic systems, the range is 1 to positive infinity. for additive systems, the range is 0 to positive infinity. for extends systems, the range is whatever auto would produce for the extended system; if extending a complex predefined style (§7 complex predefined counter styles), the range is the style’s defined range. [ [ | infinite ]{2} ]# defines a comma-separated list of ranges. for each individual range, the first value is the lower bound and the second value is the upper bound. a range is inclusive, that means it always contains both, the lower and upper bound numbers. if infinite is used as the first value in a range...
...-separated list of ranges. for each individual range, the first value is the lower bound and the second value is the upper bound. a range is inclusive, that means it always contains both, the lower and upper bound numbers. if infinite is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. the range of the counter style is the union of all the ranges defined in the list. if the lower bound of any range is higher than the upper bound, the entire descriptor is invalid and will be ignored. description the value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers. if value is auto, then for cyclic, numeric, and fixed system, the range will be from...
...And 3 more matches

Using CSS animations - CSS: Cascading Style Sheets
there are three key advantages to css animations over traditional script-driven animation techniques: they’re easy to use for simple animations; you can create them without even having to know javascript. the animations run well, even under moderate system load. simple animations can often perform poorly in javascript (unless they’re well made). ...
...ade). the rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible. letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible. configuring the animation to create a css animation sequence, you style the element you want to animate with the animation property or its sub-properties. this lets you configure the timing, duration, and other details of how the animation sequence should progress. this does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in defining the animation sequence using keyframes below. the sub-properties of the ...
...defining the animation sequence using keyframes once you’ve configured the animation’s timing, you need to define the appearance of the animation. this is done by establishing two or more keyframes using the @keyframes at-rule. each keyframe describes how the animated element should render at a given time during the animation sequence. since the timing of the animation is defined in the css style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. because these two times are so important, they have special aliases: from and to. both are optional. if from/0% or to/100% is not specified, the brows...
...And 3 more matches

CSS Containment - CSS: Cascading Style Sheets
se this information to make decisions about how to render the content. for example, it might not render articles that are outside the viewable area. if we give each <article> the contain property with a value of content, when new elements are inserted the browser understands it does not need to relayout or repaint any area outside of the containing element's subtree, although if the <article> is styled such that its size depends on its contents (e.g. with height: auto), then the browser may need to account for its size changing). we have told it by way of the contain property that each article is independent. the content value is shorthand for contain: layout paint. it tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything...
...way of performance optimizations when used on its own. however, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children. if you turn on contain: size you need to also specify the size of the element you have applied this to. it will end up being zero-sized in most cases, if you don't manually give it a size. ...
...ed on its own. however, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children. if you turn on contain: size you need to also specify the size of the element you have applied this to. it will end up being zero-sized in most cases, if you don't manually give it a size. style containment article { contain: style; } despite the name, style containment does not provide scoped styles such as you would get with the shadow dom. the main use case is to prevent situations where a css counter could be changed in an element, which could then affect the rest of the tree. using contain: style would ensure that the counter-increment and counter-set properties created new counters scoped to that subtree only. no...
...And 3 more matches

Shorthand properties - CSS: Cascading Style Sheets
the css specification defines shorthand properties to group the definition of common properties acting on the same theme. for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. ...
... try not to force a specific order for the values of the properties they replace. this works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. handling of these cases are grouped in several categories: shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges: the 1-value syntax: border-width: 1em — the unique value represents all edges the 2-value syntax: border-width: 1em 2em — the first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones. ...
...ft top; ... can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties. font properties the following declarations ... font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: arial, sans-serif; ... can be shortened to the following: font: italic bold .8em/1.2 arial, sans-serif; this shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (css2.0 / css3), font-stretch: normal (css3). border properties with borders...
...And 3 more matches

Syntax - CSS: Cascading Style Sheets
the css syntax reflects this goal and its basic building blocks are: the property which is an identifier, that is a human-readable name, that defines which feature is considered. the value which describe how the feature must be handled by the engine. each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine. css declarations setting css properties to specific values is the core function of the css language. ...
...f valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine. css declarations setting css properties to specific values is the core function of the css language. a property and value pair is called a declaration, and any css engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it. both properties and values are case-insensitive by default in css. the pair is separated by a colon, ':' (u+003a colon), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored. there are more than 100 different properties in css and a nearly infinite number of different values. not all pairs of properties and values are allowed and each ...
...osing braces must be matched. such blocks are naturally called declaration blocks and declarations inside them are separated by a semi-colon, ';' (u+003b semicolon). a declaration block may be empty, that is containing null declaration. white spaces around declarations are ignored. ...
...And 3 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
h an -apple- prefix. a few are prefixed with -epub-. webkit-only properties note: avoid using on websites. these properties will only work in webkit applications. ...
...roperties will only work in webkit applications. ...
...it-appearance* -webkit-aspect-ratio b -webkit-backdrop-filter -webkit-background-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -w...
...And 3 more matches

animation - CSS: Cascading Style Sheets
it is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...argin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6...
...3%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6...
...And 3 more matches

counters() - CSS: Cascading Style Sheets
the counters() css function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. the counters() function has two forms: 'counters(name, string)' or 'counters(name, string, style)'. it is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported. the generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. the counters are rendered in the style indicated, defaulting to decimal if no style is specified. /* simple usage - style defaults to decimal */ counters(countername, '-'); /* changing the counter display */ counters(countername, '.', upper-roman) a counter has no visible effect by itself. the...
...erimental, and support for the type-or-unit parameter is sparse. check the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counters, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. <counter-style> a counter style name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east asian or ethiopic predefined counter style, or other predefined counter style. if omitted, the counter-style defaults to decimal <string> any number of text characters. non-latin characters must be encoded using their unicode esc...
...counter style, a complex longhand east asian or ethiopic predefined counter style, or other predefined counter style. if omitted, the counter-style defaults to decimal <string> any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. ...
...And 3 more matches

flex-grow - CSS: Cascading Style Sheets
flex shorthand to ensure all values are set. formal definition initial value0applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 . ...
...nition initial value0applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 . ...
...seudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 . ...
...And 3 more matches

vertical-align - CSS: Cascading Style Sheets
hub repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
...ithub.com/mdn/interactive-examples and send us a pull request. the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
... two contexts: to vertically align an inline element's box inside its containing line box. ...
...And 3 more matches

CSP: style-src-attr - HTTP
the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to individual dom elements. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...cifies valid sources for inline styles applied to individual dom elements. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
... individual dom elements. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. syntax one or more sources can be allowed for the style-src-attr policy: content-security-policy: style-src-attr <source>; content-security-policy: style-src-attr <source> <source>; style-src-attr can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-attr <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the sit...
...And 3 more matches

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". csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...or stylesheets <style> elements and <link> elements with rel="stylesheet". csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...ts with rel="stylesheet". csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. syntax one or more sources can be allowed for the style-src-elem policy: content-security-policy: style-src-elem <source>; content-security-policy: style-src-elem <source> <source>; style-src-elem can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-elem <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the...
...And 3 more matches

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

stylesheet/utils - Archive of obsolete content
the removal takes effect immediately. ...
...the removal takes effect immediately. ...
...the removal takes effect immediately. ...
...And 2 more matches

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

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

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

::before (:before) - CSS: Cascading Style Sheets
in css2. examples adding quotation marks one simple example of using ::before pseudo-elements is to provide quotation marks. here we use both ::before and ::after to insert quotation characters. ...
...color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want. html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements. this method can often be used to add small touches to the ui and improve user experience. ...
...color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements. this method can often be used to add small touches to the ui and improve user experience. ...
...And 2 more matches

::cue - CSS: Cascading Style Sheets
::cue { color: yellow; font-weight: bold; } the properties are applied to the entire set of cues as if they were a single unit. the only exception is that background and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media. ...
...dly large areas of the media. ...
... ::cue { color: #fff; backgroun...
...And 2 more matches

:focus-visible - CSS: Cascading Style Sheets
milar functionality through an older, prefixed pseudo-class — :-moz-focusring. syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to match. compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. ...
...xed pseudo-class — :-moz-focusring. syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to match. compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. note the difference in behavior from elements styled with :focus. ...
...cusring. syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to match. compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. note the difference in behavior from elements styled with :focus. ...
...And 2 more matches

:scope - CSS: Cascading Style Sheets
when used from a dom api such as queryselector(), queryselectorall(), matches(), or element.closest(), :scope matches the element on which the method was called. ...
... no support 20 — 32disabled disabled from version 20 until version 32 (exclusive): this feature...
...ernet:scopechrome full support 27edge full support 79firefox full support 32notes full support 32notes notes firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported. <style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it. no support 20 — 32disabled disabled from version 20 until version 32 (exclusive): this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to ...
...And 2 more matches

pad - CSS: Cascading Style Sheets
syntax pad: 3 "0"; values <integer> && <symbol> the <integer> specifies a minimum length that all counter representations must reach. the value must be non-negative. if the minimum length is not reached, the representation will be padded with the specified <symbol>. description if a marker representation is smaller than the specified pad length, then the marker will be padded with the specified pad symbol. marker representations longer than the pad length are constructed as normal. ...
...mbol. marker representations longer than the pad length are constructed as normal. pad descriptor takes the minimum marker length as an integer and a symbol to be used for padding as the second parameter. a common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3... ...
... candidate recommendation initial definition ...
...And 2 more matches

prefix - CSS: Cascading Style Sheets
the prefix descriptor of the @counter-style rule specifies content that will be prepended to the marker representation. if not specified, the default value will be "" (an empty string). syntax /* <symbol> values */ prefix: "»"; prefix: "page "; prefix: url(bullet.png); values <symbol> specifies a <symbol> that is prepended to the marker representation. it may be a <string>, <image>, or <custom-ident>. ...
...ontent that will be prepended to the marker representation. if not specified, the default value will be "" (an empty string). syntax /* <symbol> values */ prefix: "»"; prefix: "page "; prefix: url(bullet.png); values <symbol> specifies a <symbol> that is prepended to the marker representation. it may be a <string>, <image>, or <custom-ident>. ...
... candidate recommendation initial definition. ...
...And 2 more matches

symbols - CSS: Cascading Style Sheets
r is specified as one or more <symbol>s. values <symbol> represents a symbol used within the counter system. this must be one of the following data types: <string> <image> (note: this value is "at risk" and may be removed from the specification. it is not yet implemented.) <custom-ident> description a symbol can be a string, image, or identifier. it is used within the @counter-style at-rule. symbols: a b c d e; symbols: "\24b6" "\24b7" "\24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. when the additive system is used, use the additive-symbols descr...
..."1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. when the additive system is used, use the additive-symbols descriptor instead to specify the symbols. ...
... candidate recommendation initial definition. ...
...And 2 more matches

At-rules - CSS: Cascading Style Sheets
an identifier and includes everything up to the next semicolon, ';' (u+003b semicolon), or the next css block, whichever comes first. ...
...+003b semicolon), or the next css block, whichever comes first. /* general structure */ @identifier (rule); /* example: tells browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet. @import — tells the css engine to include an external style sheet. ...
... 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. @namespace — tells the css engine that all its content must be considered prefixed with an xml namespace. nested at-rules — a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: @media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. @supports — a conditional group rule that will apply its content if the browser meets the criteria of the given condition. @document — a conditional group rule that will apply its conten...
...And 2 more matches

Consistent list indentation - CSS: Cascading Style Sheets
this often leads to frustration, because what works in one browser often doesn't have the same effect in another. for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them. in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. making a list first, we consider a single, pure list item. ...
... here. what's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. they're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>. ...
...indows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside. if it's changed to inside, then the markers are brought inside the <li>'s content, as though they're an inline box placed at the very beginning of the <li>. indenting it twice so how will all this appear in a document? at the moment, we have a situation analogous to these styles: ul, li {margin-left: 0; padding-left: 0;} if we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window. in order to avoid this and get some indentation, there are really only three options available to browser implementors. give each <li> element a left margin. give the <ul> ele...
...And 2 more matches

CSS Lists - CSS: Cascading Style Sheets
using css counters explains how to use the css counter properties to control list counters. ...
... using css counters explains how to use the css counter properties to control list counters. ...
... using css counters explains how to use the css counter properties to control list counters. ...
...And 2 more matches

contain - CSS: Cascading Style Sheets
this property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box. ...
...ects outside of the widget's bounding-box. note: if applied (with value: paint, strict or content), this property creates: a new containing block (for the descendants whose position property is absolute or fixed). a new stacking context. a new block formatting context. syntax /* keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: layout; contain: style; contain: paint; /* multiple keywords */ contain: size paint; contain: size layout paint; /* global values */ contain: inherit; contain: initial; contain: unset; the contain property is specified as either one of the following: using a single none, strict, or content keyword. using one or more of the size, layout, style, and paint keywords in any order. values none indicates the elem...
...lues */ contain: inherit; contain: initial; contain: unset; the contain property is specified as either one of the following: using a single none, strict, or content keyword. using one or more of the size, layout, style, and paint keywords in any order. values none indicates the element renders as normal, with no containment applied. strict indicates that all containment rules except style are applied to the element. this is equivalent to contain: size layout paint. content indicates that all containment rules except size and style are applied to the element. this is equivalent to contain: layout paint. size indicates that the element can be sized without the need to examine its descendants' sizes. layout indicates that nothing outside the element may affect its internal layo...
...And 2 more matches

content - CSS: Cascading Style Sheets
epresents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display. <counter>() the value of a css counter, generally a number. it can be displayed using either the counter() or counters() function. the counter() function has two forms: 'counter(name)' or 'counter(name, style)'. the generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. it is formatted in the specified style (decimal by default). the counters() function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. the generated text is the value of all counters with the given name in scope at the given pseudo-element, from oute...
... attr(x) the value of the element's attribute x as a string. if there is no attribute x, an empty string is returned. the case-sensitivity of attribute names depends on the document language. open-quote | close-quote these values are replaced by the appropriate string from the quotes property. ...
...mage-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )<leader-type> = dotted | solid | space | <string>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>...
...And 2 more matches

flex-shrink - CSS: Cascading Style Sheets
n-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set. ...
...edanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set. ...
...tting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set. ...
...And 2 more matches

font-variant-numeric - CSS: Cascading Style Sheets
ive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... */ font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */ font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /* global values */ font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: unset; this property can take one of two forms: either the keyword value normal or one or more of the other values listed below, space-separated, in any order. values normal this keyword leads to the deactivation of the use of such alternate glyphs. ordinal...
...is keyword forces the use of a 0 with a slash; this is useful when a clear distinction between o and 0 is needed. it corresponds to the opentype values zero. <numeric-figure-values> these values control the figures used for numbers. two values are possible: lining-nums activating the set of figures where numbers are all lying on the baseline. it corresponds to the opentype values lnum. oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. it corresponds to the opentype values onum. <numeric-spacing-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the opentype values pnum. tabular...
...And 2 more matches

text-emphasis - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. ...
...he whole element. however, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents. the size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks. text-emphasis doesn't reset the value of text-emphasis-position. ...
...emphasis doesn't reset the value of text-emphasis-position. this is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. in the very rare cases when this is needed, the property text-emphasis-position. constituent properties this property is a shorthand for the following css properties: text-emphasis-color text-emphasis-style syntax /* initial value */ text-emphasis: none; /* no emphasis marks */ /* <string> value */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25b2'; text-emphasis: '*' #555; text-emphasis: 'foo'; /* should not use. it may be computed to or rendered as 'f' only */ /* keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesam...
...And 2 more matches

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

CSSStyleValue.parseAll() - Web APIs
specifications specification status comment css typed om level 1the definition of 'parseall()' in that specification. ...
... specifications specification status comment css typed om level 1the definition of 'parseall()' in that specification. ...
... specifications specification status comment css typed om level 1the definition of 'parseall()' in that specification. ...
...nterface sets all occurences of a specific css property to the specified value and returns an array of cssstylevalue objects, each containing one of the supplied values. syntax cssstylevalue.parseall(property, value) parameters property a css property to set. csstext a comma-separated string containing one or more values that apply to the provided property. return value an array of cssstylevalue objects, each containing one of the supplied values. specifications specification status comment css typed om level 1the definition of 'parseall()' in that specification. working draft initial definition. ...

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

Document.styleSheetSets - Web APIs
the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets. syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available. ...
... the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets. syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available. ...
...list of all of the currently-available style sheet sets. syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available. ...
... the 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. duplicates are dropped from the list (using a case-sensitive comparison). ...

StylePropertyMapReadOnly.getAll() - Web APIs
example // tbd specifications specification status comment css typed om level 1the definition of 'getall()' in that specification. ...
... example // tbd specifications specification status comment css typed om level 1the definition of 'getall()' in that specification. ...
... example // tbd specifications specification status comment css typed om level 1the definition of 'getall()' in that specification. ...
... example // tbd specifications specification status comment css typed om level 1the definition of 'getall()' in that specification. ...

::cue-region - CSS: Cascading Style Sheets
::cue-region { color: yellow; font-weight: bold; } the properties are applied to the entire set of cues as if they were a single unit. the only exception is that background and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media. ...
...s of the media. ...
... candida...
... candidate recommendation initial definition. ...

::first-line (:first-line) - CSS: Cascading Style Sheets
the ::first-line css pseudo-element applies styles to the first line of a block-level element. note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. /* selects the first line of a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
...cts the first line of a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue;...
...n, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align. syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseu...

::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). ::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored. syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it. <p>also try selecting text in this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color:...
... if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that pe...
...ed; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. for people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality. if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it. color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. to meet current web content a...
...it returned in pseudo-elements level 4. ...

:checked - CSS: Cascading Style Sheets
>) element that is checked or toggled to an on state. /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <se...
...text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: ...
...no effect.edge full support 12notes full support 12notes notes on macos, styling <option&rt; elements has no effect.firefox full support 1notes full support 1notes notes from firefox 56, <option&rt; elements cannot be styled.notes on macos, styling <option&rt; elements has no effect.ie full support 9opera full support 9notes full support 9notes notes on macos, styling <option&rt; elements has no effect.safari full support 3.1notes ...
...notes styling <option&rt; elements has no effect.webview android full support 2chrome android full support 18firefox android full support 4notes full support 4notes notes from firefox 56, <option&rt; elements cannot be styled.opera android full support 10.1safari ios full support 3.1notes full support 3.1notes notes styling <option&rt; elements has no effect.samsung internet android full support 1.0legend ...

:visited - CSS: Cascading Style Sheets
the :visited css pseudo-class represents links that the user has already visited. for privacy reasons, the styles that can be modified using this selector are very limited. /* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity. to style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the lvha-order: :link — :visited — :hover — :active. ...
...eudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity. to style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the lvha-order: :link — :visited — :hover — :active. ...
...y limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color. allowable svg attributes are fill and stroke. the alpha component of the allowed styles will be ignored. the alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely. although these styles can be change the appearance of colors to the end user, the window.getcomputedstyle method will lie and always return the value of the non-:visited color. note: for more informat...
...y has a default value for color and column-rule-color only. thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector. html <a href="#test-visited-link">have you visited this link yet?</a><br> <a href="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } result specifications specification status comment html living standardthe definition of ':visited' in that specification. living standard selectors level 4the definition of ':visi...

@charset - CSS: Cascading Style Sheets
the @charset css at-rule specifies the character encoding used in the style sheet. it must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. if several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is relevant. @charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content. ...
.... if several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is relevant. @charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content. as there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode byte-order character placed at the beginning of the file. the value given by the charset attribute of the content-type: http header or the equivalent in the protocol used to serve the style sheet. the @charset css at-rule. use the character encoding d...
...encoding defined in the iana-registry, and must be double-quoted, following exactly one space character (u+0020), and immediately terminated with a semicolon. if several names are associated with an encoding, only the one marked with preferred must be used. ...
...y one space character (u+0020), and immediately terminated with a semicolon. if several names are associated with an encoding, only the one marked with preferred must be used. formal syntax @charset "<charset>"; examples valid and invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status comment css level 2 (revision 1)the definition of '@charset' in that specification. ...

additive-symbols - CSS: Cascading Style Sheets
r weight. the additive system is used to construct sign-value numbering systems such as roman numerals. syntax additive-symbols: 3 "0"; additive-symbols: 3 "0", 2 "\2e\20"; additive-symbols: 3 "0", 2 url(symbol.png); when the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols descriptor instead of additive-symbols. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...

suffix - CSS: Cascading Style Sheets
the suffix descriptor of the@counter-style rule specifies content that will be appended to the marker representation. syntax /* <symbol> values */ suffix: ""; suffix: ") "; suffix: url(bullet.png); values <symbol> specifies a <symbol> that is appended to the marker representation. it may be a <string>, <image>, or <custom-ident>. formal definition related at-rule@counter-styleinitial value". " (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<p...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...

@font-feature-values - CSS: Cascading Style Sheets
with the ornaments() functional notation of font-variant-alternates. an ornaments feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the styleset() functional notation of font-variant-alternates. a stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the opentype values ss02, ss04, ss12, and ss01. note that values higher than 99 are valid, but don't map to any opentype values and are ignored. @character-variant specifies a feature nam...
... to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid. ...
...eature-value-block-list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-declaration-list> = <feature-value-declaration>where <feature-value-declaration> = <custom-ident>: <integer>+; examples using @styleset in a @font-feature-values rule /* at-rule for "nice-style" in font one */ @font-feature-values font one { @styleset { nice-style: 12; } } /* at-rule for "nice-style" in font two */ @font-feature-values font two { @styleset { nice-style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); } specificati...
...led from version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). ...

@supports - CSS: Cascading Style Sheets
and (display:run-in) {} @supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions. it returns true if one or both of the shorter expressions is also true. ...
...isplay: table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions. it returns true if one or both of the shorter expressions is also true. ...
...o shorter expressions. it returns true if one or both of the shorter expressions is also true. the following example returns true if at least one of the two shorter expressions is true: @supports (transform-style: preserve) or (-moz-transform-style: preserve) {} multiple disjunctions can be juxtaposed without the need of more parentheses. ...
...ue if one or both of the shorter expressions is also true. the following example returns true if at least one of the two shorter expressions is true: @supports (transform-style: preserve) or (-moz-transform-style: preserve) {} multiple disjunctions can be juxtaposed without the need of more parentheses. the following are both equivalent: @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {} @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {} note: when using both and and or operators, the parentheses must be used to define the order in which they apply. otherwis...

CSS Animations tips and tricks - CSS: Cascading Style Sheets
here's one way to do it that we feel is stable and reliable enough to suggest to you. html content first, let's define the html for a <div> we wish to animate and a button that will play (or replay) the animation. <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. .runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% { background: yellow } 100% {...
.... function play() { document.queryselector(".box").classname = "box"; window.requestanimationframe(function(time) { window.requestanimationframe(function(time) { document.queryselector(".box").classname = "box changing"; }); }); } this looks weird, doesn't it? that's because the only way to play an animation again is to remove the animation effect, let the document recompute styles so that it knows you've done that, then add the animation effect back to the element. to make that happen, we have to be creative. here's what happens when the play() function gets called: the box's list of css classes is reset to simply "box". this has the effect of removing any other classes currently applied to the box, including the "changing" class that handles animation. in other words...
...e to be creative. here's what happens when the play() function gets called: the box's list of css classes is reset to simply "box". this has the effect of removing any other classes currently applied to the box, including the "changing" class that handles animation. in other words, we're removing the animation effect from the box. however, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change. to be sure that the styles are recalculated, we use window.requestanimationframe(), specifying a callback. our callback gets executed just before the next repaint of the document. the problem for us is that because it's before the repaint, the style recomputation hasn't actually happened yet! so... our callback cleverly...
...this callback adds the "changing" class back onto the box, so that the repaint will start the animation once again. ...

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
n, sidebar, and a block into which i am intending to place advertising. ...
...rting with the same markup as used for the grid template areas example. ...
...ext-align: center; margin: 0; padding: 20px; } we are going to create a grid with a flexible number of flexible columns. i want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. we achieve this with the minmax() function in our repeat notation for track sizing. .listing { list-style: none; margin: 2em; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } as soon as i add this css, the items start to lay out as a grid. if i make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid. i can then tidy up the internals of the boxes usin...
... background-color: #f08c00; color: #fff; text-align: center; margin: 0; padding: 20px; } .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: center; } .listing .body { padding: 10px; } .listing { list-style: none; margin: 2em; display: grid; grid-gap: 20px; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } .listing .wide { grid-column-end: span 2; } this technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a cms for example, where you have repeated i...

CSS Logical Properties and Values - CSS: Cascading Style Sheets
riting modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
...t is the horizontal dimension. ...
...operties for sizing block-size inline-size max-block-size max-inline-size min-block-size min-inline-size properties for margins, borders and padding border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-color (logical keyword) border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-radius border-start-end-radius border-end-start-r...
...ogical keyword) border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius border-style (logical keyword) border-width (logical keyword) margin (logical keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start padding (logical keyword) padding-block padding-block-end padding-block-start padding-inline padding-inline-end padding-inline-start properties for floating and positioning clear (inline-end and...

Using CSS transforms - CSS: Cascading Style Sheets
form specifies the transforms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. ...
... here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis. <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex. you have to start by configuring the 3d space by giving it a perspective, then you have to configure how your 2d elements will behave in that spa...
...rspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black;...
...o200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; ...

Cubic Bezier Generator - CSS: Cascading Style Sheets
var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i ...
... } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.strokestyle = 'blue'; ctx.beziercurveto(cx(x1), cy(y1), cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ctx.closepath(); // draw the p2 point (with a line to p0) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x1), cy(y1)); ctx.lineto(cx(0), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.movet...
...ctx.closepath(); // draw the p2 point (with a line to p0) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x1), cy(y1)); ctx.lineto(cx(0), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x1), cy(y1)); ctx.arc(cx(x1), cy(y1), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fillstyle = 'white'; ctx.fill(); ctx.closepath(); // draw the p3 point (with a line to p1) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x2), cy(y2)); ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2), cy(y2)); ctx.arc(cx(x2), cy(y2), radius, 0, 2 * math.pi...
... ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2), cy(y2)); ctx.arc(cx(x2), cy(y2), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fill(); ctx.closepath(); // draw the p1(1,1) point (with dashed hints) ctx.beginpath(); ctx.moveto(cx(1), cy(1)); ctx.strokestyle = 'lightgrey'; ctx.lineto(cx(0), cy(1)); ctx.moveto(cx(1), cy(1)); ctx.lineto(cx(1), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.strokestyle = "black"; ctx.fillstyle = "black"; ctx.arc(cx(1), cy(1), radius, 0, 2 * math.pi); ctx.fill(); ctx.stroke(); ctx.closepath(); // draw t...

Visual formatting model - CSS: Cascading Style Sheets
anonymous box is created when there is not an html element to use for the box. this situation happens when, for example, you declare display: flex on a parent element, and directly inside there is a run of text not contained in another element. in order to fix the box tree, an anonymous box is created around that run of text. it will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target. the same thing happens when you have text runs interspersed with block elements. in the next example i have a string inside a <div>; in the middle of my string is a <p> element containing part of the text. the string is split into three boxes in the box tree. the part of the string before the paragraph element is wrapped in an anony...
...mple i have a string inside a <div>; in the middle of my string is a <p> element containing part of the text. the string is split into three boxes in the box tree. the part of the string before the paragraph element is wrapped in an anonymous box, then we have the <p>, which generates a box, and then another anonymous box. something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. in my examples, i am using a direct child selector to target the children of the container. this does not change the anonymous boxes, as they are not a child of the parent block. inline anonymous boxes are created when a string is split by an inline element, for example, a sentence that includes a sect...
...nymous boxes are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <em></em>. this splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <em> element, then a final anonymous inline box. ...
..., for example, a sentence that includes a section wrapped with <em></em>. this splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <em> element, then a final anonymous inline box. as with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <em> can; they just inherit the styles of their container. other formatting contexts also create anonymous boxes. grid layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. table layout will add anonymous boxes to create a proper table str...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
ra) browsers to achieve the same thing. note that firefox and edge also support -webkit-appearance, for compatibility reasons. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the -moz-appearance property was used in xul stylesheets to design custom widgets with platform-appropriate styling. it was also used in the xbl implementations of the widgets that ship with the mozilla platform. starting with gecko/firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets. compatibility note: if you wish to use this property on websites, you should test it very c...
...earance:auto; } <div>lorem</div> none the user agent selects the appropriate special styling based on the element. acts as none on elements with no special styling. menulist-button div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened. textfield div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>lorem</div> firefox chrome safari edge the following values are treated as equivalent to auto: button div { color: black; -moz-appearance: button; -webkit-appearance:...
...(not implemented for the windows platform) meterbar div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>lorem</div> firefox use meter instead. number-input div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>lorem</di...
...use progress-bar instead progressbar-vertical div { color: transparent; -moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; } <div>lorem</div> firefox range div { color: black; -moz-appearance: range; -webkit-appearance: range; } range <div>lorem</div> fi...

border-width - CSS: Cascading Style Sheets
t within a single document. formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumapplies toall elements. ...
...roperties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumapplies toall elements. ...
...bottom-width: mediumborder-left-width: mediumapplies toall elements. ...
...lies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> ...

<display-listitem> - CSS: Cascading Style Sheets
list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. ...
... list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. ...
... list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. ...
...-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. examples html <div class="fake-list">i will display as a list item</div> css .fake-list { display: list-item; list-style-position: inside; } result specifications specification status css display module level 3the definition of 'display-listitem' in that specification. candidate recommendation ...

font-synthesis - CSS: Cascading Style Sheets
alic, may be synthesized by the browser. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax this property can take any one of the following forms: the keyword value none. either of the keyword values weight and style. both the keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthesized. weight indicates that a bold typeface may be synthesized if needed. style indicates that an italic typeface may be synthesized if needed. description most standard western fonts include italic and bold variants, but many novelty fonts do not. fonts used for chin...
...scription most standard western fonts include italic and bold variants, but many novelty fonts do not. fonts used for chinese, japanese, korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. in these cases, it may be desirable to switch off the browser's default font-synthesis. ...
...tend not to include these variants, and synthesizing them may impede the legibility of the text. in these cases, it may be desirable to switch off the browser's default font-synthesis. formal definition initial valueweight styleapplies toall elements. ...
...weight styleapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ weight | style ] examples disabling font synthesis html <em class="syn">synthesize me! 站直。</em> <br/> <em class="no-syn">don't synthesize me! 站直。</em> css em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; } result specifications specification status comment css fonts module level 3the definition of 'font-synthesis' in that specification. candidate recommendation initial definition ...

font-variant - CSS: Cascading Style Sheets
-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values> specifies the keywords related to the font-variant-ligatures longhand property. the possible values are: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, and no-contextual. stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions related to the font-variant-caps longhand property. <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-...
...perty. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions related to the font-variant-caps longhand property. <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero specifies the keywords related to the font-variant-numeric longhand property. the possible values are: lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero. <east-asian-variant-values>, <east-asian-width-values>, ruby specifies the keywords related to the font-variant-east-asian longhand property. the possible values are: jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby. formal definition initial value...
...idth, proportional-width, ruby. formal definition initial valuenormalapplies toall elements. ...
...st-asian-width-values> | ruby ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]<feature-value-name> = <custom-ident><numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small...

Inheritance - CSS: Cascading Style Sheets
by default ("inherited: yes") or not ("inherited: no"). inherited properties when no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. only the root element of the document gets the initial value given in the property's summary. a typical example of an inherited property is the color property. given the style rules: p { color: green; } ... and the markup: <p>this paragraph has <em>emphasized text</em> in it.</p> ... the words "emphasized text" will appear green, since the em element has inherited the value of the color property from the p element. it does not get the initial value of the property (which is the color that is used for the root element when the page specifies no color). non-inherite...
...e initial value of the property (which is the color that is used for the root element when the page specifies no color). non-inherited properties when no value for a non-inherited property has been specified on an element, the element gets the initial value of that property (as specified in the property's summary). a typical example of a non-inherited property is the border property. given the style rules: p { border: medium solid; } ... and the markup: <p>this paragraph has <em>emphasized text</em> in it.</p> ... the words "emphasized text" will not have a border (since the initial value of border-style is none). notes the inherit keyword allows authors to explicitly specify inheritance. it works on both inherited and non-inherited properties. you can control inheritance for all p...
...then it doubles the font size and applies a font-weight of "bold". ...
...s authors to explicitly specify inheritance. it works on both inherited and non-inherited properties. you can control inheritance for all properties at once using the all shorthand property, which applies its value to all properties. for example: font { all: revert; font-size: 200%; font-weight: bold; } this reverts the style of the font property to the user agent's default unless a user stylesheet exists, in which case that is used instead. then it doubles the font size and applies a font-weight of "bold". see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, ...

mask - CSS: Cascading Style Sheets
y) by masking or clipping the image at specific points. as well as the properties listed below, the mask shorthand also resets mask-border to its initial value. it is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. this will ensure that mask-border has also been reset to allow the new styles to take effect. constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* elemen...
...ht / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> sets the mask image source. see mask-image. <masking-mode> sets the masking mode of the mask image. see mask-mode. <position> sets the position of the mask image. see mask-position. <bg-size> sets the size of the mask image. see mask-size. <repeat-style> sets the repetition of the mask image. see mask-repeat. <geometry-box> if only one <geometry-box> value is given, it sets both mask-origin and mask-clip. if two <geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip. <geometry-box> | no-clip sets the area that is affected by the mask image. see mask-clip. <compositing-operator> sets the compositin...
...age: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of length, percentage, or calcmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of length, percentage, or calcmask-composite: discretecreates stacking contextyes formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]? | <repeat-style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator> | <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]...
...| <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...

<percentage> - CSS: Cascading Style Sheets
n, although negative values are not valid for all properties. as with all css dimensions, there is no space between the symbol and the number. interpolation when animated, values of the <percentage> data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. ...
...id for all properties. as with all css dimensions, there is no space between the symbol and the number. interpolation when animated, values of the <percentage> data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. ...
...ion when animated, values of the <percentage> data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. ...
... timing function associated with the animation. examples width and margin-left <div style="background-color:navy;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above html will output: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification. editor's draft no signific...

url() - CSS: Cascading Style Sheets
the url() css function is used to include a file. the parameter is an absolute url, a relative url, or a data uri. the url() function can be passed as a parameter of another css functions, like the attr() function. depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. the url() functional notation is the value for the <url> data type. ...
...or which it is a value, the resource sought can be an image, font, or a stylesheet. the url() functional notation is the value for the <url> data type. ...
...ion */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ... ...
...linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ... } @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet (not to the url of the web page). the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls. in css level 2, the definition of url...

will-change - CSS: Cascading Style Sheets
he stronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources. use sparingly. the normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. but adding will-change directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. so it is a good practice to switch will-change on and off using script code before and after the change occurs. don't apply will-change to elements to perform premature optimization. if your page is performing well...
...shorthand expands to. it cannot be one of the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents. the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer hint. chrome currently takes two actions, given particular css property idents: establish a new compositing layer or a new stacking context. via stylesheet it may be appropriate to include will-change in your style sheet for an application that does page flips on key presses like an album or a slide deck presentation where the pages are large and complex. this will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the key is pressed. but use caution with the will-change property dire...
...it may cause the browser to keep the optimization in memory for much longer than it is needed. ...
...y through scripting, which is probably what you should be doing in most cases. var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css will change module level 1the definition of 'will-change' in that specification. candidate recommendation initial definition ...

CSS: Cascading Style Sheets
css describes how elements should be rendered on screen, on paper, in speech, or on other media. css among the core languages of the open web and is standardized across web browsers according to the w3c specification. previously development of various parts of css specification was done synchronously, which allowed versioning of the latest recommendation. you might have heard about css1, css2.1, css3. however, css4 has never become an official version. ...
...b developers describes every property and concept of css. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started tutorials our css learning area features multiple modules that teach css from the ground up — no previous knowledge required. css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css ...
... is styling text — one of the most common things you'll do with css. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place concerning the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy te...
... can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer. tools for css development you can use the w3c css validation service to check if your css is valid. this is an invaluable debugging tool. firefox developer tools lets you view and edit a page's live css via the inspector and style editor tools. the web developer extension for firefox lets you track and edit live css on watched sites. the web community has created various other miscellaneous css tools for you to use. meta bugs firefox: bug 1323667 ...

font-style - SVG: Scalable Vector Graphics
the font-style attribute specifies whether the text is to be rendered using a normal, italic, or oblique face. note: as a presentation attribute, font-style can be used as a css property. see the css font-style property for more information. ...
...attribute, font-style can be used as a css property. see the css font-style property for more information. as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style property. specifications specification status comment css fonts ...
...text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style property. specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification. working draft no change css fonts module level 3the definition of 'font-style' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-style' in that specification. recommendation initial definition browser compatibility the compatibility table on this p...
...nition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

<style> - SVG: Scalable Vector Graphics
the svg <style> element allows style sheets to be embedded directly within svg content. svg's style element has the same attributes as the corresponding element in html (see html's <style> element). html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string. value type: <string>; default value: text/css; animatable: no media this attribute defines to which media the style applies. value type: <string>; default value: all; animatable: no title this attribute the title of the s...
...svg> attributes type this attribute defines type of the style sheet language to use as a media type string. value type: <string>; default value: text/css; animatable: no media this attribute defines to which media the style applies. value type: <string>; default value: all; animatable: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets. ...
.../css; animatable: no media this attribute defines to which media the style applies. value type: <string>; default value: all; animatable: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets. value type: <string>; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<style>' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edi...
... recommendation initial definition ...

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

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
ray length: 432 pages publisher: o'reilly media; 2 edition (september 22, 2003) isbn: 0596004206 as the title indicates, this is an overview of xml generally. chapter 6 is devoted specifically to xslt. ...
...206 as the title indicates, this is an overview of xml generally. chapter 6 is devoted specifically to xslt. http://www.amazon.com/gp/product/0596004206 digital websites world wide web consortium the w3c homepage: http://www.w3.org/ the main xsl page: http://www.w3.org/style/xsl/ the version 1.0 recommendation for xslt: http://www.w3.org/tr/xslt archive of public style (css and xslt) discussions: http://lists.w3.org/archives/public/www-style/ the version 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium is the body that publishes recommendations for a number of web-based technologies, many of which become the de-facto standard. articles hands-on xsl author: don r. day location: http://www-106.ib...
... author: jay greenspan location: http://hotwired.lycos.com/webmonkey/...l?tw=authoring what is xslt? author: g. ...
...man/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 is a very active general mailing list, hosted by mulberry technologies mozilla.dev.tech.xslt google groups: http://groups.google.com/group/mozilla.dev.tech.xslt ...

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

Content states and the style system - Archive of obsolete content
content states are what gecko uses to implement the various state-dependent in css (examples would be :hover, :active, :focus, :target, :checked). we will focus on describing how changes in content state are handled. generally, whenever a node's content state changes, style has to be reresolved (recomputed) for that node and all of its descendants. this is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. ...
...as to be reresolved (recomputed) for that node and all of its descendants. this is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. to this end, when a <code>contentstateschanged</code> notification is dispatched for a content node the first thing that's done is to is to check whether the content state change something could affect any styles. this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. ...
...fect any styles. this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. for each selector in this list we check whether it might have stopped matching the node or started matching it. if that has happened, then the style could depend on the state that changed and we have to reresolve style. the way we determine whether the selector might have stopped or started matching the node is by just checking whether it matches with the caveat that all the state-dependent pseudo-classes corresponding to the states that changed must be treated as matching (whether they actually do and whether they're negated or not). this i...

style - Archive of obsolete content
...
... ...
... ...

Learn to style HTML using CSS - Learn web development
for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. ...
...the web before proceeding with this topic. however, doing so isn't absolutely necessary as much of what is covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css...
...n is styling text — one of the most common things you'll do with css. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legac...

CSSStyleDeclaration.item() - Web APIs
the cssstyledeclaration.item() method interface returns a css property name from a cssstyledeclaration by index. this method doesn't throw exceptions as long as you provide arguments; the empty string is returned if the index is out of range and a typeerror is thrown if no argument is provided. syntax var propertyname = style.item(index); parameters index is the index of the node to be fetched. the index is zero-based. return value propertyname is a domstring that is the name of the css property at the specified index. ...
... typeerror is thrown if no argument is provided. syntax var propertyname = style.item(index); parameters index is the index of the node to be fetched. the index is zero-based. return value propertyname is a domstring that is the name of the css property at the specified index. javascript has a special simpler syntax for obtaining an item from a nodelist by index: var propertyname = style[index]; example var style = document.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.item()' in that specification. working draft document object model (dom) level 2 styl...
...ent.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.item()' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification. obsolete ...

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

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

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

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

CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, gradient, or pattern to use inside shapes. the default style is #000 (black). for more examples of fill and stroke styles, see applying styles and color in the canvas tutorial. syntax ctx.fillstyle = color; ctx.fillstyle = gradient; ctx.fillstyle = pattern; options color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. ...
... parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color. to achieve this, we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values. (the blue channel has a fixed value.) by modifying the cha...
...ique rgb color for each square, and only modify the red and green values. (the blue channel has a fixed value.) by modifying the channels, you can generate all kinds of palettes. <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fillstyle' in that specification. living standard ...

HTMLStyleElement.scoped - Web APIs
the htmlstyleelement.scoped property is a boolean value indicating if the element applies to the whole document (false) or only to the parent's sub-tree (true). by default it contains the value of the scoped content attribute. ...
... the htmlstyleelement.scoped property is a boolean value indicating if the element applies to the whole document (false) or only to the parent's sub-tree (true). by default it contains the value of the scoped content attribute. ...
... the htmlstyleelement.scoped property is a boolean value indicating if the element applies to the whole document (false) or only to the parent's sub-tree (true). by default it contains the value of the scoped content attribute. ...

HTMLStyleElement.type - Web APIs
the htmlstyleelement.type read-only property returns the type of the current style. ...
... the htmlstyleelement.type read-only property returns the type of the current style. ...
... the htmlstyleelement.type read-only property returns the type of the current style. ...

StylePropertyMapReadOnly.entries() - Web APIs
example // tbd specifications specification status comment css typed om level 1the definition of 'entries()' in that specification. working draft initial definition. ...
... example // tbd specifications specification status comment css typed om level 1the definition of 'entries()' in that specification. working draft initial definition. ...
... example // tbd specifications specification status comment css typed om level 1the definition of 'entries()' in that specification. working draft initial definition. ...

StylePropertyMapReadOnly.forEach() - Web APIs
thisarg optional value to use as this (i.e the reference object) when executing callback. return value undefined. ...
... thisarg optional value to use as this (i.e the reference object) when executing callback. return value undefined. ...
... thisarg optional value to use as this (i.e the reference object) when executing callback. return value undefined. example // tbd specifications specification status comment css typed om level 1the definition of 'foreach()' in that specification. ...

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

-moz-image-region - CSS: Cascading Style Sheets
this allows elements to use different pieces of the same image to improve performance. /* keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property. all four values are relative to the upper left corner of the image. note: for a system that works on any background, see -moz-image-rect(). ...
...) function defines a rectangle to use as shape. its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order. formal definition initial valueautoapplies toxul <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements. ...
...n only works with <image> elements where the icon is specified using list-style-image. it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area to the right of the first for the hovered button */ -moz-image-region: rect(0px, 8px, 4px, 4px); } specifications not part of any standard. ...

::first-letter (:first-letter) - CSS: Cascading Style Sheets
/* selects the first letter of a <p> */ p::first-letter { font-size: 130%; } the first letter of an element is not always trivial to identify: punctuation that precedes or immediately follows the first letter is included in the match. punctuation includes any unicode character defined in the open (ps), close (pe), initial quote (pi), final quote (pf), and other punctuation (po) classes. some languages have digraphs that are always capitalized together, like the ij in dutch. ...
... case, ::first-letter will match the first letter of this generated content. css3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-letter, introduced in css2. ...
...nd-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-le...

::part() - CSS: Cascading Style Sheets
the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute. ...
... the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute. ...
... the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute. ...

::slotted() - CSS: Cascading Style Sheets
sing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowro...
...this allows them to stand out better next to the slots that haven't been successfully filled. ...
...n: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowroot.appendchild(style); shadowroot.appendchild(templatecontent.clonenode(true)); } }) you'll see that when filling the style element with content, we select all slotted elements (::slotted(*)) and give them a different font and color. this allows them to stand out better next to the slots that haven't been successfully filled. the element looks like this when inserted into the page: <person-details> <p slot="person-name">dr. shazaam</p> <span slot="person-age">immortal</span> <span slot="person-occupation">supe...

:defined - CSS: Cascading Style Sheets
the :defined css pseudo-class represents any element that has been defined. this includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the customelementregistry.define() method). /* selects any defined element */ :defined { font-style: italic; } /* selects any instance of a specific custom element */ simple-custom:defined { display: block; } syntax :defined examples hiding elements until they are defined the following snippets are taken from our defined-pseudo-class demo (see it live also). in this demo we define a very simple trivial custom element: customelements.define('simple-custom', class extends htmlelement { constructor() { super(); let divelem = document.createelement('div'); div...
...he document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } // both the custom and the built-in element are given italic text :defined { font-style: italic; } then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements: simple-custom:not(:defined) { display: none; } simple-custom:defined { display: block; } this is useful if you have a complex custom element that takes a while to load into the page — you might want to hide inst...
... living standard browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and ...

:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text. /* selects any element with an active placeholder */ :placeholder-shown { border: 2px solid silver; } syntax :placeholder-shown examples basic example this example applies special font and border styles when the placeholder is shown. html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way. you can use the text-overflow property to alter the way overflowing text is displayed. html <input id="input1" p...
...n use the text-overflow property to alter the way overflowing text is displayed. html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style. html <form id="test"> <p> <label for="name">enter student name:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studenti...
... working draft initial definition. ...

@document - CSS: Cascading Style Sheets
@document url("https://www.example.com/") { h1 { color: green; } } syntax an @document rule can specify one or more matching functions. if any of the functions apply to a given url, the rule will take effect on that url. the functions available are: url(), which matches an exact url. url-prefix(), which matches if the document url starts with the value provided. domain(), which matches if the document url is on the domain provided (or a subdomain of it). ...
...ets in firefox 59 in nightly and beta — an experiment designed to mitigate potential css injection attacks (see bug 1035091). ...
... ...

@font-face - CSS: Cascading Style Sheets
ermines how a font face is displayed based on whether and when it is downloaded and ready to use. font-family specifies a name that will be used as the font face value for font properties. font-stretch a font-stretch value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-style a font-style value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400; fon...
...ttf); font-weight: bold; } } formal syntax @font-face { [ font-family: <family-name>; ] | [ src: <src>; ] | [ unicode-range: <unicode-range>; ] | [ font-variant: <font-variant>; ] | [ font-feature-settings: <font-feature-settings>; ] | [ font-variation-settings: <font-variation-settings>; ] | [ font-stretch: <font-stretch>; ] | [ font-weight: <font-weight>; ] | [ font-style: <font-style>; ] }where <family-name> = <string> | <custom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: view the live example <html> <head> <title>web font sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold";...
...wnloadable font to use, applying it to the entire body of the document: view the live example <html> <head> <title>web font sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold"; src: url("https://mdn.mozillademos.org/files/2468/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </style> </head> <body> this is bitstream vera serif bold. </body> </html> in this example, the user's local copy of "helvetica neue bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "mgopenmodernabold.ttf" is used instead: @font-face { font-family: myhelvetica; src: local("helvetica neue bold"), local("helvetica...

@keyframes - CSS: Cascading Style Sheets
this gives more control over the intermediate steps of the animation sequence than transitions. syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list. this must match the identifier production in css syntax. from a starting offset of 0%. to an ending offset of 100%. <percentage> a percentage of the time through the animation sequence at which the specified keyframe should occur. ...
...rcentage of the time through the animation sequence at which the specified keyframe should occur. description javascript can access the @keyframes at-rule with the css object model interface csskeyframesrule. to use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. each @keyframes rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe. you can list the keyframe percentages in any order; they will be handled in the order they should occur. valid keyframe lists if a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers ...
...this can be used to animate an element from its initial state and back. properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated. ...

aspect-ratio - CSS: Cascading Style Sheets
{ background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange...
... candidate recommendation no change. media queriesthe definiti...
... candidate recommendation no change. ...

prefers-reduced-data - CSS: Cascading Style Sheets
e so the following example will not work. ...
... example will not work. ...
...fers 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+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } bo...

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

Attribute selectors - CSS: Cascading Style Sheets
n the presence or value of a given attribute. /* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr. [attr=value] represents elements with an attribute name of attr whose value is exactly value. [attr~=value] represents elements with an attribute name of attr whose value is a whitespace-separated list of wor...
...</li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all divs with a `lang` attribute are bold. */ div[lang] { font-weight: bold; } /* all divs without a `lang` attribute are italicized. */ div:not([lang]) { font-style: italic; } /* all divs in us english are blue. */ div[lang~="en-us"] { color: blue; } /* all divs in portuguese are green. */ div[lang="pt"] { color: green; } /* all divs in chinese are red, whether simplified (zh-cn) or traditional (zh-tw). */ div[lang|="zh"] { color: red; } /* all divs with a traditional chinese `data-lang` are purple. */ /* note: you could also use hyphenated a...
...the html specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier. css /* list types require the case sensitive flag due to a quirk in how html treats the type attribute. */ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="a" s] { list-style-type: upper-alpha; background: lime; } html <ol type="a"> <li>example list</li> </ol> result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification. ...

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways. these styles can also decorate borders with lines or images, and make them square or rounded. ...
...lement boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius bo...
...apse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element. scaling background images describes how to change the size and repeating behavior of background images. applying color to html elements using css an overview of how css color can be used in html, including for borders. border-image generator this int...

Styling Columns - CSS: Cascading Style Sheets
the anonymous boxes that make up your columns can’t be targeted in any way, meaning it isn’t possible to change a box's background color or have one column larger than the others. perhaps in future versions of the specification it might be. for now, however, we are able to change the spacing and add lines between columns. ...
... can change the gap by using any length unit as the value of column-gap. in the example below, the column-gap is set to 40px. the allowed value for column-gap is a <length-percentage>, this means percentages are allowed. percentage values for column-gap are calculated as a percentage of the width of the multicol container. column rules the specification defines column-rule-width, column-rule-style and column-rule-color, providing a shorthand column-rule. these properties work in exactly the same way as the border properties: any valid border-style can be used as a column-rule-style. these properties are applied to the element which is the multicol container and therefore all columns will have the same rule. rules are only drawn between columns and not on the outer edges. rules should also...
...l not push the columns apart to make space for the rule. instead, the rule overlays the gap. in this next example we have a very wide rule of 40px and a 10px gap. the rule displays under the content of the columns. in order to make space on both sides of the rule, the gap would need to be increased to be larger than 40px. summary this details all the current ways in which column boxes can be styled. in the next guide we will take a look at making elements inside a container span across all columns. ...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="c...
...: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; min-height: auto; margin: 0; } } <div class="wrapper"> <ul> ...
...m becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; margin: 0; } } <div class="wrapper"> ...

Using CSS counters - CSS: Cascading Style Sheets
nce initialized, a counter's value can be increased or decreased with counter-increment. the counter's name must not be "none", "inherit", or "initial"; otherwise the declaration is ignored. displaying a counter the value of a counter can be displayed using either the counter() or counters() function in a content property. the counter() function has two forms: 'counter(name)' or 'counter(name, style)'. the generated text is the value of the innermost counter of the given name in scope at the given pseudo-element.the counter is rendered in the specified style (decimal by default). the counters() function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. the generated text is the value of all counters with the given name in scope at the given pseudo-element, fro...
... basic example this example adds "section [the value of the counter]:" to the beginning of each heading. css body { counter-reset: section; /* set a counter named 'section', and its initial value is 0. ...
...s automatically created in child elements. using the counters() function, separating text can be inserted between different levels of nested counters. ...

Stacking context example 3 - CSS: Cascading Style Sheets
that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors. let's take as an example a three-level hierarchical menu made from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. in order to put it above all first-level menus, a z-index is used. the pr...
...flattening the html hierarchy. note: in the source code you will see that second-level and third level menus are made of several divs contained in an absolutely positioned container. this is useful to group and position all of them at once. ...
... opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position: relative; border: 2px outset #000099; background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class...

CSS Properties Reference - CSS: Cascading Style Sheets
ound background background-attachment backgroundattachment background-color backgroundcolor background-image backgroundimage background-position backgroundposition background-repeat backgroundrepeat border border border-bottom borderbottom border-bottom-color borderbottomcolor border-bottom-style borderbottomstyle border-bottom-width borderbottomwidth border-color bordercolor border-left borderleft border-left-color borderleftcolor border-left-style borderleftstyle border-left-width borderleftwidth border-right borderright border-right-color borderrightcolor border-right-style bo...
...rbottomstyle border-bottom-width borderbottomwidth border-color bordercolor border-left borderleft border-left-color borderleftcolor border-left-style borderleftstyle border-left-width borderleftwidth border-right borderright border-right-color borderrightcolor border-right-style borderrightstyle border-right-width borderrightwidth border-style borderstyle border-top bordertop border-top-color bordertopcolor border-top-style bordertopstyle border-top-width bordertopwidth border-width borderwidth clear clear clip clip color color cursor cursor display...
... cursor cursor display display filter filter float cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marginbottom margin-left marginleft margin-right marginright margin-top margintop overflow overflow padding padding padding-botto...

Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
when a url points at a specific piece of a document, it can be difficult for the user to notice. find out how you can use some simple css to draw attention to the target of a url and improve the user's experience. picking a target the pseudo-class :target is used to style the target element of a url containing a fragment identifier. for example, the url http://developer.mozilla.org/en/docs/using_the_:target_selector#example contains the fragment identifier #example. in html, identifiers are found as the values of either id or name attributes, since the two share the same namespace. thus, the example url would point to the heading "example" in this document. suppose you wish to style any h2 element that is the target of a url, but do not want any other kind of element to get a target style. ...
...rs are found as the values of either id or name attributes, since the two share the same namespace. thus, the example url would point to the heading "example" in this document. suppose you wish to style any h2 element that is the target of a url, but do not want any other kind of element to get a target style. this is simple enough: h2:target { font-weight: bold; } it's also possible to create styles that are specific to a particular fragment of the document. this is done using the same identifying value that is found in the uri. ...
...selecting the "first" link, for example, will cause <h1 id="one"> to become the target element. ...

CSS Transforms - CSS: Cascading Style Sheets
specifications specification status comment css transforms level 1 working draft initial definition. ...
... specifications specification status comment css transforms level 1 working draft initial definition. ...
... specifications specification status comment css transforms level 1 working draft initial definition. css transforms level 2 editor's draft adds individual transforms. ...

Questions about CSS - CSS: Cascading Style Sheets
cascading style sheets (css) is a rule-based language allowing developers to define styles to apply to html elements (or other markup structures). css gives more control over the appearance of a web page to the page creator than to the browser designer or the viewer. with css, the sources of style definition for a given document element are in this order of precedence: the style attribute on an individual element tag the style element that defines a specific style sheet containing style declarations or a link element that links to a separate document containing the style element. in a web page, the style element is placed between the title statement and the body statement. ...
...e definition for a given document element are in this order of precedence: the style attribute on an individual element tag the style element that defines a specific style sheet containing style declarations or a link element that links to a separate document containing the style element. in a web page, the style element is placed between the title statement and the body statement. ...
...ibute on an individual element tag the style element that defines a specific style sheet containing style declarations or a link element that links to a separate document containing the style element. in a web page, the style element is placed between the title statement and the body statement. an imported style sheet, using the css @import notation to automatically import and merge an external style sheet with the current style sheet style attributes specified by the viewer to the browser the default style sheet assumed by the browser in general, the web page creator's style sheet takes precedence, but it's recommended that browsers provide ways for the viewer to override the style attributes in some respects. since it's likely that different browsers will choose to implement css1 somewh...

Media queries - CSS: Cascading Style Sheets
app depending on the presence or value of various device characteristics and parameters. they are a key component of responsive design. for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens. in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied. in the <source> element's media attribute, they define the media to which that source...
... media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query. you can also use mediaquerylist.addlistener() to be notified whenever the state of a query changes. ...
...ies can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied. in the <source> element's media attribute, they define the media to which that source should be applied. (this is only valid inside <picture> elements.) in the <style> element's media attribute, they define the media to which the style should be applied. media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query. you can also use mediaquerylist.addlistener() to be notified whenever the state of a query changes. with this functionality, your site or app can respond to changes in the device configuration, orientation, or state. you can learn more about progra...

Viewport concepts - CSS: Cascading Style Sheets
*/ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 533 */ window.innerheight /* 533 */ window.outerheight /* 596 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels. upon zooming in, the viewport became 800 x 533 pixels. this is the layout viewport. sticky headers or footers, with the following styles, will stick to the top and bottom of the layout viewport respectively. body > header { position: fixed; top: 0; } body > footer { position: fixed; bottom: 0; } we got the 800 x 533 measurement when we zoomed in using the keyboard. the header and footer stayed flush against the top and bottom of the window. but what if we had pinched-zoomed on a tablet? what if a dynamic keyboard pops ...
...in our example above, or 600px, with 1vw being 6px. when zoomed in, the iframe shrinks to 400px and 1vw becomes 4px. a width-based media query within the iframe document is relative to the iframe's viewport. @media screen and (min-width: 500px) { p { color: red; } } if the above css is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state. svg in an svg document, the viewport is the visible area of the svg image. you can set any height and width on an svg, but the whole image might not be visible. the area that is visible is called the viewport. the size of the viewport can be defined using the width and height attributes of the <svg> element. <svg height="300" width="400"></svg> in th...
...his viewport discussion. if you include an svg file in your html, the viewport of the svg is the initial containing block, or the width and height of the svg container. using the @media query in your svg's css is relative to that container, not the browser. @media screen and (min-width: 400px) and (max-width: 500px) { /* css goes here */ } generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive. the width media query in the svg is based on the element in which the svg is contained — the <img> if the source is an svg file, the svg itself if the svg is included directly into the html, or the parent if the parent element has a width assigned and — not the viewport’s width. with the above...

background-repeat - CSS: Cascading Style Sheets
eat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* global values */ background-repeat: inherit; background-repeat: initial; background-repeat: unset; values <repeat-style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space round round round no-repeat no-repeat no-repeat in the two-value syntax, the fir...
...ot necessarily be entirely covered). the position of the non-repeated background image is defined by the background-position css property. formal definition initial valuerepeatapplies toall elements. ...
...irely covered). the position of the non-repeated background image is defined by the background-position css property. formal definition initial valuerepeatapplies toall elements. ...

box-align - CSS: Cascading Style Sheets
tation is horizontal. stretch the box stretches the contents so that there is no extra space in the box. notes the edge of the box designated the start for alignment purposes depends on the box's orientation: horizontal top vertical left the edge opposite to the start is designated the end. ...
...ment is set using the element's align attribute, then the style is ignored. ...
... browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the dat...

box-decoration-break - CSS: Cascading Style Sheets
the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ... <span class="example">the<br>quick<br>orange fox</span> ... results in: ad...
...results in: you can try the two inline examples above in your browser. ...
...n inline element using a large border-radius value. the second "im" has a line-break between the "i" and the "m". for comparison, the first "im" is without line breaks. note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering. try the above example in your browser. block box fragments a block element with similar styles as above and no fragmentation results in: fragmenting the above block into three columns results in: note that stacking these pieces vertically will result in the non-fragmented rendering. now, the same example but styled with box-decoration-break: clone results in: note here that each fragment has an identical replicated border, box-shadow, and background. you can try the block examp...

box-flex - CSS: Cascading Style Sheets
ining box allocates the available extra space in proportion to the flex value of each of the content elements. content elements that have zero flex do not grow. if only one content element has nonzero flex, then it grows to fill the available space. content elements that have the same flex grow by the same absolute amounts. if the flex value is set using the element's flex attribute, then the style is ignored. to make xul elements in a containing box the same size, set the containing box's equalsize attribute to the value always. this attribute does not have a corresponding css property. a trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. height: 0), and the same box-flex value greater than zero (e.g. -moz-box-flex: 1). formal de...
...e.g. -moz-box-flex: 1). ...
... ...

<color> - CSS: Cascading Style Sheets
e used wherever a <color> value can be used. currentcolor keyword the currentcolor keyword represents the value of an element's color property. this lets you use the color value on properties that do not receive it by default. if currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property. currentcolor example html <div style="color:blue; border: 1px dashed currentcolor;"> the color of this text is blue. <div style="background:currentcolor; height:9px;"></div> this block is surrounded by a blue border. </div> result rgb colors the rgb color model defines a given color according to its red, green, and blue components. an optional alpha component represents the color's transparency. syntax rgb colors can be...
...v { width: 100%; height: 200px; } javascript const inputelem = document.queryselector('input'); const divelem = document.queryselector('div'); function validtextcolor(stringtotest) { if (stringtotest === "") { return false; } if (stringtotest === "inherit") { return false; } if (stringtotest === "transparent") { return false; } const image = document.createelement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringtotest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringtotest; return image.style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlistener('change', () => { if(validtextcolor(inputelem.value)) { divelem.style.backgroundcolor = inputelem.value; ...
... /* these syntax variations all specify the same color: a fully opaque hot pink. ...

element() - CSS: Cascading Style Sheets
id the id of an element to use as the background, specified using the html attribute #id on the element. examples these examples can be viewed live in builds of firefox that support -moz-element(). a somewhat realistic example this example uses a hidden <div> as a background. the background element uses a gradient, but also includes text that is rendered as part of the background. ...
... support -moz-element(). a somewhat realistic example this example uses a hidden <div> as a background. the background element uses a gradient, but also includes text that is rendered as part of the background. <div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">this text is part of the background. cool, huh?</p> </div> </div> the <div> element with the id "mybackground1" is used as the background for the content i...
...1" is used as the background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!". a somewhat more bizarre example this example uses a hidden <button> element in a repeating pattern as its background. this demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices. <div style="width:400px; height:100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification. working dr...

font-family - CSS: Cascading Style Sheets
of fonts, from highest priority to lowest. font selection does not simply stop at the first font in the list that is on the user's system. rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. (however, this doesn't work in internet explorer 6 or earlier.) when a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen. syntax /* a font family name and a generic family name */ font-family: gill sans extrabold, sans-serif; font-family: "goudy bookletter 1911", sans-serif; /* a generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-fami...
... font families, the first with a <family-name> and the second with a <generic-name>: font-family: gill sans extrabold, sans-serif; values <family-name> the name of a font family. for example, "times" and "helvetica" are font families. font family names containing whitespace should be quoted. <generic-name> generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. generic family names are keywords and must not be quoted. a generic font family should be the last item in the list of font family names. the following keywords are defined: serif glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings. e.g. lucida bright, lucida fax, palatino, "palatino ...
.... math this is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings. this is some example math text: ax² + bx + c = 0. emoji fonts that are specifically designed to render emoji. this is some example emoji text: ✝♾. fangsong a particular style of chinese characters that are between serif-style song and cursive-style kai forms. this style is often used for government documents. this is some example fangsong text with the chinese characters for "fangsong" in traditional and simple forms, respectively: 仿宋體 仿宋体. valid family names font family names must either be given quoted as strings, or unquoted as a sequence of one ...

ime-mode - CSS: Cascading Style Sheets
me mode. this property should only be used for private web applications or to undo the property if it was previously set by legacy code. syntax the ime-mode property is specified using one of the keyword values listed below. values auto no change is made to the current input method editor state. this is the default. normal the ime state should be normal; this value can be used in a user style sheet to override the page's setting. this value is not supported by internet explorer. active the input method editor is initially active; text entry is performed through it unless the user specifically dismisses it. not supported on linux. inactive the input method editor is initially inactive, but the user may activate it if they wish. not supported on linux. disabled the input method ed...
...led and may not be activated by the user. description unlike internet explorer, firefox's implementation of ime-mode allows this property on <input type="password">. however, this makes for a bad user experience, and password fields should not enable the ime. users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following css into their user stylesheet: input[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value. formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto |...
...ritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a form field. in the past, this was commonly used on fields that entered data into databases which didn't support extended character sets. <input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended characters from passing through your form. even with ime disabled, users can still paste extended characters into your form's fields. specifications specification status comment css basic user interface module level 3the definition of 'ime-mode' in that specification. recommenda...

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

<transform-function> - CSS: Cascading Style Sheets
)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0...
... editor's draft added 3d transform functions. c...
... editor's draft added 3d transform functions. css transforms level 1the definition of '<transform-function>' in that specification. working draft ini...

<url> - CSS: Cascading Style Sheets
uri or url? there is a difference between a uri and a url. a uri simply identifies a resource. a url is a type of uri, and describes the location of a resource. a uri can be either a url or a name (urn) of a resource. in css level 1, the url() functional notation described only true urls. in css level 2, the definition of url() was extended to describe any uri, whether a url or a urn. ...
...necessary, since urns are almost never used in actual css. to alleviate the confusion, css level 3 returned to the narrower, initial definition. now, url() denotes only true <url>s. syntax the <url> data type is specified using the url() functional notation. it may be written without quotes, or surrounded by single or double quotes. relative urls are allowed, and are relative to the url of the stylesheet (not to the url of the web page). if you choose to write the url without quotes, use a backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the url. <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/my...
...fore any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the url. <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png) examples .topbanner { background: url("topbanner.png") #00d no-repeat fixed; } ul { list-style: square url(http://www.example.com/redball.png); } specifications specification status comment css values and units module level 4the definition of '<url>' in that specification. editor's draft css values and units module level 3the definition of '<url>' in that specification. candidate recommendation no significant change from css level 2 (rev...

style - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. usage note: this attribute must not be used to convey semantic information. even if all styling is removed, a page should remain semantically correct. typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute. ...
...d send us a pull request. usage note: this attribute must not be used to convey semantic information. even if all styling is removed, a page should remain semantically correct. typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute. specifications specification status comment html living standardthe definition of 'style' in that specification. living standard no change from latest snapshot, html 5.1 html 5.1the definition of 'style' in that specification. recommendation snapshot of html living standard, no change from html5 html5the definition of 'style' in that specification. recommendation snapshot of html living standard. from html 4.01 specification, it is now a true globa...
...test snapshot, html 5.1 html 5.1the definition of 'style' in that specification. recommendation snapshot of html living standard, no change from html5 html5the definition of 'style' in that specification. recommendation snapshot of html living standard. from html 4.01 specification, it is now a true global attribute. html 4.01 specificationthe definition of 'style' in that specification. recommendation supported on all elements but <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>. css style attributes recommendation defines the content of the style attribute. ...

Advanced Example - XSLT: Extensible Stylesheet Language Transformations
// importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.getelementbyid("example"); var clonednode...
...nding"); 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...
..." 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" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...

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

XUL Coding Style Guidelines - Archive of obsolete content
xul, pronounced as "zool", stands for "xml-based user interface language", is a cross platform way of describing user interface. it could contain xul specific element types for ui controls, html4 markups for content data, and even javascript for user event handling. to make xul files easy to read and maintain, localization friendly, and portable across user agents, we need to have a set of coding style guidelines to ensure our objectives are achievable. the author has collected a set of guidelines from various sources listed in the references section. while some of the guidelines are recommended practices, the others are mandatory. xml, xul, html, and xhtml guidelines the following are considered good coding style for xml/xul documents. disobeying them might not cause any parsing error for now...
...alized for a specific language or culture. in the new world, mozilla 5.0, this is not true any more. most of the windows and dialogs in mozilla will be described using xul. to make xul stream/file localizable, several guidelines are to be adopted to make the translation work easier and less error-prone. the issues are discussed in details here: what is localizable? widget resources content data style info layout geometry how to make them localizable? localization notes localization notes are the xul writers' notes to the localizers/translators. they are placed above the actual entity string in the format: <!-- localization note (entity.name): content --> where the <var>entity.name</var> is the entity name (id) for the string (entity value) to be localized, and the content provides helpfu...

Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
in css, there are three categories of sources for style changes. these categories are called style origins. they are the user agent origin, user origin, and the author origin. user-agent origin the user agent origin is the style origin comprised of the default styles used by the user's web browser. if no other styles are applied to content, the user agent origin's styles are used while rendering elements. user origin the user origin is the style origin containing any css that the user of the web browser has added. these may be from adding styles using a developer tool or from a browser extension that automatically applies custom styles to content, such as stylus or stylish. ...
...ed to content, the user agent origin's styles are used while rendering elements. user origin the user origin is the style origin containing any css that the user of the web browser has added. these may be from adding styles using a developer tool or from a browser extension that automatically applies custom styles to content, such as stylus or stylish. author origin the author origin is the style origin which contains all of the styles which are part of the document, whether embedded within the html or loaded from an external stylesheet file. the style origins are used to determine where to stop rolling back (or backtracking through) the cascade of styles that have been applied to an element when removing styles, such as when using the unset or revert keywords. learn more technical in...

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

Animation.commitStyles() - Web APIs
the commitstyles() method of the web animations api's animation interface commits the end styling state of an animation to the element being animated, even after that animation has been removed. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. syntax animation.commitstyles(); parameters none. return value none. ...
...n the form of properties inside a style attribute. syntax animation.commitstyles(); parameters none. return value none. examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification. working draft ...

CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
the cssstyledeclaration.getpropertycssvalue() method interface returns a cssvalue containing the css value for a property. note that it returns null if the property name is a shorthand property. you should use cssstyledeclaration.getpropertyvalue() instead. syntax var value = style.getpropertycssvalue(property); parameters property is a domstring representing the property name to be retrieved. return value value is a cssvalue containing the css value for a property. if none exists, returns null. ...
...opertyvalue() instead. syntax var value = style.getpropertycssvalue(property); parameters property is a domstring representing the property name to be retrieved. return value value is a cssvalue containing the css value for a property. if none exists, returns null. example the following javascript code gets an object containing the computed rgb values of the color css property: var style = window.getcomputedstyle(elem, null); var rgbobj = style.getpropertycssvalue('color').getrgbcolorvalue(); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification. obsolete declared as obsolete in july 2003. ...

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

CSSStyleDeclaration.length - Web APIs
the read-only property returns an integer that represents the number of style declarations in this css declaration block. syntax var num = styles.length; value an integer that provides the number of styles explictly set on the parent of the instance. example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification. working draft document object model (dom) level 2 s...
... javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification. obsolete ...

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

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

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

CSSStyleValue.parse() - Web APIs
the parse() method of the cssstylevalue interface sets a specific css property to the specified values and returns the first value as a cssstylevalue object. syntax cssstylevalue.parse(property, csstext) parameters property a css property to set. csstext a comma-separated string containing one or more values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. example the code below parses a set of declarations for the transform property. the second code block shows the structure of the returned object as it would be rendered in a developer tools console. ...
...o set. csstext a comma-separated string containing one or more values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. example the code below parses a set of declarations for the transform property. the second code block shows the structure of the returned object as it would be rendered in a developer tools console. const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification. working draft initial definition. ...

CSSStyleValue - Web APIs
the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api. an instance of this class may be used anywhere a string is expected. interfaces based on cssstylevalue below is a list of interfaces based on the cssstylevalue interface. cssimagevalue csskeywordvalue cssnumericvalue csspositionvalue csstransformvalue cssunparsedvalue methods cssstylevalue.parse() sets a specific css property to the specified values and returns the first value as a cssstylevalue object. cssstylevalue.parseall() sets all occurences of a specific css property to the specified valueand returns an array of cssstylevalue objects, each containing one of the supplied values. specifications specification status ...
...pecific css property to the specified values and returns the first value as a cssstylevalue object. cssstylevalue.parseall() sets all occurences of a specific css property to the specified valueand returns an array of cssstylevalue objects, each containing one of the supplied values. specifications specification status comment css typed om level 1the definition of 'cssstylevalue' in that specification. working draft initial definition. ...

CSS Counter Styles - Web APIs
the css counter styles module allows to define custom counter styles, which can be used for css list-marker and generated-content counters. interfaces csscounterstylerule represents an @counter-style rule. ...
... the css counter styles module allows to define custom counter styles, which can be used for css list-marker and generated-content counters. interfaces csscounterstylerule represents an @counter-style rule. ...

Element.currentStyle - Web APIs
element.currentstyle is a proprietary property which is similar to the standardized window.getcomputedstyle() method. it is available in old versions of microsoft internet explorer. however, it returns the units set in css while window.getcomputedstyle() returns the values in pixels. polyfill this polyfill returns the values in pixels and is likely to be rather slow, as it has to call window.getcomputedstyle() every time its value is read. /* any copyright is dedicated to the public domain. * http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", { get: function() { return window.getcomputedstyle(this); } }); } specification not part of any specification. microsof...
...n on msdn. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

Element.runtimeStyle - Web APIs
summary element.runtimestyle is a proprietary property similar to htmlelement.style, except its styles, that have higher precedence and modification. it does not modify the style content attribute. it is available in old versions of microsoft internet explorer. specification not a part of any specification. microsoft had a description on msdn. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...n on msdn. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

StylePropertyMapReadOnly.size - Web APIs
example // tbd specifications specification status comment css typed om level 1the definition of 'size' in that specification. ...
... example // tbd specifications specification status comment css typed om level 1the definition of 'size' in that specification. ...

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). syntax bool = stylesheet.disabled example // if the stylesheet is disabled... if (stylesheet.disabled) { // ... apply styles in-line. } specification specification status comment css object model (cssom)the definition of 'stylesheet.disabled' in that specification. working draft no change from document object model (dom) level 2 style specification. document object model (d...
... example // if the stylesheet is disabled... if (stylesheet.disabled) { // ... apply styles in-line. } specification specification status comment css object model (cssom)the definition of 'stylesheet.disabled' in that specification. working draft no change from document object model (dom) level 2 style specification. document object model (dom) level 2 style specificationthe definition of 'stylesheet.disabled' in that specification. obsolete initial definition. ...

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

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

StyleSheetList - Web APIs
the stylesheetlist interface represents a list of stylesheet. it is an array-like object but can't be iterated over using array methods. however it can be iterated over in a standard for loop over its indices, or converted to an array. examples get document stylesheet objects with for loop for (let i = 0; i < document.stylesheets.length; i++) { let stylesheet = document.stylesheets[i]; } get all css rules for the document using array methods const allcss = [...document.stylesheets] .map(stylesheet => { try { return [...stylesheet.cssrules] .map(rule => rule.csstext) .join(''); } catch (e) { console.log('access to stylesheet %s is denied. ...
...= 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. working draft ...

-webkit-mask-repeat-x - CSS: Cascading Style Sheets
specifications not part of any standard. ...
... specifications not part of any standard. ...

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
specifications not part of any standard. ...
... specifications not part of any standard. ...

::after (:after) - CSS: Cascading Style Sheets
d of paragraphs. ...
...after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want. html <span class="ribbon">look at the orange box after this text. </span> css .ribbon { background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips. no javascript is required! we can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a css :focus selector. this shows how flexible ::before and ::after can be, ...

::backdrop - CSS: Cascading Style Sheets
en dialog is opened with dialog.showmodal() */ dialog::backdrop { background: rgba(255,0,0,.25); } all full-screen elements are placed in a last-in/first out (lifo) stack in the top layer, which is a special layer in the viewport which is always rendered last (and therefore on top) before drawing the viewport's contents to the screen. ...
... video::backdrop { background-color: #448; } the resulting screen looks like this: note the dark grey-blue letterbox effect above and below where the backdrop is visible. ...

:first-of-type - CSS: Cascading Style Sheets
is the first element of its type among its siblings */ p:first-of-type { color: red; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nes...
...ult nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type { background-color: pink; } result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification. working draft matching elements are not required to have a parent. selec...

:fullscreen - CSS: Cascading Style Sheets
the :fullscreen css pseudo-class matches every element which is currently in full-screen mode. if multiple elements have been put into full-screen mode, this selects them all. syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations. examples in this example, the color of a button is changed depending on whether or not the document is in full-screen mode. this is done without needing to specifically apply style changes using javascript. html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automaticall...
...ions. examples in this example, the color of a button is changed depending on whether or not the document is in full-screen mode. this is done without needing to specifically apply style changes using javascript. html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode. css the magic happens in the css. there are two rules here. the first establishes the background color of the "toggle...

:link - CSS: Cascading Style Sheets
the :link css pseudo-class represents an element that has not yet been visited. it matches every unvisited <a>, <area>, or <link> element that has an href attribute. /* selects any <a> that has not been visited yet */ a:link { color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:active, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :link rule before all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active. note: use :any-link to select an element independent of whether it has been visited or not. syntax :link examples by default, most browsers apply a special color value to visited links. thus, the links in this example wil...
...al font colors only before you visit them. (after that, you'll need to clear your browser history to see them again.) however, the background-color values are likely to remain, as most browsers do not set that property on visited links by default. html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a> css a:link { background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification. living standard selectors level 4the definition of ':link' in that specification. working draft no change. selectors level 3the definition of ':link...

:nth-last-child() - CSS: Cascading Style Sheets
> </tbody> </table> css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending on how many of them there are. in this example, list items turn red when there are at least three of them in a given list. this is accomplished by combining the capabilities of the nth-last-child pseudo-class and the general sibling combinator. html <h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list o...
...nding on how many of them there are. in this example, list items turn red when there are at least three of them in a given list. this is accomplished by combining the capabilities of the nth-last-child pseudo-class and the general sibling combinator. html <h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; } result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification. working draft matching elements are not requ...

:only-child - CSS: Cascading Style Sheets
working draft matching elements are not required to have a parent. selectors level 3the definition of ':only-child' in that specification. recommendati...
... working draft matching elements are not required to have a parent. selectors level 3the definition of ':only-child' in that specification. recommendation initial definition. ...

:where() - CSS: Cascading Style Sheets
ne of the selectors in that list. the difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments. examples comparing :where() and :is() this example shows how :where() works, and also illustrates the difference between :where() and :is(). take the following html: <article> <h2>:is()-styled links</h2> <section class="is-styling"> <p>here is my main content. this <a href="https://mozilla.org">contains a link</a>. </section> <aside class="is-styling"> <p>here is my aside content. this <a href="https://developer.mozilla.org">also contains a link</a>. </aside> <footer class="is-styling"> <p>this is my footer, also containing <a href="https://github.com/mdn">a li...
...s my main content. this <a href="https://mozilla.org">contains a link</a>. </section> <aside class="is-styling"> <p>here is my aside content. this <a href="https://developer.mozilla.org">also contains a link</a>. </aside> <footer class="is-styling"> <p>this is my footer, also containing <a href="https://github.com/mdn">a link</a>. </footer> </article> <article> <h2>:where()-styled links</h2> <section class="where-styling"> <p>here is my main content. this <a href="https://mozilla.org">contains a link</a>. </section> <aside class="where-styling"> <p>here is my aside content. this <a href="https://developer.mozilla.org">also contains a link</a>. </aside> <footer class="where-styling"> <p>this is my footer, also containing <a href="https://github.com/...

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

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

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

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

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
oles in your grid. in my image gallery example i have some landscape and some portrait images. i have set landscape images – with a class of landscape to span two column tracks. i then use grid-auto-flow: dense to create a densely packed grid. ...
...> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> </ul> auto-placement can also help you lay out interface items which do have logical order. an example is the definition list in this next example. definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. in my example i am allowing auto-placement to place the items, however i have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border...

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
l-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. .wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of where the block and inline axis are. the gri...
... within documents that are otherwise ltr. in this next example i have a grid layout with a set of links down one side. i’ve used writing modes to turn these on their side in the column track: .wrapper { display: grid; grid-gap: 20px; grid-template-columns: 1fr auto; font: 1em helvetica, arial, sans-serif; } .wrapper nav { writing-mode: vertical-lr; } .wrapper ul { list-style: none; margin: 0; padding: 1em; display: flex; justify-content: space-between; } .wrapper a { text-decoration: none; } <div class="wrapper"> <div class="content"> <p>turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. celery potato scallion desert...

Stacking context example 2 - CSS: Cascading Style Sheets
note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy. in the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. ...
...8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position: relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> positi...

Using CSS transitions - CSS: Cascading Style Sheets
ion-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 36px; } multiple animated properties example html content <body> <p>the box below combines transitions for: width, height, background-color, transform. ...
...sitions are a great tool to make things look much smoother without having to do anything to your javascript functionality. take the following example. <p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort. simply add a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0;...

Class selectors - CSS: Cascading Style Sheets
ts based on the contents of their class attribute. ...
...rgin: 2em; } /* all <li> elements with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragr...

Comments - CSS: Cascading Style Sheets
a css comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. by design, comments have no effect on the layout of a document. syntax comments can be placed wherever white space is allowed within a style sheet. they can be used on a single line, or traverse multiple lines. /* comment */ examples /* a one-line comment */ /* a comment which stretches over several lines */ /* the comment below is used to disable specific styling */ /* span { color: blue; font-size: 1.5em; } */ notes the /* */ comment syntax is used for both single and multiline comments. ...
... on a single line, or traverse multiple lines. /* comment */ examples /* a one-line comment */ /* a comment which stretches over several lines */ /* the comment below is used to disable specific styling */ /* span { color: blue; font-size: 1.5em; } */ notes the /* */ comment syntax is used for both single and multiline comments. there is no other way to specify comments in external style sheets. however, when using the <style> element, you may use <!-- --> to hide css from older browsers, although this is not recommended. as with most programming languages that use the /* */ comment syntax, comments cannot be nested. in other words, the first instance of */ that follows an instance of /* closes the comment. specifications css 2.1 syntax and basic data types #comments ...

Descendant combinator - CSS: Cascading Style Sheets
acters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. additionally, the white space characters of which the combinator is comprised may contain any number of css comments. ...
...r one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. additionally, the white space characters of which the combinator is comprised may contain any number of css comments. ...

Pseudo-elements - CSS: Cascading Style Sheets
syntax selector::pseudo-element { property: value; } you can use only one pseudo-element in a selector. it must appear after the simple selectors in the statement. note: as a rule, double colons (::) should be used instead of a single colon (:). this distinguishes pseudo-classes from pseudo-elements. ...
... syntax selector::pseudo-element { property: value; } you can use only one pseudo-element in a selector. it must appear after the simple selectors in the statement. note: as a rule, double colons (::) should be used instead of a single colon (:). this distinguishes pseudo-classes from pseudo-elements. ...

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

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

CSS Tutorials - CSS: Cascading Style Sheets
el. editor's note: we should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built. beginner-level css tutorials getting started this guide is aimed at complete beginners: you haven't written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to resize images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the size of the screen...
...ase of css 2 (level 1), new features have been added to css. some of them are fancy and are pretty self contained. they are easy to use for anybody with a fair knowledge of basic concepts. css counters counting items and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). css animations css3 animations allow you to define configurations of style, as keyframes, and to transition between them defining an animation. css transitions css3 transitions allow you to define an animation between several styles and to control the way this transition happens. css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or 3d spaces. ...

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
e used. ...
...: while a syntax error in a css property / value pair will lead to the line being ignored, using a cascaded value, invalid substitution -- using a custom property value that is invalid -- is not ignored, leading to the value to be inherited. values in javascript to use the values of custom properties in javascript, it is just like standard properties. // get variable from inline style element.style.getpropertyvalue("--my-var"); // get variable from wherever getcomputedstyle(element).getpropertyvalue("--my-var"); // set variable on inline style element.style.setproperty("--my-var", jsvar + 4); ...

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

animation-fill-mode - CSS: Cascading Style Sheets
the animation-fill-mode css property sets how a css animation applies styles to its target before and after its execution. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the target will retain the computed values set by the last keyframe encountered during execution. the last keyframe depends on the value of animation-direction and animation-iteration-count: animation-direction animation-iter...

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

background-clip - CSS: Cascading Style Sheets
r this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference. note: because the root element has a different background painting area, the background-clip property has no effect when specified on it. see "the backgrounds of special elements." note: for documents whose root element is an html element: if the computed value of background-image on the root element is none and its background-col...
... padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: r...

border-block-start-width - CSS: Cascading Style Sheets
ax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. ...
...s toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border. see border-width. ...

border-bottom-width - CSS: Cascading Style Sheets
thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...
... ...

border-color - CSS: Cascading Style Sheets
css backgrounds and borders module level 3the definition of 'border-color' in...
... css backgrounds and borders module level 3the definition of 'border-color' in that specification. candidate recommendation the transparent keyword has been removed as it is now a part of the <color> d...

border-image-slice - CSS: Cascading Style Sheets
" max="45" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = doc...
...} javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-slice...

border-image - CSS: Cascading Style Sheets
the border-image css property draws an image around a given element. it replaces the element's regular border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: you should specify a separate border-style in case the border image fails to load. indeed, this is required according to the specification, although not all browsers implement this requirement. constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue...
...idth */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below. note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead. values <'border-image-source'> the source image. see border-image-source. <'border-image-slice'> the dimensions for slicing the source image into regions. up to four values may be specified. see border-image-slice. <'border-image-width'> the width of the border image. up to four values may be specified. see border-image-width. <'border-image-outset'> the dis...

border-inline-end-width - CSS: Cascading Style Sheets
tax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element. ...
...s toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border. see border-width. ...

box-pack - CSS: Cascading Style Sheets
one child, treat the value as if it were start. notes the edge of the box designated the start for packing purposes depends on the box's orientation and direction: normal reverse horizontal left right vertical top bottom the edge opposite to the start is designated the end. ...
...tart is designated the end. if the packing is set using the element's pack attribute, then the style is ignored. ...

clip-path - CSS: Cascading Style Sheets
ape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } .defs { width: 0; height: 0; margin: 0; } pre { margin-bottom: 0; } svg { margin: 1em; font-family: sans-serif; width: 192px; height: 192px; } svg rect { stroke: pink; stroke-width: 16px; } svg text { fill: pink; text-anchor: middle; } svg text.em { font-style: italic; } complete example html <img id="clipped" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"> <svg height="0" width="0"> <defs> <clippath id="cross"> <rect y="110" x="137" width="90" height="90"/> <rect x="0" y="110" width="90" height="90"/> <rect x="137" y="0" width="90" height="90"/> <rect x="0" y="0" width="90" height="...
... candidate recommendation extends its application to html elements. the clip-path property replaces the deprecated clip property. scalable vector graphics (svg) 1.1 (second edition)the de...

color-adjust - CSS: Cascading Style Sheets
t deems appropriate and prudent in order to optimize the output for the device it's being rendered for. for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. this is the default. exact the element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better. the appearance of the content should not be changed except by the user's request. for example, a page might include a list of information with rows whose background colors alternate between white and a light grey. removing the background color would decrease the legib...
...mples preserving low contrast in this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text. for whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use color-adjust: exact to tell the browser not to make color or style adjustments to the box when rendering it. css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> ...

column-rule-width - CSS: Cascading Style Sheets
h: unset; the column-rule-width property is specified as a single <'border-width'> value. values <'border-width'> is a keyword defined by border-width describing the width of the rule. it may be either a <length> or one of the thin, medium, or thick keywords. ...
...ength; 0 if the column-rule-style is none or hiddenanimation typea length formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns. the `column-rule-width` property is used to change the width of the line that is drawn between columns. don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-width: thick; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-width' in that specification. working draft initial definition. ...

<custom-ident> - CSS: Cascading Style Sheets
a decimal digit, nor a hyphen (-) followed by a decimal digit or another hyphen. to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the global css values (unset, initial, and inherit), as well as none. counter-reset counter-increment forbids the global css values (unset, initial, and inherit), as well as none. @counter-style list-style-type forbids the global css values (unset, initial, and inherit), as well as the values none, inline, and outside. also, quite a few predefined values are implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, ca...
...ifications specification status comment css values and units module level 4the definition of '<custom-ident>' in that specification. editor's draft css will change module level 1the definition of '<custom-ident> for will-change' in that specification. candidate recommendation defines which values are excluded for will-change. css counter styles level 3the definition of '<custom-ident> for list-style-type' in that specification. candidate recommendation uses <custom-ident> instead of a finite list of keywords. defines which values are excluded for list-style-type and @counter-style. css lists module level 3the definition of '<custom-ident> for counter-*' in that specification. working draft renames <identifier> to <...

display - CSS: Cascading Style Sheets
ted behavior; for example if you specify an element to be display: grid, you would expect that the box created on the grid container would be a block level box. list item <display-listitem> the element generates a block box for the content and a separate list-item inline box. a single value of list-item will cause the element to behave like a list item. this can be used together with list-style-type and list-style-position. list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. internal <display-internal> some layout ...
... specifications specification status comment css display module level 3the definition of 'display' in that specification. candidate recommendation added ...

<filter-function> - CSS: Cascading Style Sheets
|| filter === 'sepia') { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; slider.setattribute('data-unit', 'deg'); } } function setdiv(filter) { if(filter === 'drop-shadow') { divelem.style.filter = `${selectelem.value}(${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(math.abs(slider.value/2))}${slider.getattribute('data-unit')})`; } else { divelem.style.filter = `${selectelem.value}(${slider.value}${slider.getattribute('data-unit')}`; } updateoutput(); updatecurvalue(); } functio...
... working draft ...

flex - CSS: Cascading Style Sheets
"block" : "none"; }); #flex-container { width: 100%; font-family: consolas, arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; } result specifications specification status comment css flexible box layout modulethe definit...
...o toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); #flex-container { width: 100%; font-family: consolas, arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; } result specifications specification status comment css flexible box layout modulethe definition of 'flex' in tha...

float - CSS: Cascading Style Sheets
this was an exception to the rule, that the name of the dom member is the camel-case name of the dash-separated css name (due to the fact that "float" is a reserved word in javascript, as seen in the need to escape "class" as "classname" and ...
... table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat. this was an exception to the rule, that the name of the dom member is the camel-case name of the dash-separated css name (due to the fact that "float" is a reserved word in javascript, as seen in the need to escape "class" as "classname" and escape <label>'s "for" as "htmlfor"). syntax /* keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /*...

font-variant-caps - CSS: Cascading Style Sheets
candidate recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if...
... candidate recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https:/...

font-variation-settings - CSS: Cascading Style Sheets
rty is invalid. the <number> can be fractional or negative, depending on the value range available in your font, as defined by the font designer. description this property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. you should only use it when no basic properties exist to set those features (e.g. font-weight, font-style). font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade. in some browsers, this is currently only true when the @font-face declaration includes a font-weight range. registered and custom axes variable font axes come in two types: registered and custom. re...
...countered — common enough that the authors of the specification felt they were worth standardizing. note that this doesn't mean that the author has to include all of these in their font. here are the registered axes along with their corresponding css properties: axis tag css property "wght" font-weight "wdth" font-stretch "slnt" (slant) font-style: oblique + angle "ital" font-style: italic "opsz" font-optical-sizing custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. any axis can be used as long as it is given a unique 4-character axis. some will end up becoming more common, and ma...

font-weight - CSS: Cascading Style Sheets
ong or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex...
... mdn understanding wcag, guideline 1.4 explanations understanding succes...

<image> - CSS: Cascading Style Sheets
if supported, the browser-defined size matchin...
...he size of the element's background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor the browser-defined size matching the usual cursor size on the client's system mask-image ? shape-outside ? mask-border-source ? symbols for @counter-style at risk feature. if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a 300px × 150px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both the width and the height, these values are used as the concrete object size. if the...

mask-type - CSS: Cascading Style Sheets
tial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/200...
... .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css maski...

outline-color - CSS: Cascading Style Sheets
the outline is drawn outside the element's frame, and may overlap other content. the border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap). it is often more convenient to use the shorthand property outline when defining the appearance of an outline. accessibility concerns custom focus styles commonly involve making adjustments to the outline property. if the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the text and background color v...
... recommendation no change. css level 2 (revision 1)the definition of 'outline-color' in that specification. recommendation ...

place-content - CSS: Cascading Style Sheets
="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="left">left</option> <option value="right">right</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () { document.getelementbyid("container").style.placecontent = document.getelementbyid("aligncontentalignment").value + " " + document.getelementbyid("justifycontentalignment").value; } var aligncontentalignment = document.getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.getelementbyid("justifycontentalignment"); justifycontentalignment.addeventlistener...
...ocument.getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.getelementbyid("justifycontentalignment"); justifycontentalignment.addeventlistener("change", update); var writingm = document.getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the l...

scroll-margin-inline-end - CSS: Cascading Style Sheets
xplain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
... border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. ...

scroll-margin-inline-start - CSS: Cascading Style Sheets
explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
... border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. ...

scroll-margin-inline - CSS: Cascading Style Sheets
xplain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
... border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. ...

scroll-margin - CSS: Cascading Style Sheets
explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
... border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. ...

symbols() - CSS: Cascading Style Sheets
syntax symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ ); <symbols-type> can be one of the following: cyclic: the system cycles through the given values in the order of their definition, and returns to the start when it reaches the end. numeric: the system interprets the given values as the successive units of a place-value numbering system. ...
...stem but without 0. symbolic: the system cycles through the values, printing them an additional time at each cycle (one time for the first cycle, two times for the second, etc.). fixed: the system cycles through the given values once, then falls back to arabic numerals. examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol> css ol { list-style: symbols(cyclic "*" "†" "‡"); } result specifications specification status comment css counter styles level 3the definition of 'symbols()' in that specification. candidate recommendation initial defintion. ...

Used value - CSS: Cascading Style Sheets
med on the computed value. after the user agent has finished its calculations, every css property has a used value. the used values of dimensions (e.g., width, line-height) are in pixels. the used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color or background-size) and with position and float. note: the getcomputedstyle() dom api returns the resolved value, which may either be the computed value or the used value, depending on the property. example this example computes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-...
...d-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.

var() - CSS: Cascading Style Sheets
which is used in case the custom property is invalid in the used context. this value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. ), ], or }, top-level semicolons, or exclamation marks. ...
...lons, or exclamation marks. examples :root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); } /* fallback */ /* in the component’s style: */ .component .header { color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */ } .component .text { color: var(--text-color, black); } /* in the larger application’s style: */ .component { --text-color: #080; } specifications specification status comment css custom properties for cascading variables module level 1the definition of 'var()' in that specification. candidate recommendation initial definition ...

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

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

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

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

style - Archive of obsolete content
« xul reference home style type: css inline style css style rules to be applied to the element. syntax is as in the html style attribute. it is preferred to put style rules in style sheets. ...

selstyle - Archive of obsolete content
« xul reference selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected. otherwise, the entire row will be highlighted. to see the difference, compare the selection style in the folder list and the message list in mozilla mail. ...

-ms-overflow-style - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto the initial value. same as inherit. none scrollbars are never displayed, although the element can still be scrolled if the element's content overflows. scrollbar "traditional" scrollbars are displayed if the element's content overflows. "traditional" scrollbars don't auto-hide and never overlap the element's content. ...

ui.SpellCheckerUnderlineStyle
ui.spellcheckerunderlinestyle holds the style which is used to underline words not recognized by the spellchecker. type:integer default value:5 exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status: active; last updated 2012-02-22 introduction: pushed to nightly on 2009-04-03 bugs: bug 338209 values the values are defined in nsstyleconsts.h. 0 no underlining 1 dotted 2 dashed 3 single solid line 4 two solid lines 5 (default) wavy ...

GetComputedStyleCSSValue
...

GetComputedStyleValue
...

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

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

CSSStyleRule.selectorText - Web APIs
the cssrule.selectortext property gets the textual representation of the selector for the rule set. this is readonly in some browsers; to set stylesheet rules dynamically cross-browser, see using dynamic styling information. 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. if set to a selector string which cannot be parsed, a syntaxerror is thrown. specifications specification status comment css object model (cssom)the definition of 'cssstylerule.selectortext' in that specification. working draft brows...

CSSStyleRule - Web APIs
cssstylerule represents a single css style rule. it implements the cssrule interface with a type value of 1 (cssrule.style_rule). properties cssstylerule.selectortext returns the textual representation of the selector for this rule, e.g. "h1,h2". cssstylerule.style read only returns the cssstyledeclaration object for the rule. cssstylerule.stylemap read only returns a stylepropertymap object which provides access to the rule's property-value pairs. specifications specification status comment css object model (cssom)the definition of 'cssstylerule' in that specification. working draft no changes document object model (dom) level 2 style specificationthe definition of 'cssrule' in that specification. obsolete ...

CSSStyleSheet.deleteRule() - Web APIs
the cssstylesheet method deleterule() removes a rule from the stylesheet object. syntax cssstylesheet.deleterule(index) parameters index the index into the stylesheet's cssrulelist indicating the rule to be removed. return value undefined example this example removes the first rule from the stylesheet mystyles. mystyles.deleterule(0); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.deleterule()' in that specification. working draft ...

ElementCSSInlineStyle - Web APIs
the elementcssinlinestyle mixin describes cssom-specific features common to the htmlelement, svgelement and mathmlelement interfaces. each of these interfaces can, of course, add more features in addition to the ones listed below. note: elementcssinlinestyle is a mixin and not an interface; you can't actually create an object of type elementcssinlinestyle. propertiesstylethe style property is used to get as well as set the inline style of an element. when getting, it returns a cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.methodsthis interface has no methods. specifications specification status comment css object model ...

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

StylePropertyMap.append() - Web APIs
font, width, background color) to add. value the value the given property should have. return value undefined. example // tbd specifications specification status comment css typed om level 1the definition of 'append()' in that specification. ...

StylePropertyMap.clear() - Web APIs
return value undefined example // tbd specifications specification status comment css typed om level 1the definition of 'clear()' in that specification. ...

StylePropertyMap.delete() - Web APIs
font, width, background color) to remove. return value undefined example // tbd specifications specification status comment css typed om level 1the definition of 'delete()' in that specification. ...

StylePropertyMap.set() - Web APIs
font, width, background color) to change. value the value the given property should have. return value undefined example // tbd specifications specification status comment css typed om level 1the definition of 'set()' in that specification. ...

StylePropertyMapReadOnly.has() - Web APIs
return value a boolean. example // tbd specifications specification status comment css typed om level 1the definition of 'has()' in that specification. ...

StylePropertyMapReadOnly.keys() - Web APIs
return value a new array. example // tbd specifications specification status comment css typed om level 1the definition of 'keys()' in that specification. working draft initial definition. ...

StylePropertyMapReadOnly.values() - Web APIs
return value a new array. example // tbd specifications specification status comment css typed om level 1the definition of 'values()' in that specification. working draft initial definition. ...

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

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

-moz-context-properties - CSS: Cascading Style Sheets
svg. stroke expose the stroke value set on the image to the embedded svg. fill-opacity expose the fill-opacity value set on the image to the embedded svg. stroke-opacity expose the stoke-opacity value set on the image to the embedded svg. formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element. you first need to specify on the embedding element the properties whose values you wish to expose to the embedded svg, using the -moz-...

-webkit-mask-composite - CSS: Cascading Style Sheets
transparent portion of the destination mask image. this causes the destination mask image to have no effect. xor overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque. formal definition initial valuesource-overapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor examples compositing with xor .example { -webkit-mask-image: url(mask1.png), url('mask2.png'); -webkit-mask-composite: xor, source-over; } specifications not part of any standard. this property is specified as mask-co...

-webkit-text-stroke-color - CSS: Cascading Style Sheets
living standard initial standardization safari css reference '-webkit-text-stroke-color' in that document. non-standard unofficial documentation initia...

:-moz-focusring - CSS: Cascading Style Sheets
ature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. note: developers tend to use :-moz-focusring to differentiate between the focus state when the user focuses an element via a mouse click versus keyboard tabbing. it is also potentially useful if you are creating a custom element and you want to change its style based on its behavior. syntax :-moz-focusring examples html <input /> css input { margin: 5px; } :-moz-focusring { color: red; outline: 2px dotted green; } result specifications not part of any standard. ...

::-moz-list-number - CSS: Cascading Style Sheets
...

:-moz-submit-invalid - CSS: Cascading Style Sheets
the :-moz-submit-invalid css pseudo-class is a mozilla extension that represents any submit <button> on forms whose contents aren't valid based on their validation constraints. by default, no style is applied. you can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields. syntax syntax not found in db! specifications not part of any standard. ...

:-moz-ui-invalid - CSS: Cascading Style Sheets
user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. required items have the pseudo-class applied only if the user changes them or attempts to submit an unchanged valid value. by default, gecko applies a style that creates a red "glow" (using the box-shadow property) around items, which have this pseudo-class applied. see the :invalid pseudo-class for an example that shows how to override the default style. the specification for :user-invalid is still in progress. syntax syntax not found in db! specifications specification status comment selectors level 4the definition o...

:-moz-window-inactive - CSS: Cascading Style Sheets
this attribute is no longer used. ...

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

::-moz-color-swatch - CSS: Cascading Style Sheets
...

::-moz-range-progress - CSS: Cascading Style Sheets
ected by the thumb (i.e., virtual knob). note: using ::-moz-range-progress with anything but an <input type="range"> doesn't match anything and has no effect. syntax ::-moz-range-progress examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-progress { background-color: green; height: 1em; } result a progress bar using this style might look something like this: specifications not part of any standard. ...

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

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

::-webkit-inner-spin-button - CSS: Cascading Style Sheets
syntax ::-webkit-inner-spin-button examples these examples work only in browsers based on webkit and blink. changing the cursor in the spin controls in this example, the css cursor is changed to pointer whenever the cursor is positioned over the inner part of the input's spin controls. ...

::-webkit-meter-inner-element - CSS: Cascading Style Sheets
additional markup to render the meter element as read-only. syntax ::-webkit-meter-inner-element specifications not part of any standard. examples this will only work in webkit and blink-based browsers, such as safari, chrome, and chromium-based versions of edge. ...

::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
green is the default color. syntax ::-webkit-meter-optimum-value specifications not part of any standard. examples this example will only work in browsers based on webkit or blink. ...

::-webkit-outer-spin-button - CSS: Cascading Style Sheets
syntax ::-webkit-outer-spin-button examples these examples only works on browsers based on webkit or blink. hiding the spinner this example uses input::-webkit-outer-spin-button to find <input> elements' spinner widgets and set their -webkit-appearance to none, thus hiding them. ...

::-webkit-progress-value - CSS: Cascading Style Sheets
...

::-webkit-scrollbar - CSS: Cascading Style Sheets
::-webkit-scrollbar is only available in blink- and webkit-based browsers (e.g., chrome, edge, opera, safari, all browsers on ios, and others). css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: ::-webkit-scrollbar — the entire scrollbar. ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb — the draggable scrolling handle. ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar. ...

::grammar-error - CSS: Cascading Style Sheets
html <p>my friends is coming to the party tonight.</p> css ::grammar-error { text-decoration: underline red; color: red; } result specifications specification status comment css pseudo-elements level 4the definition of '::grammar-error' in that specification. working draft initial definition. ...

::placeholder - CSS: Cascading Style Sheets
en programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse <input> elements. mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here..."> css input::placeholder { color: green; } result specifications specification status comment css pseudo-elements level 4the definition of '::placeholder' in that specification. working draft initial definition. ...

::spelling-error - CSS: Cascading Style Sheets
html <p contenteditable spellcheck="true">my friends are coegdfgfddffbgning to the party tonight.</p> css ::spelling-error { text-decoration: wavy red; } result specifications specification status comment css pseudo-elements level 4the definition of '::spelling-error' in that specification. working draft initial definition. ...

:active - CSS: Cascading Style Sheets
ctivation" typically starts when the user presses down the primary mouse button. /* selects any <a> that is being activated */ a:active { color: red; } the :active pseudo-class is commonly used on <a> and <button> elements. other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>. styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :active rule after all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active. note: on systems with multi-button mice, css3 specifies that the :active...

:any-link - CSS: Cascading Style Sheets
s, it matches every <a>, <area>, or <link> element that has an href attribute. thus, it matches all elements that match :link or :visited. /* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification. working draft initial definition. ...

:focus-within - CSS: Cascading Style Sheets
ed by :focus. (this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields. syntax :focus-within examples in this example, the form will receive special coloring styles when either text input receives focus. html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; ...

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

:hover - CSS: Cascading Style Sheets
the :hover css pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. it is generally triggered when the user hovers over an element with the cursor (mouse pointer). /* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity. to style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the lvha-order: :link — :visited — :hover — :active. note: the :hover pseudo-class is problematic on touchscreens. depending on the browser, the :hover pseudo-class might never match, mat...

:in-range - CSS: Cascading Style Sheets
absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...

:indeterminate - CSS: Cascading Style Sheets
html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("i...

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

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
, ul ul dir, ul menu dir, ul dir dir, menu ol ul, menu ul ul, menu menu ul, menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir, menu ul dir, menu menu dir, menu dir dir, dir ol ul, dir ul ul, dir menu ul, dir dir ul, dir ol menu, dir ul menu, dir menu menu, dir dir menu, dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-type: square; } ... can be replaced with: /* 3-deep (or more) unordered lists use a square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir { list-style-type: square; } simplifying section selectors the :is() pseudo-class is particularly useful when dealing with html5 sections and head...

:last-of-type - CSS: Cascading Style Sheets
hat is the last element of its type among its siblings */ p:last-of-type { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifie...

:out-of-range - CSS: Cascading Style Sheets
ch a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification ...

:state() - CSS: Cascading Style Sheets
the :state css pseudo-class represents any custom element with the specified custom state in elementinternals.states. custom-element:state(foo) { /* styles to apply when `custom-element` is in the `foo` state */ } syntax syntax not found in db! examples fill in a simple example that nicely shows a typical usage of the selector, then perhaps some more complex examples. my code block and/or include a list of links to useful code samples that live elsewhere: x y z specifications specification status comment unknownthe definition of 'the :state() selector' in that specification. unknown initial definition. ...

:target - CSS: Cascading Style Sheets
paragraph</i> using a url fragment. click on the link above to try out!</p> <p id="p2">this is <i>another paragraph</i>, also accessible from the links above. isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript. this technique relies on the ability of anchor links to point to elements that are initially hidden on the page. once targeted, the css changes their display so that they are shown. note: a more complete pu...

font-display - CSS: Cascading Style Sheets
l font fallback. formal definition related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification status comment css fonts module level 4the definition of 'font-display' in that specification. working draft initial definition ...

font-stretch - CSS: Cascading Style Sheets
the values for the css descriptor is same as that of its corresponding font property. ...

font-variation-settings - CSS: Cascading Style Sheets
ole property is invalid. the <number> can be fractional or negative. formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment css fonts module level 4the definition of 'font-variation-settings' in that specification. working draft initial definition ...

font-weight - CSS: Cascading Style Sheets
the font-weight css descriptor allows authors to specify font weights for the fonts specified in the @font-face rule. the font-weight property can separately be used to set how thick or thin characters in text should be displayed. for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights. the values for the css descriptor is same as that of its corresponding font property. there are generally limited weights available for a particular font family. when a specified weight doesn't exist, a nearby weight is used. fonts lacking bold are often synthesized by the user agent. to prevent this, use font-synthesis property. syntax /* sing...

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

unicode-range - CSS: Cascading Style Sheets
the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth. formal definition related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font. to make it obvious, we will use a sans-serif font, helvetica, for the text, and a serif font, times new roman, for the ampersand. in the css we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that only this character will be styled with this font. we could also have done this by wrapping the ampersand in a <span>...

-moz-device-pixel-ratio - CSS: Cascading Style Sheets
do not use this feature. use the resolution feature with the dppx unit instead. note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. the min and max prefixes as implemented by gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. ...

-webkit-transform-3d - CSS: Cascading Style Sheets
ture query instead. syntax -webkit-transform-3d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 3d transforms. values true the browser supports the 3d css transforms with the -webkit prefix. false the 3d css transforms prefixed with -webkit are not supported by the browser. examples @media (-webkit-transform-3d) { .foo { transform-style: preserve-3d; } } @media (-webkit-transform-3d: 1) { .foo { transform-style: preserve-3d; } } specifications specification status comment compatibility standardthe definition of '-webkit-transform-3d' in that specification. living standard initial standardization safari css reference 'media query extensions' in that document. non-stan...

aural - CSS: Cascading Style Sheets
ural css media type is used for devices that have speech output capabilities. note: this media type has been deprecated in favor of speech. syntax the aural css media type—which has been deprecated in favor of the speech media type—was used to specify a block of css that applied only when the content is being presented using a speech synthesis device. @media aural { /* speech-specific styles here */ } updating existing css to use the speech media type should be as simple as replacing aural with speech. examples basic example @media aural { body { voice-family: paul } } specifications specification status comment css level 2 (revision 2)the definition of 'aural' in that specification. deprecated initial definition. ...

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

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

height - CSS: Cascading Style Sheets
syntax the height feature is specified as a <length> value representing the viewport height. it is a range feature, meaning that you can also use the prefixed min-height and max-height variants to query minimum and maximum values, respectively. ...

orientation - CSS: Cascading Style Sheets
the orientation css media feature can be used to test the orientation of the viewport (or the page box, for paged media). note: this feature does not correspond to device orientation. opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait. syntax the orientation feature is specified as a keyword value chosen from the list below. keyword values portrait the viewport is in a portrait orientation, i.e., the height is greater than or equal to the width. landscape the viewport is in a landscape orientation, i.e., the width is greater than the height. examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex;...

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

@viewport - CSS: Cascading Style Sheets
standards track. the @viewport css at-rule lets you configure the viewport through which the document is viewed. it's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge). lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. this is typically based on the size of the window on desktop browsers that aren't in full screen mode. on mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. this may be either the full screen or the full screen area minus areas co...

Adjacent sibling combinator - CSS: Cascading Style Sheets
the adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. /* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification. working draft renames it the "next-sibling" combinator. selectors level 3the definition of 'adjacent sibling combinator' in that specification. recommen...

CSS Basic User Interface - CSS: Cascading Style Sheets
css basic user interface is a css module that lets you define the rendering and functionality of features related to the user interface. reference properties appearance box-sizing cursor ime-mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors. specifications specification status comment css basic user interface module level 4 working draft css basic user interface module level 3 recommendation css level 2 (revision 1) recommendation initial definition. ...

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

CSS Multi-column Layout - CSS: Cascading Style Sheets
d media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. therefore the properties now defined in the css fragmentation specification are required in order to control how content breaks between columns. reference multiple-column layout properties column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns related css fragmentation properties break-after break-before break-inside orphans widows guides basic concepts of multicol an overview of the multiple-column layout specification styling columns how to use column rules and manage the spacing between columns. spanning and balancing how to make elements span across all co...

Using feature queries - CSS: Cascading Style Sheets
e to test the fallback by misspelling the property or value name. you can try this in the live example above by changing display: grid in the @supports rule to display: grip or similar. summary feature queries can help you start to use newer features by enhancing a simpler display of the site used for older browsers. as you can wrap up the css for supporting browsers, you do not run the risk of styles used for the fallback display leaking through, as shown in our grid example above. see also the @supports rule learn layout: supporting older browsers css grid layout and progressive enhancement using feature queries in css ...

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

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
ight columns and vertical centering and work back as far as internet explorer 8. if you use display: table-cell on an item in your html it takes on the styling of an html table cell. css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; they are there purely to fix up the tree. if you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features. “note: some values of display normally trigger the creation of anonymous boxes around the original box. if such a box is ...

Ordering Flex Items - CSS: Cascading Style Sheets
note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. this has now been fixed. you should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so. in the live example below i have added a focus style in order that as you tab from link to link you can see which is highlighted. if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source. in the same way that changing the value of flex-direction does not change the order in which items are navigated to, changing this value does not change paint order. it is a...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
lows: “the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. for the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.” this value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. this is much easier to see with an example. in the following live example i have a flex container with three child elements. one of these flex items has two elements nested inside it, wh...

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

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

Understanding CSS z-index - CSS: Cascading Style Sheets
adjust the order of the layering of objects when rendering content. in css 2.1, each box has a position in three dimensions. in addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. z-axis positions are particularly relevant when boxes overlap visually. (from css 2.1 section 9.9.1 - layered presentation) this means that css style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). the z position of each layer is expressed as an integer representing the stacking order for rendering. greater numbers mean closer to the observer. z position can be controlled with the css z-index property. using z-index appears extremely easy: a single property, assigned a single integer number, wi...

CSS Text Decoration - CSS: Cascading Style Sheets
css text decoration is a module of css that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. reference properties letter-spacing text-align text-decoration text-decoration-color text-decoration-line text-decoration-offset text-decoration-skip-ink text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-rendering text-shadow text-transform white-space word-spacing guides none. examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { ...

CSS data types - CSS: Cascading Style Sheets
ta types are denoted by a keyword placed between the inequality signs "<" and ">". ...

Child combinator - CSS: Cascading Style Sheets
{ margin: 2em; } elements matched by the second selector must be the immediate children of the elements matched by the first selector. this is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the dom. syntax selector1 > selector2 { style properties } examples css span { background-color: white; } div > span { background-color: dodgerblue; } html <div> <span>span #1, in the div. <span>span #2, in the span that's in the div.</span> </span> </div> <span>span #3, not in the div at all.</span> result specifications specification status comment selectors level 4the definition of 'ch...

Column combinator - CSS: Cascading Style Sheets
the column combinator (||) is placed between two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...

General sibling combinator - CSS: Cascading Style Sheets
the general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element. /* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax former_element ~ target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification. working draf...

ID selectors - CSS: Cascading Style Sheets
the css id selector matches an element based on the value of the element’s id attribute. in order for the element to be selected, its id attribute must match exactly the value given in the selector. /* the element with id="demo" */ #demo { border: red 2px solid; } syntax #id_value { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification. working draft ...

Column layouts - CSS: Cascading Style Sheets
eed to create a layout which has a number of columns, and css provides several ways to do this. whether you use grid, flexbox or multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options. requirements there are a number of design patterns you might want to achieve with your columns: a continuous thread of content broken up into newspaper-style columns. a single row of items arranged as columns, with all heights being equal. multiple rows of columns lined up by row and column. the recipes you need to choose different layout methods in order to achieve your requirements. a continuous thread of content — multi-column layout if you create columns using multi-column layout your text will remain as a continuous stream filling each c...

Pagination - CSS: Cascading Style Sheets
ex container in order that we can center the list inside using the justify-content property. the list itself also becomes a flex container to lay the items out as a row. to space the items out we will use a margin on the flex items. alternative methods once the column-gap property has implementation in browsers this could be used instead of margins to space out the items. .pagination { list-style: none; margin: 0; padding: 0; display: flex; column-gap: 2px; } accessibility concerns we want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link. to help with this we have added aria-label="pagination" on the <nav> element. we have also added some additional content that would be read by a screenreader but ...

Microsoft CSS extensions - CSS: Cascading Style Sheets
progression -ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms...

Paged media - CSS: Cascading Style Sheets
paged media properties control the presentation of content for print or any other media that splits content into discrete pages. it allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. widely supported properties include: page-break-before page-break-after page-break-inside orphans widows @page ...

Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). for example, :hover can be used to change a button's color when the user's pointer hovers over it. /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not). note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. syntax sel...

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

Type selectors - CSS: Cascading Style Sheets
the css type selector matches elements by node name. in other words, it selects all elements of the given type within a document. /* all <a> elements. */ a { color: red; } syntax element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification. working draft no changes selectors level 3the definition of 'type selectors' in that specification. recommendation no changes css level 2 (revision 1)the definition of 'type selectors' in that specification. ...

Universal selectors - CSS: Cascading Style Sheets
for instance, *.warning and .warning are equivalent. ...

Value definition syntax - CSS: Cascading Style Sheets
to [ bold thin ] && <length>. it describes bold thin <length> or <length> bold thin but not bold <length> thin. double bar separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. typically this is used to define the different values of a shorthand property. <'border-width'> || <'border-style'> || <'border-color'> this example matches the following values: 1em solid blue blue 1em solid 1px yellow but not: blue yellow, as a component must appear at most one single time. bold, as it isn't a keyword allowed as value of any of the entity. note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && ...

align-content - CSS: Cascading Style Sheets
working draft adds the [ first | last ]? baseline, start, end, left, right, unsafe...

align-items - CSS: Cascading Style Sheets
working draft update to latest syntax definitions. css flexible box layout mo...

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

backface-visibility - CSS: Cascading Style Sheets
the three back faces of the "cube" */ .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black;...

background-blend-mode - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

<blend-mode> - CSS: Cascading Style Sheets
candidate recommendation initial definition. ...

border-block-end-width - CSS: Cascading Style Sheets
ck; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. ...

border-block-width - CSS: Cascading Style Sheets
h: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. ...

border-bottom-left-radius - CSS: Cascading Style Sheets
the box is a square: an arc of circle is used as the border div { border-bottom-left-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div { border-bottom-left-radius: 40%; } . the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification. candidate recommendation initial definition ...

border-bottom-right-radius - CSS: Cascading Style Sheets
the box is a square: an arc of circle is used as the border div { border-bottom-right-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div { border-bottom-right-radius: 40%; } . the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification. candidate recommendation initial definition ...

border-collapse - CSS: Cascading Style Sheets
the border-collapse css property sets whether cells inside a <table> have shared or separate borders. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen f...

border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the siz...

border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes th...

border-image-repeat - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

border-image-source - CSS: Cascading Style Sheets
cally applied to the final border image. syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used. the appearance defined by border-style is displayed instead. <image> image reference to use for the border. formal definition initial valuenoneapplies toall elements, except internal table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-se...

border-inline-start-width - CSS: Cascading Style Sheets
thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. ...

border-inline-width - CSS: Cascading Style Sheets
idth: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. ...

border-left-width - CSS: Cascading Style Sheets
t thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...

border-right-width - CSS: Cascading Style Sheets
thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...

border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denotes ...

border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-percent...

border-top-left-radius - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

border-top-right-radius - CSS: Cascading Style Sheets
the box is a square: an arc of circle is used as the border div { border-top-right-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification. candidate recommendation initial definition ...

border-top-width - CSS: Cascading Style Sheets
ct thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...

box-direction - CSS: Cascading Style Sheets
start (the left or top edge). reverse the box lays out its contents from the end (the right or bottom edge). notes the edge of the box designated the start for layout purposes depends on the box's orientation: horizontal left vertical top the edge opposite to the start is designated the end. if the direction is set using the element's dir attribute, then the style is ignored. formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-di...

break-inside - CSS: Cascading Style Sheets
candidate recommendation no change. css regions module level 1the definition of 'break-inside' in that specification.

column-rule-color - CSS: Cascading Style Sheets
age>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a blue column rule html <p>this is a bunch of text split into three columns. the `column-rule-color` property is used to change the color of the line that is drawn between columns. don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-color: blue; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-color' in that specification. working draft initial definition. ...

Computed value - CSS: Cascading Style Sheets
thing that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. additionally, unitless numbers specified on the line-height property become the computed value, as specified. the relative values that remain in the computed value become absolute when the used value is determined. note: the getcomputedstyle() dom api returns the resolved value, which may either be the computed value or the used value, depending on the property. specifications specification status comment css level 2 (revision 2)the definition of 'computed-value' in that specification. working draft no change. css level 2 (revision 1)the definition of 'computed value' in that spe...

<easing-function> - CSS: Cascading Style Sheets
o { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.style.animationtimingfunction = selectelem.value; }); result cubic-bezier() function examples...

flex-basis - CSS: Cascading Style Sheets
flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basi...

flex-direction - CSS: Cascading Style Sheets
1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="background-color:yellow;">c</div> </d...

flex-wrap - CSS: Cascading Style Sheets
reen">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: ...

font-feature-settings - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

font-optical-sizing - CSS: Cascading Style Sheets
n typediscrete formal syntax auto | none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically sized. this is the default across browsers.</p> <p class="no-optical-sizing">this paragraph is not optically sized. you should see a difference in supporting browsers.</p> @font-face { src: url('amstelvaralpha-vf.ttf'); font-family:'amstelvar'; font-style: normal; } p { font-size: 36px; font-family: amstelvar; } .no-optical-sizing { font-optical-sizing: none; } note: the font referenced above — which includes optical sizing and is freely-licensed — is good for testing. you can download it on github. specifications specification status comment css fonts module level 4the definition of 'font-optical-sizin...

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

font-stretch - CSS: Cascading Style Sheets
rd</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; } result specifications specification status comment css fonts module level 4the d...

font-variant-east-asian - CSS: Cascading Style Sheets
nt-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features. ...

font-variant-ligatures - CSS: Cascading Style Sheets
common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] 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-dis...

grid-auto-flow - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

image-orientation - CSS: Cascading Style Sheets
candidate recommendation initial definition. ...

image() - CSS: Cascading Style Sheets
e, the css image() function allows adding allows only including background colors should an image fail to load, which means you can add a fall back color should a transparent png/gif/webp not load. examples directionally-sensitive images <ul> <li dir="ltr">bullet is a right facing arrow on the left</li> <li dir="rtl">bullet is the same arrow, flipped to point left.</li> </ul> ul { list-style-image: image(ltr 'https://mdn.mozillademos.org/files/16412/rightarrow.png'); } in the left-to-right list items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is. list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documen...

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

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

justify-content - CSS: Cascading Style Sheets
working draft adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values. css flexible box layout modulethe definiti...

<length> - CSS: Cascading Style Sheets
px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status comment css values and units mod...

letter-spacing - CSS: Cascading Style Sheets
extra inter-character space in addition to the default space between characters. values may be negative, but there may be implementation-specific limits. user agents may not further increase or decrease the inter-character space in order to justify text. accessibility concerns a large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. for text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. for text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable. legible letter-spacing must be determined on a case-by-case basis, as different font families have different ch...

mask-clip - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

mask-composite - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

mask-mode - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

mask-origin - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

mask-position - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

mask-size - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

object-position - CSS: Cascading Style Sheets
ontent html here we see html that includes two <img> elements, each displaying the mdn logo. <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images. img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. the second image is po...

offset-anchor - CSS: Cascading Style Sheets
]where <length-percentage> = <length> | <percentage> examples setting various offset-anchor values in the following example, we have three <div> elements nested in <section> elements. each <div> is given the same offset-path (a horizontal line 200 pixels long) and animated to move along it. the three are then given different background-color and offset-anchor values. each <section> has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the <div>'s offset paths are running. this allows you to see what effect the different offset-anchor values have — the first one, auto, causes the <div>'s center point to move along the path. the other two cause the <div>'s top-right and bottom-left points to move along the pa...

offset-path - CSS: Cascading Style Sheets
ry as the path. <basic-shape> specifies a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a path string defined with svg coordinate syntax. none specifies no motion path at all. description this property defines a path an animated element can follow. an offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. the element’s exact position on the offset path is determined by the offset-distance property. each shape or path must define an initial position for the computed value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position. early versions of the spec called this property motion-path. it was changed to offset-path beca...

outline-width - CSS: Cascading Style Sheets
one is specified, the computed value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } result specifications specification status comment css basic user interface module level 3the defini...

perspective-origin - CSS: Cascading Style Sheets
o200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; ...

perspective - CSS: Cascading Style Sheets
rspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black;...

place-items - CSS: Cascading Style Sheets
t baseline auto</option> <option value="last baseline normal">last baseline normal</option> <option value="stretch auto">stretch auto</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-templa...

Resolved value - CSS: Cascading Style Sheets
for most properties, it is the computed value, but for a few legacy properties (including width and height), it is instead the used value. see the specification link below for more per-property details. ...

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

text-decoration-color - CSS: Cascading Style Sheets
candidate recommendation initial definition. the text-decoration property is now a shorthand to define multiple related properties. ...

text-decoration-line - CSS: Cascading Style Sheets
candidate recommendation initial definition. the text-decoration property is now a shorthand to define multiple related prope...

text-decoration-thickness - CSS: Cascading Style Sheets
uted valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; } results specifications specification status comment css text decoration module level 4the...

text-emphasis-color - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

text-emphasis-position - CSS: Cascading Style Sheets
t either, using the text-emphasis shorthand property. formal definition initial valueover rightapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to hide emphasis marks when they conflict with ruby. in html, this can be done with the following style rule: ruby { text-emphasis: none; } preferring emphasis marks over ruby some other editors prefer to hide ruby when they conflict with emphasis marks. in html, this can be done with the following pattern: em { text-emphasis: dot; /* set text-emphasis for <em> elements */ } em rt { display: none; /* hide ruby inside <em> elements */ } specifications specification status ...

text-overflow - CSS: Cascading Style Sheets
css value direction: ltr direction: rtl expected result live result expected result live result visible overflow 1234567890 1234567890 0987654321 1234567890 text-overflow: clip 1234567890 1234567890 text-ov...

matrix3d() - CSS: Cascading Style Sheets
ich can be hovered/focused to apply a matrix3d() transform to it. ...

perspective() - CSS: Cascading Style Sheets
class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background...

scaleZ() - CSS: Cascading Style Sheets
factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalez(-1) defines an axial symmetry, with the z-axis passing through the origin (as specified by the transform-origin property). in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: scalez(sz) is equivalent to to scale3d(1, 1, sz). syntax scalez(s) values s is a <number> representing the scaling factor to apply on the z-coordinate of each point of the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 ...

translateZ() - CSS: Cascading Style Sheets
mple is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this transformation is defined by a <length> which specifies how far inward or outward the element or elements move. in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: translatez(tz) is equivalent to translate3d(0, 0, tz). syntax translatez(tz) values tz a <length> representing the z-component of the translating vector. a positive value moves the element towards the viewer, and a negative value farther away. carte...

visibility - CSS: Cascading Style Sheets
culated as though the cells in the collapsed row(s) or column(s) are present. this value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table. collapsed flex items are hidden, and the space they would have occupied is removed. for xul elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect. for other elements, collapse is treated the same as hidden. accessibility concerns using a visibility value of hidden on an element will remove it from the accessibility tree. this will cause the element and all its descendant elements to no longer be announced by screen reading technology. interpolation visibility va...

white-space - CSS: Cascading Style Sheets
ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occae...

word-spacing - CSS: Cascading Style Sheets
spacing as a percentage of the affected character’s advance width. examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div> css #mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable. for text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. for text styled with a large negative value, the words will overlap each other to the point where the the beginning and end of each word is unrecognizable. legible word-spacing must be determined on a case-by-case basis, as different font families have different character widths. the...

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

<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:attribute-set> element creates a named set of attributes, which can then be applied as whole to the output document, in a manner similar to named styles in css. syntax <xsl:attribute-set name=name use-attribute-sets=list-of-names> <xsl:attribute> </xsl:attribute-set> required attributes name specifies the name of the attribute set. the name must be a valid qname. optional attributes use-attribute-sets builds an attribute set from other attribute sets. the names of the contributing sets must be separated with whitespace characters and must not directly or indirectly embed themselves. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, se...

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

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

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

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

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

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

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

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

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

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

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

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

Resources - XSLT: Extensible Stylesheet Language Transformations
...

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

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