CSS - Archive of obsolete content
pact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes.-ms-wrap-throughthe -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element.:-moz-full-screen-ancestorthe :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents. however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseu...
...the full-screen element in their own documents. however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value. ...
...the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value. this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu. ...
...And 8 more matches

inIDOMUtils
omutils.idlscriptable dom utility functions. ...
...s from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void g...
...renfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidomcssstylerule arule); unsigned long getrulecolumn(in nsidomcssstylerule arule); unsigned long getselectorcount(in nsidomcssstylerule arule); astring getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); ...
...And 8 more matches

Index - Web APIs
imation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). 90 animationevent.initanimationevent() api, animationevent, cssom, method, obsolete, web animations the animationevent.initanimationevent() method initializes an animation event created using the deprecated document.createevent("animationevent") method. 91 animationevent.pseudoelement api, animationevent, css, cssom, experimental, property, reference, web animations the animationevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element, an empty string: ''. 92 animationplaybackevent api, animation,...
... be raised. 447 cssprimitivevalue.setstringvalue() api, cssprimitivevalue, method, needsexample, setstringvalue the setstringvalue() method of the cssprimitivevalue interface is used to set a string value. if the property attached to this value can't accept the specified unit or the string value, the value will be unchanged and a domexception will be raised. ...
... cssprimitivevalue.setstringvalue() api, cssprimitivevalue, method, needsexample, setstringvalue the setstringvalue() method of the cssprimitivevalue interface is used to set a string value. if the property attached to this value can't accept the specified unit or the string value, the value will be unchanged and a domexception will be raised. ...
...And 7 more matches

:not() - CSS: Cascading Style Sheets
the ability to list more than one selector is experimental and not yet widely supported. ...
... the ability to list more than one selector is experimental and not yet widely supported. ...
... the ability to list more than one selector is experimental and not yet widely supported. ...
...And 7 more matches

Issues Arising From Arbitrary-Element hover - Archive of obsolete content
summary: thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some web sites. this technote explains the source of the problems and how to avoid encountering them. many authors make use of the css2 pseudo-class :hover to style their links. this innovation, first introduced by microsoft® internet explorer and later adopted into the css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages. hover and non-link elements section 5.11.3 of css2 defines t...
...ft® internet explorer and later adopted into the css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages. hover and non-link elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left. scripting may change whether elements react to user events or not, and different devices and uas may have different ways of pointing to, or activating elements. thus, although authors are used to thinking of these states as applying...
...r events or not, and different devices and uas may have different ways of pointing to, or activating elements. thus, although authors are used to thinking of these states as applying exclusively to hyperlinks, they are not so restricted by css2. any element can, in theory, be in any of the three states, and thus can be styled based on those states. this has not traditionally been the case. bare pseudo-classes the second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector. for example: :hover {color: red;} this is equivalent to the css2 rule: *:hover {color: red;} ..which translates as "any element that is being hovered should have its foreground colored red." thus, hovering over paragraphs, tables, headings, and any other element in a document wi...
...And 6 more matches

/loader - Archive of obsolete content
y-addon/root/main.js './': 'resource://my-addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shortest to allow overlapping mapping. the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules. modules the loader may optionally be provided with a set of module exports. in the sdk we call these "pseudo modules". this feature may be used in a few different ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible format such as jsm: let { loader } = require('toolkit/loader'); let loader = loader({ modules: { // require('net/utils') will get netutil.jsm 'net/utils': cu.import('resource:///modules/netutil.jsm', {}) } }); each...
...ifferent ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible format such as jsm: let { loader } = require('toolkit/loader'); let loader = loader({ modules: { // require('net/utils') will get netutil.jsm 'net/utils': cu.import('resource:///modules/netutil.jsm', {}) } }); each loader instance comes with a set of built-in pseudo modules that are described in detail in the built-in modules section. to reuse module instances that are already loaded. for example in the sdk, the loader is loaded at bootstrap as a jsm module but is then exposed as a pseudo-module to avoid the overhead of subsequent loads: let loadermodule = cu.import('resource://gre/modules/commonjs/toolkit/loader.js'); let loader = loadermodule.load...
....loader({ modules: { // overlay `toolkit/loader` so that `require('toolkit/loader')` // will return our `loadermodule`. 'toolkit/loader': loadermodule } }); use this feature with a great care though. while reuse may sound like a compelling idea it comes with the side effect of shared state, which can cause problems. for example, unload of a loader won't trigger unload hooks on pseudo-modules. globals each module loaded via the loader instance is secured in own js sandbox. these modules don't share scope and get their own set of built-ins (object, array, string ...). but sometimes it's convenient to define a set of common globals that will be shared across modules. this can be done using the optional globals option. for example, the sdk uses this feature to provide a global...
...And 5 more matches

jspage - Archive of obsolete content
"};break;case"odd":e={a:2,b:0,special:"n"}; break;case"even":e={a:2,b:1,special:"n"};break;case"first":e={a:0,special:"index"};break;case"last":e={special:"last-child"};break;case"only":e={special:"only-child"}; break;default:e={a:(d-1),special:"index"};}return selectors.cache.nth[h]=e;},parseselector:function(e){if(selectors.cache.parsed[e]){return selectors.cache.parsed[e]; }var d,h={classes:[],pseudos:[],attributes:[]};while((d=selectors.regexps.combined.exec(e))){var i=d[1],g=d[2],f=d[3],b=d[5],c=d[6],j=d[7];if(i){h.classes.push(i); }else{if(c){var a=selectors.pseudo.get(c);if(a){h.pseudos.push({parser:a,argument:j});}else{h.attributes.push({name:c,operator:"=",value:j});}}else{if(g){h.attributes.push({name:g,operator:f,value:b}); }}}}if(!h.classes.length){delete h.classes;}if(!h.attributes.
...ors.regexps.combined.exec(e))){var i=d[1],g=d[2],f=d[3],b=d[5],c=d[6],j=d[7];if(i){h.classes.push(i); }else{if(c){var a=selectors.pseudo.get(c);if(a){h.pseudos.push({parser:a,argument:j});}else{h.attributes.push({name:c,operator:"=",value:j});}}else{if(g){h.attributes.push({name:g,operator:f,value:b}); }}}}if(!h.classes.length){delete h.classes;}if(!h.attributes.length){delete h.attributes;}if(!h.pseudos.length){delete h.pseudos;}if(!h.classes&&!h.attributes&&!h.pseudos){h=null; }return selectors.cache.parsed[e]=h;},parsetagandid:function(b){var a=b.match(selectors.regexps.tag);var c=b.match(selectors.regexps.id);return[(a)?a[1]:"*",(c)?c[1]:false]; },filter:function(f,c,e){var d;if(c.classes){for(d=c.classes.length;d--;d){var g=c.classes[d];if(!selectors.filters.byclass(f,g)){return false;}}}if...
...selectors.regexps.tag);var c=b.match(selectors.regexps.id);return[(a)?a[1]:"*",(c)?c[1]:false]; },filter:function(f,c,e){var d;if(c.classes){for(d=c.classes.length;d--;d){var g=c.classes[d];if(!selectors.filters.byclass(f,g)){return false;}}}if(c.attributes){for(d=c.attributes.length; d--;d){var b=c.attributes[d];if(!selectors.filters.byattribute(f,b.name,b.operator,b.value)){return false;}}}if(c.pseudos){for(d=c.pseudos.length;d--;d){var a=c.pseudos[d]; if(!selectors.filters.bypseudo(f,a.parser,a.argument,e)){return false;}}}return true;},getbytagandid:function(b,a,d){if(d){var c=(b.getelementbyid)?b.getelementbyid(d,true):element.getelementbyid(b,d,true); return(c&&selectors.filters.bytag(c,a))?[c]:[];}else{return b.getelementsbytagname(a);}},search:function(o,h,t){var b=[];var c=h.trim().repl...
...And 4 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
is an intermediate program or computer used when navigating through different networks of the internet. they facilitate access to content on the world wide web. a proxy intercepts requests and serves back responses; it may forward the requests, or not (for example in the case of a cache), and it may modify it (for example changing its headers, at the boundary between two networks). ...
...ent networks of the internet. they facilitate access to content on the world wide web. a proxy intercepts requests and serves back responses; it may forward the requests, or not (for example in the case of a cache), and it may modify it (for example changing its headers, at the boundary between two networks). ...
...fy it (for example changing its headers, at the boundary between two networks). 343 pseudo-class css, codingscripting, glossary, selector in css, a pseudo-class selector targets elements depending on their state rather than on information from the document tree. for example, the selector a:visited applies styles only to links that the user has already followed. 344 pseudo-element css, codingscripting, glossary in css, a pseudo-element selector applies styles to parts of your document content in scenarios where there isn't a specific html element to select. ...
...And 4 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
:any() works in exactly the same way as :matches()/:is(), except that it requires vendor prefixes and doesn't support complex selectors. ...
...:any() works in exactly the same way as :matches()/:is(), except that it requires vendor prefixes and doesn't support complex selectors. ...
...:-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } syntax :is( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? ...
...And 4 more matches

:nth-last-child() - CSS: Cascading Style Sheets
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end. ...
... keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end. ...
...ents based on their position among a group of siblings, counting from the end. /* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning. syntax the nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end. even represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end. functional notation ...
...And 4 more matches

: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. ...
... allowable svg attributes are fill and stroke. the alpha component of the allowed styles will be ignored. ...
...end user, the window.getcomputedstyle method will lie and always return the value of the non-:visited color. note: for more information on these limitations and the reasons behind them, see privacy and the :visited selector. syntax :visited examples properties that would otherwise have no color or be transparent cannot be modified with :visited. of the properties that can be set with this pseudo-class, your browser probably 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 propertie...
...And 4 more matches

Specificity - CSS: Cascading Style Sheets
nly applies when the same element is targeted by multiple declarations. as per css rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor. note: proximity of elements in the document tree has no effect on the specificity. selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before). class selectors (e.g., .example), attributes selectors (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 "cas...
... this chunk of css ... div.outer p { color: orange; } div:not(.outer) p { color: blueviolet; } ... when used with the following html ... <div class="outer"> ...
... this chunk of css ... div.outer p { color: orange; } div:not(.outer) p { color: blueviolet; } ... when used with the following html ... <div class="outer"> <p>this is in the outer div.</p> <...
...And 4 more matches

Skinning XUL Files by Hand - Archive of obsolete content
and the application object model that xul describes. following the instructions here, you are going to create a skin for a xul file and apply it by specifying classes for all of the interested elements. the skin will reside in a single css file, appropriately named drxul.css. as you will see, css provides a lot of flexibility for defining styles to individual elements, to classes of elements, to pseudo-classes, and to anonymous classes. by the way, in contrast to the term skin, "chrome" refers to the skin and the content and whatever localization and platform-specific files are necessary for a particular part of the application or window. the skin is just the style or appearance of an interface, where the chrome is the style, content, and structure. the chrome is everything in the front end of...
... the par...
... the parent-child relationship is more economical than...
...And 3 more matches

:-moz-system-metric() - Archive of obsolete content
this page was auto-generated because a user created a sub-page to this page. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...
...because a user created a sub-page to this page. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...
... pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-system-metric(scrollbar-end-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-start-backward)the :-moz-system-...
...And 3 more matches

create fancy boxes - Learn web development
ork on the most simple piece of html possible, a simple element: <div class="fancy">hi! i want to be fancy.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, border, etc. its background properties: background, background-color, background-image, background-position, background-size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by havi...
...70%, #74a6ae 70%), linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); } gradients can be used in some very creative ways. if you want to see some crazy examples, take a look at lea verou's css patterns. just remember that such use of gradient is quite expensive, performance wise. if you want to learn more about gradient, feel free to get into our dedicated article. pseudo-elements when styling a single box, you could find yourself limited and could wish to have more boxes to create even more amazing styles. most of the time, that leads to polluting the dom by adding extra html element for the unique purpose of style. even if it is necessary, it's somewhat considered bad practice. one solution to avoid such pitfalls is to use css pseudo-elements. a cloud <div c...
... of our cloud */ margin : 0 100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. ...
...And 3 more matches

Mozilla Style System Documentation
ystems 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. ...
... 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. ...
...ects 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. ...
...And 3 more matches

Examine and edit CSS - Firefox Developer Tools
you can examine and edit css in the inspector's css pane. examine css rules the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific: the four buttons on the right top of the rules view allow you to change the display of certain css and rules view features. you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules. a warning icon appears next to unsupported css properties or rules that have invalid values. this can help you understand why certain styles are not being applie...
...tors followed by a list of property:value; declarations. highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector. overridden declaration: declarations that are overridden by later rules are crossed out. see overridden declarations. inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked. filter rules containing this property: next to overridden declarations is an icon you can click to filter the rules list to show only those rules that include that property. see overridden declarations. enable/disable: if you hover over a declaration, a checkbox appears next to it: you can use this to togg...
...rching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. ...
...And 3 more matches

Window.getDefaultComputedStyle() - Web APIs
must be null (or not specified) for regular elements. ...
...must be null (or not specified) for regular elements. ...
...must be null (or not specified) for regular elements. ...
...And 3 more matches

::after (:after) - CSS: Cascading Style Sheets
browsers also accept :after, introduced in css2. examples simple usage let's create two classes: one for boring paragraphs and one for exciting ones. ...
...browsers also accept :after, introduced in css2. examples simple usage let's create two classes: one for boring paragraphs and one for exciting ones. ...
... default. /* add an arrow after links */ a::after { content: "→"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements. syntax /* css3 syntax */ ::after /* css2 syntax */ :after note: css3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :after, introduced in css2. examples simple usage let's create two classes: one for boring paragraphs and one for exciting ones. we can use these classes to add pseudo-elements to the end of paragraphs. html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p...
...And 3 more matches

Advanced form styling - Learn web development
</label> </p> <p> <label> <input type="checkbox" name="fruit-3" value="strawberry"> i like strawberry </label> </p> </fieldset> </form> now, let's style these with a custom checkbox design. ...
... :disabled — the checkbox (or radio button) is in a disabled state — it cannot be interacted with. you can see the live result: we've also created a couple of other examples to give you more ideas: styled rad...
...check out styling cross-browser compatible range inputs with css on css tricks for a detailed write up of what's needed. color input types input controls of type color are not too bad. in supporting browsers, they tend to just give you a block of solid color with a small border. you can remove the border, just leaving the block of color, using something like this: input[type="color"...
...And 2 more matches

Index - Learn web development
e have covered quite a lot here, and you can see that there is quite a lot to adding a background or a border to a box. do explore the different property pages if you want to find out more about any of the features we have discussed. each page on mdn has more examples of usage for you to play with and enhance your knowledge. 107 css selectors attribute, beginner, css, class, learn, pseudo, selectors, id in css, selectors are used to target the html elements on our web pages that we want to style. there are a wide variety of css selectors available, allowing for fine-grained precision when selecting elements to style. in this article and its sub-articles we'll run through the different types in great detail, seeing how they work. 108 attribute selectors attribu...
...ectors to target elements with certain attributes. this lesson will show you how to use these very useful selectors. 109 combinators css, selectors, combinators the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. 110 pseudo-classes and pseudo-elements beginner, css, learn, pseudo, pseudo-class, pseudo-element, selectors the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements. there are a large number of these, and they often serve quite specific purposes. once you know how to use them, you can look at the list to see if there is something which works for the task you...
... styling lists and links. 161 fundamental text and font styling article, beginner, css, guide, style, text, alignment, family, font, shorthand, spacing, weight we hoped you enjoyed playing with text in this article! the next article will give you all you need to know about styling html lists. 162 styling links article, beginner, css, focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about links — for now! the final article in our styling text module details how to use custom fonts on your websites, or web fonts as they are better known. 163 styling lists article, beginner, css, guide, styling, text, bullets, lists lists are relatively easy to ...
...And 2 more matches

Chrome-only CSS reference
other privileged circumstances, eg. ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these. -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
...ation for a list of these. -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
... on mac os x.:-moz-lwthemethe :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz-lwtheme-darktextthe :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.::-moz-tree-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.
...And 2 more matches

nsITreeView
nsidomdatatransfer datatransfer ); parameters row the index of the row. orientation the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data that has been dropped. getcellproperties() an atomized list of properties for a given cell. each property, x, that the view gives back will cause the css ::moz-tree-cell-*(x) pseudoelement to be matched on the treechildren element. see getrowproperties() for an example. astring getcellproperties( in long row, in nsitreecolumn col, in nsisupportsarray properties ); parameters row the index of the row. col the current column. properties an array of the cell's current properties. obsolete since gecko 22 return value a string of space-separated property name...
...etcolumnproperties( in nsitreecolumn col, in nsisupportsarray properties ); parameters col the current column. properties an array of the column's current properties. obsolete since gecko 22 return value a string of space-separated property names. getimagesrc() the image path for a given cell. for defining an icon for a cell. ...
... long getlevel( in long index ); parameters index the index of the item. return value the level of indentation. getparentindex() methods used by the tree to draw thread lines in the tree. getparentindex is used to obtain the index of a parent row. if there is no parent row, getparentindex returns -1. ...
...And 2 more matches

ValidityState - Web APIs
put that the browser is unable to convert. customerror read only a boolean indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setcustomvalidity() method. patternmismatch read only a boolean that is true if the value does not match the specified pattern, and false if it does match. if true, the element matches the :invalid css pseudo-class. rangeoverflow read only a boolean that is true if the value is greater than the maximum specified by the max attribute, or false if it is less than or equal to the maximum. if true, the element matches the :invalid and :out-of-range and css pseudo-classes. rangeunderflow read only a boolean that is true if the value is less than the minimum specified by the min attribute, or false if...
...by the max attribute, or false if it is less than or equal to the maximum. if true, the element matches the :invalid and :out-of-range and css pseudo-classes. rangeunderflow read only a boolean that is true if the value is less than the minimum specified by the min attribute, or false if it is greater than or equal to the minimum. if true, the element matches the :invalid and :out-of-range css pseudo-classes. stepmismatch read only a boolean that is true if the value does not fit the rules determined by the step attribute (that is, it's not evenly divisible by the step value), or false if it does fit the step rule. if true, the element matches the :invalid and :out-of-range css pseudo-classes. toolong read only a boolean that is true if the value exceeds the specified maxlength for html...
...ses. toolong read only a boolean that is true if the value exceeds the specified maxlength for htmlinputelement or htmltextareaelement objects, or false if its length is less than or equal to the maximum length. note: this property is never true in gecko, because elements' values are prevented from being longer than maxlength. if true, the element matches the the :invalid and :out-of-range css pseudo-classes. tooshort read only a boolean that is true if the value fails to meet the specified minlength for htmlinputelement or htmltextareaelement objects, or false if its length is greater than or equal to the minimum length. if true, the element matches the :invalid and :out-of-range css pseudo-classes. typemismatch read only a boolean that is true if the value is not in the required synta...
...And 2 more matches

::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). /* 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. in these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element. (this is poorly suppor...
...pen (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. in these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element. (this is poorly supported by browsers; see the browser compatibility table below.) a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. in that 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. allowable properties only a small subset of css prop...
...t some text at the beginning of the element. in that 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. ...
...And 2 more matches

::slotted() - CSS: Cascading Style Sheets
the ::slotted() css pseudo-element represents any element that has been placed into a slot inside an html template (see using templates and slots for more information). this only works when used inside css placed within a shadow dom. note also that this selector won't select a text node placed into a slot; it only targets actual elements. ...
...e placed into a slot; it only targets actual elements. ...
...nly targets actual elements. ...
...And 2 more matches

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) 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">...
... html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</...
... specifications specification status comment html living standardthe definiti...
...And 2 more matches

:nth-child() - CSS: Cascading Style Sheets
element indices are 1-based. keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc. even represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc. ...
...element indices are 1-based. keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc. even represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc. ...
... is all positive integers, starting from 0. it can be read as the an+bth element of a list. ...
...And 2 more matches

@page - CSS: Cascading Style Sheets
object model interface csspagerule. note: the w3c is discussing how to handle viewport-related <length> units, vh, vw, vmin, and vmax. meanwhile do not use them within a @page at-rule. ...
...spagerule. note: the w3c is discussing how to handle viewport-related <length> units, vh, vw, vmin, and vmax. meanwhile do not use them within a @page at-rule. ...
..., vw, vmin, and vmax. meanwhile do not use them within a @page at-rule. ...
...And 2 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
some of them apply only to xul elements. ...
...some of them apply only to xul elements. ...
...some of them apply only to xul elements. ...
...And 2 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
nearest-mail-blockquote-color -webkit-overflow-scrolling -webkit-region-break-after -webkit-region-break-before -webkit-region-break-inside -webkit-region-fragment -webkit-shape-inside -webkit-touch-callout (see touch-action) background-origin-x (unprefixed!) background-origin-y (unprefixed!) * still supported in the safari technology preview, but not in a generally released browser. ...
... in a generally released browser. pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-page-media :-webkit-full-screen* :-webkit-full-screen-ancestor :-webkit-full-screen-document :-webkit-full-screen-controls-hidden * now standard. note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid. pseudo-elements for web-compatibility reasons, blink, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. ::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-web...
... media features -webkit-animation -webkit-device-pixel-ratio -webkit-transform-2d -webkit-transform-3d -webkit-trans...
...And 2 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
ke 4.2) are not valid, because step defaults to 1. for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass. the step attribute is expressed in seconds. the step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). the default step is 60 seconds. see client-side validation for more information. tabindex global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input fo...
...crements the value of a numeric input by one, by default, or by the specified number of units. stepup() increments the value of a numeric input by one or by the specified number of units. css inputs, being replaced elements, have a few features not applicable to non form elements. ...
... by the specified number of units. css inputs, being replaced elements, have a few features not applicable to non form elements. there are css selectors that can specification target form controls based on their ui features, also known as ui pseudo-classes. the input element can also be targeted by type with attribute selectors. there are some properties that are especially useful as well. ui pseudo-classes captions super relevant to the <input> element: pseudo-class description :enabled any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus. :disabled any currently disabled element that has an enabled state, meaing it o...
...And 2 more matches

Examples and demos from articles - Archive of obsolete content
ereader() constructor was not supported by internet explorer for versions before 10. for a full compatibility code, see also our crossbrowser possible solution for image preview. determine if an element has been totally scrolled [html] this example shows how to determine whether a user has completely scrolled an element or not. [article] css pure-css dropdown menu [html] with the :hover pseudo-class you can create complex cascade algorithms. this is a common technique used, for example, in order to create pure-css dropdown menus (that is only css, without using javascript). .[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews. .[articl...
...s. this is a common technique used, for example, in order to create pure-css dropdown menus (that is only css, without using javascript). .[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews. .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. ...
...llery with full-size images shown only when mouse goes over previews. .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. [article] pure-css tooltips [html] this shows the use of the ::after pseudo-element in conjunction with the attr() css expression and a data-descr custom data attribute to create a pure-css, glossary-like tooltip. [article] pure-css lightbox [html] the :target pseudo-class is useful to switch on/off some invisible elements. ...
...[article] expandable elements [html] this example shows how it is possible to show/hide classes of elements in pure css. ...

Style System Overview - Archive of obsolete content
ed by cssruleprocessor, htmlstylesheetimpl, and htmlcssstylesheetimpl has a rulesmatching method, which is required to call nsrulewalker::forward on any rules that match the element. (we'll see what this does later.) the main argument to rulesmatching is a structure of enumeration data that implementations use to determine more quickly which rules match. has a separate rulesmatching method for pseudo-elements. cssruleprocessor one cssruleprocessor per origin (ua, user, author) css rule processor sorts all the rules in cascade order, and then puts them in rulehash, which remembers order and then hashes by first of id, class, tag, namespace, or unhashed. to match rules, we do lookups in the rulehash's tables, remerge the lists of rules using stored indices, and then call selectormatchest...
...ash, which remembers order and then hashes by first of id, class, tag, namespace, or unhashed. to match rules, we do lookups in the rulehash's tables, remerge the lists of rules using stored indices, and then call selectormatchestree to find which selectors really match. matching of class and id selectors is much faster than, say, attribute selectors. (important advice for chrome css authors.) pseudo-elements are hashed in element hash, so for matching pseudo-elements we only need one hashtable lookup. style contexts each style context (nsstylecontext), which is the interface through which layout accesses the style data for a given element, points to one rule node. we create one style context per frame, since frames point to style contexts rather than the other way around. style contex...
...e contexts must (in most cases) be created before frames are constructed, to determine what frame to create. parent style context determines inheritance; it should always be the content parent. [design flaw in frame/sc relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements. ...
...ses) be created before frames are constructed, to determine what frame to create. parent style context determines inheritance; it should always be the content parent. [design flaw in frame/sc relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements. resolvepseudostylecontextfor: for pseudo-elements (:first-letter, :before, etc.) resolvestylecontextfornonelement: skips rule matching and uses root rule node (text frame optimization) managing style contexts style context resolving functions will walk the rule processors in stylesetimpl::filerules, find the correct rule node, and find a current child of the parent (“sibling sharing”) or create a new child. style conte...

Attribute selectors - Learn web development
case-insensitive flag and so matches all of the list items. note: there is also a newer value s, which will force case-sensitive matching in contexts where matching is normally case-insensitive, however this is less well supported in browsers and isn't very useful in an html context. ...
...flag and so matches all of the list items. note: there is also a newer value s, which will force case-sensitive matching in contexts where matching is normally case-insensitive, however this is less well supported in browsers and isn't very useful in an html context. ...
...is less well supported in browsers and isn't very useful in an html context. next steps now we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors. ...
...ted in browsers and isn't very useful in an html context. next steps now we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors. ...

CSS selectors - Learn web development
such as an <h1>. h1 { } it also includes selectors which target a class: .box { } or, an id: #unique { } attribute selectors this group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element: a[title] { } or even make a selection based on the presence of an attribute with a particular value: a[href="https://example.com"] { } pseudo-classes and pseudo-elements this group of selectors includes pseudo-classes, which style certain states of an element. the :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer: a:hover { } it also includes pseudo-elements, which select a certain part of an element rather than the element itself. for example, ::first-line always selects the ...
..., or as you experiment with css generally. ...
... selector example learn css tutorial type selector h1 { } type selectors universal selector * { } the universal selector class selector .box { } class selectors id selector #unique { } id selectors attribute selector a[title] { } attribute selectors pseudo-class selectors p:first-child { } pseudo-classes pseudo-element selectors p::first-line { } pseudo-elements descendant combinator article p descendant combinator child combinator article > p child combinator adjacent sibling combinator h1 + p adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css s...
...do-elements descendant combinator article p descendant combinator child combinator article > p child combinator adjacent sibling combinator h1 + p adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Styling links - Learn web development
we'll look at all these topics in this article. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. objective: to learn how to style link states, and how to use links effectively in common ui features like navigation menus. ...
...gation menus. let's look at some links we looked at how links are implemented in your html according to best practices in creating hyperlinks. in this article we'll build on this knowledge, showing you best practices for styling links. ...
...ticle we'll build on this knowledge, showing you best practices for styling links. link states the first thing to understand is the concept of link states — different states that links can exist in, which can be styled using different pseudo-classes: link (unvisited): the default state that a link resides in, when it isn't in any other state. this can be specifically styled using the :link pseudo class. visited: a link when it has already been visited (exists in the browser's history), styled using the :visited pseudo class. hover: a link when it is being hovered over by a user's mouse pointer, styled using the :hover pseudo class. focus: a link when it has been focused (for example moved to by a keyboard user using the tab key or similar, or programmatically focused using htmlelement.
...been visited (exists in the browser's history), styled using the :visited pseudo class. hover: a link when it is being hovered over by a user's mouse pointer, styled using the :hover pseudo class. focus: a link when it has been focused (for example moved to by a keyboard user using the tab key or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class. active: a link when it is being activated (e.g. clicked on), styled using the :active pseudo class. default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the e...

Styling web forms - Learn web development
r calendar, or the button on the <select> that causes the options list to display) making up those widgets. if you want to thoroughly customize those widgets, you really have to create your own using html, css, and javascript. this is beyond the scope of the core form articles, but we do look at this in an advanced article how to build custom form controls. note: there are some proprietary css pseudo-elements available that allow you to style internal components of these form controls, such as ::-moz-range-track, but these are not consistent across browsers, so can't be relied upon. we will mention these later as well. the good to style form controls that are easy to style with css, you shouldn't face much if any difficulties, since they mostly behave like any other html element. we alread...
... form controls that are easy to style with css, you shouldn't face much if any difficulties, since they mostly behave like any other html element. we already looked at some simple form styling in your first form, and the css building blocks module contains some useful form styling essentials too. as well as the basic css tools covered above, we've also been provided with several selectors — ui pseudo-classes — that enable styling based on the current state of the ui. we cover these in detail in the next article, ui pseudo-classes. we'll walk through an example at the end of this article to give you some more ideas on basic form control styling and placement. before we do that however, we'd like to say a few words about specific aspects of form styling that are worth knowing about. fonts a...
...t to the value scroll. ...
...with just text fields and buttons, it's easy to style them using css. in the next article, we will see how to handle form widgets which fall into the "bad" and "ugly" categories. ...

Mozilla Quirks Mode Behavior
refox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 95530) this quirk is now html5 conform and has been adopted in standards mode. the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 211030). html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136). the :hover and :active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id, class or attribute. prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work. prior to ...
... quirks mode has document.all support (undetected). images (img elements) without alt attributes sometimes display placeholder icons in quirks mode. ...
... quirks mode has document.all support (undetected). images (img elements) without alt attributes sometimes display placeholder icons in quirks mode. ...
... quirks mode has document.all support (undetected). ...

nsIAccessNode
ons are instantiated lazily. the nsiaccessnode tree for a given dom window has a one to one relationship to the dom tree. if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed. ...
...lationship to the dom tree. if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed. method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue getcomputedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcomputedstylevalue(in domstring pseudoelt, in domstring propertyname); void scrollto(in unsigned long ascrolltype); void scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay); attributes note: attempting to access the attributes of a node that is unattached from the accessible tree will result in an exception - ns_error_failure. attribute type description document ...
... getcomputedstylecssvalue() retrieve the computed style value as nsidomcssprimitivevalue for the dom node this access node is associated with. note: the meanings of width, height and other size measurements depend on the version of css being used. therefore, for bounds information, it is better to use nsiaccessible.getbounds(). nsidomcssprimitivevalue getcomputedstylecssvalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or empty string for general computed style information for the node. propertyname retrieve the computed style value for this property name. return value the nsidomcssprimitivevalue computed style value. exceptions thrown ns_error_failure indicates that the access node is unattached fr...
...at the access node is unattached from the accessible tree. getcomputedstylevalue() retrieve the computed style value for this dom node, if it is a dom element. note: the meanings of width, height and other size measurements depend on the version of css being used. therefore, for bounds information, it is better to use nsiaccessible.getbounds(). domstring getcomputedstylevalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or null for general computed style information for this node. propertyname retrieve the computed style value for this property name, for example "border-bottom". return value the computed style value. exceptions thrown ns_error_failure indicates that the access node is unattached from...

nsIDOMWindowUtils
windowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void pr...
.... cannot be accessed from unprivileged context (not content-accessible) read only. elementsrestyled read only unsigned long long the number of elements which have been restyled for the current document. keep in mind that during a restyle operation, an element may be restyled multiple times (for example, when an inline element contains blocks). this number also counts restyling of pseudo-elements and anonymous boxes. throws ns_error_not_available if the count can't be provided. focusedinputtype string the type of the currently-focused html <input> element, if one is focused. imageanimationmode unsigned short returns the image animation mode of the window. the attribute's value must be one of the animationmode values from imgicontainer. imei...
...ns of firefox. getscrollxy() returns the scroll position of the window's currently loaded document. void getscrollxy( in boolean aflushlayout, out long ascrollx, out long ascrolly ); parameters aflushlayout flushes layout if true. otherwise, no flush occurs. ascrollx ascrolly getvisiteddependentcomputedstyle() perform the equivalent of: window.getcomputedstyle(aelement, apseudoelement). getpropertyvalue(apropertyname) except that, when the link whose presence in history is allowed to influence aelement's style is visited, get the value the property would have if allowed all properties to change as a result of :visited selectors (except for cases where getcomputedstyle uses data from the frame). this is easier to implement than adding our property restrictions to this a...
...if allowed all properties to change as a result of :visited selectors (except for cases where getcomputedstyle uses data from the frame). this is easier to implement than adding our property restrictions to this api, and is sufficient for the present testing requirements (which are essentially testing 'color'). astring getvisiteddependentcomputedstyle( in nsidomelement aelement, in astring apseudoelement, in astring apropertyname ); parameters aelement apseudoelement apropertyname return value isinmodalstate() is the window is in a modal state? [see entermodalstate()] boolean isinmodalstate(); parameters none. return value leavemodalstate() resume normal window state, where scripts can run and events are delivered. void leavemodalstate(); parameters non...

Web Video Text Tracks Format (WebVTT) - Web APIs
e by kyle so that some friends can watch it with their parents. 1 00:02:15.000 --> 00:02:20.000 - ta en kopp varmt te. - det är inte varmt. 2 00:02:20.000 --> 00:02:25.000 - har en kopp te. - det smakar som te. note this last line may not translate well. 3 00:02:25.000 --> 00:02:30.000 - ta en kopp styling webvtt cues you can style webvtt cues by looking for elements which match the ::cue pseudo-element. within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip". in addition, text boldfaced using the <b> element are colored "peachpuff". the html snippet below...
...ird line the time for first cue is to be specified. for example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as: 00:01.000 --> 00:05.000 on the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive. following the similar steps, a complete webvtt file for specific video or audio file can be made. css pseudo-classes css pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. it works in similar manner in webvtt files as it works in html file. it is one of the good features supported by webvtt is the localization and use of class elements which can be used in same way they are used in html and css to classify the style for particular type of...
... link: e.g., a:link. nth-last-child: e.g., p:nth-last-child(2). nth-child(n): e.g., p:nth-child(2). where p and a ...
...nd classifying the cues as shown below: webvtt 04:02.500 --> 04:05.000 j’ai commencé le basket à l'âge de 13, 14 ans 04:05.001 --> 04:07.800 sur les <i.foreignphrase><lang en>playground</lang></i>, ici à montpellier in the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics. the type of pseudo class is determined by the selector it is using and working is similar in nature as it works in html. following css pseudo classes can be used: lang (lanugage): e.g., p:lang(it). link: e.g., a:link. nth-last-child: e.g., p:nth-last-child(2). nth-child(n): e.g., p:nth-child(2). where p and a are the tags which are used in html for paragraph and link, respectively and they can be replaced b...

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. ...
...ing 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. ...
...tcomputedstyle(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 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>. ...
...ke a text node, will throw an error. defaultview in many code samples, getcomputedstyle is used from the document.defaultview object. in nearly all cases, this is needless, as getcomputedstyle exists on the window object as well. it's likely the defaultview pattern was a combination of folks not wanting to write a testing spec for window and making an api that was also usable in java. use with pseudo-elements getcomputedstyle can pull style info from pseudo-elements (such as ::after, ::before, ::marker, ::line-marker — see the pseudo-element spec). <style> h3::after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 = document.queryselector('h3'); var result = getcomputedstyle(h3, ':after').content; console.log('the generated content is: ', result...

:-moz-ui-invalid - CSS: Cascading Style Sheets
if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...
... if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...
... if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...
... only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the 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 synt...

::-webkit-progress-bar - CSS: Cascading Style Sheets
note: for ::-webkit-progress-value to take effect, appearance needs to be set to none on the <progress> element. ...
... note: for ::-webkit-progress-value to take effect, appearance needs to be set to none on the <progress> element. ...
... note: for ::-webkit-progress-value to take effect, appearance needs to be set to none on the <progress> element. ...
... note: for ::-webkit-progress-value to take effect, appearance needs to be set to none on the <progress> element. ...

::before (:before) - CSS: Cascading Style Sheets
in css, ::before creates a pseudo-element that is the first child of the selected element. it is often used to add cosmetic content to an element with the content property. it is inline by default. /* add a heart before links */ a::before { content: "♥"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements. syntax /* css3 syntax */ ::before /* css2 syntax */ :before note: css3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :before, introduced in css2. examples adding quotation marks one simple example of using ::before pseudo-elements is to provide quotation marks. here w...
... 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. html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-famil...
... selectors level 3the definition of '::before' in that specification. recommendation introduces the two-colon syntax. css level 2 ...
... selectors level 3the definition of '::before' in that specification. ...

:dir() - CSS: Cascading Style Sheets
the latter match the html dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. ...
...the latter match the html dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. ...
...the latter match the html dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. ...
...ml dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) in contrast, :dir() will match the value calculated by the user agent, even if inherited. note: in html, the direction is determined by the dir attribute. other document types may have different methods. syntax the :dir() pseudo-class requires one parameter, representing the text directionality you want to target. parameters ltr target left-to-right elements. rtl target right-to-left elements. formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-color: yellow; } :di...

:host() - CSS: Cascading Style Sheets
the most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. you can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. that's the job of :host-context(). note: this has no effect when used outside a shadow dom. ...
...t's the job of :host-context(). note: this has no effect when used outside a shadow dom. ...
...xt(). note: this has no effect when used outside a shadow dom. ...
...ial-custom-element) { font-weight: bold; } syntax :host( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident...

: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. ...
...web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities. ...
...another element. web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities. syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail. see this demo for a possible cue. note: for an analogous effect, but based on the :checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the :checked reference page. specifications specification comment feedback html living standardthe...
... css working group drafts github issues selectors level 3the definition of ':hover' in that specification. css level 2 (revision 1)the definition of ':hover' in that specification. initial definition. ...

:invalid - CSS: Cascading Style Sheets
syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
... syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...e to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. typically, descriptive text and/or an icon are used. ...
...tions 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 definition of ':invalid' in that...

:scope - CSS: Cascading Style Sheets
the :scope css pseudo-class represents elements that are a reference point for selectors to match against. /* selects a scoped element */ :scope { background-color: lime; } currently, when used in a stylesheet, :scope is the same as :root, since there is not at this time a way to explicitly establish a scoped element. when used from a dom api such as queryselector(), queryselectorall(), matches(), or element.closest(), :scope matches the element on which the method was called. syntax :scope examples identity match in this simple example, we demonstrate that using the :scope pseudo-class from the element.matches() method matches the element on which it's called. javascript let paragraph = document.getelementbyid("para"); let output = document.getelementbyid("output"); if (paragraph.m...
... javascript let paragraph = document.getelementbyid("para"); let output = document.getelementbyid("output"); if (paragraph.matches(":scope")) { output.innertext = "yep, the element is its own scope as expected!"; } html <p id="para"> this is a paragraph. it is not an interesting paragraph. sorry about that. </p> <p id="output"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element. javascript var context = document.getelementbyid('context'); var selected = context.queryselectorall(':scope > div'); document.getelementbyid('results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + element.getattribute('id'); }).join(', '); html <div id=...
...opera for androidsafari on iossamsung internet: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...
... 7webview android full support ≤37chrome android full support 27firefox android 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. full support 20disabled disabled from version 20: this feature is behind the layout.css.scope-pseudo.enabled prefer...

:where() - CSS: Cascading Style Sheets
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. ...
...r versions of firefox it is behind a pref — layout.css.is-where-selectors.enabled). note: you can also find this example on github; see is-where. ...
...s behind a pref — layout.css.is-where-selectors.enabled). note: you can also find this example on github; see is-where. ...
...mplex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident...

content - CSS: Cascading Style Sheets
<string> specifies the "alt text" for the element. this value can be any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data type, or ...
... <string> specifies the "alt text" for the element. ...
...t 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 outermost to innermost, separated by the specified string. the counters are rendered in the indicated style (de...
...l not announce it. if the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document. accessibility support for css generated content – tink explanation of wcag, guideline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocomputed valueon elements, always computes to normal. on ::before and ::after, if normal is specified, computes to none. otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> ...

Constraint validation - Developer guides
ted dom interface, (htmlinputelement, htmlselectelement, htmlbuttonelement, htmloutputelement or htmltextareaelement), which evaluates the constraints only on this element, allowing a script to get this information. the checkvalidity() method returns a boolean indicating whether the element's value passes its constraints. (this is typically done by the user-agent when determining which of the css pseudo-classes, :valid or :invalid, applies.) in contrast, the reportvalidity() method reports any constraint failures to the user. by a call to the checkvalidity() or reportvalidity() method on the htmlformelement interface. by submitting the form itself. calling checkvalidity() is called statically validating the constraints, while calling reportvalidity() or submitting the form is called interact...
...ad = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation. visual styling of constraint validation apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled. ...
..."fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation. visual styling of constraint validation apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled. controlling the look of elements the look of elements can be controlled via css pseudo-classes. ...
...ee a live example of the file size constraint validation. visual styling of constraint validation apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled. controlling the look of elements the look of elements can be controlled via css pseudo-classes. :required and :optional css pseudo-classes the :required and :optional pseudo-classes allow writing selectors that match form elements that have the required attribute, or that don't have it. :placeholder-shown css pseudo-class see :placeholder-shown :valid :invalid css pseudo-classes the :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. these class...

HTML attribute: required - HTML: Hypertext Markup Language
nt, indicates that the user must specify a value for the input before the owning form can be submitted. the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea> form control elements. if present on any of these input types and elements, the :required pseudo class will match. if the attribute is not included, the :optional pseudo class will match. the attribute is not supported or relevant to range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. note color and range don't support requir...
...ut a form that is hidden. nor is it supported on any of the button types, including image. note color and range don't support required, but type color defaults to #00000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 and 100 respectively in most browsers if not declared -- so always has a value. when an input has the required attribute, the :required pseudo-class also applies to it. conversely, inputs that support the required attribute but don't have the attribute set match the :optional pseudo-class. in the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be check, though it doesn't have to be the one with the attribute is applied. for this reason, to ...
...e element. attribute interactions because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. usability when including the required attribute, provide a visible indication near the control informing the user that the input, select or textarea is required. in addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. this improves usability for sited user. assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet. constraint validation if the element is required and the ele...
...hould inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet. constraint validation if the element is required and the element's value is the empty string, then the element is suffering from valuemissing and the element will match the :invalid pseudo class. specifications specification status comment html living standardthe definition of 'required attribute' in that specification. living standard html5the definition of 'required attribute' in that specification. recommendation html 5.1the definition of 'required attribute' in that specification. recommendation accessi...

CSS3 - Archive of obsolete content
2011 adds the support for the xml namespaces by defining the notion of css qualified name, using the ' | ' syntax and adding the @namespace css at-rule. selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] . ...
... the new general sibling combinator ( h1~pre ). ...
... to tweak the box model using the css box-sizing property. at risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module. allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements. at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, and ::repeat-index may be postponed to the next iteration of this module . support for icons, defined by the css icon property simultaneously with the new icon value of the css con...

Mozilla XForms Specials - Archive of obsolete content
68) mixing repeat and table or ul it is not possible to mix repeats with either table or ul. that means that it is not possible to do: <table> <xf:repeat ...> <tr> ... </tr> </xf:repeat> </table> or <ul> <xf:repeat ...> <li> ... </li> </xf:repeat> </ul> section 9.3.2 states that mixing with table will probably never work. mixing with ul might suffer from the same limitation. ...
...o mix repeats with either table or ul. that means that it is not possible to do: <table> <xf:repeat ...> <tr> ... </tr> </xf:repeat> </table> or <ul> <xf:repeat ...> <li> ... </li> </xf:repeat> </ul> section 9.3.2 states that mixing with table will probably never work. mixing with ul might suffer from the same limitation. pseudo-class support we currently support all the css pseudo-classes in xforms (:enabled, :disabled, etc. ), except for :read-only and :read-write, because of non-specified behaviour of these for (x)html. instead you have to use :-moz-read-only and :-moz-read-write for now. (limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ). instead you will have to use the foll...
...(limitation tracked in bug 271724) optional parameters in xpath functions optional parameters in xpath functions are not supported, you will have to specify all parameters when calling a function. this affects functions like hmac() or digest(). ...

Cascade and inheritance - Learn web development
ur single digits in four columns: thousands: score one in this column if the declaration is inside a style attribute, aka inline styles. such declarations don't have selectors, so their specificity is always simply 1000. hundreds: score one in this column for each id selector contained inside the overall selector. tens: score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector. ones: score one in this column for each element selector or pseudo-element contained inside the overall selector. note: the universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect on specificity. the following table shows a few isolated examples to get you in the mood. try going through these, and makin...
...e that you return to this article a few times as you continue through the course, and keep thinking about it. refer back here if you start to come across strange issues with styles not applying as expected. it could be a specificity issue. ...
...o this article a few times as you continue through the course, and keep thinking about it. refer back here if you start to come across strange issues with styles not applying as expected. it could be a specificity issue. ...

Type, class, and ID selectors - Learn web development
sal selector to make your selectors easier to read one use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. for example, if i wanted to select the first child of any descendant element of <article> , no matter what element it was, and make it bold, i could use the :first-child selector, which we will learn more about in the lesson on pseudo-classes and pseudo-elements, as a descendant selector along with the <article> element selector: article :first-child { } this could be confused however with article:first-child, which will select any <article> element that is the first child of another element. to avoid this confusion we can add the universal selector to the :first-child selector, so it is obvious what the selector is doing...
... is the only way to target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work. in the next article we'll continue exploring selectors by looking at attribute selectors. ...
... target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work. in the next article we'll continue exploring selectors by looking at attribute selectors. ...

Making decisions in your code — conditionals - Learn web development
the outcome of "ate one cookie" might be "still felt hungry", and the outcome of "ate two cookies" might be "felt full, but mom scolded me for eating all the cookies".) if...else statements let's look at by far the most common type of conditional statement you'll use in javascript — the humble if...else statement. basic if ... else syntax basic if...else syntax looks like the following in pseudocode: if (condition) { code to run if condition is true } else { run some other code instead } here we've got: the keyword if followed by some parentheses. a condition to test, placed inside the parentheses (typically "is this value bigger than this other value?", or "does this value exist?"). the condition makes use of the comparison operators we discussed in the last module and returns...
...articular statement depending on a condition, the syntax can be a bit cumbersome, especially if you've got a large number of choices. in such a case, switch statements are your friend — they take a single expression/value as an input, and then look through a number of choices until they find one that matches that value, executing the corresponding code that goes along with it. here's some more pseudocode, to give you an idea: switch (expression) { case choice1: run this code break; case choice2: run this code instead break; // include as many cases as you like default: actually, just run this code } here we've got: the keyword switch, followed by a set of parentheses. an expression or value inside the parentheses. the keyword case, followed by a choice th...
...e you to before we get you to play with some examples. the ternary or conditional operator is a small bit of syntax that tests a condition and returns one value/expression if it is true, and another if it is false — this can be useful in some situations, and can take up a lot less code than an if...else block if you simply have two choices that are chosen between via a true/false condition. the pseudocode looks like this: ( condition ) ? run this code : run this code instead so let's look at a simple example: let greeting = ( isbirthday ) ? 'happy birthday mrs. smith — we hope you have a great day!' : 'good morning mrs. smith.'; here we have a variable called isbirthday — if this is true, we give our guest a happy birthday message; if not, we give her the standard daily greeting. tern...

JIT Optimization Strategies
is determinable from the object's shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used. alternatively, if the property access is polymorphic, but only has a few different shapes observed at the access site, this optimization may be used. this optimization compiles down to one or more shape-guarded direct loads from the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[5] elif obj.shape == shape3 then obj.slots[2] ... end getprop_innerize attempts to optimize a situation where a property access of the form window.prop can be directly translated into a property access on the inner global object. this o...
...n is determinable from the object's shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used. alternatively, if the property write is polymorphic, but only has a few different shapes observed at the access site, this optimization may be used. this optimization compiles down to one or more shape-guarded direct stores to the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] = val elif obj.shape == shape2 then obj.slots[5] = val elif obj.shape == shape3 then obj.slots[2] = val ... end setprop_inlinecache this is the worst-case scenario for a property access optimization. this strategy is used when all the others fail. the engine simply inserts an ...
... arguments[i] can be directly translated into a direct reference to the corresponding argument value in the inlined call. consider the following: function foo(arg) { return bar(arg, 3); } function bar() { return arguments[0] + arguments[1]; } in the above case, if foo is compiled with ion, and the call to bar is inlined, then this optimization can transform the entire procedure to the following pseudo-code: compiled foo(arg): // inlined call to bar(arg, 3) { return arg + 3; // } getelem_inlinecache this is the worst-case scenario for an element access optimization. this strategy is used when all the others fail. the engine simply inserts an inline cache at the property write site. inline caches start off as a jump to a separate piece of code called a "fallback". the fallback c...

DOM Inspector FAQ - Firefox Developer Tools
ring markers; e.g., searching nodes for "^tab$" will return only nodes whose names are exactly "tab". or, if you do not know anything about the node, you can try to select it by clicking on it. scroll the node into view, choose the select-by-click toolbar button, and then click on the element you wish to inspect. the edit menu also includes a select element by click menu item. how do i inspect pseudo-classes and pseudo-elements in the css rules viewer? dom inspector allows you to force the :hover, :active, and :focus pseudo-classes to apply to a given node. from the dom nodes viewer, select the node and bring up the context menu. you should notice the set pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes. there is currently no way ...
...you can, however, find any rule in its parent style sheet (e.g., to modify it) by using the style sheets viewer in the document pane, and locating it in the css rules viewer in the object pane. ...
...you can, however, find any rule in its parent style sheet (e.g., to modify it) by using the style sheets viewer in the document pane, and locating it in the css rules viewer in the object pane. ...

Examine and edit HTML - Firefox Developer Tools
. clicking the marker enables the flexbox highlighter. custom… the element is a custom element. clicking the marker switches to the line of javascript code in the debugger where the custom element got defined. note: there are some useful keyboard shortcuts that can be used in the html tree — see the html pane keyboard shortcuts list. ::before and ::after you can inspect pseudo-elements added using ::before and ::after: custom element definition when you open the inspector on a page that includes custom elements, you can view the class definition for the custom element in the debugger: inspect the element click on the word custom the source for the element's class will be displayed in the debugger. whitespace-only text nodes web developers don’t write ...
...nks to find the description of each command in the context menu reference: edit as html create new node duplicate node delete node attributes add attribute copy attribute value edit attribute remove attribute break on ... ...
...an href attribute) opens the linked item in a new tab. open file in debugger (only when invoked over a link to a js source) opens the linked source in the debugger. open file in style-editor (only when invoked over a link to a css source) opens the linked source in the style editor. copy link address (only when invoked over a url) copy the url. (change pseudo-class) hover set the :hover css pseudo-class. (change pseudo-class) active set the :active css pseudo-class. (change pseudo-class) focus set the :focus css pseudo-class. (change pseudo-class) focus-within set the :focus-within css pseudo-class. (change pseudo-class) visited set the :visited css pseudo-class. editing html you can edit the ...

Drag Operations - Web APIs
exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. this mouse pointer feedback is sufficient in many cases. however, you can also update the user interface with an insertion point or highlight as needed. ...
... for more complex visual effects, you can also perform other operations during the dragenter event. for example, by inserting an element at the location where the drop will occur. ...
...the event's clientx and clienty properties as with other mouse events to determine the location of the mouse pointer. finally, the dragleave event will fire at an element when the drag leaves the element. this is the time when you should remove any insertion markers or highlighting. you do not need to cancel this event. any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically. the dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event. performing a drop when the user releases the mouse, the drag and drop operation ends. if the mouse is released over an element that is a valid drop target, that is, one that cancelled the last dragenter...

:-moz-ui-valid - CSS: Cascading Style Sheets
if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...
... if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...
... if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. ...

::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. ...
...ement, 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. ...
...tyles 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 pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification. working draft defines more strictly where ::first-letter can occur. generalizes allowed properties to typesetting, text decoration, and inline layout properties and o...

::selection - CSS: Cascading Style Sheets
::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. ...
...ntent must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings. (wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification. working draft initial definition. note: ::selection was in drafts of css selectors level 3, but it was removed in the candidate recommendation phase because its was under-specified (especially with nested elements) and interoperability wasn't achieved (based on discussion in the w3c style mailing list). it return...
... ...

: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. ...
...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 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 m...
...l 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 full-screen mode" button when the element is not in a full-screen state. the key is the use of the :not(:fullscreen), which looks for the element to not have the :fullscreen pseudo-class applied to it. #fs-toggle:not(:fullscreen) { background-color: #afa; } when the document is in full-screen mode, the following css applies instead, setting the background color to a pale shade of red. #fs-toggle:fullscreen { background-color: #faa; } specifications specification status comment fullscreen apithe definition of ':fullscreen' in that specif...

:has() - CSS: Cascading Style Sheets
the :has() css pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element. ...
...et test = document.queryselector('a:has(> img)'); syntax :has( <relative-selector-list> )where <relative-selector-list> = <relative-selector>#where <relative-selector> = <combinator>? <complex-selector>where <combinator> = '>' | '+' | '~' | [ '|' ]<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [...
...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 curr...

:in-range - CSS: Cascading Style Sheets
in the 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. ...
...in the 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. ...
...t whose current value is within the range limits specified by the min and max attributes. /* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range { background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. in the 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. <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <la...

:nth-last-of-type() - CSS: Cascading Style Sheets
see :nth-last-child for a more detailed explanation of its syntax. ...
... see :nth-last-child for a more detailed explanation of its syntax. ...
...on their position among a group of siblings, counting from the end. /* selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts items backwards from the end, not forwards from the beginning. syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. see :nth-last-child for a more detailed explanation of its syntax. formal syntax :nth-last-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>w...

:read-only - CSS: Cascading Style Sheets
the :read-only css pseudo-class represents an element (such as input or textarea) that is not editable by the user. input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. ...
...; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } ...
...tus comment html living standardthe definition of ':read-only' in that specification. living standard no change. html5the definition of ':read-only' in that specification. recommendation defines the semantics regarding html and constraint validation. selectors level 4the definition of ':read-only' in that specification. working draft defines the pseudo-class, but not the associated semantics. 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. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androi...

:read-write - CSS: Cascading Style Sheets
the :read-write css pseudo-class represents an element (such as input or textarea) that is editable by the user. input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. ...
... } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } ...
... comment html living standardthe definition of ':read-write' in that specification. living standard no change. html5the definition of ':read-write' in that specification. recommendation defines the semantics regarding html and constraint validation. selectors level 4the definition of ':read-write' in that specification. working draft defines the pseudo-class, but not the associated semantics. 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. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androi...

:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique element (the target element) with an id matching the url's fragment. /* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents. html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> ...
...<a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can target <i>this 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 t...
...ement */ 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 pure-css lightbox based on the :target pseudo-class is available on github (demo). html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <div class="lightbox" id="example1"> <figure> <a href="#" class="close"></a> <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit. donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption> </fig...

CSS selectors - CSS: Cascading Style Sheets
r selects adjacent siblings. this means that the second element directly follows the first, and both share the same parent. syntax: a + b example: h2 + p will match all <p> elements that directly follow an <h2>. column combinator the || combinator selects nodes which belong to a column. syntax: a || b example: col || td will match all <td> elements that belong to the scope of the <col>. pseudo pseudo classes the : pseudo allow the selection of elements based on state information that is not contained in the document tree. example: a:visited will match all <a> elements that have been visited by the user. pseudo elements the :: pseudo represent entities that are not included in html. example: p::first-line will match the first line of all <p> elements. specifications ...
...elements the :: pseudo represent entities that are not included in html. example: p::first-line will match the first line of all <p> elements. specifications specification status comment selectors level 4 working draft added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and ui pseudo-classes, modifier for ascii case-sensitive and case-insensitive attribute value selection. selectors level 3 recommendation added the ~ general sibling combinator and tree-structural pseudo-classes. made pseudo-elements use a :: double-colon prefix. additional attribute selectors css level 2 (revision 1) recommendation added the > child and + adjacent sibling com...
... added the ~ general sibling combinator and tree-structural pseudo-classes. made pseudo-elements use a :: double-colon prefix. additional attribute selectors css level 2 (revision 1) recommendation added the > child and + adjacent sibling combinators. added the universal and attribute selectors. css level 1 recommendation initial definition. see the pseudo-class and pseudo-element specification tables for details on those. ...

<body>: The Document Body element - HTML: Hypertext Markup Language
dom interface htmlbodyelement the <body> element exposes the htmlbodyelement interface. you can access the <body> element through the document.body property. attributes this element includes the global attributes. alink color of text for hyperlinks when selected. this method is non-conforming, use css color property in conjunction with the :active pseudo-class instead. background uri of a image to use as a background. this method is non-conforming, use css background property on the element instead. bgcolor background color for the document. this method is non-conforming, use css background-color property on the element instead. bottommargin the margin of the bottom of the body. this method is non-conforming, use css margin-bottom pro...
... the margin of the bottom of the body. this method is non-conforming, use css margin-bottom property on the element instead. leftmargin the margin of the left of the body. this method is non-conforming, use css margin-left property on the element instead. link color of text for unvisited hypertext links. this method is non-conforming, use css color property in conjunction with the :link pseudo-class instead. onafterprint function to call after the user has printed the document. onbeforeprint function to call when the user requests printing of the document. onbeforeunload function to call when the document is about to be unloaded. onblur function to call when the document loses focus. onerror function to call when the document fails to load properly. onfocus function to call...
...ement instead. text foreground color of text. this method is non-conforming, use css color property on the element instead. topmargin the margin of the top of the body. this method is non-conforming, use css margin-top property on the element instead. vlink color of text for visited hypertext links. this method is non-conforming, use css color property in conjunction with the :visited pseudo-class instead. example <html> <head> <title>document title</title> </head> <body> <p>this is a paragraph</p> </body> </html> specifications specification status comment html living standardthe definition of '<body>' in that specification. living standard changed the list of non-conforming features. html5the definition of '<body>' in...

Web Components
. extensions for creating custom built-in elements the is global html attribute: allows you to specify that a standard html element should behave like a registered custom built-in element. the "is" option of the document.createelement() method: allows you to create an instance of a standard html element that behaves like a given registered custom built-in element. css pseudo-classes pseudo-classes relating specifically to custom elements: :defined: matches any element that is defined, including built in elements and custom elements defined with customelementregistry.define()). :host: selects the shadow host of the shadow dom containing the css it is used inside. :host(): selects the shadow host of the shadow dom containing the css it is used inside (so you c...
... the selector given as the function's parameter matches the shadow host. :host-context(): selects the 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. css pseudo-elements pseudo-elements relating specifically to custom elements: ::part: represents any element within a shadow tree that has a matching part attribute. shadow dom shadowroot represents the root node of a shadow dom subtree. documentorshadowroot a mixin defining features that are available across document and shadow roots. element extensions extensions to the element interfac...
...by both element and text nodes, defining features that allow them to become the contents of an <slot> element. the mixin defines one attribute, slotable.assignedslot, which returns a reference to the slot the node is inserted in. element extensions extensions to the element interface related to slots: element.slot: returns the name of the shadow dom slot attached to the element. css pseudo-elements pseudo-elements relating specifically to slots: ::slotted: matches any content that is inserted into a slot. the slotchange event fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change. examples we are building up a number of examples in our web-components-examples github repo. more will be added as time goes on. specifications...

Content states and the style system - Archive of obsolete content
to minimize the number of style reresolves it does. to this end, when a <code>contentstateschanged</code> notification is dispatched for a content node the first thing that's done is to is to check whether the content state change something could affect any styles. this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. for each selector in this list we check whether it might have stopped matching the node or started matching it. if that has happened, then the style could depend on the state that changed and we have to reresolve style. the way we determine whether the selector might have stopped or started matchi...
...ved. 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 is needed to catch both selectors that now match and selectors that no longer match. for example, say we have the selectors: a:hover a:not(:hover) div:hover and the hover state on some node changes. we then try matching the node against these se...

:-moz-system-metric(scrollbar-end-backward) - Archive of obsolete content
to xul / chrome code). ...
...to xul / chrome code). ...

:-moz-system-metric(scrollbar-end-forward) - Archive of obsolete content
to xul / chrome code). ...
...to xul / chrome code). ...

:-moz-system-metric(scrollbar-start-backward) - Archive of obsolete content
to xul / chrome code). ...
...to xul / chrome code). ...

:-moz-system-metric(scrollbar-start-forward) - Archive of obsolete content
to xul / chrome code). ...
...to xul / chrome code). ...

:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
to xul / chrome code). ...
...to xul / chrome code). ...

:-moz-system-metric(touch-enabled) - Archive of obsolete content
to xul / chrome code). see bug 1396066 for more details. ...
...to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(windows-default-theme) - Archive of obsolete content
to xul / chrome code). see bug 1396066 for more details. example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero windows themes and red with other themes. ...
...to xul / chrome code). see bug 1396066 for more details. example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero windows themes and red with other themes. ...

::-ms-check - Archive of obsolete content
allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
... allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...

::-ms-clear - Archive of obsolete content
the clear button is only shown on focused, non-empty text controls. this includes inputs that appear text-like or fall back to type="text". ...
... the clear button is only shown on focused, non-empty text controls. this includes inputs that appear text-like or fall back to type="text". ...

::-ms-reveal - Archive of obsolete content
allowable properties only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...
... allowable properties only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...

::-ms-ticks-after - Archive of obsolete content
to do so would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...
...to do so would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...

::-ms-ticks-before - Archive of obsolete content
to do so would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...
...to do so would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...

::-ms-track - Archive of obsolete content
to do so would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...
...to do so would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...

Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
truly random numbers (say, from a radioactive source) are utterly unpredictable, whereas all algorithms are predictable, and a prng returns the same numbers when passed the same starting parameters or seed. prngs can be used for a variety of applications, such as games. a cryptographically secure prng is a prng with certain extra properties making it suitable for use in cryptography. these include: that it's computationally unfeasible for an attacker (without knowledge of the seed) to predict its output that if an attacker can work out its current state, this should not enable the attacker to work out previously emitted numbers. ...
...ain extra properties making it suitable for use in cryptography. these include: that it's computationally unfeasible for an attacker (without knowledge of the seed) to predict its output that if an attacker can work out its current state, this should not enable the attacker to work out previously emitted numbers. most prngs are not cryptographically secure. learn more general knowledge pseudorandom number generator on wikipedia math.random(), a built-in javascript prng function. note that this is not a cryptographically secure prng. crypto.getrandomvalues(): this is intended to provide cryptographically secure numbers. ...

Backgrounds and borders - Learn web development
e examples of usage for you to play with and enhance your knowledge. in the next lesson, we will find out how the writing mode of your document interacts with your css. ...
... for you to play with and enhance your knowledge. in the next lesson, we will find out how the writing mode of your document interacts with your css. ...

Debugging CSS - Learn web development
the most experienced of us sometimes find ourselves wondering what on earth is going on. taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found. ...
...ed of us sometimes find ourselves wondering what on earth is going on. taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found. ...

Handling different text directions - Learn web development
change in writing mode — will be very useful going forward. it will help you in understanding css even if you never use a writing mode other than a horizontal one. in the next module we will take a good look at overflow in css. ...
...ode — will be very useful going forward. it will help you in understanding css even if you never use a writing mode other than a horizontal one. in the next module we will take a good look at overflow in css. ...

Images, media, and form elements - Learn web development
esson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. ...
...ed some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. ...

Organizing your CSS - Learn web development
also now have the skills to explore the rest of the mdn css material. you can look up properties and values, explore our css cookbook for patterns to use, and read more in some of the specific guides such as our guide to css grid layout. ...
...kills to explore the rest of the mdn css material. you can look up properties and values, explore our css cookbook for patterns to use, and read more in some of the specific guides such as our guide to css grid layout. ...

Overflowing content - Learn web development
rstand that default css avoids making overflowing content invisible. you have discovered that you can manage potential overflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow. ...
... css avoids making overflowing content invisible. you have discovered that you can manage potential overflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow. ...

Combinators - Learn web development
ou've retained this information before you move on — see test your skills: selectors. moving on this is the last section in our lessons on selectors. next we will move on to another important part of css — the css box model. ...
... information before you move on — see test your skills: selectors. moving on this is the last section in our lessons on selectors. next we will move on to another important part of css — the css box model. ...

Sizing items in CSS - Learn web development
es that you might run into when sizing things on the web. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. ...
...un into when sizing things on the web. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. ...

Styling tables - Learn web development
s debugging css — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. this includes information on using browser devtools to find solutions to your problems. ...
... how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. this includes information on using browser devtools to find solutions to your problems. ...

The box model - Learn web development
is lesson in the future if you ever find yourself confused about how big boxes are in your layout. in the next lesson, we will take a look at how backgrounds and borders can be used to make your plain boxes look more interesting. ...
...ture if you ever find yourself confused about how big boxes are in your layout. in the next lesson, we will take a look at how backgrounds and borders can be used to make your plain boxes look more interesting. ...

CSS values and units - Learn web development
efinition explaining what the sub-values are. you can then look up the specifics here on mdn. ...
...g what the sub-values are. you can then look up the specifics here on mdn. ...

Use CSS to solve common problems - Learn web development
the following links provide solutions to common problems you may face when working with css. ...
... the following links provide solutions to common problems you may face when working with css. ...

Basic native form controls - Learn web development
attribute makes the checkbox checked automatically when the page loads. clicking the checkbox or its associated label toggles the checkbox on and off. the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked. any that are currently checked match the :checked pseudoclass. due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many developers and designers expanding on the default checkbox styling to create buttons that look like toggle switches you can see an example in action here (also see the source code). radio button ...
...duced in the early days of html that is well supported in all browsers. in the next section, we'll take a look at the newer values of the type attribute that were added in html5. ...

The HTML5 input types - Learn web development
ng to the default provided constraints. this is because the email input type allows intranet email addresses by default. to implement different validation behavior, you can use the pattern attribute, and you can also custom the error messages; we'll talk how to use these features in the client-side form validation article later on. note: if the data entered is not an email address, the :invalid pseudo-class will match, and the validitystate.typemismatch property will return true. search field search fields are intended to be used to create search boxes on pages and apps. this type of field is set by using the value search for the type attribute: <input type="search" id="search" name="search"> the main difference between a text field and a search field is how the browser styles its appeara...
... other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. we cover those in the next article. ...

How to build custom form controls - Learn web development
.select:focus-within will be a better option when fully supported */ position: relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state. because our control is focusable, we double this custom style with the :focus pseudo-class in order to be sure they will behave the same. .select .active, .select:focus { outline: none; /* this box-shadow property is not exactly required, however it's imperative to ensure active state is visible, especially to keyboard users, that we use it as a default value. */ box-shadow: 0 0 3px 1px #227755; } now, let's handle the list of options: /* the .select selector here ...
...because the value can be wider than our control, we have to make sure it will not change the control's width. if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element. it could also be implemented using a simple background image on the select class. .select:after { content : "▼"; /* we use the unicode character u+25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from overlapping the list of options */ top : 0; right : 0; box-sizing : border-box; height : 1...

Test your skills: Advanced styling - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. advanced form styling 1 in our first advanced styling tasks, we want you to handle making a search input as consistent as possible across browsers — a trickier task than with standard text inputs, even on modern browsers. ...
...ely with the labels. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 3 in our final task for this assessment series, we provide you with a feedback form that is already nicely-styled — you've already seen something similar if you've worked through our ui pseudo-classes article, and now we want you to come up with your own solution. what we'd like you to do is make use of some advanced pseudo-classes to provide some useful indicators of validity. first of all, we want you to provide some specific styling to visually indicate which inputs have to be filled in — they cannot be left empty. second, we want you to provide a useful visual indicator of w...

Graceful asynchronous programming with Promises - Learn web development
f you are indecisive, and may fail if you just can't make up your mind, or decide to get a curry instead. you then place your order. this can take a while to return a pizza and may fail if the restaurant does not have the required ingredients to cook it. you then collect your pizza and eat. ...
...za); }, failurecallback); }, failurecallback); }, failurecallback); this is messy and hard to read (often referred to as "callback hell"), requires the failurecallback() to be called multiple times (once for each nested function), with other issues besides. improvements with promises promises make situations like the above much easier to write, parse, and run. ...

Accessibility in React - Learn web development
ocus on the last "edit" button. we need to refactor our approach so that focus changes only when isediting changes from one value to another. more robust focus management in order to meet our refined criteria, we need to know not just the value of isediting, but also when that value has changed. in order to do that, we need to be able to read the previous value of the isediting constant. using pseudocode, our logic should be something like this: if (wasnoteditingbefore && iseditingnow) { focusoneditfield() } if (waseditingbefore && isnoteditingnow) { focusoneditbutton() } the react team had discussed ways to get a component’s previous state, and has provided an example custom hook we can use for the job. paste the following code near the top of todo.js, above your todo() function. f...
...useref(); useeffect(() => { ref.current = value; }); return ref.current; } now we'll define a wasediting constant beneath the hooks at the top of todo(). we want this constant to track the previous value of isediting, so we call useprevious with isediting as an argument: const wasediting = useprevious(isediting); with this constant, we can update our useeffect() hook to implement the pseudocode we discussed before — update it as follows: useeffect(() => { if (!wasediting && isediting) { editfieldref.current.focus(); } if (wasediting && !isediting) { editbuttonref.current.focus(); } }, [wasediting, isediting]); note that the logic of useeffect() now depends on wasediting, so we provide it in the array of dependencies. again try using the "edit" and "cancel" butt...

Firefox and the "about" protocol
there is a lot of useful information about firefox hidden away behind the about: url protocol. the most useful is the url about:config, which displays preferences and settings that can be inspected and changed. available about: urls depend on your specific firefox version. ...
...ample for safe browsing) about:webrtc information about webrtc usage about:welcome page first displayed when firefox is installed about:welcomeback information page displayed after firefox is reset these urls are defined in docshell/base/nsaboutredirector.cpp within the kredirmap array. the array maps most of the urls, like config to urls in the chrome: pseudo protocol, such as chrome://global/content/config.xul. the about location information is duplicated in docshell/build/nsdocshellmodule.cpp. note: you must access about: protocol pages by typing them into the address bar. attempts to navigate through window.location will throw — error: access to 'about:addons' from script denied. ...

HTTP Cache
ache entry object is already present in memory or open as “force-new” (a.k.a “open-truncate”) this callback is invoked sooner then the asyncopenuri method returns (i.e. immediately); there is currently no way to opt out of this feature (watch bug 938186). nsicacheentry //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentry.idl obtained asynchronously or pseudo-asynchronously by a call to nsicachestorage.asyncopenuri. provides access to a cached entry data and meta data for reading or writing or in some cases both, see below. lifetime of a new entry such entry is initially empty (no data or meta data is stored in it). the anew argument in oncacheentryavailable is true for and only for new entries. only one consumer (the so ca...
...s the number of consumers keeping a reference to it. refers a cachefile object that holds actual data and meta data and, when told to, persists it to the disk. the openers fifo is an array of cacheentry::callback objects. cacheentry::callback keeps a strong reference to the opener plus the opening flags. ...

IME handling guide
classes around process boundary. mozilla::contentcache this is a base class of contentcacheinchild and contentcacheinparent and ipc-aware. this has common members of them including all cache data: mtext whole text in focused editor. this may be too big but ime may request all text in the editor. if we can separate editor contents per paragraph, moving selection between paragraphs generates pseudo focus move, we can reduce this size and runtime cost of contenteventhandler. however, we've not had a plan to do that yet. note that microsoft word uses this hack. mcompositionstart offset of composition string in mtext. when there is no composition, this is uint32_max. mselection::manchor, mselection::mfocus offset of selection anchor and focus in mtext. mselection::mwritingmode writing mo...
...ocess has focus. when a remote process loses focus, imestatemanager in parent process notifies imestatemanager in the remote process of "stop ime state management". when imestatemanager::stopimestatemanagement() is called in the remote process by this, the imestatemanager forgets all focus information (i.e., that indicates nobody has focus). when imestatemanager in parent process is notified of pseudo focus move from or to menubar while a remote process has focus, it notifies the remote process of "menu keyboard listener installed". then, tabchild calls imestatemanager::oninstalledmenukeyboardlistener() in the remote process. style of each clause the style of each ime selection is managed by lookandfeel class per platform. therefore, it can be overridden by prefs. background color, foregrou...

Mozilla Style System
, a single style rule processor for all user css style sheets, and a single style rule processor for all author css style sheets. there is also a style rule processor for style attributes (which contain css declarations) and one for presentational attributes in html. the methods on nsistyleruleprocessor allow the front end to ask the back ends for the style data that applies to a given element or pseudo-element, in the form of style rules. nsistylerule an nsistylerule is animmutable set of css property-value pairs. for css style sheets, they correspond to css's concept of rules. however, they also exist for the other types of rule processors. when script dynamically changes the data represented by a css style rule, we create a new nsistylerule object; keeping the old one around briefly help...
...ta represented by a css style rule, we create a new nsistylerule object; keeping the old one around briefly helps to determine what changed and how we need to handle that change. computed style (front end) the interface that the front end exposes to the rest of mozilla consists of a single nsstyleset object and many nsstylecontext objects, each of which holds the computed style for an element, pseudo-element, or text node. the style set provides the api managing the rule processors and for creating style contexts. the style contexts then provide the api for computed style data by allowing retrieval of a set of style structs, each of which contains the computed values of a set of css properties. style structs the style structs are a set of structs, each of which holds computed values a grou...

Introduction to NSPR
blocks the calling thread in a waiting condition state. when the thread is resumed after the wait, it will have reentered the monitor, making operations on the data safe. there is a subtle interaction between the thread(s) waiting on a condition and those notifying it. the notification must take place within a monitor--the same monitor that protects the data being manipulated by the notifier. ...
...manipulate monitored data exit(monitor); the need to evaluate the boolean expression again after rescheduling from a wait may appear unnecessary, but it is vital to the correct execution of the program. ...

Parser API
of gecko 21. note: e4x is not part of the ecmascript standard (ecma-262), but is a separate standard of its own (ecma-357). declarations interface xmldefaultdeclaration <: declaration { type: "xmldefaultdeclaration"; namespace: expression; } a default xml namespace declaration. expressions interface xmlanyname <: expression { type: "xmlanyname"; } the special e4x wildcard pseudo-identifier *. interface xmlqualifiedidentifier <: expression { type: "xmlqualifiedidentifier"; left: identifier | xmlanyname; right: identifier | expression; computed: boolean; } an e4x qualified identifier, i.e., a pseudo-identifier using the namespace separator ::. if the qualified identifier has a computed name (i.e., the id::[expr] form), then computed is true and the right...
...callback to produce a custom object property initializer node. e4x declarations xmldefaultdeclaration(ns[, loc]) loc: sourcelocation returns: customdeclaration callback to produce a custom xml default namespace declaration node. expressions xmlanyname([loc]) loc: sourcelocation returns: customxmlanyname/customxml/customexpression callback to produce a custom xml node for the wildcard pseudo-identifier *. xmlattributeselector(expr[, loc]) expr: customexpression loc: sourcelocation returns: customxml/customexpression callback to produce a custom xml attribute selector node. xmlfilterexpression(left, right[, loc]) left: customexpression right: customexpression loc: sourcelocation returns: customxml/customexpression callback to produce a custom xml filter expression node. xml...

nsIDOMWindow
s are actually based on nsidomwindow2, which is a subclass of nsidomwindow that adds some new features to this interface. in gecko 7.0 nsidomwindow2 has been merged into this interface. in gecko 8.0 nsidomstoragewindow and nsidomwindowinternal have been merged into this interface. ...
...ot for this window. this is useful for connecting event listeners to this window as well as every other window nested in that window root. read only. native code only! note: prior to gecko 7.0 this attribute was part of nsidomwindow2. methods getcomputedstyle() see dom-window-getcomputedstyle for details. nsidomcssstyledeclaration getcomputedstyle( in nsidomelement elt, in domstring pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window. nsiselection getselection(); parameters none. return value the nsiselection object for the window. scrollby() scrolls the window by a given number of pixels relative to the current scroll position...

nsITreeBoxObject
coordinate system is the client coordinate system for the document this boxobject lives in, and the units are css pixels. void getcellat(in long x, in long y, out long row, out nsitreecolumn col, out acstring childelt); parameters x the x coordinate y the y coordinate returns row the row index at the coordinates col the nsitreecolumn hit. childelt the pseudoelement hit: this can have values of "cell", "twisty", "image", and "text". getcoordsforcellitem() find the coordinates of an element within a specific cell. void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); parameters row the index of the row col the nsitreecol...
...ve values of "cell", "twisty", "image", and "text". getcoordsforcellitem() find the coordinates of an element within a specific cell. void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); parameters row the index of the row col the nsitreecolumn element the pseudoelement. this can have values of "cell", "twisty", "image", and "text". returns x the x coordinate col the y coordinate. width the width of the element height the height of the element iscellcropped() determine if the text of a cell is being cropped or not. boolean iscellcropped(in long row, in nsitreecolumn col); parameters row the index of the row ...

Migrating from Firebug - Firefox Developer Tools
to copy the whole style declaration, though this can be achieved by selecting them within the panel and copying the selection by pressing ctrl+c or via the context menu. the rules side panel of the devtools is smarter when it comes to pasting css into it. you can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled. ...
... can be achieved by selecting them within the panel and copying the selection by pressing ctrl+c or via the context menu. the rules side panel of the devtools is smarter when it comes to pasting css into it. you can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled. toggle pseudo-classes firebug lets you toggle the css pseudo-classes :hover, :active and :focus for an element via the options menu of the style side panel. in the devtools there are two ways to do the same. the first one is to toggle them via the pseudo-class panel within the rules side panel. the second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu. examine css shorthand properties css shortha...

Paint Flashing Tool - Firefox Developer Tools
r renders a web page it parses the html and css, determines how to lay it out, and then paints it to actually display the content on the screen. whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. for example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that changes the element's style. repainting can be an expensive operation, so the browser tries to minimise the amount of repainting that it needs to do. it tries to work out which parts of the screen are "damaged" and repaint only those. the browser also splits its model of the page into layers that it expects will be updated independently of each other. layers are painted independently ...
...it needs to. using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page. after moving the mouse around and scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again. example: css transitions one area where implementation choices can affect repaint efficiency is in css transitions. the example below shows two diffe...

AnimationEvent() - Web APIs
the animationevent() constructor returns a newly created animationevent, representing an event in relation with an animation. syntax animationevent = new animationevent(type, {animationname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); parameters the animationevent() constructor also inherits arguments from event(). type a domstring representing the name of the type of the animationevent. it is case-sensitive and can be: 'animationstart', 'animationend', or 'animationiteration'. animationname optional a domstring containing the value of the animation-name css property associated with the transition. it defaults to "". elapsedtime optional a float giving the amount o...
...tion. it defaults to "". elapsedtime optional a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). it defaults to 0.0. pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". it defaults to "". return value a new animationevent, initialized per any provided options. specifications specification status comment css ani...

Crypto.getRandomValues() - Web APIs
the crypto.getrandomvalues() method lets you get cryptographically strong random values. the array given as the parameter is filled with random numbers (random in its cryptographic meaning). to guarantee enough performance, implementations are not using a truly random number generator, but they are using a pseudo-random number generator seeded with a value with enough entropy. the pseudo-random number generator algorithm (prng) may vary across user agents, but is suitable for cryptographic purposes. implementations are required to use a seed with enough entropy, like a system-level entropy source. getrandomvalues() is the only member of the crypto interface which can be used from an insecure context. syntax typedarray = cryptoobj.getrandomvalues(typedarray); parameters typedarray an in...
...enerate encryption keys. instead, use the generatekey() method. there are a few reasons for this; for example, getrandomvalues() is not guaranteed to be running in a secure context. there is no minimum degree of entropy mandated by the web cryptography specification. user agents are instead urged to provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number generator built into the user agent itself, but seeded with values taken from an external source of pseudorandom numbers, such as a platform-specific random number function, the unix /dev/urandom device, or other source of random or pseudorandom data. examples /* assuming that window.crypto.getrandomvalues is available */ var array = new uint32array(10); window.crypto.getrandomval...

Document.querySelectorAll() - Web APIs
script also uses backslash escaping, special care must be taken when writing string literals using these characters. see escaping special characters for more information. return value a non-live nodelist containing one element object for each element that matches at least one of the specified selectors or an empty nodelist in case of no matches. note: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syntaxerror the syntax of the specified selectors string is not valid. examples obtaining a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var ...
... inner.length; // 1, not 0! in this example, when selecting .outer .inner in the context the <div> with the class select, the element with the class .inner is still found, even though .outer is not a descendant of the base element on which the search is performed (.select). by default, queryselectorall() only verifies that the last element in the selector is within the search scope. the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification. living standard ...

Element.querySelectorAll() - Web APIs
g a backslash character. since javascript also uses backspace escaping, special care must be taken when writing string literals using these characters. see escaping special characters for more information. return value a non-live nodelist containing one element object for each descendant node that matches at least one of the specified selectors. note: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syntaxerror the syntax of the specified selectors string is not valid. examples dataset selector & attribute selectors <section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> // dataset select...
...ength; // 1, not 0! in this example, when selecting ".outer .inner" in the context the <div> with the class "select", the element with the class ".inner" is still found, even though .outer is not a descendant of the base element on which the search is performed (".select"). by default, queryselectorall() only verifies that the last element in the selector is within the search scope. the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification. living standard liv...

Element - Web APIs
ed upon. element.insertadjacenthtml() parses the text as html or xml and inserts the resulting nodes into the tree in the position given. element.insertadjacenttext() inserts a given text node at a given position relative to the element it is invoked upon. element.matches() returns a boolean indicating whether or not the element would be selected by the specified selector string. element.pseudo() returns a csspseudoelement representing the child pseudo-element matched by the specified pseudo-element selector. element.queryselector() returns the first node which matches the specified selector string relative to the element. element.queryselectorall() returns a nodelist of nodes which match the specified selector string relative to the element. element.releasepointercapture() rel...
...m the touch surface. also available via the ontouchend property touchmove fired when one or more touch points are moved along the touch surface. also available via the ontouchmove property touchstart fired when one or more touch points are placed on the touch surface. also available via the ontouchstart property specifications specification status comment css pseudo-elements level 4the definition of 'element' in that specification. working draft added the pseudo() method. web animations working draft added the getanimations() method. undomanager and domtransactionthe definition of 'element' in that specification. editor's draft added the undoscope and undomanager properties. pointer events – level 2the definitio...

ParentNode.querySelectorAll() - Web APIs
g a backslash character. since javascript also uses backslash escaping, special care must be taken when writing string literals using these characters. see escaping special characters for more information. return value a non-live nodelist containing one element object for each descendant node that matches at least one of the specified selectors. note: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syntaxerror the syntax of the specified selectors string is not valid. examples to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselec...
... inner.length; // 1, not 0! in this example, when selecting .outer .inner in the context the <div> with the class select, the element with the class .inner is still found, even though .outer is not a descendant of the base element on which the search is performed (.select). by default, queryselectorall() only verifies that the last element in the selector is within the search scope. the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification. living standard ...

TransitionEvent() - Web APIs
the transitionevent() constructor returns a newly created transitionevent, representing an event in relation with an transition. syntax transitionevent = new transitionevent(type, {propertyname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); arguments the transitionevent() constructor also inherits arguments from event(). type is a domstring representing the name of the type of the transitionevent. it is case-sensitive and can only be: 'transitionend'. propertyname optional is a domstring containing the value of the property-name css property associated with the transition. it defaults to "". elapsedtime optional is float giving the amount of time the animatio...
...on. it defaults to "". elapsedtime optional is float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). it defaults to 0.0. pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element, an empty string: "". it defaults to "". specifications specification status comment css transitionsthe definition of 'transitionevent()' in that specification. working draft i...

Rendering and the WebXR frame animation callback - Web APIs
as close to that as possible, remembering that there's more going on than just your code in this one function. you need to make sure that the main thread doesn't need to run for more time per frame than the duration of the frame itself. a basic renderer in this version of the webxr renderering callback, we use a very straightforward approach that works great for relatively simple projects. this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bindtextures() drawmyobject() put simply, this form of renderer is using view-first order. each of the two views making up the ...
...g the order in which things are done. instead of setting up the viewport for a given view (such as the left eye), then rendering every object visible to the left eye, one by one, reconfiguring buffers for each object as you go, you can instead render each object twice in a row, once for each eye, thereby only needing to set up the buffers, uniforms, and so forth once for both eyes. ...

Window.open() - Web APIs
opening new windows. offer to open a link in a new window, using these guidelines if you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines: never use this form of code for links: <a href="javascript:window.open(...)" ...> "javascript:" links break accessibility and usability of webpages in every browser. "javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activex, no flash. for various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled. "javascript:" links will interfe...
...me "javascript:" will be reported as an error by link validators and link checkers. further reading: top ten web-design mistakes of 2002, 6. javascript in links, jakob nielsen, december 2002 links & javascript living together in harmony, jeff howden, february 2002 comp.lang.javascript newsgroup discussion faq on "javascript:" links never use <a href="#" onclick="window.open(...);"> such pseudo-link also breaks accessibility of links. always use a real url for the href attribute value so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like ms-web tv, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. t...

-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(). syntax values auto automatically defines the region of the image to use. ...
...ically defines the region of the image to use. <shape> a shape defining the part of the image to use. the 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. note: -moz-image-region only works with <image> elements where the icon is specified using list-style-image. it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the ...

:-moz-focusring - CSS: Cascading Style Sheets
this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. ...
...nd a focus ring or other indicator should be drawn around it. if :-moz-focusring matches, then :focus also matches, but the converse is not always true: it depends on whether the user agent has focus ring drawing enabled and how the element was focused. whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform. this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. 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 c...

:-moz-loading - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. ...
... note: this selector is mainly intended to be used by theme developers. ...

:-moz-window-inactive - CSS: Cascading Style Sheets
this attribute is no longer used. syntax :-moz-window-inactive examples this example alters the appearance of a box's background depending on whether its window is active or not. ...
...this attribute is no longer used. syntax :-moz-window-inactive examples this example alters the appearance of a box's background depending on whether its window is active or not. ...

::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the clear button is only shown on non-empty search <input> elements. ...
...the clear button is only shown on non-empty search <input> elements. ...

::-webkit-search-results-button - CSS: Cascading Style Sheets
the search results button is only shown on search <input> elements that have a results attribute. ...
...the search results button is only shown on search <input> elements that have a results attribute. ...

::backdrop - CSS: Cascading Style Sheets
this includes both elements which have been placed in full-screen mode using the fullscreen api and <dialog> elements. when multiple elements have been placed into full-screen mode, the backdrop is drawn immediately beneath the frontmost such element, and on top of the older full-screen elements. ...
...n elements. /* backdrop is only displayed when 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. the ::backdrop pseudo-element makes it possible to obscure, style, or completely hide everything located below the element when it's the topmost one in the top layer. ::backdrop neither inherits from nor is inherited by any other elements. no restrictions are made on what properties apply to this pseudo-element. syntax ::backdrop examples styling the backdrop for full-screen video in this example, the backdrop s...

::cue-region - CSS: Cascading Style Sheets
this can be used to style captions and other cues in media with vtt tracks. ::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. ...
... candidate recommendation initial definition. ...

::grammar-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::grammar-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown. ...
... working draft initial definition. ...

::marker - CSS: Cascading Style Sheets
::marker { color: blue; font-size: 1.2em; } allowable properties only certain css properties can be used in a rule with ::marker as a selector: all font properties the white-space property color text-combine-upright, unicode-bidi and direction properties the content property all animation and transition properties the specification states that additional css properties may be supported in future. ...
...es the content property all animation and transition properties the specification states that additional css properties may be supported in future. syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-size: 1.5em; } result specifications specification status comment css pseudo-elements level 4the definition of '::marker' in that specification. working draft no significant change. css lists module level 3the definition of '::marker' in that specification. working draft initial definition. ...

::placeholder - CSS: Cascading Style Sheets
note: in most browsers, the appearance of placeholder text is a translucent or light gray color by default. syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind. ...
... working draft initial definition. ...

::spelling-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::spelling-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown. ...
... working draft initial definition. ...

:active - CSS: Cascading Style Sheets
the :active css pseudo-class represents an element (such as a button) that is being activated by the user. when using a mouse, "activation" 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...
... syntax :active examples active links html <p>this paragraph contains a link: <a href="#">this link will turn red while you click on it.</a> the paragraph will get a gray background while you click on it or the link. ...

:disabled - CSS: Cascading Style Sheets
an element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. the element also has an enabled state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
... specification. living standard no change. html5the definition of ':disabled' in that specification. recommendation defines the semantics of html and forms. selectors level 4the definition of ':disabled' in that specification. working draft no change. selectors level 3the definition of ':disabled' in that specification. recommendation defines the pseudo-class, but not the associated semantics. ...

:empty - CSS: Cascading Style Sheets
/* selects any <div> that contains no content */ div:empty { background: lime; } syntax :empty examples html <div class="box"><!-- i will be lime. --></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older browsers because of the whitespace around this comment. ...
...r buttons that rely solely on an icon to convey purpose. what is an accessible name? | the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.4 | w3c understanding wcag 2.0 specifications specification status comment selectors level 4the definition of 'the :empty pseudo-class' in that specification. working draft changed to act like :-moz-only-whitespace. selectors level 3the definition of 'the :empty pseudo-class' in that specification. recommendation initial definition ...

:enabled - CSS: Cascading Style Sheets
an element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. the element also has a disabled state, in which it can't be activated or accept focus. /* selects any enabled <input> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
...at specification. living standard no change. html5the definition of ':enabled' in that specification. recommendation defines the semantics for html and forms. selectors level 4the definition of ':enabled' in that specification. working draft no change. selectors level 3the definition of ':enabled' in that specification. recommendation defines the pseudo-class, but not the associated semantics. ...

:first - CSS: Cascading Style Sheets
you can only change the margins, orphans, widows, and page breaks of the document. furthermore, you may only use absolute-length units when defining the margins. all other properties will be ignored. ...
...you can only change the margins, orphans, widows, and page breaks of the document. furthermore, you may only use absolute-length units when defining the margins. all other properties will be ignored. ...

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

:focus - CSS: Cascading Style Sheets
use :focus-within if you want to select an element that contains a focused element. ...
...use :focus-within if you want to select an element that contains a focused element. ...

:host-context() - CSS: Cascading Style Sheets
in other words, this allows a custom element, or anything within that custom element's shadow dom, to apply different styles based on its position within the outer dom or classes/attributes applied to ancestor elements. 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>. ...
... article) { font-weight: bold; } /* changes paragraph text color from black to white when a .dark-theme class is applied to the document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [...

:left - CSS: Cascading Style Sheets
all other properties will be ignored, and only the page box, not the document content on the page, will be affected. ...
...ment. /* selects any left-hand pages when printing */ @page :left { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document. for example, if the first page has a major writing direction of left-to-right then it will be a :right page; if it has a major writing direction of right-to-left then it will be a :left page. note: this pseudo-class can be used to change only the margin, padding, border, and background properties of the page box. all other properties will be ignored, and only the page box, not the document content on the page, will be affected. syntax :left examples setting a margin for left-hand pages @page :left { margin: 2in 3in; } specifications specification status comment cs...

:nth-of-type() - CSS: Cascading Style Sheets
see :nth-child for a more detailed explanation of its syntax. ...
... see :nth-child for a more detailed explanation of its syntax. ...

:right - CSS: Cascading Style Sheets
all other properties will be ignored, and only the page box, not the document content on the page, will be affected. ...
...nt. /* selects any right-hand pages when printing */ @page :right { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document. for example, if the first page has a major writing direction of left-to-right then it will be a :right page; if it has a major writing direction of right-to-left then it will be a :left page. note: this pseudo-class can be used to change only the margin, padding, border, and background properties of the page box. all other properties will be ignored, and only the page box, not the document content on the page, will be affected. syntax :right examples setting margins for right-hand pages @page :right { margin: 2in 3in; } specifications specification status comment ...

@supports - CSS: Cascading Style Sheets
where <supports-feature> = <supports-decl> | <supports-selector-fn><general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )where <supports-decl> = ( <declaration> )<supports-selector-fn> = selector( <complex-selector> )where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? ...
... <supports-decl> | <supports-selector-fn><general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )where <supports-decl> = ( <declaration> )<supports-selector-fn> = selector( <complex-selector> )where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
out, and demonstrates some of the extra functionality you get when using grid layout such as layering of items on the grid. this may also help in your decision as to which layout method to use. ...
...layout method to use. flexbox and display: contents the contents value of the display property is a new value that is described in the spec as follows: “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 examp...

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 } ... 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 { ...
... of the element selected by a. descendant combinator a b specifies that the element selected by b is a descendant of the element selected by a, but is not necessarily a direct child. column combinator a || b specifies that the element selected by b is located within the table column specified by a. elements which span multiple columns are considered to be a member of all of those columns. pseudo pseudo classes : specifies a special state of the selected element(s). pseudo elements :: represents entities that are not included in html. see also: selectors in the selectors level 4 specification. concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types ...

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
sing a custom property name that begins with a double hyphen (--), and a property value that can be any valid css value. like any other property, this is written inside a ruleset, like so: element { --main-bg-color: brown; } note that the selector given to the ruleset defines the scope that the custom property can be used in. a common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your html document: :root { --main-bg-color: brown; } however, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties. note: custom property names are case sensitive — --my-color will be treated as a separate custom property to --my-color. as mentioned earlier, you use the cu...
...ass="four">4: lorem ipsum</textarea> </div> ... which leads us to this: notice the repetition in the css. the background color is set to brown in several places. for some css declarations, it is possible to declare this higher in the cascade and let css inheritance solve this problem naturally. for non-trivial projects, this is not always possible. ...

transition - CSS: Cascading Style Sheets
, transition-timing-function, and transition-delay. 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. transitions enable you to define the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript. constituent properties this property is a shorthand for the following css properties: transition-delay transition-duration transition-property transition-timing-function syntax /* apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margi...
...ings are handled when lists of property values aren't the same length. in short, extra transition descriptions beyond the number of properties actually being animated are ignored. ...

disabled - HTML: Hypertext Markup Language
e, then the control is enabled. if declared on an <optgroup>, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable. note: if a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>. when a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class. this boolean attribute prevents the user from interacting with the button. if this attribute isn't set, the button can still be disabled from a containing element, for example <fieldset>; if there is no containing element with the disabled attribute...
...ntil the control is enabled. note: the required attribute is not permitted on inputs with the disabled attribute specified. usability browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form. if present on a supporting elements, the :disabled pseudo class will match. if the attribute is not included, the :enabled pseudo class will match. if the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the :disabled and :enabled pseudo classes. constraint validation if the element is disabled, then the element's value can not receive focus and cannot be updated by the user, ...

HTML attribute: max - HTML: Hypertext Markup Language
ypes, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid. if the value exceeds the max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pseudo-classes. syntax syntax for max values by input type input type syntax example date yyyy-mm-dd <input type="date" max="2019-12-25" step="1"> month yyyy-mm <input type="month" max="2019-12" step="12"> week yyyy-w## <input type="week" max="2019-w23" step=""> time hh:mm <input type="time" max="17:00" step="900"> ...
... for the<progress> element, the max attribute describes how much work the task indicated by the progress element requires. if present, must have a value greater than zero and be a valid floating point number. for the <meter> element, the max attribute defines the upper numeric bound of the measured range. this must be gr...

HTML attribute: readonly - HTML: Hypertext Markup Language
ttribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation. the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements. if present on any of these input types and elements, the :read-only pseudo class will match. if the attribute is not included, the :read-write pseudo class will match. the attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. it is also not supported on hidden as it can not be expe...
...ted that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. note: only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply. when an input has the readonly attribute, the :read-only pseudo-class also applies to it. conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class. attribute interactions the difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not fun...

getter - JavaScript
mputed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. in javascript, this can be accomplished with the use of a getter. it is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property. note the following when working with the get syntax: it can have an identifier which is either a number or a string; it must have exactly zero parameters (see incompatible es5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another get or with a data entry for the same prope...
...ers (see incompatible es5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another get or with a data entry for the same property ({ get x() { }, get x() { } } and { x: ..., get x() { } } are forbidden). examples defining a getter on new objects in object initializers this will create a pseudo-property latest for object obj, which will return the last array item in log. const obj = { log: ['example','test'], get latest() { if (this.log.length === 0) return undefined; return this.log[this.log.length - 1]; } } console.log(obj.latest); // "test" note that attempting to assign a value to latest will not change it. deleting a getter using the delete operator if you want t...

setter - JavaScript
able that holds the value attempted to be assigned to prop. expression starting with ecmascript 2015, you can also use expressions for a computed property name to bind to the given function. description in javascript, a setter can be used to execute a function whenever a specified property is attempted to be changed. setters are most often used in conjunction with getters to create a type of pseudo-property. it is not possible to simultaneously have a setter on a property that holds an actual value. note the following when working with the set syntax: it can have an identifier which is either a number or a string; it must have exactly one parameter (see incompatible es5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it m...
...e es5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another set or with a data entry for the same property. ( { set x(v) { }, set x(v) { } } and { x: ..., set x(v) { } } are forbidden ) examples defining a setter on new objects in object initializers the following example define a pseudo-property current of object language. when current is assigned a value, it updates log with that value: const language = { set current(name) { this.log.push(name); }, log: [] } language.current = 'en'; console.log(language.log); // ['en'] language.current = 'fa'; console.log(language.log); // ['en', 'fa'] note that current is not defined, and any attempts to access it will result in...

new.target - JavaScript
the new.target pseudo-property lets you detect whether a function or constructor was called using the new operator. in constructors and functions invoked using the new operator, new.target returns a reference to the constructor or function. in normal function calls, new.target is undefined. 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 new.target description the new.target syntax consists of the keyword new, a dot, and the identifier target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. ...
...ike to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new.target description the new.target syntax consists of the keyword new, a dot, and the identifier target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. the new.target pseudo-property is available in all functions. in class constructors, it refers to the constructed class. in ordinary functions, it refers to the function itself, assuming it was invoked via the new operator; otherwise new.target is undefined. in arrow functions, new.target is inherited from the surrounding scope. examples new.target in function calls in normal function calls (as opposed to constr...

<mpadded> - MathML
you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. voffset sets or increments the vertical position. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . width sets or increments the width. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . ...
...se #rgb, #rrggbb and html color names. voffset sets or increments the vertical position. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . width sets or increments the width. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . pseudo-units it is possible to use the keywords "depth", "height", and "width" as a pseudo-unit for the attributes depth, height, lspace, voffset, and width. they represent each length of the same-named dimension. prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) the mathml2 pseudo-unit lspace was allowed, which is no longer present in the mathml3 recommendation and has been removed now. examples <math> <mpadded height="+150px" width="100px" lspace="2height"> ...

Understanding WebAssembly text format - WebAssembly
to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module. all code in a webassembly module is grouped into functions, which have the following pseudo-code structure: ( func <signature> <locals> <body> ) the signature declares what the function takes (parameters) and returns (return values). the locals are like vars in javascript, but with explicit types declared. the body is just a linear list of low-level instructions. so this is similar to functions in other languages, even if it looks different because it is an s-expression. signat...
... function invokes the $i’th function in the table. you could also declare the call_indirect parameter explicitly during the command call instead of before it, like this: (call_indirect (type $return_i32) (local.get $i)) in a higher level, more expressive language like javascript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. the pseudo code would look something like tbl[i](). so, back to the typechecking. since webassembly is typechecked, and the funcref can be potentially any function signature, we have to supply the presumed signature of the callee at the callsite, hence we include the $return_i32 type, to tell the program a function returning an i32 is expected. if the callee doesn’t have a matching signature (say an f32 ...

chrome - Archive of obsolete content
you use this api you can expect your add-on to get an extra security review by addons.mozilla.org. this module should not be confused with the "chrome" global variable that webextensions can use to access apis. the chrome module gives an add-on sdk add-on access to the components object, which in turn gives it access to a large set of privileged low-level firefox apis. chrome is a built-in pseudo module of the toolkit loader. see the chrome authority tutorial for more details. you can see an example of using this api in the xul migration guide. ...

event/target - Archive of obsolete content
roperties with keys like: onmessage, onmyevent... will be auto registered for associated 'message', 'myevent' events on the created instance. all other properties of options will be ignored. adding listeners eventtarget interface defines on method, that can be used to register event listeners on them for the given event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is an event `target` unless // intentionally overridden via `.bind()`. console.log(message); }); sometimes event listener may care only about very first event of specific type. eventtarget interface defines convenience method for adding one shot event listeners via method once. such listeners are called only once next time event of the specified type is emitted: target.once('ready'...

Chrome Authority - Archive of obsolete content
ul low-level modules are run with "chrome privileges", which gives them access to the infamous components object, which grants unfettered access to the host system. from this, the module can do pretty much anything the browser is capable of. to obtain these privileges, the module must declare its intent with a statement like the following: var {cc, ci} = require("chrome"); the "chrome" built-in pseudo module is provided by the "toolkit/loader" module. the object returned by require("chrome"), when unpacked with the destructuring assignment feature available in the mozilla js environment, will provide the usual components.* aliases: cc an alias for components.classes. ci an alias for components.interfaces. cu an alias for components.utils. cr an alias for components.results. cm an al...

LookupPrefix - Archive of obsolete content
= document.contenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } switch (node.nodetype) { case 1: // node.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node...

Appendix F: Monitoring DOM changes - Archive of obsolete content
ent policies. while these are not exceptionally efficient (they run for every http request, and considerably more often for some methods), they work very well for certain applications pure css pure css can be more powerful than most people suspect. it is often possible to do things for which people have traditionally resorted to javascript with css alone. in particular, the ::before and ::after pseudo-elements, and pseudo-classes like :hover and :active can be used to achieve extremely complex dynamic behavior. late binding and event delegation often times, it suffices to bind event listeners to top-level elements and check for matching elements when the event fires. for instance, rather than watching for the creation of <a> elements and adding event listeners to them as they are created, an...

Creating a Help Content Pack - Archive of obsolete content
asources should be set as with table of contents, index, and glossary definitions. nc:platform (added in mozilla 1.8b2/firefox 1.1) may be used on search data sources as it's used on table of contents, index, and glossary definitions. nc:emptysearchtext specifies the text that is shown when a search through help returns no results. nc:emptysearchlink specifies what uri should be shown when the pseudo-result "no results found" is accessed. this attribute is required. the sample page chrome://help/locale/welcome.xhtml has a section on searching which may be a useful link to use here. note that you can use the nc:datasources attribute to inherit content from other content packs. one common use of this is to inherit the small using the help window article provided with the viewer. for example, ...

Menu - Archive of obsolete content
k.menu object is passed to beforehide and beforeshow, since they are called during a context menu's invocation. they may then modify the menu. individual menus are drawn from the set using on(): on(selector) returns a new contextmenuset whose context menus are those that arise from nodes that match the given css selector(s). the selector must be a true css selector, not a jquery or other type of pseudo-selector. note: selectors don't automatically include the children of nodes they match. for example, jetpack.menu.context.page.on("a[href]") does not match images contained in links. to match links and all elements contained in links, use jetpack.menu.context.page.on("a[href], a[href] *"). a future version of jetpack may change this behavior; see bug 527924. what do you think? leave a commen...

New Skin Notes - Archive of obsolete content
around them. --nickolay 04:43, 25 aug 2005 (pdt) the radio buttons on history page are jumping in a weird way because the selected row becomes bold. --nickolay 04:46, 25 aug 2005 (pdt) the sidebar overrides content on diff pages --nickolay turns out this was fixed for 1.5 already. --dria the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onhover that gives them an underline? --beltzner the "+" item under the "views" menu of a discussion page looks really out of place. can we replace it with "add section" or something? --beltzner i'll look into it, but i think this is one of those "don't hold your breath" things because that's not managed by the skin. i could probably just eliminate it entirely. that'd work, too; you...

Using Breakpoints in Venkman - Archive of obsolete content
re useful features of the javascript debugger, but when you are debugging deep in code—especially code you have authored yourself and are responsible for troubleshooting—you're going to need breakpoints. types of breakpoints venkman has two types of breakpoints. the first, and most common, is called the "hard" breakpoint. a hard breakpoint represents an actual trap instruction included in the pseudocode of a compiled function. hard breakpoints can only exist in the context of a function currently "live" in the browser. hard breakpoints are the ones that actually stop program execution. the second type of breakpoint, the "future" breakpoint, represents a promise from venkman to set a hard breakpoint as soon as it is possible. future breakpoints are used when you want to stop in a script that ...

Anonymous Content - Archive of obsolete content
, if the user has already focused the textfield within an html file upload control, then the file upload control is now also focused. if the user then focuses the button inside the file upload control, the focus event generated for the button is stopped before it reaches the file control, since the file control is already focused. because content in multiple scopes can be focused, the css :focus pseudo-element is hierarchical. style rules can be written with the assumption that they will match (in the above example) both the file control and the element focused inside the file control. in other words, an arbitrary chain of elements can be in the :focus state at the same time. mouseover and mouseout events mouseover and mouseout events are retargeted if the mouse genuinely enters or exits the ...

Binding Attachment and Detachment - Archive of obsolete content
an individual url in the set consists of the binding document's url and the binding's document-unique identifier. ...

Learn XPI Installer Scripting by Example - Archive of obsolete content
lf, though it's possible to rearrange things arbitrarily upon installation--to create new directories, to install files in system folders and other areas. overview of the install script xpi install scripts are written in javascript using xpinstall engine syntax defined in the xpinstall api reference. ...

Tree Widget Changes - Archive of obsolete content
ll change the label of the cell in row 5 and the primary column to banana. however, this paves the way in the future for more general tree editing features. style improvements you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. example: treechildren::-moz-tree-separator { margin-top: 1px; border-top: 1px solid threedshadow; border-left: 1px solid threedshadow; border-right: 1px solid threedhighlight; border-bottom: 1px solid threedhighlight; height: 2px; } original document information ...

Styling a Tree - Archive of obsolete content
background-color: blue; } this style which has a complex selector is used to style the background color of rows that have the 'makeitblue' property. this special syntax is needed because the cells themselves are not separate elements. all of the content inside the tree's body is rendered by the treechildren element. however, css has a concept to access parts of elements considering them to be pseudo-elements. this selector matches some tree rows inside the treechildren element as pseudo-elements. the style sets style rules for particular parts of what it displays. this style rule means, inside a treechildren element, set the background color to blue for all tree rows that have the 'makeitblue' property. the text '::-moz-tree-row' specifies what content area is desired, which in this case is...

MacFAQ - Archive of obsolete content
is button is used to show/hide the toolbar. the toolkit will automatically enable this behavior if you add class="chromeclass-toolbar" to your <toolbar> element. commandline support commandline handlers work great on the mac if it's a cold start. here's how to implement command-line trapping when the app is already running, without getting into appleevents or c++ code. this is implemented in a pseudo "hidden window" technique and parsing the window arguments instead of command-line handlers and some of the toolkit singleton window code. taking advantage of the core code "openurl" from "nscommandlineservicemac.cpp", you'll see that it looks for "browser.chromeurl" before defaulting to navigator.xul, and this is called when an xulrunner app is already running, so: create a default preference...

reftest opportunities files - Archive of obsolete content
est/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudos http://dbaron.org/css/test/pseudos2 http://dbaron.org/css/test/pseudos3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec051103 http://dbaron.org/css/test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1...

Making sure your theme works with RTL locales - Archive of obsolete content
ted right will have to point left and vice versa, and so on. a screenshot of firefox 2 in hebrew what you need to do at this stage you might ask yourself, "how would i know what language is my theme installed on? should i make a special theme for these locales?" don't despair: making a theme rtl-compatible is fairly easy! gecko 1.9.2 and later gecko 1.9.2 introduced the :-moz-locale-dir css pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left: :-moz-locale-dir(ltr) matches if the user interface is being rendered left to right. :-moz-locale-dir(rtl) matches if the user interface is being rendered right to left. example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } t...

-moz-binding - Archive of obsolete content
...

:-moz-full-screen-ancestor - Archive of obsolete content
the :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents. however, those elements' ancestors have this pseudo-class applied to them. this pseudo-class was removed in firefox 50. ...

:-moz-system-metric(images-in-menus) - Archive of obsolete content
the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus. this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(mac-graphite-theme) - Archive of obsolete content
to xul / chrome code). see bug 1396066 for more details. examples demo ...

::-ms-browse - Archive of obsolete content
permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...

::-ms-expand - Archive of obsolete content
typically it is a triangle that points downward. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...

::-ms-fill-lower - Archive of obsolete content
a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...

::-ms-fill-upper - Archive of obsolete content
a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...

::-ms-fill - Archive of obsolete content
the ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>. this pseudo-element is available only in internet explorer 10, internet explorer 11, and microsoft edge. all allowable properties except animation-name apply to a determinate progress bar. only animation-name applies to an indeterminate one. (a progress bar is determinate if it has a value attribute set; otherwise it is indeterminate. an indeterminate progress bar can be selected with the :indeterminate pseudo-class.) by default, internet explorer and edge display a moving dots animation for an indeterminate progress bar. by setting animation-name on ::-ms-fill, you can change the animation, as shown in this table: value description none turns o...

::-ms-thumb - Archive of obsolete content
a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-thumb in its selector. other properties are ignored. ...

::-ms-tooltip - Archive of obsolete content
a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-tooltip in its selector. other properties are ignored. ...

::-ms-value - Archive of obsolete content
allowable properties only the following css properties can be used in a rule with ::-ms-value in its selector. other properties are ignored. ...

LiveConnect Overview - Archive of obsolete content
ls. java to javascript conversions values passed from java to javascript are converted as follows: java byte, char, short, int, long, float, and double are converted to javascript numbers. a java boolean is converted to a javascript boolean. an object of class netscape.javascript.jsobject is converted to the original javascript object. java arrays are converted to a javascript pseudo-array object; this object behaves just like a javascript array object: you can access it with the syntax arrayname[index] (where index is an integer), and determine its length with arrayname.length. a java object of any other class is converted to a javascript wrapper, which can be used to access methods and fields of the java object: converting this wrapper to a string calls the tostring ...

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

Mozilla's DOCTYPE sniffing - Archive of obsolete content
the public identifier "-//w3c//dtd html 4.01 frameset//en", with a system identifier. quirks mode the following trigger quirks mode (this list needs to be comprehensive to ensure that pages already existing on the web trigger quirks mode): the following sites have been useful in preparing this list: w3c html validator, htmlhelp html validator. the absence of a doctype. an xml declaration (pseudo-pi) without a doctype (in other words, ignore the xml declaration and use the doctype). in 1.0 and 1.1alpha and earlier (but not in 1.0.1 or 1.1beta), the presence of an xml declaration triggered full standards mode. a doctype declaration that cannot be understood (e.g., no matching quote). the system identifier "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" (before 1.5b and 1.4.2...

Gecko FAQ - Gecko Redirect 1
various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is expected and has already been built into gecko, including support for css2 positioning, but no commitment has been made to achieve a specific level of support dom level 0 level 1 core: full support making entityreferences available through dom1; per a provision of the dom1 spec for xml implementations, en...

Boolean - MDN Web Docs Glossary: Definitions of Web-related terms
in computer science, a boolean is a logical data type that can have only the values true or false. for example, in javascript, boolean conditionals are often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops). below is some javascript pseudocode (it's not truly executable code) demonstrating this concept. /* javascript if statement */ if (boolean conditional) { // code to execute if the conditional is true } if (boolean conditional) { console.log("boolean conditional resolved to true"); } else { console.log("boolean conditional resolved to false"); } /* javascript for loop */ for (control variable; boolean conditional; counter) { // code to execute repeatedly if the conditional is true } for (var i=0; i < 4; i++) { ...

Digest - MDN Web Docs Glossary: Definitions of Web-related terms
learn more see hash function hash function on wikipedia ...

MDN Web Docs Glossary: Definitions of Web-related terms
prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression ...

HTML: A good basis for accessibility - Learn web development
lor (a 4.5:1 contrast). in addition, links should visually be significantly different from non-linking text. with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color. onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is reco...

HTML: A good basis for accessibility - Learn web development
lor (a 4.5:1 contrast). in addition, links should visually be significantly different from non-linking text. with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color. onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is reco...

CSS building blocks - Learn web development
css is applied to html and how conflicts are resolved. css selectors there are a wide variety of css selectors available, allowing for fine-grained precision when selecting elements to style. in this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items. in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology th...

Practical positioning examples - Learn web development
told you it was a hack.) you will learn a lot more about... setting the checked state there is one final bit of css to add — put the following at the bottom of your css: input[type=checkbox]:checked + aside { right: 0px; } the selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the :checked pseudo-class to achieve this). when this is the case, we are setting the right property of the <aside> to 0px, which causes the panel to appear on the screen again (smoothly due to the transition). clicking the label again unchecks the checkbox, which hides the panel again. so there you have it — a rather clever javascript-free way to create a toggling button effect. this will work in ie9 and above (...

Fundamental text and font styling - Learn web development
r layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box. note: bear in mind that the text inside an element is all affected as one single entity. you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.) fonts let's move straight on to look at properties for styling fonts. in this example we'll apply some different css properties to the same html sample, which looks like this: <h1>tommy t...

Styling text - Learn web development
ght, family and style, font shorthand, text alignment and other effects, and line and letter spacing. styling lists lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider. this article explains all. styling links when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. we'll look at all these topics in this article. web fonts here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling. assessments the following assessm...

How to structure a web form - Learn web development
at using all the different types of form widgets you'll want to use to collect information from your users. ...

Other form controls - Learn web development
hese articles as often as you like to check up on details. now that you have a grasp of the html behind the different available form controls, we'll take a look at styling them. ...

Your first form - Learn web development
only the beginning, however — now it's time to take a deeper look. forms have way more power than what we saw here and the other articles in this module will help you to master the rest. ...

Web forms — Working with user data - Learn web development
area>, <meter>, and <progress>. form styling guides styling web forms this article provides an introduction to styling forms with css, including all the basics you might need to know for basic styling tasks. advanced form styling here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements. ui pseudo-classes an introduction to the ui pseudo-classes enabling html form controls to be targeted based on their current state. validating and submitting form data client-side form validation sending data is not enough — we also need to make sure that the data users enter into forms is in the correct format to process it successfully, and that it won't break our applications. we also want to h...

CSS basics - Learn web development
id="my-id"> or <a id="my-id"> class selector the element(s) on the page with the specified class. multiple instances of the same class can appear on a page. .my-class selects <p class="my-class"> and <a class="my-class"> attribute selector the element(s) on the page with the specified attribute. img[src] selects <img src="myimage.png"> but not <img> pseudo-class selector the specified element(s), but only when in the specified state. (for example, when a cursor hovers over a link.) a:hover selects <a>, but only when the mouse pointer is hovering over the link. there are many more selectors to discover. to learn more, see the mdn selectors guide. fonts and text now that we've explored some css fundamentals, let's improve the appea...

Adding vector graphics to the Web - Learn web development
the svg file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future. cons you cannot manipulate the image with javascript. if you want to control the svg content with css, you must include inline css styles in your svg code. (external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus). troubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg. this being the case, only supporting browsers will load the svg — older browsers will load the png instead: ...

Introducing asynchronous JavaScript - Learn web development
n external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a web cam, or broadcasting the display to a vr headset. why is this difficult to get to work using synchronous code? let's look at a quick example. when you fetch an image from a server, you can't return the result immediately. that means that the following (pseudocode) wouldn't work: let response = fetch('myimage.png'); let blob = response.blob(); // display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available. instead, you need your code to wait until ...

Looping code - Learn web development
ue. we haven't explicitly illustrated this above, but we could think about the farmer being able to collect say 2 portions of food per hour. after each hour, the amount of food he has collected is incremented by two, and he checks whether he has enough food. if he has reached 10 portions (the point where the condition is no longer true, so the loop exits), he can stop collecting and go home. in pseudocode, this would look something like the following: loop(food = 0; foodneeded = 10) { if (food >= foodneeded) { exit loop; // we have enough food; let's go home } else { food += 2; // spend an hour collecting 2 more food // loop will then run again } } so the amount of food needed is set at 10, and the amount the farmer currently has is set at 0. in each iteration of the lo...

Introduction to client-side frameworks - Learn web development
e same page. your browser remembers your navigation history and allows you to navigate back and forth, too. this is called server-side routing. modern web applications typically do not fetch and render new html files — they load a single html shell, and continually update the dom inside it (referred to as single page apps, or spas) without navigating users to new addresses on the web. each new pseudo-webpage is usually called a view, and by default, no routing is done. when an spa is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. people are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web feat...

Handling common accessibility problems - Learn web development
sible to style any element to look like a link or button with css, and to behave like a link or button with javascript, but they won't actually be links or buttons, and you'll lose a lot of the accessibility these elements give you for free. so don't do it if you can avoid it. another tip — as shown in our example, you can control how your focusable elements look when focused, using the :focus pseudo-class. it is a good idea to double up focus and hover styles, so your users get that visual clue that a control will do something when activated, whether they are using mouse or keyboard: a:hover, input:hover, button:hover, select:hover, a:focus, input:focus, button:focus, select:focus { font-weight: bold; } note: if you do decide to remove the default focus styling using css, make sure you ...

Handling common HTML and CSS problems - Learn web development
if for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired: form > #date (the date form input isn't directly inside the <form>; you'd be better off using a general descendant selector instead of a child selector). however, another issue that appears in versions of ie older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like :nth-of-type, :not, ::selection, etc.) work. if you want to use these in your css and you need to support older ie versions, a good move is to use keith clark's selectivizr library — this is a small javascript library that works on top of an existing javascript library like jquery or mootools. to try this example, make a local copy of selectivizr-example-star...

The Firefox codebase: CSS Guidelines
art: 3px; instead of margin-left: 3px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|rtl) (for html files). remember that while a tab content's scrollbar still shows on the right in rtl, an overflow scrollbar will show on the left. write padding: 0 3px 4px; instead of padding: 0 3px 4px 3px;. this makes it more obvious that the padding is symmetrical (so rtl won't be an issue). note: see css logical properties and values ...

Experimental features in Firefox
ions to be rendered circling around a center point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. see bug 1617600 for more details. release channel version added enabled by default? nightly 75 no de...

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

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

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

::-moz-tree-cell-text(hover)
the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell. this selector is intended for use mainly by theme developers. ...

::-moz-tree-row(hover)
the ::-moz-tree-row(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over a tree row. this selector is intended for use mainly by theme developers. ...

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

XPCOMUtils.jsm
ts.utils.import("resource://gre/modules/xpcomutils.jsm"); using xpcomutils exposing a javascript class as a component using these utility methods requires four key steps: import xpcomutils.jsm, as explained previously. declare the class (or multiple classes) implementing the component(s). create an array of component constructors. define the nsgetfactory() or nsgetmodule() entry point. pseudocode this section provides some pseudocode that demonstrates how to put together a javascript class based on the steps listed above. constructor the constructor is a simple method that handles any required initialization tasks. function mycomponent() { // initialize the component here } class declaration declare the class prototype, using a form similar to this. mycomponent.prototype = {...

L10n Checks
ctories (dir) mode l10n checks can compare two locales found in different directories. you pass both paths to the directories, e.g.: check-l10n-completeness -i dir en-us/ my/ files (file) mode l10n checks can compare two files. you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff format. ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label ...

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

Mozilla Web Developer FAQ
d instead of the tag soup parser. most well-formedness constraints are enforced. despite common allegations to the contrary, the document is not checked for validity. externally defined character entities other than the five pre-defined ones (&lt;, &gt;, &amp;, &quot; and &apos;) are only supported if the document references a public identifier for which there is a mapping in mozilla’s pseudo-dtd catalog and the document has not been declared standalone. in older versions of mozilla as well as in old mozilla-based products, there is no pseudo-dtd catalog and the use of externally defined character entities (other than the five pre-defined ones) leads to an xml parsing error. there are also other xhtml user agents that do not support externally defined character entities (other than...

Profiling with the Firefox Profiler
stack is the regular c / c++ / rust function stack that you know from your debugger. it's only collected if the "stack walk" checkbox in the gecko profiler add-on's settings is checked. javascript stack the javascript stack is collected by the js engine. this is controlled by the "javascript" checkbox in the gecko profiler add-on's settings panel. label stack the label stack (formerly called "pseudo stack") uses function entry/exit tags added by hand to important points in the code base. the stacks you see in the ui are chains of these tags. this is good for highlighting particularly interesting parts of the code, but they miss out on un-annotated areas of the code base, and give no visibility into system libraries or drivers. tagging is done by adding macros of the form auto_profiler_lab...

Anonymous Shared Memory
s done via helper-functions with pr_createprocess. in the second protocol, the parent process is responsible for creating the child process; the parent and child are mutually responsible for passing a filemap string. nspr provides helper functions for extracting data from the prfilemap object. ... see the examples below. both sides should adhere strictly to the protocol for proper operation. the pseudo-code below shows the use of a file-mapped shared memory by a parent and child processes. in the examples, the server creates the file-mapped shared memory, the client attaches to it. first protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); addr = pr_memmap(fm); attr = pr_newprocessattr(); pr_processattrsetinheritablefilemap( attr, fm, shmname ); pr_createprocess(client); pr_...

PR_Wait
as occurred. it is the responsibility of the programmer to evaluate the data and act accordingly. this is usually done by evaluating a boolean expression involving the monitored data. while the boolean expression is false, the thread should wait. the thread should act on the data only when the expression is true. the boolean expression must be evaluated while in the monitor and within a loop. in pseudo-code, the sequence is as follows: pr_entermonitor(&ml); while (!expression) wait; ... act on the state change ... pr_exitmonitor(&ml); a thread can be resumed from a wait for a variety of reasons. the most obvious is that it was notified by another thread. if the value of timeout is not pr_interval_no_timeout, pr_wait resumes execution after the specified interval has expired. if a timeout ...

JSS Provider Notes
la.jss.crypto.secretkeyfacade, which acts as a wrapper around the jss class symmetrickey. any secretkeys handled by jss will actually be secretkeyfacades. this should usually be transparent. securerandom supported algorithms notes pkcs11prng this invokes the nss internal pseudorandom number generator. signature supported algorithms notes sha1withdsa (dsa, dss, sha/dsa, sha-1/dsa, sha1/dsa, dsawithsha1, shawithdsa ) sha-1/rsa (sha1/rsa, sha1withrsa ) md5/rsa (md5withrsa ) md2/rsa the securerandom argument passed to ini...

Mozilla-JSS JCA Provider notes
upported algorithms notes aes des desede (des3) hmacsha1 rc2 rc4 secretkey is implemented by the class org.mozilla.jss.crypto.secretkeyfacade, which acts as a wrapper around the jss class symmetrickey. any secretkeys handled by jss will actually be secretkeyfacades. this should usually be transparent. securerandom supported algorithms notes pkcs11prng this invokes the nss internal pseudorandom number generator. signature supported algorithms notes sha1withdsa (dsa, dss, sha/dsa, sha-1/dsa, sha1/dsa, dsawithsha1, shawithdsa) sha-1/rsa (sha1/rsa, sha1withrsa) md5/rsa (md5withrsa) md2/rsa the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness. what's not supported the following cl...

NSS 3.12.6 release notes
f true, a connection will be dropped at initial handshake if the peer server or client does not support safe renegotiation. the default setting for this option is false. these options can also be set with the following ssl options: ssloptions.enablerenegotiation ssloptions.requiresafenegotiation new pseudo cipher suite value: tls_empty_renegotiation_info_scsv (cannot be negotiated) tls server name indication for servers tls server name indication (sni) for servers is almost fully implemented in nss 3.12.6. see bug 360421 for details. note: the tls server name indication for clients is already fully...

NSS 3.22 release notes
distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 1215295) new functions pk11_signwithmechanism() and pk11_signwithmechanism() are provided to allow rsa keys to be used with pss. pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug 554827). pk11_createpbev2algorithmid() now supports sec_oid_pkcs5_pbkdf2 with cipheralgtag and prfalgtag set to sec_oid_hmac_sha256, sec_oid_hmac_sha224, sec_oid_hmac_sha384, or sec_oid_hmac_sha512. enforce an external policy on nss from a config file (bug 1009429) you can now add a config= line t...

nss tech note7
pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step 3) and on the w3c web site (http://www.w3.org/tr/xmlenc-core/#rsa-1_5), pkcs1 v1.5 padding is described like this: 02 || ps || 00 || m 00 at the beginning is missing. why? answer: the version without the initial 00 says : "ps is a string of strong pseudo-random octets [random] [...] long enough that the value of the quantity being crypted is one octet shorter than the rsa modulus" the version with the initial 00 instead says to pad to the same length as the rsa modulus. "the same length as the rsa modulus with an initial octet of 0" and "one octet shorter without that initial octet" are exactly the same thing because the formatted block is t...

Overview of NSS
four-part standard under development by the public-key infrastructure (x.509) working group of the ietf (known at pkix) for a public-key infrastructure for the internet. rsa, dsa, ecdsa, diffie-hellman, ec diffie-hellman, aes, triple des, des, rc2, rc4, sha-1, sha-256, sha-384, sha-512, md2, md5, hmac: common cryptographic algorithms used in public-key and symmetric-key cryptography. fips 186-2 pseudorandom number generator. for complete details, see encryption technologies. fips 140 validation and niscc testing the nss software crypto module has been validated three times for conformance to fips 140 at security levels 1 and 2. for more information, see the nss fips page (or this one). the nss libraries passed the niscc tls/ssl and s/mime test suites (1.6 million test cases of invalid inp...

Python binding for NSS
rantee how much data will be received, thus this was a coding mistake. the solution is straight forward, use newlines as a record separator and call sock.readline() instead of sock.recv(). sock.readline() calls sock.recv() internally until a complete line is read or the socket is closed. rewrite setup_certs.py, it was written like an expect script reacting to prompts read from a pseudo terminal but it was fragile and would hang on some systems. new version uses temporary password file and writes hardcoded responses to the stdin of certuil and modutil. setup_certs now creates a new sql sytle nss database (sql:pki) all tests and examples now load the sql:pki database. command line arg and variable changed from dbdir to db_name to reflect the da...

NSS environment variables
t how nss is built, documented below. variable type description introduced in version nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. 3.12.3 nsrandfile string (file name) uses this file to seed the pseudo random number generator. before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 inside signatures. this was allowed by default before nss 3.12.3. 3.12.3 nss_debug_pkcs11_module string (module name) name the pkcs#11 module to be traced. pkcs #11 module logger 3.6 nss_default_db_type ...

NSS reference
functions key functions seckey_getdefaultkeydb seckey_destroyprivatekey digital signatures this api consists of the routines used to perform signature generation and the routines used to perform signature verification. encryption/decryption hashing key generation generate keys, key pairs, and domain parameters. random number generation this api consists of the two routines used for pseudorandom number generation -- pk11_generaterandomonslot and pk11_generaterandom -- and the two routines used for seeding pseudorandom number generation -- pk11_seedrandom and pk11_randomupdate. pkcs #11 functions based on pkcs #11 functions in the ssl reference and "crypto functions" in nss public functions. secmod_loadusermodule secmod_unloadusermodule secmod_closeuserdb secmod_openuserdb ...

Index
key see bug 378261 for detail. 249 js_dumpnamedroots jsapi reference, obsolete, spidermonkey each call to js_addnamedroot creates a record in a table of named roots maintained by the garbage collector. js_dumpnamedroots provides a way for the application to access the contents of that table. it calls the dump function once for each named root in the given runtime rt. in pseudocode: 250 js_encodecharacters jsapi reference, obsolete, spidermonkey js_encodecharacters copies the characters of a jschar array into a char array, converting the 16-bit values to 8-bit values. if spidermonkey was built with js_c_strings_are_utf8 defined or js_setcstringsareutf8 was called, the string is converted to utf-8. otherwise each character is simply truncated to 8 b...

JS_DumpNamedRoots
ad from or write to this pointer at all. it is passed to the dump function unchanged. it may be null. description each call to js_addnamedroot creates a record in a table of named roots maintained by the garbage collector. js_dumpnamedroots provides a way for the application to access the contents of that table. it calls the dump function once for each named root in the given runtime rt. in pseudocode: /* pseudocode explanation of what js_dumpnamedroots does */ void js_dumpnamedroots(jsruntime *rt, dumpfn dump, void *data) { for each (root in rt->namedroots) dump(root.name, root.address, data); } callback syntax dump is a pointer to a function provided by the application. when js_dumpnamedroots calls it, it passes three arguments: argument type description ...

compare-locales
if you're working against the gecko-strings cross-channel repository, the toml configuration files are in the _configs subdirectory, browser.toml, mobile_android.toml, mail.toml and calendar.toml, and suite.toml. options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format. ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label ...

nsIMsgDatabase
nextfakeofflinemsgkey nsmsgkey readonly: for saving "fake" offline msg hdrs. defaultviewflags nsmsgviewflagstypevalue readonly: defaultsorttype nsmsgviewsorttypevalue readonly: defaultsortorder nsmsgviewsortordervalue readonly: msghdrcachesize unsigned long folderstream nsioutputstream summaryvalid boolean methods open() open...

nsIScriptError
d. this will be a hyperlink in the javascript console, so you should use a real url. you may pass null if it's not applicable. read only. timestamp long long elapsed time, in milliseconds, from a platform-specific zero time to the time the message was created. read only. flag constants constant value description errorflag 0x0 error messages. a pseudo-flag for the default, error case. warningflag 0x1 warning messages. exceptionflag 0x2 an exception was thrown for this case - exception-aware hosts can ignore this. strictflag 0x4 one of the flags declared in nsiscripterror. infoflag 0x8 just a log message methods init() initializes the object with information describing the err...

Using COM from js-ctypes
{ pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null); pvoice->lpvtbl->release(pvoice); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.c, and run following command in the directory. $ cl ole32.lib test.c c code with pseudo struct needs pseudo struct description here. #include <sapi.h> struct myispvoicevtbl; struct myispvoice { struct myispvoicevtbl* lpvtbl; }; struct myispvoicevtbl { /* start inherit from iunknown */ void* queryinterface; void* addref; ulong (__stdcall *release)(struct myispvoice*); /* end inherit from iunknown */ /* start inherit from ispnotifysource */ void* s...

Standard OS Libraries
rom js-ctypes for more info. ...

Introduction to DOM Inspector - Firefox Developer Tools
elements. if a binding extends another binding, the binding menulist will list them in descending order to to "root" binding. the css rules viewer shows the css rules that are applied to the node. alternatively, when used in conjunction with the style sheets viewer, the css rules viewer lists all recognized rules from that style sheet in order. properties may be also be edited. rules applying to pseudo-elements do not appear. the javascript object viewer gives a hierarchical tree of the object pane's subject. the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menuitem in the context menu. basic actions of the dom nodes viewer selecting elements by click another powerful interactive feature of the dom inspector is that when you have the dom inspe...

DOM allocation example - Firefox Developer Tools
...

Use the Inspector API - Firefox Developer Tools
.window - the window object of the frame the selection is in. .markdirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload. bindable events using on: markuploaded called when the left panel has been refreshed, after page change. ready called on first markuploaded. pseudoclass called after toggle of a pseudoclass. layout-change "low-priority change event for things like paint and resize." ...

Work with animations - Firefox Developer Tools
ector the page inspector's animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point. it displays animations created using css transitions, css @keyframes rules, or the web animations api. starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements. to see how it works, we'll walk through an example. the box below contains a grayscale icon, representing firefox developer edition. if you click the icon, it enlarges and changes to color, and the name of the browser appears. click the icon again to reverse the effect. these animations are made using the web animations api. let's use the animation inspector to see what's going on ...

Console messages - Firefox Developer Tools
affected by the error. reflow events the web console also logs reflow events under the css category. a reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. reflows occur when a change has happened to a page that the browser thinks affects the layout. many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript. because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. by logging reflow events the web console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous ref...

AnimationEvent - Web APIs
animation. animationevent.elapsedtime read only is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an animationstart event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). animationevent.pseudoelement read only is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element, an empty string: ''. methods also inherits methods from its parent event. animationevent.initanimationevent() initializes a animationevent created using the deprecated document.createevent("animatione...

Background Tasks API - Web APIs
y adds the logged text to the log element when the animation frame is being updated. function log(text) { if (!logfragment) { logfragment = document.createdocumentfragment(); } let el = document.createelement("div"); el.innerhtml = text; logfragment.appendchild(el); } first, we create a documentfragment object named logfragment if one doesn't currently exist. this element is a pseudo-dom into which we can insert elements without immediately changing the main dom itself. we then create a new <div> element and set its contents to match the input text. then we append the new element to the end of the pseudo-dom in logfragment. logfragment will accumulate log entries until the next time updatedisplay() is called because the dom for the changes. running tasks now that we've got...

Document.linkColor - Web APIs
another alternative is document.body.link, although this is deprecated in html 4.01. ...

Document.querySelector() - Web APIs
rs, or null is returned if there are no matches. if you need a list of all elements matching the specified selectors, you should use queryselectorall() instead. exceptions syntax_err the syntax of the specified selectors is invalid. usage notes if the specified selector matches an id that is incorrectly used more than once in the document, the first element with that id is returned. css pseudo-elements will never return any elements, as specified in the selectors api. escaping special characters to match against an id or selectors that do not follow standard css syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). as the backslash is also an escape character in javascript, if you are entering a literal string, you must...

Document.vlinkColor - Web APIs
document.vlinkcolor document.vlinkcolor = color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000"). notes the default value for this property in mozilla firefox is purple (#551a8b in hexadecimal). document.vlinkcolor is deprecated in dom level 2 html. the recommended alternative is to get/set the color of the css :visited pseudo-class on html <a> elements (e.g., a:visited {color:red;}). another alternative is document.body.vlink, although this is deprecated in html 4.01 in favor of the css alternative. ...

Element.getAnimations() - Web APIs
note: this array includes css animations, css transitions, and web animations. syntax const animations = element.getanimations(options); parameters options optional an options object containing the following property: subtree a boolean value which, if true, causes animations that target descendants of element to be returned as well. this includes animations that target any css pseudo-elements attached to element or one of its descendents. defaults to false. return value an array of animation objects, each representing an animation currently targetting the element on which this method is called, or one of its descendant elements if { subtree: true } is specified. examples the following code snippet will wait for all animations on elem and its descendants to finish bef...

Element: mouseenter event - Web APIs
d by a handler or reaches the root. with deep hierarchies, the number of mouseenter events sent can be quite huge and cause significant performance problems. in such cases, it is better to listen for mouseover events. combined with the corresponding mouseleave (which is fired at the element when the mouse exits its content area), the mouseenter event acts in a very similar way to the css :hover pseudo-class. examples the mouseover documentation has an example illustrating the difference between mouseover and mouseenter. mouseenter the following trivial example uses the mouseenter event to change the border on the div when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="u...

Element.part - Web APIs
syntax let elementpartlist = element.part examples the following excerpt is from our shadow-part example. here the part attribute is used to find the shadow parts, and the part property is then used to change the part identifiers of each tab so the correct styling is applied to the active tab when tabs are clicked. ...

Element.scrollHeight - Web APIs
t not visible on the screen due to overflow. the scrollheight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. the height is measured in the same way as clientheight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). it can also include the height of pseudo-elements such as ::before or ::after. if the element's content can fit without a need for vertical scrollbar, its scrollheight is equal to clientheight this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax elemscrollheight = element.scrollheight; value an integer corresponding to the scrollheight pixel value of the ele...

Element.scrollWidth - Web APIs
ontent not visible on the screen due to overflow. the scrollwidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. the width is measured in the same way as clientwidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present). it can also include the width of pseudo-elements such as ::before or ::after. if the element's content can fit without a need for horizontal scrollbar, its scrollwidth is equal to clientwidth this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var xscrollwidth = element.scrollwidth; xscrollwidth is the width of the content of element in pixels. example <!

GeometryUtils - Web APIs
properties this interface does not implement any properties. methods geometryutils.getboxquads() returns a list of domquad objects representing the css fragments of the node. ...

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

HTMLDialogElement.showModal() - Web APIs
interaction outside the dialog is blocked and the content outside it is rendered inert. syntax dialoginstance.showmodal(); parameters none. return value void. exceptions if the dialog is already open (i.e. if the open attribute is already set on the <dialog> element), an invalidstateerror is thrown. ...

HTMLElement.offsetHeight - Web APIs
the htmlelement.offsetheight read-only property returns the height of an element, including vertical padding and borders, as an integer. typically, offsetheight is a measurement in pixels of the element's css height, including any borders, padding, and horizontal scrollbars (if rendered). it does not include the height of pseudo-elements such as ::before or ::after. for the document body object, the measurement includes total linear content height instead of the element's css height. floated elements extending below other linear content are ignored. if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned. this property will round the value to an integer. if you need a fractional value, use element.getboundingclien...

HTMLElement.offsetWidth - Web APIs
if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned. ...

HkdfParams - Web APIs
nto subtlecrypto.derivekey(), when using the hkdf algorithm. properties name a domstring. this should be set to hkdf. hash a domstring representing the digest algorithm to use. this may be one of: sha-1 sha-256 sha-384 sha-512 salt a buffersource. the hkdf specification states that adding salt "adds significantly to the strength of hkdf". ideally, the salt is a random or pseudo-random value with the same length as the output of the digest function. unlike the input key material passed into derivekey(), salt does not need to be kept secret. info a buffersource representing application-specific contextual information. this is used to bind the derived key to an application or context, and enables you to derive different keys for different contexts while using the same in...

KeyframeEffect.target - Web APIs
the target property of a keyframeeffect interface represents the element or pseudo-element being animated. it may be null for animations that do not target a specific element. it performs as both a getter and a setter, except with animations and transitions generated by css. syntax var targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null. examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyf...

KeyframeEffect - Web APIs
animations api lets us create sets of animatable properties and values, called keyframes. these can then be played using the animation() constructor. constructor keyframeeffect() returns a new keyframeeffect object instance, and also allows you to clone an existing keyframe effect object instance. properties keyframeeffect.target gets and sets the element, or originating element of the pseudo-element, being animated by this object. this may be null for animations that do not target a specific element or pseudo-element. keyframeeffect.pseudoelement gets and sets the selector of the pseudo-element being animated by this object. this may be null for animations that do not target a pseudo-element. keyframeeffect.iterationcomposite gets and sets the iteration composite operation for ...

KeyframeEffectOptions - Web APIs
g) value but result in translatex(-200px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. pseudoelement optional the selector of the pseudo-element to be targeted, if any. defaults to null. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (a...

ParentNode.querySelector() - Web APIs
must be escaped using a backslash character. since javascript also uses backspace escaping, special care must be taken when writing string literals using these characters. see escaping special characters for more information. return value the first element that matches at least one of the specified selectors or null if no such element is found. note: if the specified selectors include a css pseudo-element, the returned value is always null. exceptions syntaxerror the syntax of the specified selectors string is not valid. specifications specification status comment domthe definition of 'parentnode.queryselector()' in that specification. living standard living standard selectors api level 2the definition of 'parentnode.queryselector()' in t...

Pbkdf2Params - Web APIs
algorithm to use. this may be one of: sha-1 sha-256 sha-384 sha-512 warning: sha-1 is considered vulnerable in most cryptographic applications, but is still considered safe in pbkdf2. however, it's advisable to transition away from it everywhere, so unless you need to use sha-1, don't. use a different digest algorithm instead. salt a buffersource. this should be a random or pseudo-random value of at least 16 bytes. unlike the input key material passed into derivekey(), salt does not need to be kept secret. iterations a number representing the number of times the hash function will be executed in derivekey(). this determines how computationally expensive (that is, slow) the derivekey() operation will be. in this context, slow is good, since it makes it more expensive for ...

SubtleCrypto - Web APIs
taining two newly generated keys, for asymmetrical algorithms. these will match the algorithm, usages, and extractability given as parameters. subtlecrypto.derivekey() returns a promise that fulfills with a newly generated cryptokey derived from the master key and specific algorithm given as parameters. subtlecrypto.derivebits() returns a promise that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters. subtlecrypto.importkey() returns a promise that fulfills with a cryptokey corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters. subtlecrypto.exportkey() returns a promise that fulfills with a buffer containing the key in the requested format. subtlecrypto.wr...

TransitionEvent - Web APIs
es also inherits properties from its parent event. transitionevent.propertyname read only is a domstring containing the name css property associated with the transition. transitionevent.elapsedtime read only is a float giving the amount of time the transition has been running, in seconds, when this event fired. this value is not affected by the transition-delay property. transitionevent.pseudoelement read only is a domstring, starting with ::, containing the name of the pseudo-element the animation runs on. if the transition doesn't run on a pseudo-element but on the element, an empty string: ''. types of transitionevent transitioncancel an event fired when a css transition has been cancelled. transitionend an event fired when a css transition has finished playing. transitio...

ValidityState.patternMismatch - Web APIs
e we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too long or too short, or contain characters that aren't digits, patternmismatch will be true. when true, the element matches the :invalid css pseudo-classes. input:invalid { border: red solid 3px; } note, in this case, we get a patternmismatch not a validitystate.toolong or validitystate.tooshort if the values are too long or too short because it is the pattern that is dictating the length of the value. had we used minlength and maxlength attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true. ...

ValidityState.rangeOverflow - Web APIs
cluding the date, month, week, time, datetime-local, number and range types and a max value is set, if the value don't doesn't conform to the constraints set by the max value, the rangeoverflow property will be true. given the following: <input type="number" min="20" max="40" step="2"/> if value > 40, rangeoverflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeoverflow' in that specification. living standard html 5.1the definition of 'validitystate.rangeoverflow' in that specification. recommendation html5the definition of 'validitystate.rangeoverflow' in that specification. recommen...

ValidityState.rangeUnderflow - Web APIs
uding the date, month, week, time, datetime-local, number and range types and a min value is set, if the value don't doesn't conform to the constraints set by the min value, the rangeunderflow property will be true. given the following: <input type="number" min="20" max="40" step="2"/> if value < 20, rangeunderflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeunderflow' in that specification. living standard html 5.1the definition of 'validitystate.rangeunderflow' in that specification. recommendation html5the definition of 'validitystate.rangeunderflow' in that specification. recom...

ValidityState.stepMismatch - Web APIs
nd min values, then stepmismatch will be true. if the remainder of the form control's value less the min value, divided by the step value (which defaults to 1 if ommitted) is not zero, there is a mismatch. given the following: <input type="number" min="20" max="40" step="2"/> if (value - min) / 2 != 0, stepmismatch will be true. if true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.stepmismatch' in that specification. living standard html 5.1the definition of 'validitystate.stepmismatch' in that specification. recommendation html5the definition of 'validitystate.stepmismatch' in that specification. recommendat...

Matrix math for the web - Web APIs
ces are not guaranteed to be the same if the order is switched, so matrices are non-commutative. another mind-bender is that matrix multiplication in webgl and css needs to happen in the reverse order that the operations intuitively happen. for instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code. transformation = rotate * translate * scale composing multiple transformations the function that we will be using to compose our matrices is multiplyarrayofmatrices(), which is part of the set of utility functions introduced near the top of this article. it takes an array of matrices and multiplies them together, returning the result. in webgl shader code, this is built into the langu...

Writing WebSocket servers - Web APIs
uld be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. once the payload length and masking key is decoded, you can read that number of bytes from the socket. let's call the data encoded, and the key mask. to get decoded, loop through the octets (bytes a.k.a. characters for text data) of encoded and xor the octet with the (i modulo 4)th octet of mask. in pseudo-code (that happens to be valid javascript): var decoded = ""; for (var i = 0; i < encoded.length; i++) { decoded[i] = encoded[i] ^ mask[i % 4]; } now you can figure out what decoded means depending on your application. message fragmentation the fin and opcode fields work together to send a message split up into separate frames. this is called message fragmentation. fragmentation is only ...

Window.frames - Web APIs
returns the window itself, which is an array-like object, listing the direct sub-frames of the current window. syntax framelist = window.frames; framelist is a list of frame objects. it is similar to an array in that it has a length property and its items can be accessed using the [i] notation. framelist === window evaluates to true. each item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].contentwindow). for more details about the returned value, refer to this thread on mozilla.dev.platform. example var frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < fr...

XMLHttpRequest - Web APIs
mlhttprequest.status read only returns an unsigned short with the status of the response of the request. xmlhttprequest.statustext read only returns a domstring containing the response string returned by the http server. unlike xmlhttprequest.status, this includes the entire text of the response message ("200 ok", for example). note: according to the http/2 specification (8.1.2.4 response pseudo-header fields), http/2 does not define a way to carry the version or reason phrase that is included in an http/1.1 status line. xmlhttprequest.timeout is an unsigned long representing the number of milliseconds a request can take before automatically being terminated. xmlhttprequesteventtarget.ontimeout is an eventhandler that is called whenever the request times out. xmlhttprequest.upl...

msGetRegionContent - Web APIs
see also microsoft api extensions ...

msRegionOverflow - Web APIs
n element has no content and is empty. all content from the named flow was fitted in regions with a lower content-order value. undefined: the element is not a region. when the region is an actual element, msregionoverflow provides the ability to find out if content fully fits into the region or not. however, it is only available to regions that are document elements and not to regions that are pseudo-elements. see also microsoft api extensions ...

Web APIs
broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnod...

Using the alert role - Accessibility
an element that is already visible on the page rather than creating a new element. this allows the developer to reiterate information that has become more relevant or urgent to the user. for example, a form control may have instruction about the expected value. if a different value is entered, role="alert can be added to the instruction text so that the screen reader announces it as an alert. ...

ARIA: switch role - Accessibility
result the result looks like this: specifications specification status comment accessible rich internet applications (wai-aria) 1.1 recommendation defines aria in general along with all roles, properties, and so forth. aria in html worki...

Keyboard - Accessibility
at will add the element to the list of elements that can be focused by pressing the tab key, in the sequence of such elements as defined in the html document. see also tabindex global html attribute focusable element must have focus styling any element that can receive keyboard focus should have visible styling that indicates when the element is focused. you can do this with the :focus css pseudo-class. standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive. if you create your own focusable components, be sure that you also define focus styling for them. see also using css to change the presentation of a u...

:-moz-broken - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. syntax :-moz-broken examples html <img src="broken.jpg" alt="this image is broken. ...

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

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

:-moz-handler-blocked - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. ...

:-moz-handler-crashed - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. ...

:-moz-handler-disabled - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. ...

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

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

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

:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "ltr". note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (this can vary from window to window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. ...

:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "rtl". note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (this can vary from window to window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. ...

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

:-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-suppressed - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. ...

:-moz-user-disabled - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers. ...

:-webkit-autofill - CSS: Cascading Style Sheets
note: the user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to javascript hacks. ...

::-moz-color-swatch - CSS: Cascading Style Sheets
note: using ::-moz-color-swatch with anything but an <input type="color"> doesn't match anything and has no effect. ...

::-moz-focus-inner - CSS: Cascading Style Sheets
note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...

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

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

::-moz-progress-bar - CSS: Cascading Style Sheets
(the bar represents the amount of progress that has been made.) if you want to select the unfinished part of <progress> in mozilla, please select the <progress> directly. ...

::-moz-range-progress - CSS: Cascading Style Sheets
this portion corresponds to values lower than the value currently selected by the thumb (i.e., virtual knob). note: using ::-moz-range-progress with anything but an <input type="range"> doesn't match anything and has no effect. ...

::-moz-range-thumb - CSS: Cascading Style Sheets
the user can move the thumb along the input's track to alter its numerical value. note: using ::-moz-range-thumb with anything but an <input type="range"> doesn't match anything and has no effect. ...

::-moz-range-track - CSS: Cascading Style Sheets
note: using ::-moz-range-track with anything but an <input type="range"> doesn't match anything and has no effect. ...

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

::-webkit-file-upload-button - CSS: Cascading Style Sheets
syntax selector::-webkit-file-upload-button examples html <form> <label for="fileupload">upload file</label><br> <input type="file" id="fileupload"> </form> css input, label { display: block; } input[type=file]::-webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try. the screenshot to the left shows what the button will look like if you are without access to chrome, opera or safari. ...

::-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-bar - CSS: Cascading Style Sheets
syntax ::-webkit-meter-bar specifications not part of any standard. ...

::-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-meter-suboptimum-value - CSS: Cascading Style Sheets
syntax ::-webkit-meter-suboptimum-value 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-inner-element - CSS: Cascading Style Sheets
note: in order to let ::-webkit-progress-value take effect, -webkit-appearance needs to be set to none on the <progress> element. syntax ::-webkit-progress-inner-element examples these examples work only on blink and webkit. adding a black border around the progress bar in this example, a 2px black border is added around the progress bar. ...

::-webkit-progress-value - CSS: Cascading Style Sheets
note: in order to let ::-webkit-progress-value take effect, -webkit-appearance needs to be set to none on the <progress> element. syntax ::-webkit-progress-value examples this example will only work in browsers based on blink or webkit. ...

::-webkit-scrollbar - CSS: Cascading Style Sheets
::-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. ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle. ...

::-webkit-slider-runnable-track - CSS: Cascading Style Sheets
the ::-webkit-slider-runnable-track css pseudo-element represents the "track" (the groove in which the indicator slides) of an <input type="range">. syntax ::-webkit-slider-runnable-track specifications not part of any standard. ...

::-webkit-slider-thumb - CSS: Cascading Style Sheets
the ::-webkit-slider-thumb css pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value. syntax ::-webkit-slider-thumb specifications not part of any standard. ...

::cue - CSS: Cascading Style Sheets
this can be used to style captions and other cues in media with vtt tracks. ::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. ...

::part() - CSS: Cascading Style Sheets
the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute. custom-element::part(foo) { /* styles to apply to the `foo` part */ } syntax ::part( <ident>+ ) examples html <template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { ba...

:any-link - CSS: Cascading Style Sheets
in other words, it matches every <a>, <area>, or <link> element that has an href attribute. thus, it matches all elements that match :link or :visited. ...

:blank - CSS: Cascading Style Sheets
note: the :blank selector is considered at risk, as the csswg keeps changing it. see csswg issue #1967. the :blank css pseudo-class selects empty user input elements (eg. <input> or <textarea>). syntax :blank examples simple :blank example in eventual supporting browsers, the :blank pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users. html <textarea></textarea> css textarea:blank { border: 3px solid red; } result specifications specification status comment selectors level 4the definition of ':blank' in that specification. working draft initial definition. ...

:default - CSS: Cascading Style Sheets
multiple <select>s can have more than one selected option, so all will match :default. <input type="checkbox"> and <input type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...

: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'); dive...

:first-child - CSS: Cascading Style Sheets
/* selects any <p> that is the first element among its siblings */ p:first-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...

:first-of-type - CSS: Cascading Style Sheets
/* selects any <p> that 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. ...

:focus-within - CSS: Cascading Style Sheets
(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. ...

:host - CSS: Cascading Style Sheets
note: this has no effect when used outside a shadow dom. /* selects a shadow root host */ :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). ...

:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements. /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated...

:lang() - CSS: Cascading Style Sheets
the :lang() css pseudo-class matches elements based on the language they are determined to be in. /* selects any <p> in english (en) */ p:lang(en) { quotes: '\201c' '\201d' '\2018' '\2019'; } note: in html, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as http headers). for other document types there may be other document methods for determining the language. syntax formal syntax :lang( <language-code> ) parameter <language-code> a <string> representing the language you want to target. acceptable values are specified in the html spec. examples in this example, the :lang() pseudo-class is used to match the parents of quote elements (<q>) using child combinators. note that this doesn't il...

:last-child - CSS: Cascading Style Sheets
/* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...

:last-of-type - CSS: Cascading Style Sheets
/* selects any <p> that 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. ...

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

:only-child - CSS: Cascading Style Sheets
this is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. /* selects each <p>, but only if it is the */ /* only child of its parent */ p:only-child { background-color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...

:only-of-type - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only <p> element inside its parent */ p:only-of-type { background-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 :only-of-type examples styling elements with no siblings of the same type html <main> <div>i am `div` #1.</div> <p>i am the only `p` among my siblings.</p> <div>i am `div` #2.</div> <div>i am `div` #3. ...

:optional - CSS: Cascading Style Sheets
syntax :optional examples see :invalid for an example. accessibility concerns if a form contains optional <input>s, required inputs should be indicated using the required attribute. this will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission. ...

:out-of-range - CSS: Cascading Style Sheets
the :out-of-range css pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes. /* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. in the absence of such 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...

:placeholder-shown - CSS: Cascading Style Sheets
/* selects any element with an active placeholder */ :placeholder-shown { border: 2px solid silver; } syntax :placeholder-shown examples basic example this example applies special font and border styles when the placeholder is shown. html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way. you can use the text-overflow property to alter the way overflowing text is displayed. ...

:required - CSS: Cascading Style Sheets
syntax :required examples see :invalid for an example. accessibility concerns mandatory <input>s should have the required attribute applied to them. this will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission. ...

:root - CSS: Cascading Style Sheets
in html, :root represents the <html> element and is identical to the selector html, except that its specificity is higher. /* selects the root element of the document: <html> in the case of html */ :root { background: yellow; } syntax :root examples declaring global css variables :root can be useful for declaring global css variables: :root { --main-color: hotpink; --pane-padding: 5px 42px; } specifications specification status comment selectors level 4the definition of ':root' in that specification. working draft no change. selectors level 3the definition of ':root' in that specification. ...

:state() - CSS: Cascading Style Sheets
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. ...

:valid - CSS: Cascading Style Sheets
the :valid css pseudo-class represents any <input> or other <form> element whose contents validate successfully. this allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly. /* selects any valid <input> */ input:valid { background-color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user. syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following c...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
; color: #000; padding: 10px; } grid and display: contents a final interaction with another layout specification that is worth noting is the interaction between css grid layout and display: contents. the contents value of the display property is a new value that is described in the display specification as follows: “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.” if you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. this means that children of a...

Using CSS counters - CSS: Cascading Style Sheets
e 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, from outermost to innermost, separated by the specified string. the counters are rendered in the specified sty...

CSS Paged Media - CSS: Cascading Style Sheets
css paged media is a module of css that defines how page switches are handled. ...

Microsoft CSS extensions - CSS: Cascading Style Sheets
olor -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-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...

Syntax - CSS: Cascading Style Sheets
e over the other and must be applied: this is called the cascade algorithm. it is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself. this leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefore the entire rule is ignored (as invalid too). css statements rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. but there is other information that a web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or li...

Universal selectors - CSS: Cascading Style Sheets
recommendation initial definition ...

Visual formatting model - CSS: Cascading Style Sheets
isplay module level 3. in addition, some of the terminologies around the display have been updated and clarified in the years since css2. css takes your source document and renders it onto a canvas. to do this, it generates an intermediary structure, the box tree, which represents the formatting structure of the rendered document. each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes. then, for each element, css generates zero or more boxes as specified by that element’s display property value. note: boxes are often referred to by their display type — e.g. a box generated by an element with display: block is called a "block b...

animation-delay - CSS: Cascading Style Sheets
n is applied to the element. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-delay' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is genera...

animation-direction - CSS: Cascading Style Sheets
even or odd starts at one. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-direction' in that specification. wo...

animation-duration - CSS: Cascading Style Sheets
sider them as identical to 0s. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-duration' in that specification. working draft initial definition. ...

animation-fill-mode - CSS: Cascading Style Sheets
operties in both directions. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example. it demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than rev...

animation-iteration-count - CSS: Cascading Style Sheets
e animation cycle. negative values are invalid. note: when you specify multiple values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-iteration-count>#where <single-animation-iteration-count> = infinite | <number> examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-iteration-count' in that specification. working draft...

animation-name - CSS: Cascading Style Sheets
unset, initial, or inherit. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | <keyframes-name> ]#where <keyframes-name> = <custom-ident> | <string> examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-name' in that specification. working draft initial definition. ...

animation-play-state - CSS: Cascading Style Sheets
tion is currently paused. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-play-state>#where <single-animation-play-state> = running | paused examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-play-state' in that specification. working draft initial defini...

animation-timing-function - CSS: Cascading Style Sheets
equal to steps(1, jump-end) note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. ...

animation - CSS: Cascading Style Sheets
anations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimation-duration: 0sanimation-timing-function: easeanimation-delay: 0sanimation-iteration-count: 1animation-direction: normalanimation-fill-mode: noneanimation-play-state: runningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:animation-name: as specifiedanimation-duration: as specifiedanimation-timing-function: as specifiedanimation-delay: as specifiedanimation-direction: as specifiedanimation-iteration-count: as specifiedanimation-fill-mode: as specifiedanimation-play-state: as specifiedanimation typediscrete formal syntax <single-animation...

attr() - CSS: Cascading Style Sheets
note: the attr() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. the attr() css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. 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. /* simple usage */ attr(data-count); attr(title); /* with type */ attr(src url); attr(data-count number); attr(data-width px); /* with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the cs...

clear - CSS: Cascading Style Sheets
floats that are relevant to be cleared are the earlier floats within the same block formatting context. if an element contains only floated elements, its height collapses to nothing. if you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it. #container::after { content: ""; display: block; clear: both; } syntax /* keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* global values */ clear: inherit; clear: initial; clear: unset; values none is a keyword indicating that the element is not moved down to clear past floating elements. left is a...

counter() - CSS: Cascading Style Sheets
/* simple usage */ counter(countername); /* changing the counter display */ counter(countername, upper-roman) a counter has no visible effect by itself. the counter() function (and counters() function) is what makes it useful by returning developer defined strings (or images). ...

counters() - CSS: Cascading Style Sheets
the generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. ...

<custom-ident> - CSS: Cascading Style Sheets
ts usage to the new counter-set property. css animationsthe definition of '<custom-ident> for animation-name' in that specification. working draft defines which values are excluded for animation-name. css values and units module level 3the definition of '<custom-ident>' in that specification. candidate recommendation renames <identifier> to <custom-ident>. makes it a pseudo-type and forbids the use of excluded values. css level 2 (revision 1)the definition of '<identifier>' in that specification. recommendation initial definition. ...

<display-box> - CSS: Cascading Style Sheets
please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements. see appendix b: effects of display: contents on unusual elements for more details. ...

<display-listitem> - CSS: Cascading Style Sheets
syntax 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. ...

display - CSS: Cascading Style Sheets
ruby-base-container these elements behave like <rbc> html elements generated as anonymous boxes. ruby-text-container these elements behave like <rtc> html elements. box <display-box> these values define whether an element generates display boxes at all. valid <display-box> values: contents these elements don't produce a specific box by themselves. they are replaced by their pseudo-box and their child boxes. please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements. see appendix b: effects of display: contents on unusual elements for more details. due to a bug in browsers this will currently remove the element from the accessibility...

flex-basis - CSS: Cascading Style Sheets
the "look at my width or height property" keyword. it was implemented in bug 1032922. then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword). ...

flex-grow - CSS: Cascading Style Sheets
factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors. flex-grow is used alongside the other flex properties flex-shrink and flex-basis, and normally defined using the 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 . d and e are flex-grow:2 .</h5> <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...

flex-shrink - CSS: Cascading Style Sheets
mples and send us a pull request. syntax /* <number> values */ flex-shrink: 2; flex-shrink: 0.6; /* global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset; the flex-shrink property is specified as a single <number>. values <number> see <number>. negative values are invalid. defaults to 1. formal definition initial value1applies toflex items, including in-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. d and e have flex-shrink:2 set</p> <p>the width of d and e is less than the others.</p> <div id="content"> <div class="box" style="backgr...

flex - CSS: Cascading Style Sheets
auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } by default flex items don't shrink below their minimum content size. to change this, set the item's min-width or min-height. ...

<image> - CSS: Cascading Style Sheets
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 specified size defines only the width or only the height, the missing value is determined using the intrinsic ratio, if there is any, the intr...

initial-letter-align - CSS: Cascading Style Sheets
the initial letter aligns with the cap height of the first line of text. the baseline of the initial letter aligns with the baseline of the nth text baseline. hanging the hanging baseline of the initial letter aligns with the hanging baseline of the first line of text. ideographic the initial letter is centered in the n-line area. ...

initial-letter - CSS: Cascading Style Sheets
efines the size of the initial letter, in terms of how many lines it occupies. negative values are not allowed. <integer> defines the number of lines the initial letter should sink when the size of it is given. values must be greater than zero. if omitted, it duplicates the size value, floored to the nearest positive whole number. ...

list-style-type - CSS: Cascading Style Sheets
mple hangul -moz-hangul example example example hangul-consonant -moz-hangul-consonant example example example urdu -moz-urdu example accessibility concerns the voiceover screen reader has an issue where unordered lists with a list-style-type value of none applied to them will not be announced as a list. to address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. this ensures the design is unaffected by the bug fix and that list items are not improperly described. ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 |...

list-style - CSS: Cascading Style Sheets
navailable. values list-style-type see list-style-type. list-style-image see list-style-image. list-style-position see list-style-position. none no list style is used. accessibility concerns safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. to address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. this ensures the design is unaffected by the bug fix and that list items are not improperly described. ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 |...

text-shadow - CSS: Cascading Style Sheets
ength> values, followed optionally by a <color> value. the first two <length> values are the <offset-x> and <offset-y> values. the third, optional, <length> value is the <blur-radius>. the<color> value is the shadow's color. when more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top. this property applies to both ::first-line and ::first-letter pseudo-elements. values <color> optional. the color of the shadow. it can be specified either before or after the offset values. if unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly. <offset-x> <offset-y> required. these <length> values specify the shadow's distance from the text. <offset-x> specifies the ho...

transition-delay - CSS: Cascading Style Sheets
ns valid. syntax /* <time> values */ transition-delay: 3s; transition-delay: 2s, 4ms; /* global values */ transition-delay: inherit; transition-delay: initial; transition-delay: unset; values <time> denotes the amount of time to wait between a property's value changing and the start of the transition effect. ...

transition-duration - CSS: Cascading Style Sheets
values <time> is a <time> denoting the amount of time the transition from the old value of a property to the new value should take. a time of 0s indicates that no transition will happen, that is the switch between the two states will be instantaneous. a negative value for the time renders the declaration invalid. ...

transition-property - CSS: Cascading Style Sheets
l values */ transition-property: inherit; transition-property: initial; transition-property: unset; values none no properties will transition. all all properties that can transition will. <custom-ident> a string identifying the property to which a transition effect should be applied when its value changes. formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident> examples there are several examples of css transitions included in the main css transitions article. specifications specification status comment css transitionsthe definition of 'transition...

transition-timing-function - CSS: Cascading Style Sheets
n can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion media query to create a complimentary experience for users who have expressed a preference for no animated experiences. ...

user-select - CSS: Cascading Style Sheets
s the behavior described in the spec, and this will bring some issues. until now, chromium chooses to fix the issues, make the final behavior meets the specifications. syntax none the text of the element and its sub-elements is not selectable. note that the selection object can contain these elements. auto the used value of auto is determined as follows: on the ::before and ::after pseudo elements, the used value is none if the element is an editable element, the used value is contain otherwise, if the used value of user-select on the parent of this element is all, the used value is all otherwise, if the used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user. ...

Adding captions and subtitles to HTML5 video - Developer guides
; text-align:center; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and supported features of webvtt is the ability to style the individual subtitles (something called text cues) via css extensions. the ::cue pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. there are only a handful of css properties that can be applied to a text cue: color opacity visibility text-decoration text-shadow background shorthand properties outline shorthand properties font shorthand properties, including line-height white-space for example, to change the te...

Challenge solutions - Developer guides
yid("square"); square.style.backgroundcolor = "transparent"; square.style.marginleft = "0em"; button.removeattribute("disabled"); } svg and css change color of inner petals challenge change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work. solution move the position of the :hover pseudo-class from a specific petal, to all petals #inner-petals { --segment-fill-fill-hover: pink; } /* non-standard way for some older browsers */ #inner-petals:hover .segment-fill { fill: pink; stroke: none; } ...

Introduction to Web development - Developer guides
olute beginners guide to css covers basic concepts and fundamentals css reference guide — a complete guide to css with details on the level of gecko/firefox support for each. the w3c introduction to styling with css — a brief guide to styling web pages for beginners. common css questions — common questions and answers for beginners intermediate css concepts — grouping, pseudo-classes and more. javascript beginning getting started with javascript — what is javascript and how can it help you? javascript reference guide — a comprehensive, regularly updated guide to javascript for all levels of learning from beginner to advanced. crockford on javascript — an in-depth video series on the javascript language. eloquent javascrip...

Mobile Web Development - Developer guides
hly as the browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device. working with touch screens to use a touch screen you'll need to work with dom touch events. you won't be able to use the css :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. see this article on designing for touch screens. you can use the pointer or any-pointer media query to load different css on a touch-enabled device. optimizing images to help users whose devices have low or expensive bandwidth, you can optimize images by loading images a...

HTML attribute: min - HTML: Hypertext Markup Language
for the <meter> element, the min attribute defines the lower numeric bound of the measured range. this must be less than the minimum value (max attribute), if specified. in both cases, if omitted, the value defaults to 1. syntax for min values for other elements input type syntax example <m...

HTML attribute: minlength - HTML: Hypertext Markup Language
is changed by the user. once submission fails, some browsers will display an error message indicating the minimum length required and the current length. examples by adding minlength="5", the value must either be empty or five characters or longer to be valid. <label for="fruit">enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid. the value will be valid as long as it is either null (empty) or five or more characters long. lime is invalid, lemon is valid. input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } input:invalid:focus { background-image: linear-gradient(pink, lightgreen); } specifications specificati...

HTML attribute: multiple - HTML: Hypertext Markup Language
he browser provides differs. in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected. most browsers displaying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted. the email input displays the same, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the attribute is not present. when multiple is set on the email input type, the user can inlclude zero (if not also required), one or more comma-separated email addresses. <input type="email" multiple name="emails" id="emails"> if and only if the multiple attribute is specified, the value can be a list of properly-formed comma...

HTML attribute: pattern - HTML: Hypertext Markup Language
have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too long or too short, or contain characters that aren't digits, the patternmismatch will be true. when true, the element matches the :invalid css pseudo-classes. input:invalid { border: red solid 3px; } had we used minlength and maxlength attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true. specifying a pattern you can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see validating against a regular expression for a si...

HTML attribute: step - HTML: Hypertext Markup Language
numbers follwed by .2 are not valid. as we included an invalid value, supporting browsers will show the value as invalid. the number spinner, if present, will only show valid float values of 1.2 and greater note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more information. specifications specification status comment html living standardthe definition of 'step attribute' in that specification. living standard html5the definition of 'step attribute' in that specification. recommendation accessibility concerns provide instructions to ...

<button>: The Button element - HTML: Hypertext Markup Language
e form is submitted. notes a submit button with the attribute formaction set, but without an associated form does nothing. you have to set a form owner, either by wrapping it in a <form> or set the attribute form to the id of the form. <button> elements are much easier to style than <input> elements. you can add inner html content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering. if your buttons are not for submitting form data to a server, be sure to set their type attribute to button. otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document. example <button name="button">press me</button> accessibility concerns icon buttons buttons that only show an ...

<del>: The Deleted Text element - HTML: Hypertext Markup Language
ings. examples <p><del>this text has been deleted</del>, here is the rest of the paragraph.</p> <del><p>this paragraph has been deleted.</p></del> result accessibility concerns the presence of the del element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. del::before, del::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. be...

<details>: The Details disclosure element - HTML: Hypertext Markup Language
the <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). for example, we can remove the disclosure widget icon by setting list-style: none. chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser. css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radiu...

<dialog>: The Dialog element - HTML: Hypertext Markup Language
icates that the dialog is active and can be interacted with. when the open attribute is not set, the dialog shouldn't be shown to the user. usage notes <form> elements can close a dialog if they have the attribute method="dialog". when such a form is submitted, the dialog closes with its returnvalue property set to the value of the button that was used to submit the form. the ::backdrop css pseudo-element can be used to style behind a <dialog> element when the dialog is displayed with htmldialogelement.showmodal(). for example, to dim unreachable content behind the modal dialog. examples simple example <dialog open> <p>greetings, one and all!</p> </dialog> advanced example this example opens a pop-up dialog box that contains a form, when the "update details" button is clicked. ht...

<form> - HTML: Hypertext Markup Language
the html <form> element represents a document section containing interactive controls for submitting information. 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 possible to use the :valid and :invalid css pseudo-classes to style a <form> element based on whether or not the elements inside the form are valid. content categories flow content, palpable content permitted content flow content, but not containing <form> elements tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content implicit ...

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
than its dimensions. yes: always show a scrollbar. no: never show a scrollbar. non-standard attributes mozbrowser see bug 1318532 for exposing this to webextensions in firefox. makes the <iframe> act like a top-level browser window. see browser api for details. available only to webextensions. scripting inline frames, like <frame> elements, are included in the window.frames pseudo-array. with the dom htmliframeelement object, scripts can access the window object of the framed resource via the contentwindow property. the contentdocument property refers to the document inside the <iframe>, same as contentwindow.document. from the inside of a frame, a script can get a reference to its parent window with window.parent. script access to a frame's content is subject to the sa...

<input type="color"> - HTML: Hypertext Markup Language
tent looks like this in firefox 55: in this case, clicking on the color well presents the platform's color picker for you to choose a color from (in this case, the macos picker): validation a color input's value is considered to be invalid if the user agent is unable to convert the user's input into seven-character lower-case hexadecimal notation. if and when this is the case, the :invalid pseudo-class is applied to the element. example let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the document. html the html is fairly straightforward — a couple of paragraphs of descriptive material with an <input> of type color with the id colorwell, which we'll use to change t...

<input type="date"> - HTML: Hypertext Markup Language
idity"></span> </label> <p> <button>submit</button> </p> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the css used in the above example. we make use of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether or not the current value is valid. we had to put the icon on a <span> next to the input, not on the input itself, because in chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively. label { display: flex; align-items: center; } span::after { padding-left: 5px; } i...

<input type="email"> - HTML: Hypertext Markup Language
active 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 input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. on browsers that don't support inputs of type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes ...

<input type="number"> - HTML: Hypertext Markup Language
value that is not a multiple of 10; or a non-numerical value — and see how the error messages the browser gives you differ with different ones. the css applied to this example is as follows: div { margin-bottom: 10px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, as a visual indicator of validity. we put it on a separate <span> element for added flexibility. some browsers don't display generated content very effectively on some types of form inputs. (read, for example, the section on <input type="date"> validation.) important: html form validati...

<input type="radio"> - HTML: Hypertext Markup Language
d to support some browsers). by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. by specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. here we've used a border along with border-radius and a transition to create a nice animating radio selection. notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected. compatibility note: if you wish to use the appearance property, you should test it very carefully. although it is supported in most modern browsers, its implementation varies widely. in older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at a...

<input type="search"> - HTML: Hypertext Markup Language
lidation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. a note on styling there are useful pseudo-classes available for styling valid/invalid form elements: :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values. input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; ...

<input type="text"> - HTML: Hypertext Markup Language
lidation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. a note on styling there are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid. these are :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) mark next to inputs containing valid values, and a cross (x) next to inputs containing invalid values. div { margin-bottom: 10px; position: relative; } input + span { padding-ri...

<input type="url"> - HTML: Hypertext Markup Language
url. 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 input value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlen...

<ins> - HTML: Hypertext Markup Language
ng if it includes both date and time is covered in format of a valid local date and time string. examples <ins>this text has been inserted</ins> result accessibility concerns the presence of the <ins> element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. ins::before, ins::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. ...

<mark>: The Mark Text element - HTML: Hypertext Markup Language
h the use of <mark> for search results from other potential usage, this example applies the custom class "match" to each match. the results look like this: accessibility concerns the presence of the mark element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } mark::before { content: " [highlight start] "; } mark::after { content: " [highlight end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosi...

<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
ing point number between 0 and max, or between 0 and 1 if max is omitted. if there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take. note: unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element. note: the :indeterminate pseudo-class can be used to match against indeterminate progress bars. to change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeattribute('value'). examples <progress value="70" max="100">70 %</progress> result on windows 7, the resulting progress looks like this: specifications specification status comment ...

<s> - HTML: Hypertext Markup Language
for this element. examples <s>today's special: salmon</s> sold out<br> <span style="text-decoration:line-through;">today's special: salmon</span> sold out accessibility concerns the presence of the s element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } s::before { content: " [start of stricken text] "; } s::after { content: " [end of stricken text] "; } some people who use screen readers deliberately disable announcing content that creates extra verbo...

<textarea> - HTML: Hypertext Markup Language
age. this is controlled by the resize css property — resizing is enabled by default, but you can explicitly disable it using a resize value of none: textarea { resize: none; } styling valid and invalid values valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. for example, to give your textarea a different border depending on whether it is valid or invalid: textarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; } examples basic example the following example show a very simple textarea, with a set numbers of rows and columns and some default content. <textarea name="textarea" rows="10" cols="50">writ...

lang - HTML: Hypertext Markup Language
...

part - HTML: Hypertext Markup Language
the part global attribute contains a space-separated list of the part names of the element. part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element. see our shadow part example for a usage example. specifications specification status comment shadow partsthe definition of 'part' in that specification. working draft ...

Global attributes - HTML: Hypertext Markup Language
editable elements should be written in by the user. the attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in tags for identifying languages (bcp47). xml:lang has priority over it. part a space-separated list of the part names of the element. part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element. slot assigns a slot in a shadow dom shadow tree to an element: an element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value. spellcheck an enumerated attribute defines whether the element may be checked for spelling errors. it may have the following values: true, which indicates that the el...

HTML documentation index - HTML: Hypertext Markup Language
ld be written in by the user. the attribute contains a single “language tag” in the format defined in tags for identifying languages (bcp47). 27 part global attributes, html, reference, part the part global attribute contains a space-separated list of the part names of the element. part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element. 28 slot global attributes, html, reference the slot global attribute assigns a slot in a shadow dom shadow tree to an element: an element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value. 29 spellcheck global attributes, html, reference the spellcheck glob...

Via - HTTP
aders and the response headers. it is used for tracking message forwards, avoiding request loops, and identifying the protocol capabilities of senders along the request/response chain. header type general header forbidden header name yes syntax via: [ <protocol-name> "/" ] <protocol-version> <host> [ ":" <port> ] or via: [ <protocol-name> "/" ] <protocol-version> <pseudonym> directives <protocol-name> optional. the name of the protocol used, such as "http". <protocol-version> the version of the protocol used, such as "1.1". <host> and <port> public proxy url and port. <pseudonym> name/alias of an internal proxy. examples via: 1.1 vegur via: http/1.1 gwa via: 1.0 fred, 1.1 p.example.net specifications specification title rfc ...

Warning - HTTP
to be deleted from a stored response after validation. 1xx warn-codes describe the freshness or validation status of the response and will be deleted by a cache after deletion. 2xx warn-codes describe some aspect of the representation that is not rectified by a validation and won't be deleted by a cache after validation unless a full response is sent. <warn-agent> the name or pseudonym of the server or software adding the warning header (might be "-" when the agent is unknown). <warn-text> advisory text describing the error. <warn-date> optional. if more than one warning header is sent, include a date that matches the date header. warning codes the http warn codes registry at iana.org defines the namespace for warn codes. code text description ...

Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range. the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything related to security. use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method. syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive). examples note that as numbers in javascript are ieee 754 floating point numbers with round-to-...

Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range. the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything related to security. use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method. syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive). examples note that as numbers in javascript are ieee 754 floating point numbers with round-to-...

Math.sign() - JavaScript
of a math object you created (math is not a constructor). polyfill if (!math.sign) { math.sign = function(x) { // if x is nan, the result is nan. // if x is -0, the result is -0. // if x is +0, the result is +0. // if x is negative and not -0, the result is -1. // if x is positive and not +0, the result is +1. ...

Math - JavaScript
logarithm (㏒e; also ㏑) of 1 + x for the number x. math.log10(x) returns the base-10 logarithm of x. math.log2(x) returns the base-2 logarithm of x. math.max([x[, y[, …]]]) returns the largest of zero or more numbers. math.min([x[, y[, …]]]) returns the smallest of zero or more numbers. math.pow(x, y) returns base x to the exponent power y (that is, xy). math.random() returns a pseudo-random number between 0 and 1. math.round(x) returns the value of the number x rounded to the nearest integer. math.sign(x) returns the sign of the x, indicating whether x is positive, negative, or zero. math.sin(x) returns the sine of x. math.sinh(x) returns the hyperbolic sine of x. math.sqrt(x) returns the positive square root of x. math.tan(x) returns the tangent of x. math.tanh(...

String.prototype.charCodeAt() - JavaScript
deat() returns nan. description unicode code points range from 0 to 1114111 (0x10ffff). the first 128 unicode code points are a direct match of the ascii character encoding. (for information on unicode, see the javascript guide.) note: charcodeat() will always return a value that is less than 65536. this is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. because of this, in order to examine (or reproduce) the full character for individual character values of 65536 or greater, for such characters, it is necessary to retrieve not only charcodeat(i), but also charcodeat(i+1) (as if manipulating a string with two letters), or to use codepointat(i) instead. see examples 2 and 3 (below). char...

void operator - JavaScript
evaluates the code in the uri and then replaces the contents of the page with the returned value, unless the returned value is undefined. the void operator can be used to return undefined. for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.backgroundcolor='green');"> click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers. non-leaking arrow functions arrow functions introduce a short-hand braceless syntax that returns an expression. this can cause unintended side effects by returning the result of a function call that previously returned nothing. to be safe, when the return value of a function is not intended to be used, it can ...

seed - SVG: Scalable Vector Graphics
the seed attribute represents the starting number for the pseudo random number generator of the <feturbulence> filter primitive. only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value ...

SVG documentation index - SVG: Scalable Vector Graphics
183 scale filters, svg, svg attribute the scale attribute defines the displacement scale factor to be used on a <fedisplacementmap> filter primitive. the amount is expressed in the coordinate system established by the primitiveunits attribute on the <filter> element. 184 seed filters, svg, svg attribute the seed attribute represents the starting number for the pseudo random number generator of the <feturbulence> filter primitive. 185 shape-rendering svg, svg attribute the shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. 186 side svg, svg attribute the side attribute determines the side of a path the text is placed on (relati...

Example - SVG: Scalable Vector Graphics
var width = dims[0], height = dims[1]; // choose a random coordinate to start at. this.x = rand( width ); this.y = rand( height ); // nil initial velocity. this.vx = this.vy = 0; // a visual element---initially none this.elt = null; } // turn this into a class. new mote(); // mote::applyforce() -- adjust velocity // towards the given position. // warning: pseudo-physics -- not really // governed by any /real/ physical principles. mote.prototype.applyforce = function(pos, mag) { if( pos[0] > this.x ) this.vx += mag; else if( pos[0] < this.x ) this.vx -= mag; if( pos[1] > this.y ) this.vy += mag; else if( pos[1] < this.y ) this.vy -= mag; } // mote::capvelocity() -- apply an upper limit // on mote velocity. mote.

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
dialgradient implemented. stop implemented. pattern module pattern implemented. clip module clippath implemented. mask module mask implemented. filter module filter implemented. of the pseudo-inputs, sourcegraphic, sourcealpha, fillpaint and strokepaint are implemented. use of an unimplemented pseudo-input or filter element will cause the filter to be ignored and the referring graphic to be drawn without any filter. feblend implemented. fecolormatrix implemented. fecomponenttransfer ...

Fills and Strokes - SVG: Scalable Vector Graphics
="http://www.w3.org/2000/svg" version="1.1"> <defs> <style type="text/css"><![cdata[ #myrect { stroke: black; fill: red; } ]]></style> </defs> <rect x="10" height="180" y="10" width="180" id="myrect"/> </svg> moving styles to an area like this can make it easier to adjust properties on large groups of elements. ...

SVG and CSS - SVG: Scalable Vector Graphics
inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work. see a solution to this challenge. simplified structure the svg structure shown above could be written much more concise by referencing the individual parts of the flower via <use> elements. this behavior is standardized, though only a few browsers support the :hover pseudo-class and other more complex css selectors on elements referenced via <use> elements, at the moment. there is some discussion about what rules apply to such referenced elements. see below how the structure then looks like. <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg"> <title>svg demonstration</title> <desc>mozilla css getting started ...

<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform". ...

PI Parameters - XSLT: Extensible Stylesheet Language Transformations
rs 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". <?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...

An Overview - XSLT: Extensible Stylesheet Language Transformations
use typing "http://www.w3.org/1999/xsl/transform" repeatedly would be tedious and would render the markup difficult to read, there is a standard mechanism for assigning a shorthand name to the namespace in the stylesheet heading. thus a full example of the opening stylesheet element might look like this. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> the xmlns pseudo-attribute maps the shorthand name xsl onto the full namespace for use throughout the document that follows. thus the stylesheet element above is prefixed with xsl:. although xsl is the conventionally used shorthand name (called the prefix), it is not mandatory and it is quite possible to choose a different one. the examples in this article all assume the use of the xsl prefix. all xslt transform...