Feature-Policy: wake-lock - HTTP
the http feature-policy header wake-lock directive controls whether the current document is allowed to use wake lock api to indicate that device should not enter power-saving mode.
... note: latest drafts of screen wake lock api defines screen-wake-lock directive.
... syntax feature-policy: wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...And 6 more matches

stroke-linecap - SVG: Scalable Vector Graphics
the stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
... note: as a presentation attribute stroke-linecap can be used as a css property.
...resentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4...
...And 6 more matches

-ms-scroll-limit - Archive of obsolete content
the -ms-scroll-limit css property is a microsoft extension that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max, and -ms-scroll-limit-y-max properties.
... initial valueas each of the properties of the shorthand:-ms-scroll-limit-x-min: 0-ms-scroll-limit-y-min: 0-ms-scroll-limit-x-max: auto-ms-scroll-limit-y-max: autoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-limit-x-min: as specified-ms-scroll-limit-y-min: as specified-ms-scroll-limit-x-max: as specified-ms-scroll-limit-y-max: as specifiedanimation typediscrete syntax the -ms-scroll-limit property is specified as one or more of the following scroll limit values, in the order listed, separated by spaces.
... values -ms-scroll-limit-x-min the value of the -ms-scroll-limit-x-min property.
...And 5 more matches

compare-locales
compare-locales is a python script that helps localizers to check their work without running firefox or another application.
... if you want to run compare-locales on windows, be sure to first install mozillabuild.
... installation compare-locales needs to be installed, and it requires that you have python 2.7 or 3.5+ installed on your machine.
...And 5 more matches

-ms-content-zoom-limit - Archive of obsolete content
the -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.
... initial valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: 400%-ms-content-zoom-limit-min: 100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesas each of the properties of the shorthand:-ms-content-zoom-limit-max: the largest allowed zoom factor.
...smaller values zoom out.-ms-content-zoom-limit-min: the smallest allowed zoom factor.
...And 4 more matches

Scroll-linked effects
the definition of a scroll-linked effect is an effect implemented on a webpage where something changes based on the scroll position, for example updating a positioning property with the aim of producing a parallax scrolling effect.
... this article discusses scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
... other effects in many cases, scroll-linked effects can be reimplemented using css and made to run on the compositor thread.
...And 4 more matches

border-left-style - CSS: Cascading Style Sheets
the border-left-style css property sets the line style of an element's left border.
... syntax /* keyword values */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; /* global values */ border-left-style: inherit; border-left-style: initial; border-left-style: unset; the border-left-style property is specified as a single keyword chosen from th...
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color:...
...And 4 more matches

Accept-Language - HTTP
the accept-language request http header advertises which languages the client is able to understand, and which locale variant is preferred.
... (by languages, we mean natural languages, such as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-language response header.
...the content of the accept-language is often out of the control of the user (like when traveling and using an internet cafe in a different country); the user may also want to visit a page in another language than the locale of their user interface.
...And 4 more matches

Content-Language - HTTP
the content-language entity header is used to describe the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.
... for example, if "content-language: de-de" is set, it says that the document is intended for german language speakers (however, it doesn't indicate the document is written in german.
... if no content-language is specified, the default is that the content is intended for all language audiences.
...And 4 more matches

Using the aria-label attribute - Accessibility
the aria-label attribute is used to define a string that labels the current element.
...if there is visible text labeling the element, use aria-labelledby instead.
...since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.
...And 3 more matches

:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-type() css pseudo-class matches elements of a given type, based 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.
...And 3 more matches

border-left-color - CSS: Cascading Style Sheets
the border-left-color css property sets the color of an element's left border.
... it can also be set with the shorthand css properties border-color or border-left.
... syntax /* <color> values */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent; /* global values */ border-left-color: inherit; border-left-color: initial; border-left-color: unset; the border-left-color property is specified as a single value.
...And 3 more matches

border-left-width - CSS: Cascading Style Sheets
the border-left-width css property sets the width of the left border of an element.
... syntax /* keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-left-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-chi...
...And 3 more matches

box-lines - CSS: Cascading Style Sheets
the box-lines css property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
... /* keyword values */ box-lines: single; box-lines: multiple; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; by default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column.
... this behavior can be changed using the box-lines property.
...And 3 more matches

font-language-override - CSS: Cascading Style Sheets
the font-language-override css property controls the use of language-specific glyphs in a typeface.
... /* keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs designed specifically for that language.
... for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you override the typeface behavior for a specific language.
...And 3 more matches

padding-left - CSS: Cascading Style Sheets
the padding-left css property sets the width of the padding area to the left of an element.
... syntax /* <length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status commen...
...And 3 more matches

Feature-Policy: ambient-light-sensor - HTTP
the http feature-policy header ambient-light-sensor directive controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface.
... syntax feature-policy: ambient-light-sensor <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.
...And 3 more matches

Low-Level APIs - Archive of obsolete content
modules in this section implement low-level apis.
... privileged modules that expose powerful low-level capabilities such as window/utils and net/xhr.
...in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example, windows or request).
...And 2 more matches

:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
the :-moz-locale-dir(ltr) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed left-to-right.
...(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.
... this selector does not work properly from html; it always matches, regardless of whether the ui locale is left-to-right or right-to-left.
...And 2 more matches

:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
the :-moz-locale-dir(rtl) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed right-to-left.
...(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.
... this selector does not work properly from html; it never matches, no matter whether the ui locale is left-to-right or right-to-left.
...And 2 more matches

border-top-left-radius - CSS: Cascading Style Sheets
the border-top-left-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius css property, the value of this property is then reset to its initial value by the shorthand property.
... syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
...And 2 more matches

<display-legacy> - CSS: Cascading Style Sheets
css 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode.
... syntax valid <display-legacy> values: inline-block the element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
...it behaves like an html <table> element, but as an inline box, rather than a block-level box.
...And 2 more matches

initial-letter-align - CSS: Cascading Style Sheets
the initial-letter-align css property specifies the alignment of initial letters within a paragraph.
... /* keyword values */ initial-letter-align: auto; initial-letter-align: alphabetic; initial-letter-align: hanging; initial-letter-align: ideographic; /* global values */ initial-letter-align: inherit; initial-letter-align: initial; initial-letter-align: unset; syntax one of the keyword values listed below.
... ideographic the initial letter is centered in the n-line area.
...And 2 more matches

initial-letter - CSS: Cascading Style Sheets
the initial-letter css property sets styling for dropped, raised, and sunken initial letters.
... /* keyword values */ initial-letter: normal; /* numeric values */ initial-letter: 1.5; /* initial letter occupies 1.5 lines */ initial-letter: 3.0; /* initial letter occupies 3 lines */ initial-letter: 3.0 2; /* initial letter occupies 3 lines and sinks 2 lines */ /* global values */ initial-letter: inherit; initial-letter: initial; initial-letter: unset; syntax the keyword value normal, or a <number> optionally followed by an <integer>.
... values normal no special initial-letter effect.
...And 2 more matches

text-align-last - CSS: Cascading Style Sheets
the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned.
... syntax /* keyword values */ text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; /* global values */ text-align-last: inherit; text-align-last: initial; text-align-last: unset; values auto the affected line is aligned per the value of text-align, unless text-align is justify, in which case the effect is the same as setting text-align-last to start.
... start the same as left if direction is left-to-right and right if direction is right-to-left.
...And 2 more matches

text-decoration-line - CSS: Cascading Style Sheets
the text-decoration-line css property sets the kind of decoration that is used on text in an element, such as an underline or overline.
... syntax /* single keyword */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; /* multiple keywords */ text-decoration-line: underline overline; /* two decoration lines */ text-decoration-line: overline underline line-through; /* multiple decoration lines */ /* global values */ text-decoration-line: inherit; text-decora...
...tion-line: initial; text-decoration-line: unset; the text-decoration-line property is specified as none, or one or more space-separated values from the list below.
...And 2 more matches

::-ms-fill-lower - Archive of obsolete content
the ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector.
... background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-...
...width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width specifications not part of any specification.

High-level programming language - MDN Web Docs Glossary: Definitions of Web-related terms
a high-level programming language has a significant abstraction from the details of computer operation.
...unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) significant areas of computing systems, making the process of developing simpler and more understandable relative to a lower-level language.
... the amount of abstraction provided defines how "high-level" a programming language is.
... the idea of a language automatically translatable into machine code, but nearer to human logic, was introduced in computer science in the 1950s, especially thanks to the work of john backus (ibm), to whom it owes the first high-level language to have been widely circulated: fortran.

Tips for authoring fast-loading HTML pages - Learn web development
tips reduce page weight page weight is by far the most important factor in page-load performance.
...however, the fewer http requests and single image caching can help reduce page-load time.
... tables should use the css selector: property combination: table-layout: fixed; and should specify widths of columns using the <col> and the <colgroup> elements.
... <img href="./images/footerlogo.jpg" loading="lazy"> note that lazily-loaded images may not be available when the load event is fired.

-webkit-line-clamp - CSS: Cascading Style Sheets
the -webkit-line-clamp css property allows limiting of the contents of a block container to the specified number of lines.
... syntax /* keyword value */ -webkit-line-clamp: none; /* <integer> values */ -webkit-line-clamp: 3; -webkit-line-clamp: 10; /* global values */ -webkit-line-clamp: inherit; -webkit-line-clamp: initial; -webkit-line-clamp: unset; none this value specifies that the content wonʼt be clamped.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax none | <integer> examples truncating a paragraph html <p> in this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
...</p> css p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } result specifications specification status comment css overflow module level 3the definition of '-webkit-line-clamp' in that specification.

Providing Command-Line Options - Archive of obsolete content
using the example to use this sample code, save the commandline.js file into the components directory and add the following lines to your chrome.manifest file: component {2991c315-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-42cd-b33f-bfee4fcbf682} category command-line-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); components.utils.import("resource://gre/modules/services.jsm"); // changeme: to the chrome uri of your extension or application const chrome_uri = "chrome://myapp/...
...dlinehandler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c315-b871-42cd-b33f-bfee4fcbf682}'), // changeme: change the type in the contractid to be unique to your application contractid: "@mozilla.org/commandlinehandler/general-startup;1?type=myapp", _xpcom_categories: [{ category: "command-line-handler", // changeme: // category names are sorted alphabetically.
... typical command-line handlers use a // category that begins with the letter "m".

-moz-border-left-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-left-colors css property sets a list of colors for the left border.
... /* single <color> value */ -moz-border-left-colors: #f0f0f0; /* multiple <color> values */ -moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-left-colors: inherit; -moz-border-left-colors: initial; -moz-border-left-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in.
...<hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; } specifications this property is not part of any specification.

-ms-scroll-limit-x-max - Archive of obsolete content
the -ms-scroll-limit-x-max css property is a microsoft extension that specifies the maximum value for the element.scrollleft property.
... initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values auto the maximum value for the scrollleft property is equal to element.scrollwidth.
... the specified behavior of the -ms-scroll-limit-x-max property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.

-ms-scroll-limit-x-min - Archive of obsolete content
the -ms-scroll-limit-x-min css property is a microsoft extension that specifies the minimum value for the element.scrollleft property.
... initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <length> the minimum value for the scrollleft property.
... the specified behavior of the -ms-scroll-limit-x-min property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.

-ms-scroll-limit-y-max - Archive of obsolete content
the -ms-scroll-limit-y-max css property is a microsoft extension that specifies the maximum value for the element.scrolltop property.
... initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values auto the maximum value for the scrolltop property is equal to element.scrollheight.
... the specified behavior of the -ms-scroll-limit-y-max property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.

-ms-scroll-limit-y-min - Archive of obsolete content
the -ms-scroll-limit-y-min css property is a microsoft extension that specifies the minimum value for the element.scrolltop property.
... initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <length> the minimum value for the scrolltop property.
... the specified behavior of the -ms-scroll-limit-y-min property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.

:-moz-last-node - CSS: Cascading Style Sheets
the :-moz-last-node css pseudo-class is a mozilla extension that represents any element that is the last child node of some other element.
... 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.

::-webkit-meter-even-less-good-value - CSS: Cascading Style Sheets
the ::-webkit-meter-even-less-good-value gives a red color to a <meter> element when the value and the optimum attributes fall outside the low-high range, but in opposite zones.
... syntax ::-webkit-meter-even-less-good-value specifications not part of any standard.
... examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-even-less-good-value { background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77); height: 100%; box-sizing: border-box; } result ...

scroll-margin-left - CSS: Cascading Style Sheets
the scroll-margin-left property defines the left margin of the scroll snap area that is used for snapping this box to the snapport.
... syntax /* <length> values */ scroll-margin-left: 10px; scroll-margin-left: 1em; /* global values */ scroll-margin-left: inherit; scroll-margin-left: initial; scroll-margin-left: unset; values <length> an outset from the left edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.

scroll-padding-left - CSS: Cascading Style Sheets
the scroll-padding-left property defines offsets for the left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-padding-left: auto; /* <length> values */ scroll-padding-left: 10px; scroll-padding-left: 1em; scroll-padding-left: 10%; /* global values */ scroll-padding-left: inherit; scroll-padding-left: initial; scroll-padding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage.
...al valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.

table-layout - CSS: Cascading Style Sheets
the table-layout css property sets the algorithm used to lay out <table> cells, rows, and columns.
... syntax /* keyword values */ table-layout: auto; table-layout: fixed; /* global values */ table-layout: inherit; table-layout: initial; table-layout: unset; values auto by default, most browsers use an automatic table layout algorithm.
... html <table> <tr><td>ed</td><td>wood</td></tr> <tr><td>albert</td><td>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table> css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } result specifications specification status comment css level 2 (revision 1)the definition of 'table-layout' in that specification.

Accept-CH-Lifetime - HTTP
the accept-ch-lifetime header is set by the server to specify the persistence of accept-ch header value that specifies for which client hints headers client should include in subsequent requests.
...accept-ch and accept-ch-lifetime headers should be persisted for all secure requests to ensure client hints are sent reliably.
... syntax accept-ch-lifetime: <age> examples accept-ch: viewport-width, dpr accept-ch-lifetime: 86400 ...

Content-Length - HTTP
the content-length entity header indicates the size of the entity-body, in bytes, sent to the recipient.
... header type entity header forbidden header name yes syntax content-length: <length> directives <length> the length in decimal number of octets.
... specifications specification title rfc 7230, section 3.3.2: content-length hypertext transfer protocol (http/1.1): message syntax and routing ...

-ms-content-zoom-limit-max - Archive of obsolete content
the -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.
... initial value400%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe largest allowed zoom factor.

-ms-content-zoom-limit-min - Archive of obsolete content
the -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.
... initial value100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe smallest allowed zoom factor.

-ms-hyphenate-limit-zone - Archive of obsolete content
the -ms-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone.
... remarks the -ms-hyphenate-limit-zone property enables you to control the amount of trailing whitespace permitted during hyphenation.

A cool-looking box - Learn web development
in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
...your post should include: a descriptive title such as "assessment wanted for cool-looking box".

High-level guides - Web APIs
the high-level guides listed below introduce webrtc technology from a top-down perspective, describing the overall architecture, the life cycle of a webrtc connection, and basic security and technological issues you might run into as you explore and build web content or apps using the webrtc api.
... when you're ready to explore webrtc in more depth, be sure to take a look at our low-level guide to webrtc.

::-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-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet.
... syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) center no-repeat; } specifications not part of any standard.

:any-link - CSS: Cascading Style Sheets
the :any-link css pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
... /* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.

light-level - CSS: Cascading Style Sheets
the light-level css media feature can be used to test the ambient light level.
... @media (light-level: normal) { p { background: url("texture.jpg"); color: #333; } } @media (light-level: dim) { p { background: #222; color: #ccc; } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } } specifications specification status comment media queries level 5the definition of 'light-level' in that...

string-length - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the string-length function returns a number equal to the number of characters in a given string.
... syntax string-length( [string] ) arguments string(optional) the string to evaluate.

High-Level APIs - Archive of obsolete content
modules listed on this page implement high-level apis for building add-ons: creating user interfaces, interacting with the web, and interacting with the browser.

text-link - Archive of obsolete content
« xul reference home text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press.

-ms-hyphenate-limit-chars - Archive of obsolete content
the -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word.

:-moz-lwtheme-brighttext
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
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
the :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.

reader.parse-on-load.force-enabled
the preference reader.parse-on-load.force-enabled controls if the reader mode used in firefox mobile should be enabled independent of the memory available in the device.

<display-listitem> - CSS: Cascading Style Sheets
examples html <div class="fake-list">i will display as a list item</div> css .fake-list { display: list-item; list-style-position: inside; } result specifications specification status css display module level 3the definition of 'display-listitem' in that specification.

<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmetaelement the type of metadata provided by the meta element can be one of the following: if the name attribute is set, the meta element provides document-level metadata, applying to the whole page.

Index
2 an overview of nss internals api, intermediate, intro, nss, tools a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss).
... 199 nss tools nss newsgroup: mozilla.dev.tech.crypto 200 nss tools certutil certificates, x509v3 the certificate database tool is a command-line utility that can create and modify the netscape communicator cert8.db and key3.db database files.
... 201 nss tools certutil-tasks newsgroup: mozilla.dev.tech.crypto 202 nss tools cmsutil the cmsutil command-line utility uses the s/mime toolkit to perform basic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages.
...And 64 more matches

HTML documentation index - HTML: Hypertext Markup Language
4 block-level elements beginner, development, guide, html, html5, web html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
... by default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." this article helps to explain what this means.
... 6 date and time formats used in html date, element, format, html, iso 8601, input, reference, string, time, week, datetime, datetime-local, del, ins, month, month-year, week-year certain html elements use date and/or time values.
...And 40 more matches

Index - Web APIs
user-supplied code is run in the audioworkletglobalscope global execution context in a separate web audio rendering thread along with other nodes, allowing for zero-latency audio processing.
... 208 audioworkletnode.parameters api, audio, audioparam, audioworkletnode, experimental, property, reference, web audio api the read-only parameters property of the audioworkletnode interface returns the associated audioparammap — that is, a map-like collection of audioparam objects.
... 286 blob api, blob, file, file api, interface, raw, reference, data a blob object represents a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a readablestream so its methods can be used for processing the data.
...And 39 more matches

Index - Archive of obsolete content
40 high-level apis add-on sdk no summary!
... 68 low-level apis no summary!
... 70 chrome 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.
...And 33 more matches

Index
5 bundling multiple binary components binary xpcom components are sometimes required to implement low-level features for extensions.
... 61 xpconnect wrappers guide, needscontent, xpcom, xpcom:language bindings, xpconnect this document is a high-level overview of xpconnect wrapper objects (for the more technical description see xpconnect security membranes).
... 68 withjsmodulesandchrome moved to howto 69 xpcshell reference automated testing, developing mozilla, javascript, javascript:tools, tools, xpcom:language bindings, xpconnect the command-line syntax for xpcshell is: 70 xpcshell test manifest expressions qa, testing xpcshell unit tests are run by specifying them in a manifest file.
...And 25 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
4 alpn alpn, draft, glossary, needscontent, tls application-layer protocol negotiation (alpn) is a tls extension which indicates what application layer protocol is negotiating the encryped connection without requiring additional round trips.
... 7 arpa glossary, infrastructure .arpa (address and routing parameter area) is a top-level domain used for internet infrastructure purposes, especially reverse dns lookup (i.e., find the domain name for a given ip address).
... 20 application context codingscripting, glossary an application context is a top-level browsing context that has a manifest applied to it.
...And 19 more matches

ARIA Test Cases - Accessibility
markup used: role="alert" aria-labeledby notes: in the uiuc test example, the 'close' button cannot recieve focus.
...opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - slider single slider slider using in-line images for thumb dojo nightly build simple slider pretty slider mindtrove rating widget paciello group slider expected at behavior: the user can navigate to the slider control in all modes.
... window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - tree dojo nightly build simple tree -- uses document structure to create hierarchy tree - subtrees are encapsulated in treeitems ms ie8 tree example we need an example that uses aria-level, aria-setsize and aria-posinset to create the hierarchy we also need one that uses aria-owns to create the hierarchy / structure we need one that uses the document to create structure, but uses nested uls with links inside, and role="presentation" expected at behavior: if navigated to in a screen reader's virtual buffer, the label, role and previously active item of the tree should be ...
...And 18 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
one of the first things we learn about css is that some elements are block-level and some are inline-level.
... for example, an <h1> or a <p> are block-level by default, and a <span> is inline-level.
...the outer display type describes whether the element is block-level or inline-level.
...And 18 more matches

Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <div id="container"> <div class="group section"> <div id="preview" class="col span_12"> <div id="subject"> <div id="top-left" class="radius-container" data-x="left" data-y="top"> </div> <div id="top-right" class="radius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="radi...
...us-ui-sliders"> <div id="tlr" class="ui-input-slider" data-topic="top-left" data-unit=" px" data-sensivity="2"></div> <div id="tlw" class="ui-input-slider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></div> <div id="tlh" class="ui-input-slider" data-topic="top-left-h" data-unit=" px" data-sensivity="2"></div> <div id="trr" class="ui-input-slider" data-topic="top-right" data-unit=" px" data-sensivity="2"></div> <div id="trw" class="ui-input-slider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></div> <div id="trh" class...
...vity="2"></div> <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></div> <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" data-unit=" px" data-sensivity="2"></div> <div id="blr" class="ui-input-slider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></div> <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" data-unit=" px" data-sensivity="2"></div> <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" data-unit=" px" data-sensivity="2"></div> </div> ...
...And 15 more matches

The HTML autocomplete attribute - HTML: Hypertext Markup Language
"address-line1", "address-line2", "address-line3" each individual line of the street address.
... "address-level4" the finest-grained administrative level, in addresses which have four levels.
... "address-level3" the third administrative level, in addresses with at least three administrative levels.
...And 15 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="date" name="date"/> html5 datetime-local a control for entering a date and time, with no time zone.
... <input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email address.
... <input type="number" name="number"/> html5 password a single-line text field whose value is obscured.
...And 14 more matches

Getting started with HTML - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text.
... </textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textare...
... block versus inline elements there are two important categories of elements to know in html: block-level elements and inline elements.
...And 13 more matches

NSS tools : signtool
synopsis signtool [-k keyname] -h -h -l -l -m -v -w -g nickname -s size -b basename [[-c compression level] ] [[-d cert-dir] ] [[-i installer script] ] [[-m metafile] ] [[-x name] ] [[-f filename] ] [[-t|--token tokenname] ] [[-e extension] ] [[-o] ] [[-z] ] [[-x] ] [[--outfile] ] [[--verbose value] ] [[--norecurse] ] [[--leavearc] ] [[-j directory] ] [[-z jarfile] ] [[-o] ] [[-p password] ] [directory-tree] [archive] description the signing tool, signtool, creates digital signatures and uses a java archive (jar) file to associate the signatures with files in a directory.
...the directory to sign is always specified as the last command-line argument.
...for example, you can use it with the -l option to get detailed information about a particular signing certificate.
...And 13 more matches

XPCOM string functions
xpcom provides these low-level string functions to let you work with strings; however, it's often better to use one of the string classes rather than directly using these functions.
...this is a low-level api.ns_cstringclonedatathe ns_cstringclonedata function returns a null-terminated, heap allocated copy of the string's internal buffer.ns_cstringcontainerfinishthe ns_cstringcontainerfinish function releases any memory allocated by a nscstringcontainer instance.ns_cstringcontainerinitthe ns_cstringcontainerinit function initializes a nscstringcontainer instance for use as a nsacstring.ns_cstringcontainerinit2the ns_cstringcontainerinit2 function initializes a nscstringcontainer instance for use as a nsacstring.ns_cstringcopythe ns_cstringcopy function copies the value from one nsacstring instance to another.
... this is a low-level api.ns_cstringcutdatathe ns_cstringcutdata function removes a section of the string's internal buffer.
...And 13 more matches

Border-image generator - CSS: Cascading Style Sheets
id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name...
...=================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -mo...
...z-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-bt...
...And 13 more matches

WAI-ARIA basics - Learn web development
as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">.
... as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute.
... dynamic content updates: screenreaders tend to have difficulty with reporting constantly changing content; with aria we can use aria-live to inform screenreader users when an area of content is updated, e.g.
...And 12 more matches

L10n Checks
l10n checks is a python script and library similar to compare-locales.
...if you want to test the localization for de, run: check-l10n-completeness browser/locales/l10n.ini ../l10n/ de add-ons (xpi) mode l10n checks gathers the locales to compare from the chrome.manifest file inside the xpi file.
...if you want to test the localization for de, run: check-l10n-completeness -i xpi my-extension.xpi de to check all locales in an extension: check-l10n-completeness -i xpi my-extension.xpi language packs (xpis) mode l10n checks can compare two locales found in different xpi files.
...And 12 more matches

NSS tools : modutil
please contribute to the initial review in mozilla nss bug 836477[1] description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module information both within secmod.db files and within hardware tokens.
...use this option with the -libfile, -ciphers, and -mechanisms arguments.
... -list [modulename] display basic information about the contents of the secmod.db file.
...And 12 more matches

NSS tools : modutil
synopsis modutil [options] arguments description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module information both within secmod.db files and within hardware tokens.
...use this option with the -libfile, -ciphers, and -mechanisms arguments.
... -list [modulename] display basic information about the contents of the secmod.db file.
...And 12 more matches

ARIA live regions - Accessibility
including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using javascript.
... aria-live: the aria-live=politeness_setting is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive.
... normally, only aria-live="polite" is used.
...And 12 more matches

Using CSS gradients - CSS: Cascading Style Sheets
you can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.
... <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom.
... <div class="auto-spaced-linear-gradient"></div> div { width: 120px; height: 120px; } .auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } positioning color stops you don't have to leave your color stops at their default positions.
...And 12 more matches

context-menu - Archive of obsolete content
when a top-level item does not specify a context, the page context applies.
...each menu item you create in the top-level context menu can have a content script.
... context value if the item is contained in the top-level context menu, this declaratively specifies the context under which the item will appear; see specifying contexts above.
...And 11 more matches

NSS Tools modutil
using the security module database (modutil) newsgroup: mozilla.dev.tech.crypto the security module database tool is a command-line utility for managing pkcs #11 module information within secmod.db files or within hardware tokens.
... -list [modulename] display basic information about the contents of the secmod.db file.
...use this option with the -libfile, -ciphers, and -mechanisms arguments.
...And 11 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
lect: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, ...
...255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100...
...%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; bord...
...And 11 more matches

writing-mode - CSS: Cascading Style Sheets
this property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container.
... thus, it also determines the ordering of block-level content.
... syntax /* keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset; the writing-mode property is specified as one of the values listed below.
...And 11 more matches

HTML text fundamentals - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish.
... my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = c...
... playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">milk eggs bread hummus</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: ...
...And 10 more matches

The JavaScript input interpreter - Firefox Developer Tools
it has two modes: single-line entry and multi-line entry.
... single-line mode for single-line entry, you can type javascript expressions in the field at the bottom of the console log, at the >> prompt.
... to enter expressions in single-line mode, type at the prompt and press enter.
...And 10 more matches

Box-shadow generator - CSS: Cascading Style Sheets
efore"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div...
...> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> <div class="info"> <div class="input" data-topic="hue" data-title='h:' data-action="hsv"></div> <div class="input" data-topic="saturation" data-title='s:' data-action="hsv"></div> <div cl...
...eight" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height...
...And 10 more matches

CSS reference - CSS: Cascading Style Sheets
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.
... style rule examples strong { color: red; } div.menu-bar li:hover > ul { display: block; } for a beginner-level introduction to the syntax of selectors, see our guide on css selectors.
...And 10 more matches

content - CSS: Cascading Style Sheets
non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol.
...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> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = lea...
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>?
...And 10 more matches

HTTP Index - HTTP
found 277 pages: # page tags and summary 1 http http, hypertext, reference, tcp/ip, web, web development, l10n:priority hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as html.
...in http/1.x, there are several models: short-lived connections, persistent connections, and http pipelining.
... 38 using feature policy feature policy, feature-policy, http, reference, security, header feature policy allows you to control which origins can use which features, both in the top-level page and in embedded frames.
...And 10 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
please see //(german) http://interop.blog.de/2010/02/13/kapitel-1-ldap-anfragen-linux-ad-8001564/ //or search the net how to do it.
...nt1" ); defaultpref("mail.smtp.defaultserver", "smtp1" ); defaultpref("mail.smtpservers", "smtp1" ); // close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } test autoconfig debug to check that our autoconfig works fine, we just set to env variable to check the read of thunderbird.cfg file: $ export nspr_log_modules=mcd:5 $ export nspr_log_file=/tmp/thunderbird-log.txt when thunderbird has started, you should read: $ cat /tmp/thunderbird-log.txt -1209403040[808a788]: general.config.filename = thunderbird.cfg -1209403040[808a788]: evaluating .cfg file thunderbird.cfg with obscurevalue 0 clean then, to be sure to start with a fresh thunderbird account, don't do this if you already have one and want to preserve your emails and preferences!
... firefox 22 omni.jar archive file became omni.ja since http://blog.ffextensionguru.com/2011/11/16/omni-jar-to-become-omni-ja/ [root@localhost firefox]# unzip -l /usr/lib/firefox/browser/omni.ja | grep defaults/pr warning [/usr/lib/firefox/browser/omni.ja]: 3598815 extra bytes at beginning or within zipfile (attempting to process anyway) error [/usr/lib/firefox/browser/omni.ja]: reported length of central directory is -3598815 bytes too long (atari stzip zipfile?
...And 9 more matches

Localization content best practices
the string 'privacy-link' will be used as text for this link.
...the string 'privacy-link' will be used as text for this link.
...privacy-link = privacy terms file-wide comments should use the same format, they should be at the top of the file (after the license header) and just drop the (entity name/key) reference.
...And 9 more matches

NSS tools : certutil
name certutil — manage keys and certificate in both nss databases and other nss tokens synopsis certutil [options] [[arguments]] description the certificate database tool, certutil, is a command-line utility that can create and modify certificate and key databases.
... -l list all the certificates, or display information about a named certificate, in a certificate database.
...used with the -l command option.
...And 9 more matches

Recommended Drag Types - Web APIs
dragging links dragged hyperlinks should include data of two types: text/uri-list, and text/plain.
...for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-list type.
... note: the url type is uri-list with an i, not an l.
...And 9 more matches

background - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesas each of the properties of the shorthand:background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning areacomputed valueas each of the properties of the shorthand:bac...
...round-color: computed coloranimation typeas each of the properties of the shorthand:background-color: a colorbackground-image: discretebackground-clip: discretebackground-position: repeatable list of simple list of length, percentage, or calcbackground-size: repeatable list of simple list of length, percentage, or calcbackground-repeat: discretebackground-attachment: discrete formal syntax [ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> | <bg-position> [ / <bg-size> ]?
... | <repeat-style> | <attachment> | <box> | <box><final-bg-layer> = <'background-color'> | <bg-image> | <bg-position> [ / <bg-size> ]?
...And 9 more matches

StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times wh...
...*/ ntranscrtype = 7; } conversionswitch: switch (ntranscrtype) { case 0: /* both the source and the new stringview have a fixed-length encoding...
... */ awhole = new ftaview(noutptlen); for (var noutptidx = 0; noutptidx < noutptlen; awhole[noutptidx] = vsource[nstartidx + noutptidx++]); break conversionswitch; case 1: /* the source has a fixed-length encoding but the new stringview has a variable-length encoding...
...And 8 more matches

CSS3 - Archive of obsolete content
new pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not.
... pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line.
... the choice of language-specific glyphs via the css font-language-override property.
...And 8 more matches

Getting started with React - Learn web development
jsx extends javascript's syntax so that html-like code can live alongside it.
... setting up your first react app there are many ways to use react, but we're going to use the command-line interface (cli) tool create-react-app, as mentioned earlier, which expedites the process of developing a react application by installing some packages and creating some files for you, handling the tooling described above.
...its initial file structure looks like this: moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source c...
...And 8 more matches

Command line crash course - Learn web development
it provides direct access to the computer’s underlying file system and low-level features, and is therefore incredibly useful for performing complex tasks rapidly, if you know what you are doing.
...darwin is the unix-like system, which provides the terminal, and access to the low-level tools.
... windows has traditionally had its own terminal-like program called cmd (“the command prompt”) for a long time, but this definitely doesn’t have parity with unix commands, and is equivalent to the old-style windows dos prompt.
...And 8 more matches

Creating localizable web applications
don't forget about right-to-left locales.
...you can use one or more of the following techniques: http accept-language headers, the ua string, ip geolocation.
...good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the website.
...And 8 more matches

Coordinate systems - CSS: Cascading Style Sheets
on the web, the default origin is the top-left corner of a given context (with positive y-coordinate values being below the origin).
... note that this is unlike most mathematical models, where the origin is at the bottom-left corner, with positive y-coordinate values being above the origin.
... offset coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred.
...And 8 more matches

Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors.
... let's take as an example a three-level hierarchical menu made from several positioned divs.
... second-level and third-level divs appear when hovering or clicking on their parents.
...And 8 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomr...
...till accepted] -moz-column-rule [prefixed version still accepted] -moz-column-rule-width [prefixed version still accepted] -moz-column-rule-style [prefixed version still accepted] -moz-column-rule-color [prefixed version still accepted] -moz-context-properties f–m filter [applying to more than svg] -moz-font-feature-settings [prefixed version still accepted] -moz-font-language-override [prefixed version still accepted] -moz-hyphens [prefixed version still accepted] -moz-margin-end [superseded by the standard version margin-inline-end] -moz-margin-start [superseded by the standard version margin-inline-start] mask [applying to more than svg] o -moz-opacityobsolete since gecko 1.9.1 -moz-outlineobsolete since gecko 1.9.2 -moz-outline-colorob...
...dthobsolete since gecko 1.9.2 p -moz-padding-end [superseded by the standard version padding-inline-start] -moz-padding-start [superseded by the standard version padding-inline-end] -moz-perspective [prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixe...
...And 8 more matches

XUL Migration Guide - Archive of obsolete content
next, we'll look at some of the main tasks involved in migrating: working with content scripts using the sdk's supported apis how to go beyond the supported apis when necessary, by: using third party modules using the sdk's low-level apis getting direct access to xpcom finally, we'll walk through a simple example.
... if your add-on needs a lot of help from third party packages, low-level apis, or xpcom, then the cost of migrating is high, and may not be worth it at this point.
... by using the sdk's low-level apis you can directly modify the browser chrome.
...And 7 more matches

Appendix: What you should know about open-source software licenses - Archive of obsolete content
the table below shows a few well-known software titles and their licenses license representative software titles modified bsd freebsd, netbsd, openbsd mpl firefox, thunderbird (also triple-licensed mpl/lgpl/gpl) gpl linux kernel, gimp lgpl gtk+, openoffice.org modified bsd license this license permits free duplication, distribution, and modification provided that a copyright statement and liability disclaimer are included.
... modifications to bsd-licensed software can be published under commercial licenses or other different licenses.
... pros and cons the modified bsd license was originally created by the university of california at berkeley for distributing a unix-like operating system.
...And 7 more matches

Advanced form styling - Learn web development
<input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
... appearance: controlling os-level styling in the previous article we said that historically, styling of web form controls was largely taken from the underlying operating system, which is part of the problem with customizing the look of these controls.
... the appearance property was created as a way to control what os- or system-level styling was applied to web form controls.
...And 7 more matches

Beginning our React todo list - Learn web development
the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp stack-large"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
...an> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button...
...assname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-1" type="checkbox" /> <label classname="todo-label" htmlfor="todo-1"> sleep </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">sleep</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">sleep</span> ...
...And 7 more matches

Storage access policy: Block cookies from trackers
second, firefox uses an additional "entity list", which prevents domains from being classified as trackers when they are loaded on a top-level site owned by the same organization.
... browser caches: the http cache, the image cache, and the alternative services (alt-svc) cache are all partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.
... http connection reuse by domains classified as trackers is limited to requests that occur under the same top-level origin.
...And 7 more matches

certutil
synopsis certutil [options] arguments description the certificate database tool, certutil, is a command-line utility that can create and modify certificate and key database files.
... -l list all the certificates, or display information about a named certificate, in a certificate database.
... -l display detailed information when validating a certificate with the -v option.
...And 7 more matches

Rhino scopes and contexts
execution of scripts requires a scope for top-level script variable storage as well as a place to find standard objects like function and object.
... a top-level scope is created by calling context.initstandardobjects to create all the standard objects: scriptableobject scope = cx.initstandardobjects(); the easiest way to embed rhino is just to create a new scope this way whenever you need one.
... for a more concrete example, let's consider the following script: var g = 7; function f(a) { var v = 8; x = v + a; } f(6); we have a top-level variable g, and the call to f will create a new top-level variable x.
...And 7 more matches

prefix - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 7 more matches

background-image - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <bg-image>#where <bg-image> = none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 7 more matches

border-image-source - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 7 more matches

display - CSS: Cascading Style Sheets
keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout.
...it defines a block-level box.
... list item <display-listitem> the element generates a block box for the content and a separate list-item inline box.
...And 7 more matches

mask - CSS: Cascading Style Sheets
omposite: as specifiedanimation typeas each of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of length, percentage, or calcmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of length, percentage, or calcmask-composite: discretecreates stacking contextyes formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | padding-box | content-boxwhere <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-to...
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 7 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
one of the allowed methods: get head post apart from the headers automatically set by the user agent (for example, connection, user-agent, or the other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the ...
... note: webkit nightly and safari technology preview place additional restrictions on the values allowed in the accept, accept-language, and content-language headers.
...what values webkit/safari consider “nonstandard” is not documented, except in the following webkit bugs: require preflight for non-standard cors-safelisted request headers accept, accept-language, and content-language allow commas in accept, accept-language, and content-language request headers for simple cors switch to a blacklist model for restricted accept headers in simple cors requests no other browsers implement these extra restrictions, because they’re not part of the spec.
...And 7 more matches

HTTP Messages - HTTP
http requests, and responses, share similar structure and are composed of: a start-line describing the requests to be implemented, or its status of whether successful or a failure.
... this start-line is always a single line.
...the presence of the body and its size is specified by the start-line and http headers.
...And 7 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
cuments authored in xhtml strict or html strict will trigger the "standards" rendering mode, so we're going to go through two basic ways to address the problem in strict documents, and a number of ways to call on these "fixes." setting images to be blocks the first choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element.
...unfortunately, the buttons in the top cell are all now block-level and so end up stacked on top of one another instead of being shown side-by-side.
... one potential solution is to add a class to any image that needs to be block-level and then write the rule to match.
...And 6 more matches

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
mk_add_options moz_build_projects="xulrunner mccoy" mk_add_options moz_objdir=@topsrcdir@/../mccoybase # global options ac_add_options --enable-debug ac_add_options --disable-optimize # xulrunner options ac_add_app_options xulrunner --enable-application=xulrunner # mccoy options ac_add_app_options mccoy --enable-application=mccoy ac_add_app_options mccoy --with-libxul-sdk=../xulrunner/dist the first section tells mozilla what to build and where to put the resulting object files.
...you shouldn't have to change the value of --with-libxul-sdk if you are building your own xulrunner.
...mk_add_options moz_co_projects=browser mk_add_options moz_objdir=@topsrcdir@/../mccoybase # options for 'configure' (same as command-line options).
...And 6 more matches

TLD - MDN Web Docs Glossary: Definitions of Web-related terms
a tld (top-level domain) is the most generic domain in the internet's hierarchical dns (domain name system).
... consider an example internet address: https://developer.mozilla.org here org is the tld; mozilla.org is the second-level domain name; and developer is a subdomain name.
... iana today distinguishes the following groups of top-level domains: country-code top-level domains (cctld) two-character domains established for countries or territories.
...And 6 more matches

Handling different text directions - Learn web development
english or french) better than right-to-left languages (such as arabic).
... in recent years however, css has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as japanese) — these different directionalities are called writing modes.
... vertical-rl: right-to-left block flow direction.
...And 6 more matches

Pseudo-classes and pseudo-elements - Learn web development
the ::first-line pseudo-element selector will do this for you reliably — if the number of words increases and decreases it will still only select the first line.
... combining pseudo-classes and pseudo-elements if you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together.
... article p:first-child::first-line { font-size: 120%; font-weight: bold; } generating content with ::before and ::after there are a couple of special pseudo-elements, which are used along with the content property to insert content into your document using css.
...And 6 more matches

Starting our Svelte Todo list app - Learn web development
copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <div class="todoapp stack-large"> <!-- newtodo --> <form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done?
...an> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off"...
...pe="submit"> save <span class="visually-hidden">new name for create a svelte starter app</span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> create your first component </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">create your first component</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">create you...
...And 6 more matches

Localizing without a specialized tool
getting started with compare-locales you are going to need to create the structure of your localization, where, one-by-one, each of the files needing localization will be copied.
...you will use a tool called compare-locales to do the comparison between your locale's files and the en-us reference.
... first, install compare-locales.
...And 6 more matches

NSS Tools certutil
using the certificate database tool the certificate database tool is a command-line utility that can create and modify the netscape communicator cert8.db and key3.db database files.
... -l list all the certificates, or display information about a named certificate, in a certificate database.
... -l display detailed information when validating a certificate with the -v option.
...And 6 more matches

Detailed XPCOM hashtable guide
in these situations, an array, a linked-list, or various tree data structures are more efficient.
... mozilla's hashtable implementations mozilla has several hashtable implementations, which have been tested and, tuned, and hide the inner complexities of hashtable implementations: pldhash - low-level c api; stores keys and data in one large memory structure; uses the heap efficiently; client must declare an "entry class" and may not hold onto entry pointers.
... plhashtable - low-level c api; entry class pointers are constant; more efficient for large entry structures; often wastes memory making many small heap allocations.
...And 6 more matches

nsIBidiKeyboard
a user is a bidirectional writer if they have keyboard layouts in both left-to-right and right-to-left directions (that is users who use arabic, iranian (persian), or israel (hebrew) keyboard layout, beside an us (english) layout.) inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) method overview boolean islangrtl(); void setlangfrombidilevel(in pruint8 alevel); attributes attribute type description havebidikeyboards boolean indicates whether or not the system has at least one keyboard for each direction (left-to-right and right...
...-to-left) installed.
... methods islangrtl() determines if the current keyboard language is right-to-left.
...And 6 more matches

Drag Operations - Web APIs
for instance, a drop target that accepts links would check for the type text/uri-list.
... const dt = event.datatransfer; dt.setdata("application/x.bookmark", bookmarkstring); dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); here, data is added in three different types.
... note that both the text/uri-list and text/plain contain the same data in this example.
...And 6 more matches

ARIA: Region role - Accessibility
<div role="region" aria-label="example"> <!-- region content --> </div> description the region role is an aria landmark role.
... every element with a region role should include a label that describes the purpose of the content in the region, preferably with an aria-labelledby referencing a visible header.
... if no visible appropriate header is present, aria-label should be used..
...And 6 more matches

-webkit-box-reflect - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

additive-symbols - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

negative - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

pad - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

suffix - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

symbols - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on.
...the writing-mode property can have values of: horizontal-tb vertical-rl vertical-lr sideways-rl sideways-lr the value horizontal-tb is the default for text on the web.
... 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> <div class="item5">item 5</div> </div> if we add writing-mode: vertical-lr to the grid container, we can see that the block and inline axis are now running in a different direction.
...And 6 more matches

Visual formatting model - CSS: Cascading Style Sheets
note however that block boxes, block-level boxes and box containers are all subtly different; see the block boxes section below for more details.
... normal flow in css, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes.
... the interactions between block-level and inline-level boxes are described in the mdn documentation for display.
...And 6 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
der-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-font-size-delta -webkit-font-smoothing -webkit-highlight -webkit-hyphenate-character ...
... -webkit-hyphenate-limit-after -webkit-hyphenate-limit-before -webkit-hyphenate-limit-lines -webkit-initial-letter l -webkit-line-align -webkit-line-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-sour...
...ce -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -...
...And 6 more matches

border-radius - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius syntax /* the syntax of the first radius allows one to four values */ /* radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-le...
...ft | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* the syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is specified as: one, two, three, or four <length> or <percentage> values.
... top-left-and-bottom-right is a <length> or a <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box.
...And 6 more matches

mask-border-source - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

mask-image - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

shape-outside - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <length-percentage> = <length> | <percentage><shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches

touch-action - CSS: Cascading Style Sheets
/* keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser.
...this means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants.
... syntax the touch-action property may be specified as either: one of the keywords auto, none, manipulation, or one of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.
...And 6 more matches

Source code directories overview - Archive of obsolete content
xpidl files have their own mini-language and processing tools.
... db contains c code for the mdb/mork database which is a low-level, general-purpose and cross-platform file library.
... embedding contains c interfaces and code for generic high-level browser functions (e.g.
...And 5 more matches

Theme changes in Firefox 2 - Archive of obsolete content
global/inactivetab-left.png removed file.
... global/tab-left.png new file; the left edge of a tab.
...o-button #search-container[chromedir="rtl"] .searchbar-engine-button .search-go-button .search-go-button:hover .search-go-button:hover:active .search-go-button[disabled="true"] .searchbar-engine-button .searchbar-engine-button:hover .searchbar-engine-button[addengines="true"] .searchbar-engine-button[open="true"] .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text .searchbar-left you may of course wish to make changes to other styles as well.
...And 5 more matches

CSS - Archive of obsolete content
obsolete css features -moz-bindingthe -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element.-moz-border-bottom-colorsin mozilla applications like firefox, the -moz-border-bottom-colors css property sets a list of colors for the bottom border.-moz-border-left-colorsin mozilla applications like firefox, the -moz-border-left-colors css property sets a list of colors for the left border.-moz-border-right-colorsin mozilla applications like firefox, the -moz-border-right-colors css property sets a list of colors for the right border.-moz-border-top-colorsin mozilla applications like firefox, the -moz-border-top-colors css property sets a list of colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property.
...ether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.-ms-content-zoom-limit-maxthe -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.-ms-content-zoom-limit-minthe -ms-content-zoom-limit-min css property...
...ntothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word.
...And 5 more matches

HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"...
...you can also see some good and bad examples at good-links.html and bad-links.html.
...r.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="the mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">the mozilla red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image".
...And 5 more matches

HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"...
...you can also see some good and bad examples at good-links.html and bad-links.html.
...r.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="the mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">the mozilla red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image".
...And 5 more matches

Legacy layout methods - Learn web development
layout and grid systems before css grid layout it may seem surprising to anyone coming from a design background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs.
... note: you can see this example running at 0_two-column-layout.html (see also the source code).
... our next step is to create a rule for the class .col, floating it left, giving it a margin-left of 20 pixels to form the gutter, and a width of 60 pixels.
...And 5 more matches

Fundamental text and font styling - Learn web development
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.
...this has many values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you'll rarely use any of them except for normal and bold: normal, bold: normal and bold font weight lighter, bolder: sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.
...also note that text-decoration is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color.
...And 5 more matches

Useful string methods - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', 'a happy christmas to all the family', 'you\'re...
...ng what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.add...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.length; i++) { let input = cities[i]; // write your code just b...
...And 5 more matches

Redis Tips
if you have not, here is a fantastic on-line, interactive redis tutorial: http://try.redis.io/ for reference later on, you'll want the source of all things redis: https://redis.io you'll want to run a redis-server on your machine, and use the redis-cli at the command-line for hacking.
... > var r = require('redis').createclient(); // and i'll define these utility functions just for this example > function now() { return (new date()).gettime() / 1000 } > function print(err, results) { console.log(json.stringify(results, null, 2)) } whenever someone logs into my site, i record them in my 'last-login' zset.
... i'll simulate some logins like so: > r.zadd('last-login', now(), 'lloyd'); > r.zadd('last-login', now(), 'jparsons'); > r.zadd('last-login', now(), 'zarter'); > r.zadd('last-login', now(), 'lloyd'); // he logged in again!
...And 5 more matches

Drawing and Event Handling - Plugins
//the npwindow structure typedef enum { npwindowtypewindow = 1, npwindowtypedrawable } npwindowtype; typedef struct _npwindow { void* window; /* platform-specific handle */ uint32 x; /* position of top-left corner */ uint32 y; /* relative to a netscape page */ uint32 width; /* maximum window size */ uint32 height; nprect cliprect; /* clipping rectangle in port coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* whether this is a window or a drawable */ } npwindow; the window para...
... the x and y fields specify the top-left corner of the plug-in relative to the page.
... the cliprect field defines the clipping rectangle of the plug-in in a coordinate system where the origin is the top-left corner of the drawable or window.
...And 5 more matches

ARIA: figure role - Accessibility
<div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption.
...you could add an id to an element containing content that describes the figure, and then reference that id inside an appropriate attribute on the figure to associate the figure with the label: <div role="figure" aria-labelledby="figure-1"> ...
... <p id="figure-1">text that describes the figure.</p> </div> use aria-labelledby when the text is a concise label.
...And 5 more matches

ARIA: Navigation Role - Accessibility
<div role="navigation" aria-label="main"> <!-- list of links to main website locations --> </div> this is a website's main navigation.
... associated wai-aria roles, states, and properties aria-label a brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label.
... examples <div role="navigation" aria-label="customer service"> <ul> <li><a href="#">help</a></li> <li><a href="#">order tracking</li> <li><a href="#">shipping &amp; delivery</a></li> <li><a href="#">returns</a></li> <li><a href="#">contact us</a></li> <li><a href="#">find a store</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
...And 5 more matches

ARIA: textbox role - Accessibility
whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
...to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true".
... <!-- simple text input field --> <div id="txtboxlabel">enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features.
...And 5 more matches

Accessibility documentation index - Accessibility
11 multipart labels: using aria for labels with embedded fields inside them aria, accessibility, ben millard, firefox, guide, help, html, html 4, jaws, needscontent, aria-labelledby, label, solution, trouble shoot, troubleshoot the solution is in an aria attribute called aria-labelledby.
...this is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
... 21 using the aria-label attribute aria, accessibility, codingscripting, html, needscontent, reference, référence(2), agent, aria-label, user, useragent the aria-label attribute is used to define a string that labels the current element.
...And 5 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
the inline direction therefore runs horizontally — left to right — and margin-inline-start would be equivalent to margin-left.
... if you were using a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top.
... border-block-start-color border-top-color border-block-start-style border-top-style border-block-start-width border-top-width border-inline-end border-right border-inline-end-color border-right-color border-inline-end-style border-right-style border-inline-end-width border-right-width border-inline-start border-left border-inline-start-color border-left-color border-inline-start-style border-left-style border-inline-start-width border-left-width border-start-start-radius border-top-left-radius border-start-end-radius border-bottom-left-radius border-end-start-radius border-top-right-radius border-end-end-radius border-bott...
...And 5 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
borderless-attachment div{ color: black; -moz-appearance: borderless-attachment; -webkit-appearance: borderless-attachment; } <div>lorem</div> safari button-bevel div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; } <div>lorem</div> firefox chrome safari edge caps-lock-indicator div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; } <div>lorem</div> safari edge caret div { color: black; -moz-appearance: caret; -webkit-appearance: caret; } <div>lorem</div> firefox chrome safari edge checkbox-container div { col...
... checkbox-label div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>lorem</div> firefox checkmenuitem div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>lorem</div> firefox color-well div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } ...
... <div>lorem</div> safari input type=color continuous-capacity-level-indicator div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; } <div>lorem</div> safari default-button div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; } <div>lorem</div> safari edge discrete-capacity-level-indicator div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; } <div>lorem</div> safari inner-spin-button div{ color: black; -webkit-appearance: inner-spin-but...
...And 5 more matches

cross-fade() - CSS: Cascading Style Sheets
)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 5 more matches

<input type="tel"> - HTML: Hypertext Markup Language
y"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the pattern attribute, which takes as its value a regular expression that entered values have to ma...
..."telno" name="telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted.
... each input has a placeholder attribute to show a hint to sighted users about what to enter into it, a pattern to enforce a specific number of characters for the desired section, and an aria-label attribute to contain a hint to be read out to screenreader users about what to enter into it.
...And 5 more matches

Evolution of HTTP - HTTP
developed by tim berners-lee and his team between 1989-1991, http has seen many changes, keeping most of the simplicity and further shaping its flexibility.
... invention of the world wide web in 1989, while he was working at cern, tim berners-lee wrote a proposal to build a hypertext system over the internet.
...on august 6th 1991, tim berners-lee's post on the public alt.hypertext newsgroup is now considered as the official start of the world wide web as a public project.
...And 5 more matches

cfx - Archive of obsolete content
--logfile=logfile log console output to the file specified by logfile.
... --logfile=logfile log console output to the file specified by logfile.
... the --update-link and --update-url options simplify this process.
...And 4 more matches

Signing an XPI - Archive of obsolete content
you can either set this permanently via control panel->system properties->advanced->environment variables->system variables or do it each time you run the tools from the command-line (preferably using a batch file).
...-l mytestcert u,u,cu prepare xpi file for signing create a new folder just for signing, copy your existing xpi into it, unzip* it (maintaining paths), delete the xpi and return to the certificate-database folder.
...-i "certum level iii ca.cer" c:\projects\codesigning> certutil -l -d .
...And 4 more matches

The box model - Learn web development
below this, we have a block-level paragraph, inside which are two <span> elements.
...the inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.
... we can control all margins of an element at once using the margin property, or each side individually using the equivalent longhand properties: margin-top margin-right margin-bottom margin-left in the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element.
...And 4 more matches

Client-Server Overview - Learn web development
-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1471911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get).
... it can accept the specified set of characters (accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7) and languages (accept-language: de,en;q=0.7,en-us;q=0.3).
... the head also tells us how big it is (content-length: 41823).
...And 4 more matches

Ember interactivity: Events, classes and state - Learn web development
add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax.
... storing todos with a service ember has built-in application-level state management that we can use to manage the storage of our todos and allow each of our components to access data from that application-level state.
... run this terminal command to generate a service for us to store our todo-list data in: ember generate service todo-data this should give you a terminal output like so: installing service create app/services/todo-data.js installing service-test create tests/unit/services/todo-data-test.js this creates a todo-data.js file inside the todomvc/app/services directory to contain our service, which initially contains an import statement and an empty class: import service from '@ember/service'; export default class tododataservice extends service { } first of all, we want to define what a todo is.
...And 4 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
the state of our component will be represented by these three top-level variables.
...replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> ...
... reactive todos as we've already seen, every time the value of a component top-level variable is modified svelte knows how to update the ui.
...And 4 more matches

Styling Vue components with CSS - Learn web development
text-transform: capitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hi...
...dden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto;...
... </label> </h2> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" v-model.lazy.trim="label" class="input__lg" /> <button type="submit" class="btn btn__primary btn__lg"> add </button> </form> </template> let's also add the stack-large class to the <ul> tag in our app.vue file.
...And 4 more matches

Performance
scroll-linked effects information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
... profiling and performance tools profiling with the developer tools profiler the profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and gc profiling, and flame graphs.
... tools/power/rapl (mac, linux) tools/power/rapl is a command-line utility in the mozilla codebase that uses the intel rapl interface to gather direct power estimates for the package, cores, gpu and memory.
...And 4 more matches

NSS API Guidelines
some of the guidelines in this document, are more forward-looking than documentary.
...the layering section explains how the nss code is layered, and how higher-level functions wrap low-level functions.
...in addition, some low-level apis may be completely opaque to higher level layers.
...And 4 more matches

gtstd.html
ssl is built on top of nspr, which handles sockets, threads, and related low-level os operations.
... you can use the security module database tool, a command-line utility that comes with nss, to manage pkcs #11 module information within secmod.db files.
... for complete information about the command-line options used in the examples that follow, see using the certificate database tool.
...And 4 more matches

NSS Tools crlutil
using the certificate revocation list management tool newsgroup: mozilla.dev.tech.crypto the certificate revocation list (crl) management tool is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... -i import a crl to the cert database -e erase all crls of specified type from the cert database -l list existing crl located in cert database file.
... -l algorithm-name specify a specific signature algorithm.
...And 4 more matches

SpiderMonkey Build Documentation
if --enable-nspr-build does not work, explicitly tell configure where to find nspr using the --with-nspr-cflags and --with-nspr-libs configure options.
... for example, assuming your local nspr has been installed to c:/mozilla-build/msys/local: /bin/sh ../configure.in --with-nspr-cflags="-ic:/mozilla-build/msys/local/include" \ --with-nspr-libs="c:/mozilla-build/msys/local/lib/libnspr4.a \ c:/mozilla-build/msys/local/lib/libplds4.a \ c:/mozilla-build/msys/local/lib/libplc4.a" if you get symbol loading or dynamic library errors, you can force the correct nspr to load with: path="$path;c:/mozilla-build/msys/local/lib/" ./js specifying installation directories make install puts files in the following directories by default.
... you can override this by passing options to the configure script: what it is where it gets put configure option executables, shell scripts /usr/local/bin --bindir libraries, data /usr/local/lib --libdir architecture-independent data /usr/local/share --sharedir c header files /usr/local/include --includedir for convenience, you can pass the configure script an option of the form --prefix=<prefixdir>, which substitutes <prefixdir> for /usr/local in all the settings above, in one step.
...And 4 more matches

ARIA: form role - Accessibility
<div role="form" id="contact-info" aria-label="contact information"> <!-- form content --> </div> this is a form that collects and saves a user's contact information.
...aria-labelledby, aria-label or title).
... examples <div role="form" id="send-comment" aria-label="add a comment"> <label for="username">username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="comment">comment</label> <textarea id="comment" name="comment"></...
...And 4 more matches

ARIA: img role - Accessibility
<div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
... therefore, provide a comprehensive overall descriptive alt text for image, either in the surrounding text, or by using an aria-label attribute, with optional alt attributes for search engines or sighted users to be written to the page should an image fail: <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> if you wish to add a caption or label to your image that is visible on the page, you can do using: aria-labelledby when the text is a concis...
... for example: <div role="img" aria-labelledby="image-1"> ...
...And 4 more matches

ARIA: dialog role - Accessibility
<div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology identify the dialog's content as being grouped an...
...the best way to achieve this is by using the aria-labelledby attribute to the role="dialog" element.
...this approach is shown in the code snippet below: <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> keep in mind that a dialog's title and description text do not have to be focusable in order to be perceived by screen readers operating in a non-virtual mode.
...And 4 more matches

ARIA: heading role - Accessibility
<div role="heading" aria-level="1">this is a main page heading</div> this defines the text in the div to be the main heading of the page, indicated by being level 1 via the aria-level attribute.
... associated wai-aria roles, states, and properties aria-level the aria-level attribute specifies the heading level in the document structure.
...in that case, the newly-added headings need aria-level attributes whose values are consistent with the rest of the document structure.
...And 4 more matches

Text labels and names - Accessibility
a dialog box is generally denoted by an aria role="dialog" or role="alertdialog"; you can use the aria-label or aria-labelledby attributes to provide a label.
... examples the following example shows a simple dialog box, defined as such using role="dialog" and labelled using aria-labelledby.
... <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> if the dialog box doesn't have a heading, you can instead use aria-label to contain the label text: <div role="dialog" aria-label="personal details updated confirmation"> <p>your personal details were successfully updated.
...And 4 more matches

Color picker tool - CSS: Cascading Style Sheets
.picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, ...
...255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100...
...%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; flo...
...And 4 more matches

font-variant - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric syntax font-variant: small-caps; font-variant: common-ligatures small-caps; /* global values */ font-variant: inherit; font-variant: initial; font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal.
... longhand properties of font-variant are: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.
... none sets the value of the font-variant-ligatures to none and the values of the other longhand property as normal, their initial value.
...And 4 more matches

mix-blend-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; /* global values */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; values <blend-mode> the blending mode that should be applied.
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> ...
...s="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> hard-light <div class="container hard-light"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ell...
...And 4 more matches

<input type="search"> - HTML: Hypertext Markup Language
the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval.
... if that isn't enough, you can use an aria-label attribute on the <input> itself.
... let's have a look at an example: <form role="search"> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." aria-label="search through site content"> <button>search</button> </div> </form> you can see how this is rendered below: there is no visual difference from the previous example, but screenreader users have way more information available to them.
...And 4 more matches

<input type="text"> - HTML: Hypertext Markup Language
<input> elements of type text create basic single-line text fields.
... using text inputs <input> elements of type text create basic, single-line inputs.
... you should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a date, url, email, or search term, you've got better options available).
...And 4 more matches

Inline elements - HTML: Hypertext Markup Language
html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
...in this article, we'll examine html inline-level elements and how they differ from block-level elements.
...block-level elements: a demonstration this is most easily demonstrated with a simple example.
...And 4 more matches

Feature-Policy - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
...And 4 more matches

Function.prototype.apply() - JavaScript
the apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).
... argsarray optional an array-like object, specifying the arguments with which func should be called, or null or undefined if no arguments should be provided to the function.
... starting with ecmascript 5 these arguments can be a generic array-like object instead of an array.
...And 4 more matches

Performance fundamentals - Web Performance
high-level declarative languages), or use low-level imperative interfaces offered by the <canvas> element (which includes webgl).
... html and css greatly increase productivity, sometimes at the expense of framerate or pixel-level control over rendering.
... text and images reflow automatically, ui elements automatically receive the system theme, and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages.
...And 4 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
... value: see css display; animatable: yes dominant-baseline it defines the baseline used to align the box’s text and inline-level contents.
... value: <opacity-value>; animatable: yes overflow specifies whether the content of a block-level element is clipped when it overflows the element's box.
...And 4 more matches

Fills and Strokes - SVG: Scalable Vector Graphics
<?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the width of this stroke.
... the second attribute affecting strokes is the stroke-linecap property, demonstrated above.
... there are three possible values for stroke-linecap: butt closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.
...And 4 more matches

Anonymous Content - Archive of obsolete content
explicit content is said to be at the document-level scope.
... anonymous content nodes are in their own binding-level scopes.
...if invoked on an element at the document-level scope, it returns null.
...And 3 more matches

How CSS is structured - Learn web development
there are also other shorthand types, for example 2-value shorthands, which set padding/margin for top/bottom, then left/right */ padding: 10px 15px 15px 5px; is equivalent to these four lines of code: padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; this one line: background: red url(bg-graphic.png) 10px 10px repeat-x fixed; is equivalent to these five lines: background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed; later in the course, you will encounter many other examples of shorthand properties.
...on large screen or window, we increase the font size for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* handle specific elements nested in the dom */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } "commenting out" code is also useful for temporarily disabling sections of code for testing.
... body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format.
...And 3 more matches

Client-side form validation - Learn web development
input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } div { margin-bottom: 10px; } here is the example running live: note: you can find this example live on github as fruit-length.html (see also the source code.) note: <input type="number"> (and other types, such as range and date) can also take a step attribute, which specifies what increment the value will go up or down by when the input controls are used (such as the up and down number buttons).
...first, some html: <form> <p> <fieldset> <legend>do you have a driver's license?<abbr title="this field is mandatory" aria-label="required">*</abbr></legend> <!-- while only one radio button in a same-named group can be selected at a time, and therefore only one radio button in a same-named group having the "required" attribute suffices in making a selection a requirement --> <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">yes</label> <input type="radio" required name="driv...
... its usage here acts only as a fallback --> <input type="number" min="12" max="120" step="1" id="n1" name="age" pattern="\d+"> </p> <p> <label for="t1">what's your favorite fruit?<abbr title="this field is mandatory" aria-label="required">*</abbr></label> <input type="text" id="t1" name="fruit" list="l1" required pattern="[bb]anana|[cc]herry|[aa]pple|[ss]trawberry|[ll]emon|[oo]range"> <datalist id="l1"> <option>banana</option> <option>cherry</option> <option>apple</option> <option>strawberry</option> <option>lemon</option> <option>orange</option> </datalist>...
...And 3 more matches

Your first form - Learn web development
the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
... the <label>, <input>, and <textarea> elements our contact form is not complex: the data entry portion contains three text fields, each with a corresponding <label>: the input field for the name is a single-line text field.
... the input field for the e-mail is an input of type email: a single-line text field that accepts only e-mail addresses.
...And 3 more matches

Advanced text formatting - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together.
...a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = texta...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> <p>hello and welcome to my motivation page.
...And 3 more matches

Index - Learn web development
at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology, keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow.
... 104 a cool-looking box assessment, beginner, css, learn, backgrounds, borders, box, box model, effects in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
... beginner, css, introduction to css, learn, modules, specifications, syntax css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
...And 3 more matches

Drawing graphics - Learn web development
parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image itself.
... parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image, relative to the top-left corner of the canvas.
...add the following code inside your for loop: ctx.fillstyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; ctx.beginpath(); ctx.moveto(moveoffset, moveoffset); ctx.lineto(moveoffset+length, moveoffset); let triheight = length/2 * math.tan(degtorad(60)); ctx.lineto(moveoffset+(length/2), moveoffset+triheight); ctx.lineto(moveoffset, moveoffset); ctx.fill(); length--; moveoffset += 0.7; ctx.rotate(degtorad(5)); so on each iteration, we: set the fills...
...And 3 more matches

Ember app structure and componentization - Learn web development
to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out.
...update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" ...
... class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer">...
...And 3 more matches

Componentizing our React app - Learn web development
go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> ); } no...
...your <ul> should read like this: <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <todo /> <todo /> <todo /> </ul> when you look back at your browser, you'll notice something unfortunate: your list now repeats the first task three times!
... putting all that together, your todo() function should read like this: export default function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">{props.name}</span> </button> <...
...And 3 more matches

Componentizing our Svelte app - Learn web development
put the following contents inside this file: <script> export let todo </script> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={() => alert('not implemented')}> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> now we need to import our todo comp...
... update the {#each} block inside todos.svelte like so: <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each filtertodos(filter, todos) as todo (todo.id)} <li class="todo"> <todo {todo} /> </li> {:else} <li>nothing to do here!</li> {/each} </ul> the list of todos is displayed on the page, and the checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our ...
... {:else} <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" on:click={ontoggle} checked={todo.completed} > <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn" on:click={onedit}> edit<span class="visually-hidden"> {todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={onremove}> delete<span class="visually-hidden"> {todo.name}</span> </button> </div> {/if} </div> it is worth noting that: when the u...
...And 3 more matches

Bootstrapping a new locale
l10n documentation has moved to https://mozilla-l10n.github.io/localizer-documentation/ .
... install the compare-locales utility the next step is to install compare-locales.
... $ sudo easy_install compare-locales this will download and install the utility.
...And 3 more matches

NSS tools : pk12util
nss tools : pk12util name pk12util — export and import keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file|-l p12file|-o p12file] [-d [sql:]directory] [-h tokenname] [-p dbprefix] [-r] [-v] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12.
... -l p12file list the keys and certificates in pkcs#12 file.
... -m | --key-len keylength specify the desired length of the symmetric key to be used to encrypt the private key.
...And 3 more matches

NSS tools : ssltab
name ssltap — tap into ssl connections and display the data going by synopsis libssltap [-vhfsxl] [-p port] [hostname:port] description the ssl debugging tool ssltap is an ssl-aware command-line proxy.
...-l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete.
...to make the tool continue to accept connections, switch on looping mode with the -l option.
...And 3 more matches

NSS tools : ssltap
name ssltap — tap into ssl connections and display the data going by synopsis libssltap [-vhfsxl] [-p port] [hostname:port] description the ssl debugging tool ssltap is an ssl-aware command-line proxy.
...-l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete.
...to make the tool continue to accept connections, switch on looping mode with the -l option.
...And 3 more matches

NSS Tools ssltap
using the ssl debugging tool (ssltap) newsgroup: mozilla.dev.tech.crypto the ssl debugging tool is an ssl-aware command-line proxy.
... -l turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete.
...to make the tool continue to accept connections, switch on looping mode with the -l option.
...And 3 more matches

NSS tools : pk12util
name pk12util — export and import keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file [-h tokenname] [-v] [common-options] ] [ -l p12file [-h tokenname] [-r] [common-options] ] [ -o p12file -n certname [-c keycipher] [-c certcipher] [-m|--key_len keylen] [-n|--cert_key_len certkeylen] [common-options] ] [ common-options are: [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] ] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12.
... -l p12file list the keys and certificates in pkcs#12 file.
... -m | --key-len keylength specify the desired length of the symmetric key to be used to encrypt the private key.
...And 3 more matches

NSS tools : ssltap
name ssltap — tap into ssl connections and display the data going by synopsis libssltap [-vhfsxl] [-p port] [hostname:port] description the ssl debugging tool ssltap is an ssl-aware command-line proxy.
... -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete.
...to make the tool continue to accept connections, switch on looping mode with the -l option.
...And 3 more matches

Index
111 jsgetobjectops jsapi reference, obsolete, spidermonkey jsobjectops is used by js_newobject's internals to discover the set of high-level object operations to use for new objects of the given class.
... 152 jsruntime jsapi reference, needscontent, needsupdate, spidermonkey in the jsapi, jsruntime is the top-level object that represents an instance of the javascript engine.
... 194 js_cstringsareutf8 jsapi reference, obsolete, spidermonkey by default, all c/c++ strings passed into the jsapi are treated as iso/iec 8859-1, also known as iso-latin-1.
...And 3 more matches

XPCOM glue
components using internal linkage will have shared-library dependencies against non-frozen symbols in the xpcom libraries, and will not work with any other versions of xpcom other than the one it was compiled against.
... linking strategy: dependent glue standalone glue compiler flags: cross-platform #include "xpcom-config.h" #include "xpcom-config.h" #define xpcom_glue windows /fi "xpcom-config.h" linux -include "xpcom-config.h" linker flags: windows for older versions of the firefox sdk: -libpath:c:/path/to/sdk/lib xpcomglue_s.lib xpcom.lib nspr4.lib for recent versions of the firefox sdk (at least version 42, but possibly earlier versions as well): -libpath:c/path/to/sdk/lib xpcomglue_s.lib xul.lib nss3.lib mozcrt.lib -libpath:c:/path/to/sdk/lib xpcomglue.lib mac -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-executable-path,/path/to/sdk/bin -lxpcomglu...
...e_s -lxpcom -lnspr4 when building against a xulrunner derived sdk, use: -l/path/to/sdk/lib -l/path/to/xulrunner-bin -wl,-executable_path,/path/to/xulrunner-bin -lxpcomglue_s -lxpcom -lnspr4 where 'xulrunner-bin' is either /library/frameworks/xul.framework/versions/current/ or /path/to/xulrunner-build/[platform]/dist/bin -l/path/to/sdk/lib -lxpcomglue linux -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-rpath-link,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr4 write it exactly as stated, see notes.
...And 3 more matches

nsICommandLine
preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example).
... methods findflag() finds a command-line flag, returning its position on the command line.
... return value the position of the flag in the command line, or -1 if the flag is not found.getargument() gets the value an argument from the array of command-line arguments, given the index into the argument list.
...And 3 more matches

WebGL best practices - Web APIs
take advantage of universally supported webgl 1 extensions these webgl 1 extensions are universally supported: angle_instanced_arrays ext_blend_minmax oes_element_index_uint oes_standard_derivatives oes_vertex_array_object webgl_debug_renderer_info webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low.
... batch draw calls (prefer fewer-but-larger draw calls) fewer, larger draw operations will generally improve performance.
... instead of: function compileonce(gl, shader) { if (shader.compiled) return; gl.compileshader(shader); shader.compiled = true; } for (const [vs, fs, prog] of programs) { compileonce(gl, vs); compileonce(gl, fs); gl.linkprogram(prog); if (!gl.getprogramparameter(prog, gl.link_status)) { console.error('link failed: ' + gl.getprograminfolog(prog)); console.error('vs info-log: ' + gl.getshaderinfolog(vs)); console.error('fs info-log: ' + gl.getshaderinfolog(fs)); } } consider: function compileonce(gl, shader) { if (shader.compiled) return; gl.compileshader(shader); shader.compiled = true; } for (const [vs, fs, prog] of programs) { compileonce(gl, vs); compileonce(gl, fs); } for (const [vs, fs, prog] of programs) { gl.linkprogram(prog); } for (co...
...And 3 more matches

ARIA: feed role - Accessibility
another feature of the feed pattern is skim reading: articles within a feed can contain both an accessible name with the aria-label and a description with an aria-describedby, suggesting to screen readers which elements to speak after the label when navigating by article.
... wai-aria roles, states, and properties aria-labelled if the feed has no visible title, the feed element has a label specified with aria-label.
... if it does, see aria-labelledby.
...And 3 more matches

ARIA: grid role - Accessibility
<table role="grid" aria-labelledby="id-select-your-seat"> <caption id="id-select-your-seat">select your seat</caption> <tbody role="presentation"> <tr role="presentation"> <td></td> <th>row a</th> <th>row b</th> </tr> <tr> <th scope="row">aisle 1</th> <td tabindex="0"> <button id="1a" tabindex="-1">1a</button> </td> <td tabindex="-1"> <button id="1b" tabindex="-1">1b</button> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tab...
... states and properties aria-level indicates the hierarchical level of the grid within other structures.
... examples calendar example html <table role="grid" aria-labelledby="calendarheader" aria-readonly=true> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-label="wednesday">w</th> ...
...And 3 more matches

ARIA: listbox role - Accessibility
aria-label a human-readable string value which identifies the listbox.
... if there's a visible label, then aria-labelledby should be used instead to refer to that label.
... aria-labelledby identifies the visible element or elements in a space-separated list of element ids which identify the listbox.
...And 3 more matches

Using CSS animations - CSS: Cascading Style Sheets
p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } in this example the style for the <p> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “slidein”.
...that’s as simple as adding this keyframe: 75% { font-size: 300%; margin-left: 25%; width: 150%; } the full code now looks like this: p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } 75% { font-size: 300%; margin-left: 25%; width: 150%; } to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at each other for some time in silence...
...in this case, let’s use infinite to have the animation repeat indefinitely: p { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; } adding it to the existing code: @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> making it move back and forth that made it repeat, but it’s very odd having it jump back to the start each time it begins a...
...And 3 more matches

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
if you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline direction as well.
... the writing-mode property and block flow the writing-mode property accepts the values horizontal-tb, vertical-rl and vertical-lr.
... the value vertical-rl gives you a right-to-left block flow direction with a vertical inline direction, as shown in the next example.
...And 3 more matches

OpenType font features guide - CSS: Cascading Style Sheets
these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings.
...they are all defined and shown here, but many will only work using the lower-level font-feature-settings property.
... note: the examples below show the properties and some example combinations, along with the lower-level syntax equivalents.
...And 3 more matches

Variable fonts guide - CSS: Cascading Style Sheets
custom axes are in fact limitless: the typeface designer can define and scope any axis they like, and are just required to give it a four-letter tag to identify it within the font file format itself.
... you can use these four-letter tags in css to specify a point along that axis of variation, as will be show in the code examples below.
...where possible, both the standard and lower-level syntax are included.
...And 3 more matches

<blend-mode> - CSS: Cascading Style Sheets
this blend mode is equivalent to hard-light but with the layers swapped.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: color-burn; } hard-light the final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: hard-light; } soft-light the final color is similar to hard-light, but softer.
...And 3 more matches

border-color - CSS: Cascading Style Sheets
each side can be set individually using border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color.
... constituent properties this property is a shorthand for the following css properties: border-bottom-color border-left-color border-right-color border-top-color syntax /* <color> values */ border-color: red; /* horizontal | vertical */ border-color: red #f015ca; /* top | vertical | bottom */ border-color: red rgb(240,30,50,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* global values */ border-color: inherit; border-color: initial; border-color: unset; the border-color property may be specified using one, two, three, or four values.
... formal definition initial valueas each of the properties of the shorthand:border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolorapplies toall elements.
...And 3 more matches

grid-template-rows - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-rows: none; /* <track-list> values */ grid-template-rows: 100px 1fr; grid-template-rows: [linename] 100px; grid-template-rows: [linename1] 100px [linename2 linename3]; grid-template-rows: minmax(100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(3, 200px); grid-template-rows: subgrid; /* <auto-track-list> values */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; grid-template-rows: ...
... repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value.
... repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.
...And 3 more matches

list-style-type - CSS: Cascading Style Sheets
一, 二, 三, ..., 九八, 九九, 一〇〇 decimal-leading-zero decimal numbers padded by initial zeros e.g.
...α, β, γ… lower-alpha lower-latin lowercase ascii letters e.g.
... a, b, c, … z lower-latin is unsupported in ie7 and earlier see browser compatibility section.
...And 3 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
allow-orientation-lock: lets the resource lock the screen orientation.
... allow-pointer-lock: lets the resource use the pointer lock api.
... allow-top-navigation: lets the resource navigate the top-level browsing context (the one named _top).
...And 3 more matches

Microformats - HTML: Hypertext Markup Language
these top-level root classes usually indicate a type and corresponding expected vocabulary of properties.
..."u-url", "u-photo", "u-logo" special parsing: element attributes a/href, img/src, object/data etc.
...erty is defined in html using the class property any element can carry example h-card <p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">joe bloggs</a> <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, <span class="p-street-address">17 austerstræti</span> <span class="p-locality">reykjavík</span> <span class="p-country-name">iceland</span> </p> property description p-name the full/formatted name of the person or organization.
...And 3 more matches

Using Feature Policy - HTTP
feature policy allows you to control which origins can use which features, both in the top-level page and in embedded frames.
... 'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
...And 3 more matches

HTTP headers - HTTP
hop-by-hop headers these headers are meaningful only for a single transport-level connection, and must not be retransmitted by proxies or cached.
... accept-ch-lifetime servers can ask the client to remember the set of client hints that the server supports for a specified period of time, to enable delivery of client hints on subsequent requests to the server’s origin ([rfc6454]).
... accept-language informs the server about the human language the server is expected to send back.
...And 3 more matches

A typical HTTP session - HTTP
http://developer.mozilla.org/, and telling the server that the user-agent would prefer the page in french, if possible: get / http/1.1 host: developer.mozilla.org accept-language: fr observe that final empty line, this separates the data block from the header block.
... as there is no content-length provided in an http header, this data block is presented empty, marking the end of the headers, allowing the server to process the request the moment it receives this empty line.
... for example, sending the result of a form: post /contact_form.php http/1.1 host: developer.mozilla.org content-length: 64 content-type: application/x-www-form-urlencoded name=joe%20user&request=send%20me%20one%20of%20your%20catalogue request methods http defines a set of request methods indicating the desired action to be performed upon a resource.
...And 3 more matches

Web audio codec guide - Web media technologies
the audio is encoded using pulse code modulation (pcm) with either µ-law or a-law encoding.
... the primary benefit to µ-law encoding is that the byte 0x00 never appears in the encoded audio, which may be beneficial in certain applications or networking environments.
... µ-law is primarily used in north america and japan, with a-law being predominant elsewhere.
...And 3 more matches

Content type - SVG: Scalable Vector Graphics
for compatibility, the all-lowercase form "rgb(" is preferred.
... non-local iri references, where the iri reference does contain an <absoluteiri> or <relativeiri>.
...for example, a <list-of-lengths> is represented in the svg dom using an svglengthlist or svganimatedlengthlist object.
...And 3 more matches

WebAssembly Concepts - WebAssembly
it is not primarily intended to be written by hand, rather it is designed to be an effective compilation target for low-level source languages like c, c++, rust, etc.
... be readable and debuggable — webassembly is a low-level assembly language, but it does have a human-readable text format (the specification for which is still being finalized) that allows code to be written, viewed, and debugged by hand.
...instead, it is designed to complement and work alongside javascript, allowing web developers to take advantage of both languages' strong points: javascript is a high-level language, flexible and expressive enough to write web applications.
...And 3 more matches

tabs - Archive of obsolete content
you can't attach style sheets to a tab using tab.attach(), but from firefox 34 onwards you can attach and detach them using the low-level stylesheet/style and content/mod apis.
... converting to xul tabs to convert from the high-level tab objects used in this api to the low-level xul tab objects used in the tabs/utils api and by traditional add-ons, use the viewfor() function exported by the viewfor module.
... to convert back the other way, from a xul tab to a high-level tab object, use the modelfor() function, exported by the modelfor module.
...And 2 more matches

Storing annotations - Archive of obsolete content
annotation list content script here's the annotation list's content script: self.on("message", function onmessage(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); ...
... save this file in data/list as annotation-list.js.
... annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="text/css" href="annotation-list.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body> </html> here's the corresponding css: #annotation-list .annotation-details { padding: 10px; margin: 10px; border: solid 3px #eee; background-color: white; } #annotation-list .url, .selection-text, .annotation-text { padding: 5px; margin: 5px; } #annotation-list .selection-te...
...And 2 more matches

Getting Started (jpm) - Archive of obsolete content
the add-on sdk includes a command-line tool that you use to initialize, run, test, and package add-ons.
... the command-line jpm tool.
...open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
...And 2 more matches

Positioning - Archive of obsolete content
valid values for the anchor alignment (ie, the first word) are shown below anchor alignment values topleft the popup will be aligned with the upper-left corner of the anchor.
... bottomleft the popup will be aligned with the lower-left corner of the anchor.
... valid values for the popup alignment (ie, the second word) are shown below popup alignment values topleft the top-left corner of the popup will be aligned with the specified corner or edge of the anchor element.
...And 2 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text.
... label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine.
... caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place.
...And 2 more matches

label - Archive of obsolete content
attributes accesskey, control, crop, disabled, href, value properties accesskey, accessibletype, control, crop, disabled, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
... end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.
...And 2 more matches

MacFAQ - Archive of obsolete content
in your .mozconfig for custom builds of xulrunner, add --enable-libxul.
...note that in order to copy the framework while keeping the relative soft-links in the framework, do something like: % ( cd dist ; gnutar cf - xul.framework | ( cd /library/frameworks ; gnutar xf - )) installing your application your application must be installed as a xulrunner app before you can open it.
...for command-line work, you would call on: /applications/(vendor)/(name).app/contents/macos/xulrunner ui notes menus to enable your application quit command to work with the application menu (the one to the right of the blue apple), you need to give your quit menu item an id of "menu_filequititem".
...And 2 more matches

azimuth - Archive of obsolete content
initial valuecenterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -360deg to 360deg.
... far-left: same as 300deg.
... far-left behind: same as 240deg.
...And 2 more matches

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
towards the bottom of the code are two div tags with ids form-comments and out-logger.
... the form-comments div is used to render the form and the out-logger will be used as a log display as each comment is added.
... listing 7 - manipulating the dom server-side <script runat="server"> window.onserverload = function() { document.getelementbyid( "out-logger" ).innerhtml = jaxer.file.read( "dump.txt" ); } </script> the code in listing 7 is executed server-side and takes advantage of the onserverload event which ensures that we have a complete dom before trying to access it.
...And 2 more matches

Implementation Status - Archive of obsolete content
4.4.14 domfocusout supported 4.4.15 xforms-select xforms-deselect supported 4.4.16 xforms-in-range supported 4.4.17 xforms-out-of-range supported 4.4.18 xforms-scroll-first xforms-scroll-last supported 4.4.19 xforms-submit-done supported 4.5 error indications partial we don't support the xforms-version-exception event, yet 4.5.1 xforms-binding-exception supported 4.5.2 xforms-compute-exception supported ...
... 4.5.3 xforms-link-error partial not yet generated by load.
... 333782; 4.5.4 xforms-link-exception supported 4.5.5 xforms-output-exception unsupported 4.5.6 xforms-submit-error supported 4.5.7 xforms-version-exception unsupported 4.6 event sequencing supported 4.6.1 for input, secret, textarea, range, or upload controls supported 4.6.2 for output controls supported 4.6.3 for select or select1 controls partial 4.6.4 for trigger controls supported ...
...And 2 more matches

What is accessibility? - Learn web development
note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some form of disability", and "between 110 million and 190 million adults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness.
... people with cognitive impairments cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities who have the most-limited capabilities, to all of us as we age and have difficulty thinking and remembering.
... a good foundation of accessibility for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; consistent webpage layout and navigation; familiar elements, such as underlined links blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; website authentication as easy as possible without com...
...And 2 more matches

How to structure a web form - Learn web development
ame="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this example in fieldset-legend.html (see it live also).
...below will toggle the selected state of the taste_cherry checkbox: <form> <p> <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> <label for="taste_1">i like cherry</label> </p> <p> <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> <label for="taste_2">i like banana</label> </p> </form> note: you can find this example in checkbox-label.html (see it live also).
... let's consider this example: <p>required fields are followed by <abbr title="required">*</abbr>.</p> <!-- so this: --> <div> <label for="username">name:</label> <input id="username" type="text" name="username"> <label for="username"><abbr title="required" aria-label="required">*</abbr></label> </div> <!-- would be better done like this: --> <div> <label for="username"> <span>name:</span> <input id="username" type="text" name="username"> <abbr title="required" aria-label="required">*</abbr> </label> </div> <!-- but this is probably best: --> <div> <label for="username">name: <abbr title="required" aria-label="required">*</abbr></label>...
...And 2 more matches

Styling web forms - Learn web development
these include the following elements: <form> <fieldset> and <legend> single-line text <input>s (e.g.
... multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.
...these include: <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
...And 2 more matches

Looping code - Learn web development
at this point, you probably understand the high-level concepts behind loops, but you are probably thinking "ok, great, but how does this help me write better javascript code?" as we said earlier, loops are all to do with doing the same thing over and over again, which is great for rapidly completing repetitive tasks.
... active learning <h2>live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </textarea> <div class="playable-buttons"> <in...
...put id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', f...
...And 2 more matches

Arrays - Learn web development
arrays are generally described as "list-like objects"; they are basically single objects that contain multiple values stored in a list.
... playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'soc...
...rea code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background-color: #f5f9fa; } active learning: top 5 searches a good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app.
...And 2 more matches

Aprender y obtener ayuda - Learn web development
you concentrate deeply on a low-level topic and solving the specific problems that it brings.
... diffuse learning is more to do with high-level thinking around a wider area.
... this is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.
...And 2 more matches

Getting started with Svelte - Learn web development
your browser will display something like this: application structure the starter template comes with the following structure: moz-todo-svelte ├── readme.md ├── package.json ├── package-lock.json ├── rollup.config.js ├── .gitignore ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── global.css │ └── build │ ├── bundle.css │ ├── bundle.css.map │ ├── bundle.js │ └── bundle.js.map └── src ├── app.svelte └── main.js the con...
...tents are as follows: package.json and package-lock.json: contains information about the project that node.js/npm uses to keep it organized.
... app.svelte: this is the top-level component of your app.
...And 2 more matches

How Mozilla's build system works
phases when you type mach build to build the tree, three high-level phases occur within the build system: system detection and validation preparation of the build backend invocation of the build backend phase 1: configure phase 1 centers around the configure script.
... config.status contains 2 parts: data structures representing the output of configure and a command-line interface for preparing, configuring, or generating an appropriate build backend.
...the role of treemetadataemitter is to convert the low-level mozbuildsandbox dictionaries into higher-level function-specific data structures.
...And 2 more matches

Gecko Keypress Event
if gecko doesn't replace the charcode with an ascii character, the web application developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.).
... note that replacing the original (non-ascii) characters on these keys means that there are some accessibility issues for non-latin keyboard layout users as many non-ascii characters will not be available for shortcuts.
... if the current keyboard layout is dvorak-qwerty layout or a non-latin layout, the command key switches the keyboard layout to the us qwerty keyboard layout temporary.
...And 2 more matches

QA phase
preliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-us before you can build.
... to copy this file to the appropriate directory, do the following: navigate to your working directory from your command-line terminal (i.e., where you created the folder structure described above).
...om .mozconfig in step 3 use ./mach build config after step 4 update the mozilla source code: $ cd mozilla-aurora $ hg pull -u enter the following command to create the .mozconfig file: $ nano -w .mozconfig enter the following lines in your .mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] you will need to specify which application you're localizing in the fourth line (e.g., for firefox, that's browser, thunderbird would be mail).
...And 2 more matches

SVN for Localizers
here's the layout you will find within the projects/mozilla.com directory: navigating from the command-line with your svn client, you'll find three directories within projects/mozilla.com.
... enter the following command in your command-line tool: svn checkout https://svn.mozilla.org/projects/mozilla.com/trunk/locales/[your locale code] mozilla-l10n-[your-localecode] this command creates the mozilla-l10n-[your-localecode] directory on your computer and copies into it all of the files from https://svn.mozilla.org/projects/moz...om/trunk/locales/[your locale code].
... translate the content in those files, save them and check for differences by entering this command from the command-line: svn diff this command produces output with every change made to each file.
...And 2 more matches

Refcount tracing and balancing
how to build for refcount tracing build with --enable-debug or --enable-logrefcnt.
... post-processing step 2: filtering the log once you've picked an object that leaked, you can use tools/rb/filter-log.pl to filter the log file to drop the call stack for other objects; this process reduces the size of the log file and also improves the performance.
... perl -w tools/rb/filter-log.pl --object 0x00253ab0 < ./refcounts.log > my-leak.log linux users the log file generated on linux system often lack function names, file names and line numbers.
...And 2 more matches

TraceMalloc
the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation events with stack traces in a binary format to the given file.
... --shutdown-leaks=filename on shutdown, the application will save live allocations (with stack traces) to the given file.
...# run application with shutdown logging # note: tinderbox leak tests use: python leaktest.py -- --trace-malloc malloc.log --shutdown-leaks=sdleak.log # note 2: it appears that the shutdown log is not recorded if --trace-malloc is given the - argument.
...And 2 more matches

AsyncTestUtils extended framework
in order to give these events a chance to run we either need to make sure we yield control to the top-level event loop or spin our own nested event loop.
... asynctestutils is currently implemented by the first method (yielding control to the top-level event loop).
...returning false tells the asynchronous driver that it should yield control up to the top-level.
...And 2 more matches

NSS tools : crlutil
please contribute to the initial review in mozilla nss bug 836477[1] description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... -i import a crl to the cert database -e erase all crls of specified type from the cert database -l list existing crl located in cert database file.
... -l algorithm-name specify a specific signature algorithm.
...And 2 more matches

NSS tools : crlutil
synopsis crlutil [options] arguments description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... -i import a crl to the cert database -e erase all crls of specified type from the cert database -l list existing crl located in cert database file.
... -l algorithm-name specify a specific signature algorithm.
...And 2 more matches

Scripting Java
rhino defines a top-level variable named packages.
... the properties of the packages variable are all the top-level java packages, such as java and com.
... for example, we can access the value of the java package: js> packages.java [javapackage java] as a handy shortcut, rhino defines a top-level variable java that is equivalent to packages.java.
...And 2 more matches

Functions
a nested function is algol-like if it is only ever defined and called, and it isn't accessed in any other way (and it is not a generator-function).
...an algol-like function may read the local variables and arguments of its immediate enclosing function from the stack, as if by magic.
... (jscontext::display caches the enclosing function's stack frame.) if that function is also algol-like, its child can read locals and variables from the next enclosing function, and so on.
...And 2 more matches

JIT Optimization Strategies
it applies to property accesses on objects which are global-like in that there is only one instance of them per program.
... this includes global objects, object literals defined at the top-level of a script, and top-level function objects.
...unique (or "singleton") types are assigned to certain kinds of objects, like global objects, top-level functions, and object literals declared at the top-level of a script.
...And 2 more matches

Gecko object attributes
applied to: grid, heading, listitem, row, tablist exposed in aria: aria-level posinset if this item is in a group, what is the item number within the group, where the size is defined by the setsize attribute.
... applied to: any role exposed in aria: aria-live relevant space delimited string with keywords describing what kinds of changes in the subtree are informational, as opposed to presentational.
... container-live interruption policy.
...And 2 more matches

Observer Notifications
browser-lastwindow-close-requested sent when the browser wishes to close the last open browser window.
... browser-lastwindow-close-granted sent when all interested parties have responded to the browser-lastwindow-close-requested notification and none of them requested that the close be aborted.
... places-database-locked the places database is currently locked by a third-party process and cannot be opened.
...And 2 more matches

Basic concepts - Web APIs
if the object store has a key path, it is using in-line keys; otherwise, it is using out-of-line keys.
... transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked.
... in-line key a key that is stored as part of the stored value.
...And 2 more matches

Using IndexedDB - Web APIs
</tr> </tbody> </table> <div class="button-pane"> <input type="button" id="delete-button" value="delete publication" /> <input type="button" id="clear-store-button" value="clear the whole store" class="destructive" /> </div> </form> <form id="search-form"> <div class="button-pane"> <input type="button" id="search-list-button" value="list database content" /> </div> </form> <div> <div id="pub-msg"> </div> <div id="pub-viewer"> </div> <ul id="pub-list"> </ul> </div> css content body { font-size: 0.8em; font-family: sans-serif; } form { background-color: #cccccc; border-radius: 0.3em; display: inline-block; margin-bottom: 0.5...
...em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer iframe { width: 100%; height: 100%; } #pub-list { width: 46%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .no...
...round-color: orange; } .destructive:hover { background-color: #ff8000; } .destructive:active { background-color: red; } javascript content (function () { var compat_envs = [ ['firefox', ">= 16.0"], ['google chrome', ">= 24.0 (you may need to get google chrome canary), no blob storage support"] ]; var compat = $('#compat'); compat.empty(); compat.append('<ul id="compat-list"></ul>'); compat_envs.foreach(function(val, idx, array) { $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>'); }); const db_name = 'mdn-demo-indexeddb-epublications'; const db_version = 1; // use a long long for this value (don't use a float) const db_store_name = 'publications'; var db; // used to keep track of which view is displayed to avoid uselessly re...
...And 2 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
example 4 - common webvtt example note this is a comment example 5 - multi-line comment note one comment that is spanning more than one line.
... crédit de transcription 00:04.000 --> 00:05.000 transcrit par célestes™ ::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; } positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see cue settings for more information): webvtt 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% where did he go?
... table 6 - escape sequences name character escape sequence ampersand & &amp; less-than < &lt; greater-than > &gt; left-to-right mark &lrm; right-to-left mark &rlm; non-breaking space &nbsp; cue payload text tags there are a number of tags, such as <bold>, that can be used.
...And 2 more matches

Lighting a WebXR setting - Web APIs
and while this article provides brief reminders as to how lighting works in general, it is not by any means a tutorial in lighting or a guide to how to create a properly-lit 3d scene.
...however, glossy, mirror-like surfaces reflect most of the light in a direction whose angle of reflection, Θr, is equal to the angle of incidence, except it's on the opposite side of the normal vector.
... saturn's fifth-largest moon, tethys, bathed in sunlight, coming from the lower left.
...And 2 more matches

ARIA annotations - Accessibility
aria annotations features the aria attributes providing these new abilities are as follows: aria-description="" — provides a detailed description of an html element, as opposed to the brief label provided by aria-label.
...you’ll see examples of most of these later on in the article, but briefly: aria-label="" can be set on an element to provide a brief descriptive label when it isn't appropriate to have the label actually appearing in the ui, for example a search input in a horizontal nav bar.
... aria-labelledby="" can be set on an element and given a value the same as the id of an element that contains a label for the element.
...And 2 more matches

ARIA: contentinfo role - Accessibility
pages should only include one top-level contentinfo landmark role per page.
... labeling landmarks multiple landmarks if there is more than one contentinfo landmark role or <footer> element in a document, provide a label with the aria-label attribute for each landmark.
... <article> <h2>everyday pad thai</h2> <!-- article content --> <footer aria-label="everyday pad thai metadata"> <p>posted on <time datetime="2018-09-23 12:17">may 16</time> by <a href="#">lisa</a>.</p> </footer> </article> ...
...And 2 more matches

ARIA: search role - Accessibility
<form id="site-search" role="search" aria-label="sitewide"> <!-- search input --> </form> ...
... <form id="page-search" role="search" aria-label="on this page"> <!-- search input --> </form> repeated landmarks if a search landmark role in a document is repeated in a document, and both landmarks have identical content, use the same label for each landmark.
... <header> <form id="site-search-top" role="search" aria-label="sitewide"> <!-- search input --> </form> </header> ...
...And 2 more matches

Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
the solution is in an aria attribute called aria-labelledby.
... both aria-labelledby and aria-describedby are specified on the form element that is to be labelled, for example an <input> in both cases, the label for/label control bindings that may also exist are overridden by aria-labelledby.
... if on an html page you provide aria-labelledby, you should also provide a label for construct to also support older browsers that do not have aria support yet.
...And 2 more matches

Web accessibility for seizures and physical reactions - Accessibility
this is "1" if the user has requested not to be tracked by web sites, content, or advertising" media queries level 5 environmentmq (planned in media queries level 5) light-level has three valid values: dim, normal, and washed.
... light-level from w3c's draft document, media queries level 5 section on light-level: "the light-level media feature is used to query about the ambient light-level in which the device is used, to allow the author to adjust style of the document in response." this will be a godsend to those who have motor-skills problems, or for some with cognitive difficulties, who cannot find the right "button" to chang...
... personalization help and support the requirement for the literal property is taken from section 23 non-literal text and images requirement: some users cannot understand non-literal text and icons such as metaphors, idioms etc.
...And 2 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
if you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows.
... however if the writing mode is right-to-left as in arabic, the items will line up starting at the right side of the container.
... the live example below has the direction property set to rtl to force a right-to-left flow for our items.
...And 2 more matches

CSS Fonts - CSS: Cascading Style Sheets
p { width: 600px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for mor...
... reference properties font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-variation-settings font-weight line-height at-rules @font-face font-family font-feature-settings font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, ...
...these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings.
...And 2 more matches

Animatable CSS properties - CSS: Cascading Style Sheets
the animatable properties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border...
...-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius border-image-outset border-image-slice border-image-width border-inline-end border-inline-end-color border-inline-end-width border-inline-start border-inline-start-color border-inline-start-width border-left border-left-color border-left-width border-radius border-right border-right-color border-right-width border-start-end-radius border-start-start-radius border-top border-top-color border-top-left-radius border-top-right-radius border-top-width border-width bottom box-sh...
...ate-columns grid-template-rows height inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-border mask-position mask-size max-block-size max-height max-inline-size max-lines max-width min-block-size min-height min-inline-size min-width object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity...
...And 2 more matches

border-inline-end - CSS: Cascading Style Sheets
it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.
... initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the abs...
...olute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-end-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-end-color: a colorborder-inline-end-style: discreteborder-inline-end-width: a length values the border-inline-end is specified with one or more of the following, in any order: <'border-width'> the width of the border.
...And 2 more matches

grid-template-columns - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300...
... repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
...tion initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
...And 2 more matches

text-decoration - CSS: Cascading Style Sheets
it is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.
... constituent properties this property is a shorthand for the following css properties: text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness syntax the text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.
... values text-decoration-line sets the kind of decoration used, such as underline or line-through.
...And 2 more matches

text-indent - CSS: Cascading Style Sheets
horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.
... syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>.
... each-line indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.
...And 2 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
not allowed annotation annotation noopener creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value).
... not allowed annotation annotation opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value).
... noopener relevant to <form>, <a>, and <area>, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value).
...And 2 more matches

HTML elements reference - HTML: Hypertext Markup Language
main root element description <html> the html <html> element represents the root (top-level element) of an html document, so it is also referred to as the root element.
... <hgroup> the html <hgroup> element represents a multi-level heading for a section of a document.
... <hr> the html <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
...And 2 more matches

Connection management in HTTP/1.x - HTTP
in http/1.x, there are several models: short-lived connections, persistent connections, and http pipelining.
...these connections were short-lived: a new one created each time a request needed sending, and closed once the answer had been received.
... short-lived connections the original model of http, and the default one in http/1.0, is short-lived connections.
...And 2 more matches

Content negotiation - HTTP
the http/1.1 standard defines list of the standard headers that start server-driven negotiation (accept, accept-charset, accept-encoding, accept-language).
... the accept-ch-lifetime header this is part of an experimental technology called client hints and is only available in chrome 61 or later.
... the accept-ch-lifetime header is used with the device-memory value of the accept-ch header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server.
...And 2 more matches

Feature-Policy: fullscreen - HTTP
by default, top-level documents and their same-origin child frames can request and enter fullscreen mode.
... 'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
...And 2 more matches

Feature-Policy: geolocation - HTTP
by default, the geolocation api can be used within top-level documents and their same-origin child frames.
... 'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
...And 2 more matches

Index - HTTP
5 accept-language content negotiation, http, http header, reference, request header the accept-language request http header advertises which languages the client is able to understand, and which locale variant is preferred.
... (by languages, we mean natural languages, such as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-language response header.
... 24 content-language http, headers, reference the content-language entity header is used to describe the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.
...And 2 more matches

HTTP range requests - HTTP
accept-ranges: bytes content-length: 146515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range.
... here the content-length header is also useful as it indicates the full size of the image to retrieve.
... curl http://i.imgur.com/z4d4kwk.jpg -i -h "range: bytes=0-1023" the issued request looks like this: get /z4d4kwk.jpg http/1.1 host: i.imgur.com range: bytes=0-1023 the server responses with the 206 partial content status: http/1.1 206 partial content content-range: bytes 0-1023/146515 content-length: 1024 ...
...And 2 more matches

Functions - JavaScript
the stack-like behavior can be seen in the following example: function foo(i) { if (i < 0) return; console.log('begin: ' + i); foo(i - 1); console.log('end: ' + i); } foo(3); // output: // begin: 3 // begin: 2 // begin: 1 // begin: 0 // end: 0 // end: 1 // end: 2 // end: 3 nested functions and closures you may nest a function within another function.
... } } } using the arguments object the arguments of a function are maintained in an array-like object.
...', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); note: the arguments variable is "array-like", but not an array.
...And 2 more matches

Grammar and types - JavaScript
(spaces, tabs, and newline characters are considered whitespace.) comments the syntax of comments is the same as in c++ and in many other languages: // a one line comment /* this is a longer, * multi-line comment */ /* you can't, however, /* nest comments */ syntaxerror */ comments behave like whitespace, and are discarded during script execution.
...a top-level property whose value is not defined.
... if an array is created using a literal in a top-level script, javascript interprets the array each time it evaluates the expression containing the array literal.
...And 2 more matches

Indexed collections - JavaScript
this includes arrays and array-like constructs such as array objects and typedarray objects.
... working with array-like objects some javascript objects, such as the nodelist returned by document.getelementsbytagname() or the arguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods.
... array methods cannot be called directly on array-like objects.
...And 2 more matches

Introduction - JavaScript
the web console tool built into firefox is useful for experimenting with javascript; you can use it into two modes: single-line input mode, and multi-line input mode.
... single-line input in the web console the web console shows you information about the currently loaded web page, and also includes a javascript interpreter that you can use to execute javascript expressions in the current page.
...for the sake of simplicity, it can be imagined that every time something is entered into the console, it is actually surrounded by console.log around eval, like so: function greetme(yourname) { alert("hello " + yourname) } console.log(eval('3 + 5')) multi-line input in the web console the single-line input mode of the web console is great for quick testing of javascript expressions, but although you can execute multiple lines, it's not very convenient for that.
...And 2 more matches

Text formatting - JavaScript
you can't change individual characters because strings are immutable array-like objects: const hello = 'hello, world!'; const hellolength = hello.length; hello[0] = 'l'; // this has no effect, because strings are immutable hello[0]; // this returns "h" characters whose unicode scalar values are greater than u+ffff (such as some rare chinese/japanese/korean/vietnamese characters and some emoji) are stored in utf-16 with two surrogate code units each.
... multi-line template literals template literals are string literals allowing embedded expressions.
... you can use multi-line strings and string interpolation features with them.
...And 2 more matches

Memory Management - JavaScript
low-level languages like c, have manual memory management primitives such as malloc() and free().
...the first and last parts are explicit in low-level languages but are mostly implicit in high-level languages like javascript.
... low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to release it.
...And 2 more matches

Array.from() - JavaScript
the array.from() static method creates a new, shallow-copied array instance from an array-like or iterable object.
... syntax array.from(arraylike [, mapfn [, thisarg]]) parameters arraylike an array-like or iterable object to convert to an array.
... description array.from() lets you create arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects such as map and set).
...And 2 more matches

Operator precedence - JavaScript
console.log(3 + 10 * 2); // logs 23 console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous console.log((3 + 10) * 2); // logs 26 because the parentheses change the order left-associativity (left-to-right) means that it is processed as (a op1 b) op2 c, while right-associativity (right-to-left) means it is interpreted as a op1 (b op2 c).
... 19 new (without argument list) right-to-left new … 18 postfix increment n/a … ++ postfix decrement … -- 17 logical not right-to-left !
... … bitwise not ~ … unary plus + … unary negation - … prefix increment ++ … prefix decrement -- … typeof typeof … void void … delete delete … await await … 16 exponentiation right-to-left … ** … 15 multiplication left-to-right … * … division … / … remainder … % … 14 addition left-to-right … + … subtraction … - … 13 bitwise left shift left-to-right … << … bitwise right shift … >> … bitwise unsigned right shift … >>> … 12 less than left-to-right … < … less than or equal ...
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
combined, we get this very natural-looking behavior.
... 61 dominant-baseline reference, svg, svg attribute the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents.
... 205 stroke-linecap svg, svg attribute the stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
...And 2 more matches

Using templates and slots - Web Components
note: an unnamed <slot> will be filled with all of the custom element's top-level child nodes that do not have the slot attribute.
...ntaining some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name">&lt;<slot name="element-name">need name</slot>&gt;</code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div class="attributes"> <h4><span>attributes</span></h4> ...
... adding a final bit of style as a finishing touch, we'll add a tiny bit more css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } body { margin-top: 47px } result finally let’s put all the snippets together and see what the rendered result looks like.
...And 2 more matches

SDK and XUL Comparison - Archive of obsolete content
advantages of the sdk simplicity the sdk provides high-level javascript apis to simplify many common tasks in add-on development, and tool support which greatly simplifies the process of developing, testing, and packaging an add-on.
... compatibility although we can't promise we'll never break a high-level api, maintaining compatibility across firefox versions is a top priority for us.
... low-level apis and third-party modules that's not the whole story.
... if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom directly as in a traditional bootstrapped extension.

Getting started (cfx) - Archive of obsolete content
this tutorial walks through creating a simple add-on using the cfx command-line tool.
...open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
...there's reference documentation for all the high-level and low-level apis in the sdk.

Index of archived content - Archive of obsolete content
firefox compatibility module structure of the sdk porting the library detector program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request ...
... selection self simple-prefs simple-storage system tabs timers ui url widget windows low-level apis /loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/heritage core/namespace core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path ...
... 2006-10-06 2006-10-13 2006-10-20 2006-10-27 2006-11-03 2006-11-10 2006-11-17 2006-11-24 2006-12-01 2006-12-08 extentsions faq mozilla-dev-i18n 2006-09-22 mozilla-dev-l10n 2006-10-06 2006-10-13 2006-10-20 2006-10-27 2006-11-10 2006-11-17 2006-11-24 2006-11-3 2006-12-01 2006-12-08 mozilla-dev-planning 2006-07-17 2006-09-22 2006-10-06 ...
... 2006-12-01 mozilla-dev-tech-js-engine 2006-09-22 2006-09-29 2006-10-06 2006-10-13 2006-11-03 2006-11-10 2006-11-17 2006-11-24 2006-12-01 js-engine faq mozilla-dev-tech-layout 2006-09-29 2006-10-27 2006-11-03 2006-11-10 2006-11-17 2006-11-24 2006-12- 02 2006-12- 08 2006-12-24 mozilla-dev-tech-xpcom 2006-09-06 2006-09-22 2006-09-30 2006-10-13 ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
many of the new web technologies in the html 4.0 specification, xml 1.0, dom level 3 were explicitly created with application-like behavior and more sophisticated navigational models in mind.
...inkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>"; document.getelementbyid("container").innerhtml+=strvalue; } } if(previousele) { previousele.style.backgroundcolor="white"; } ele.style.backgroundcolor="#ddeeff"; previousele=ele; } var previousele=null; </script> <style> .tab { position:relative;top:1px; border: 1px solid #dddddd; color:white; background-color:white; padding-left: 5px; border-bottom:white;padding-right: 5px; padding-top:3px; text-decoration:none;} .tab:hover { background-color:#ddeeff; } </style> </head> <body > <h2>latest headlines - inner-browsing example </h2> <p>click the tabbed menu to dynamically load the headlines into this web page.</p> <br /> <!-- ***** this code dynamically creates the tabbed menu if the browser has support to xmlhttpreq...
.../// /// object detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return f...
...alse;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- ***** this represents the container ***** --> <div style="margin-left:0px;border:1px solid #dddddd;" > <div style="padding:10px;" id="container"> </div> </div> </body> </html> original document information author(s): marcio galli, netscape communications; roger soares, intelinet.com.br; ian oeschger, netscape communications last updated date: published 16 may 2003 copyright information: copyright © 2001-2003 netscape.

In-Depth - Archive of obsolete content
dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours.
...example: -moz-border-top-colors: threeddarkshadow threedshadow transparent; -moz-border-right-colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-border-left-colors: threeddarkshadow threedshadow transparent; -moz-border-top-colors see -moz-border-bottom-colors above.
... -moz-border-left-colors see -moz-border-bottom-colors above.
...select that one and it lists a bunch of -x-image-region-left type styles in chrome://navigator/skin/.

Creating a Help Content Pack - Archive of obsolete content
the index file one important note on the index file is that there is no automatically generated set of top-level letters (e.g., a for accessibility and automation or b for book and border).
...a single-level index may be accomplished in exactly the same way as a glossary file, but multiple levels can make it easier to navigate to specific information.
.../rdf:li> next, add the following to your file just after the existing rdf:description element: <rdf:description rdf:about="#foo"> <nc:subheadings> <rdf:seq> <rdf:li><rdf:description rdf:id="bar" nc:link="bar.html" nc:title="bar"/></rdf:li> </rdf:seq> </nc:subheadings> </rdf:description> except for the different value for rdf:about, this looks exactly like a top-level entry definition.
...top-level entries describe the root node, urn:root; nested entries describe other entries.

execute - Archive of obsolete content
passing arguments to the executable the args parameter, when present, passes a string to the executable as command-line parameters.
... the following line, for example, passes the "-c" command-line parameter to the executable: err = file.execute(myfile, "-c", true); when you want to pass more than one parameter to the executable itself, however, you must format the args string in a particular way so that the parameters can be broken up and passed separately as required.
... in general, you should use single quotes for the args string and double quotes to delimit the command-line arguments within args.
... this means that in order to pass three command-line arguments (-c, -d, and -s) to the executable, you should format the args string as follows: err = file.execute(myfile, '"-c""-d""-s"', true); //technically, given the rules above, you could also pass the same //arguments with the following line, but the result is much less //readable: err = file.execute(myfile, "\"-c\"\"-d\"\"-s\"", true); also see the note about binaries on the macintosh pl...

Making sure your theme works with RTL locales - Archive of obsolete content
the important thing to understand about these locales, is that the entire interface is mirrored right-to-left.
... 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); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.

-ms-scroll-snap-points-x - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
... if any value is less than -ms-scroll-limit-x-min , then -ms-scroll-limit-x-min is used.
... if any value is greater than -ms-scroll-limit-x-max, then -ms-scroll-limit-x-max is used.
...dentically to the -ms-scroll-snap-points-y property, but along the x-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min: 100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.

-ms-scroll-snap-points-y - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
... if any value is less than -ms-scroll-limit-y-min , then -ms-scroll-limit-y-min is used.
... if any value is greater than -ms-scroll-limit-y-max, then -ms-scroll-limit-y-max is used.
...dentically to the -ms-scroll-snap-points-x property, but along the y-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min: 100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.

::-ms-clear - Archive of obsolete content
this includes inputs that appear text-like or fall back to type="text".
... such inputs include: <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="search"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector.
... -ms-high-contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width ...
...padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" placeholder="second name"> </form> css input, label { display: block; } input[type=text]::-ms-clear { color: red; /* this sets the cross color as red.

display-outside - Archive of obsolete content
/* keyword values */ display-outside: block-level; display-outside: inline-level; display-outside: run-in; display-outside: contents; display-outside: none; display-outside: table-row-group; display-outside: table-header-group; display-outside: table-footer-group; display-outside: table-row; display-outside: table-cell; display-outside: table-column-group; display-outside: table-column; display-outside: table-caption; display-outside: ruby-base; display-outside: ruby-text; display-outside: ruby-base-container; display-outside: ruby-text-container; /* global values */ display-outside: inherit; display-outsid...
... values block-level the element generates a block-level box, and participates in a block formatting context.
... other formatting contexts, such as flex formatting contexts, may also work with block-level elements.
... inline-level the element generates an inline-level box, and participates in an inline formatting context.

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
it's also a weird feeling when someone asks you to work on something that has near-legendary status in your mind.
...thus: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} finishing the style adding the background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila!

Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
the solution fortunately, there are mozilla-specific css-like rules that can be used to correct both problems.
... the following rule is derived from mozilla's html.css file: *|*:-moz-list-bullet, *|*:-moz-list-number {font-size: 1em;} this rule tells gecko-based browsers to use the computed value of font-size for the marker's parent, which is the list item itself.
...this might also be a place to put any explorer-specific css-like rules (such as scrollbar styling rules), which also will not validate.
... authors who are not concerned with making sure the rule applies across all namespaces can use a slightly more simplified rule: *:-moz-list-bullet, *:-moz-list-number {font-size: 1em;} recommendations if it is important to make list item markers match the font size of the content, use one of the suggested rules.

RDF in Mozilla FAQ - Archive of obsolete content
rdf in fifty words or less is a quick, high-level description of what rdf does in mozilla.
...these methods return an nsirdfcontainer which allows you to do container-like operations without getting your hands too dirty.
...-- danbri) another possible problem: for remotely-loaded xul and rdf, you might need to adjust mozilla's security restrictions (see belowfor example code).
...it also accepts an optional poll interval, where it will re-load the url.

Practical positioning examples - Learn web development
you might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger ui design.
...first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.
...add the following rule underneath the rest of your css: .fake-content { background-color: #a60000; color: white; padding: 10px; height: 2000px; margin-left: 470px; } to start with, we give the content the same background-color, color, and padding as the info-box panels.
... we then give it a large margin-left to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.

What is a Domain Name? - Learn web development
tld (top-level domain).
... alternatively, if you use a system with a built-in shell, type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1409563-lror creation date: 1998-01-24t05:00:00z updated date: 2013-12-08t01:16:57z registry expiry date: 2015-01-23t05:00:00z sponsoring registrar:markmonitor inc.
... (r37-lror) sponsoring registrar iana id: 292 whois server: referral url: domain status: clientdeleteprohibited domain status: clienttransferprohibited domain status: clientupdateprohibited registrant id:mmr-33684 registrant name:dns admin registrant organization:mozilla foundation registrant street: 650 castro st ste 300 registrant city:mountain view registrant state/province:ca registrant postal code:94041 registrant country:us registrant phone:+1.6509030800 as you can see, i can't register mozilla.org because the mozilla foundation has already registered it.
... dns refreshing dns databases are stored on every dns server worldwide, and all these servers refer to a few special servers called “authoritative name servers” or “top-level dns servers.” — these are like the boss servers that manage the system.

UI pseudo-classes - Learn web development
note: numeric input types are date, month, week, time, datetime-local, number, and range.
... <label for="pcode1">zip/postal code: </label> <input id="pcode1" name="pcode1" type="text" required> </div> </fieldset> <fieldset id="billing"> <legend>billing address</legend> <div> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> </div> <div> <label for="name" class="billing-label disabled-label">name: </label> <input id="name" name="name" type="text" disabled required> </div> <div> <label for="address2" class="billing-label disabled-label">address: </label> <input id="address2" name="address2" type="text" disabled required> </div> <div> <label for="pcode2" class="billing-label disabled-label">zip/postal code: </label> <inp...
...the most relevant parts of this example are as follows: input[type="text"]:disabled { background: #eee; border: 1px solid #ccc; } .disabled-label { color: #aaa; } we've directly selected the inputs we want to disable using input[type="text"]:disabled, but we also wanted to gray out the corresponding text labels.
... function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.queryselectorall('.billing-label'); // toggle the billing text fields and labels for (let i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; if(billinglabels[i].getattribute('class') === 'billing-label disabled-label') { billinglabels[i].setattribute('class', 'billing-label'); } else { billinglabels[i].setattribute('class', 'billing-label disabled-label'...

Making decisions in your code — conditionals - Learn web development
option> <option value="june">june</option> <option value="july">july</option> <option value="august">august</option> <option value="september">september</option> <option value="october">october</option> <option value="november">november</option> <option value="december">december</option> </select> <h1></h1> <ul></ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createca...
...i = 1; i <= days; i++) { const listitem = document.createelement('li'); listitem.textcontent = i; list.appendchild(listitem); } } createcalendar(31,'january'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4a2db6; color: white; } html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = docume...
... style="height: 300px;"> <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> <option value="purple">purple</option> <option value="yellow">yellow</option> <option value="psychedelic">psychedelic</option> </select> <h1>this is my website</h1> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(bgcolor, textcolor) { html...
....style.backgroundcolor = bgcolor; html.style.color = textcolor; }</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutione...

Manipulating documents - Learn web development
if you wanted to match and do things to multiple elements, you could use document.queryselectorall(), which matches every element in the document that matches the selector, and stores references to them in an array-like object called a nodelist.
... document.getelementsbytagname(), which returns an array-like object containing all the elements on the page of a given type, for example <p>s, <a>s, etc.
... to start with, you can get a list of all the stylesheets attached to a document using document.stylesheets, which returns an array-like object with cssstylesheet objects.
... to start with, download a copy of our shopping-list.html starting file and make a copy of it somewhere.

Video and Audio APIs - Learn web development
you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped in a <div> ...
... each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags.
... the contents of aria-label attributes are read out by screenreaders when their users focus on the elements that contain them.
...first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden.

Server-side web frameworks - Learn web development
this means that you will have an easier job, interacting with easier, higher-level code rather than lower level networking primitives.
... web frameworks provide programming-language-appropriate mechanisms to access this information.
...the model specifies the field types to be stored, which may provide field-level validation on what information can be stored (e.g.
... django (python) django is a high-level python web framework that encourages rapid development and clean, pragmatic design.

Getting started with Ember - Learn web development
the service side provides long-lived shared state, behavior, and an interface to integrating with other libraries or systems.
... use cases generally, emberjs works well for building apps that desire either or both of the following traits: single page applications, including native-like web apps, and progressive web apps (pwas) ember works best when it is the entire front end of your application.
... installing the ember tooling ember uses a command-line interface (cli) tool for building and scaffolding parts of your application.
... finally, find app.css, located at app/styles/app.css, and paste in the following: :focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.

Handling common accessibility problems - Learn web development
to deal with regularly updating regions of content, you can use the aria-live attribute, which identifies an updating region.
... here's an example: <p><span id="liveregion1" aria-live="polite" aria-atomic="false"></span></p> you can see an example in action at freedom scientific's aria (accessible rich internet applications) live regions example — the highlighted paragraph should update its content every 10 seconds, and a screenreader should read this out to the user.
... look at good-links.html, and note how they make sense when viewed out of context.
... this is not the case with bad-links.html — they are all just "click here".

Implementing feature detection - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross-browser testing.
...for browsers that don't, we could use a floated layout that works ok, although it is slightly more brittle and hacky, and not as cool-looking.
... start by making local copies of our css-feature-detect.html, flex-layout.css, float-layout.css, and basic-styling.css files.
... give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a reference to the second <link> element, and creating a <div> element as part of our test.

Accessibility/LiveRegionDevGuide
these "non-live" events may be events originating from the chrome, user interaction in the chrome or document, document loading events, or real live region events from hidden tabs.
... with the goal of eliminating the "non-live" events, some sort of event filtering logic must be employed.
... an event containing an object that has the attribute "container-live" is a live region.
...the following are guidelines on how to implement each container-live this property determines the interruption policy or politeness level for the event and can have values of "off", "polite", "assertive" and "rude".

Android-specific test suites
android-lint ensures that the code avoids common android coding errors.
... android-lint ensure that the code avoids common android coding errors.
... running android-lint to run android-lint, first build firefox for android with your changes; then run ./mach android lint this will lint the code and report the results to stdout, as well as produce an html report.
... contact information android-lint is currently owned by :sebastian and :nalexander.

Debugging on Windows
debug and optimized) simultaneously by setting the environment variable moz_no_remote: set moz_no_remote=1 or, starting with firefox 2 and other gecko 1.8.1-based applications, you can use the -no-remote command-line switch instead (implemented in bug 325509).
... you can also specify the profile to use with the -p profile_name command-line argument.
... debugging tinderbox builds see running windows debug builds problems loading debug symbols if both your application and visual c++ hang shortly after launching the application under the debugger, you may be hitting a known deadlock in the way visual studio downloads debug symbols for the system libraries; see https://connect.microsoft.com/visualstudio/feedback/details/422970/hang-loading-rasapi32-pdb-when-using-symbol-server.
... pre-load all the windows debug symbols.

Configuring Build Options
build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree.
...(it is possible to manually call configure with command-line options, but this is not recommended).
... ac_add_options --enable-ui-locale=isocode tbd.
... ac_add_options --with-l10n-base=/path/to/base/dir tbd.

The Firefox codebase: CSS Guidelines
example: use margin-inline-start: 3px; instead of margin-left: 3px.
... 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).
... these selectors can be used to target dark areas: :-moz-lwtheme-brighttext: dark window frame.
... variables for clarity, css variables that are only used when a theme is enabled have the --lwt- prefix.

Embedding the editor
as is the case for composer embedded in a native application, there is a requirement here that the composer ui be configurable, such that it can be displayed either as a toolbar at the top of the <htmlarea>, a floating palette, or a top-level toolbar.
...(this would be analogous to the nsiwebnavigation interface used for a browser.) when we have one editor per docshell, loading a frameset document, or a page with an <iframe> in composer, will instantiate more than one low-level editor.
... we need a concept of an "editing session" - a single top-level document which is editable, and which may embody more than one editor.
...high-level ui and emebedding code should deal with this editing session interface, without knowledge of the underlying editors.

Localization technical reviews
make sure the top-level directory doesn't contain garbage.
... compare-locale we run the compare-locales tool on the new locale to get the statistics on translation of strings and report basic errors.
... more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated.
... inspect firefox-l10n.js we ensure that there are no odd preferences, or #filter substitutions for general.useragent.locale.

Localization formats
can be hard to tell what has changed .lang files historically, mozilla has used a gettext-like file to present content for localization.
..." "allez-y et montrez-le en téléchargeant et en imprimant votre " "certificat personnalisé firefox 3 download day." advantages of gettext gettext has very powerful tools to update this site (if you use the actual english strings in msgids, not unique identifier strings like certificate_intro) very established with a large set of powerful tools harder to screw things up because existing tools will not allow lo...
... in the case of download day, someone created entity-like identifiers in the msgid, which we have shown above with the "certificate_intro" key.
... then, an en-us repository was created holding the translations to all the entity-like values of msgid.

JS::PerfMeasurement
the current implementation can measure eleven different types of low-level hardware and software events: events that can be measured bitmask passed to constructor counter variable what it measures perfmeasurement::cpu_cycles .cpu_cycles raw cpu clock cycles ::instructions .instructions total instructions executed ::cache_references .cache_references total number of memory accesses ::cache_misses .cache...
...here is the complete c++-level api: perfmeasurement::eventmask this is an enumeration defining all of the bit mask values in the above table.
...perfmeasurement::~perfmeasurement() take care not to leak profiling objects, as they may be holding down expensive os-level state.
... to extract the c++-level perfmeasurement object, call this function.

powermetrics
powermetrics is a mac-only command-line utility that provides many high-quality power-related measurements.
...the first column counts interrupt-level wakeups that resulted in a thread being dispatched in the process.
... by default, the coalitions/processes are sorted by a composite value computed from several factors, though this can be changed via command-line options.
... also note that powermetrics -h is a better guide to the the command-line options than man powermetrics.

L20n HTML Bindings
<link rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l10n-id attribute on an html element to mark it as localizable.
... <p data-l10n-id="about"></p> notice that you don't have to put the text content in the html anymore (you still can if you want to).
...consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevilwebsite.com" onclick="alert('pwnd!')" title="back to the homepage">cancel</a>.
... """> the result will be: <p data-l10n-id="back"> <input value="save" type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>.

Creating a Cookie Log
change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt", enter type "set nspr_log_modules=cookie:4" and press enter run firefox by typing "firefox.exe" and pressing enter.
... type "export nspr_log_file=~/cookie-log.txt" and press enter.
... type "export nspr_log_file=~/desktop/cookie-log.txt" and press return.
...finally, attach the cookie-log.txt file to the bug where it was requested (by clicking on create new attachment).

Rhino Debugger
current limitations: no breakpoint menu using the rhino javascript debugger the mozilla rhino javascript engine includes a source-level debugger for debugging javascript scripts.
... step over to single step to the next line in the current function, you may do any of the following: select the debug->step over menu item on the menu bar press the step over button on the toolbar press the f7 key on the keyboard execution will resume but control will return to the debugger at the next line in the current function or top-level script.
... moving up and down the stack the lower-left (dockable) pane in the debugger main window contains a combo-box labeled "context:" which displays the current stack of the executing script.
... viewing variables the lower-left (dockable) pane in the debugger main window contains a tab-pane with two tabs, labeled "this" and "locals".

Hacking Tips
(gdb) r starting program: /home/code/mozilla-central/js/src/32-release/js -f /home/code/jaeger.js [thread debugging using libthread_db enabled] using host libthread_db library "/lib/x86_64-linux-gnu/libthread_db.so.1".
... gdb has the ability to set breakpoints with commands, but a simpler / friendlier version is to use dprintf, with a location, and followed by printf-like arguments.
...for instance, on a 64-bit linux host you can use the following configure command to get an arm simulator build: ar=ar cc="gcc -m32" cxx="g++ -m32" ../configure --target=i686-pc-linux --enable-debug --disable-optimize --enable-threadsafe --enable-simulator=arm or on os x: $ ar=ar cc="clang -m32" cxx="clang++ -m32" ../configure --target=i686-apple-darwin10.0.0 --enable-debug --disable-optimize --enable-threadsafe --enable-arm-simulator an --enable-debug --enable-optimize build is recommended if you want to run jit-tests or jstests.
...the top-level control group is just to group the mask and the negate-mask.

Bytecode Descriptions
every stack frame has a returnvalue slot, used by top-level scripts, generators, async functions, and derived class constructors.
...note: there is no even-less-optimized initname instruction because js doesn't need it.
...implements: annex b.3.3.1, changes to functiondeclarationinstantiation for block-level functions, step 1.a.ii.3.a, and similar steps in other annex b.3.3 algorithms, when setting the function's second binding can't be optimized.
... lineno operands: (uint32_t lineno) no-op instruction emitted immediately after jsop::*eval so that direct eval does not have to do slow pc-to-line mapping.

JSAPI reference
obsolete since jsapi 32 jsval_is_void obsolete since jsapi 32 jsval_is_boolean obsolete since jsapi 32 jsval_is_number obsolete since jsapi 32 jsval_is_int obsolete since jsapi 32 jsval_is_double obsolete since jsapi 32 jsval_is_string obsolete since jsapi 32 jsval_is_object obsolete since jsapi 15 jsval_is_primitive obsolete since jsapi 32 jsval_is_gcthing obsolete since jsapi 32 high-level type-conversion routines for packing and unpacking function arguments.
... js_haspropertybyid added in spidermonkey 1.8.1 js_hasownproperty added in jsapi 45 js_hasownpropertybyid added in jsapi 45 js_deleteproperty js_deletepropertybyid added in spidermonkey 1.8.1 js_deleteproperty2 obsolete since jsapi 39 js_deleteucproperty2 obsolete since jsapi 39 js_deletepropertybyid2 added in spidermonkey 1.8.1 obsolete since jsapi 39 the following functions are lower-level, allowing the jsapi application more access to details of how properties are implemented.
... "define" is a lower-level version of "set" that provides access to extra settings and does not call setters.
... similarly, "lookup" is a lower-level version of "get" that offers extra options and does not call getters.

IAccessibleAction
other-licenses/ia2/accessibleaction.idlnot scriptable this interface gives access to actions that can be executed for accessible objects.
...name() returns the non-localized name of the specified action.
... [propget] hresult name( [in] long actionindex, [out] bstr name ); parameters actionindex 0 based index specifying which action's non-localized name should be returned.
... name the non-localized name of the specified action.

nsIWinTaskbar
createtaskbartabpreview() creates a taskbar tab preview, given an nsidocshell reference to a top-level window.
... nsitaskbartabpreview createtaskbartabpreview( in nsidocshell shell, in nsitaskbarpreviewcontroller controller ); parameters shell an nsidocshell object representing the top-level window from which to create the preview.
...r = components.classes["@mozilla.org/windows-taskbar;1"].getservice(components.interfaces.nsiwintaskbar); // get the docshell for the browser var navigator2 = top.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsiwebnavigation); var docshell = navigator2.queryinterface(components.interfaces.nsidocshell); // get the parent docshell; this is the top-level docshell var docshelltreeitem = docshell.queryinterface(components.interfaces.nsidocshelltreeitem); var parent = docshelltreeitem.parent; var ds = parent.queryinterface(components.interfaces.nsidocshell); // create the preview taskbar.createtaskbartabpreview(ds, {}); gettaskbarprogress() gets the taskbar progress for a window.
...nsitaskbarwindowpreview gettaskbarwindowpreview( in nsidocshell shell ); parameters shell an nsidocshell object to use to find the top-level window.

DOM Inspector internals - Firefox Developer Tools
besides the dom inspector's primary ui, there are a couple other top-level inspectors which differ slightly (the object inspector and dom inspector sidebar used in seamonkey).
... dom inspector from a high-level perspective the dom inspector primary ui consists of some toolbars and a panelset.
... source code organization the contents of the top-level directory for the dom inspector repository should look like base/ js/ inspector-cmdline.js makefile.in build/ install.js makefile.in resources/ content/ … locale/ … skin/ … makefile.in install.rdf jar.mn makefile.in makefiles.sh almost all the interest...
...erlay.xul chrome://global/content/globaloverlay.xul (note that the overlays from the viewer subdirectories—viewers/dom and viewers/stylerules—are loaded as a result of overlay directives in dom inspector's chrome manifest, rather than being explicitly imported using a xul-overlay processing instruction in the overlaid file.) inspectoroverlay.xul this imports the scripts the top-level inspector needs, including dependencies.

Using Fetch - Web APIs
.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain sending a request with credentials included to cause browsers to send a request with credentials included, even for a cross-origin call, add credentials: 'include' to the init object you pass to the fetch() method.
...a headers object is a simple multi-map of names to values: const content = 'hello world'; const myheaders = new headers(); myheaders.append('content-type', 'text/plain'); myheaders.append('content-length', content.length.tostring()); myheaders.append('x-custom-header', 'processthisimmediately'); the same can be achieved by passing an array of arrays or an object literal to the constructor: const myheaders = new headers({ 'content-type': 'text/plain', 'content-length': content.length.tostring(), 'x-custom-header': 'processthisimmediately' }); the contents can be queried and retriev...
...ed: console.log(myheaders.has('content-type')); // true console.log(myheaders.has('set-cookie')); // false myheaders.set('content-type', 'text/html'); myheaders.append('x-custom-header', 'anothervalue'); console.log(myheaders.get('content-length')); // 11 console.log(myheaders.get('x-custom-header')); // ['processthisimmediately', 'anothervalue'] myheaders.delete('x-custom-header'); console.log(myheaders.get('x-custom-header')); // [ ] some of these operations are only useful in serviceworkers, but they provide a much nicer api for manipulating headers.
... note: you may not append or set a request guarded headers’ content-length header.

Intersection Observer API - Web APIs
the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
...intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled.
...this rectangle is determined like this: if the intersection root is the implicit root (that is, the top-level document), the root intersection rectangle is the viewport's rectangle.
...each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level document's viewport.

Microdata DOM API - Web APIs
the document.getitems(typenames) method provides access to the top-level microdata items.
...when called, the method must return a live nodelist object containing all the elements in the document, in tree order, that are each top-level microdata items whose types include all the types specified in the method's argument, having obtained the types by splitting the string on spaces.
... if there are no tokens specified in the argument, then the method must return a nodelist containing all the top-level microdata items in the document.
... code example this sample shows how the getitems() method can be used to obtain a list of all the top-level microdata items of a particular type given in the document: var cats = document.getitems("http://example.com/feline"); once an element representing an item has been obtained, its properties can be extracted using the properties idl attribute.

RTCRtpTransceiver - Web APIs
a transceiver is uniquely identified using its mid property, which is the same as the media id (mid) of its corresponding m-line.
... an rtcrtptransceiver is associated with an m-line if its mid is non-null; otherwise it's considered disassociated.
... mid read only the media id of the m-line associated with this transceiver.
...this field is null if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer.

Storage Access API - Web APIs
these restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.
...design properties unique to firefox are summarized here: if the embedded origin tracker.example has already obtained first-party storage access on the top-level origin foo.example, and the user visits a page from foo.example embedding a page from tracker.example again in less than 30 days, the embedded origin will have storage access immediately when loading.
... if a page from top-level origin foo.example embeds more than one <iframe> from tracker.example, and one of those <iframe>s uses the storage access api in order to obtain storage access successfully, all other iframes from tracker.example on foo.example top-level origins will immediately gain storage access as well, without needing to call requeststorageaccess() separately.
... if an embedded page from tracker.example has previously successfully obtained storage access on top-level origin foo.example, all embedded subresources from tracker.example on foo.example (e.g.

Using the aria-describedby attribute - Accessibility
this is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
... <div role="application" aria-labelledby="calendar" aria-describedby="info"> <h1 id="calendar">calendar</h1> <p id="info"> this calendar shows the game schedule for the boston red sox.
... <button aria-label="close" aria-describedby="descriptionclose" onclick="mydialog.close()">x</button> ...
... used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...

ARIA: timer role - Accessibility
associated wai-aria roles, states, and properties aria-label used to provide the name of the timer.
... aria-live elements with the role timer have an implicit aria-live value of off.
... <div id="clock" role="timer" aria-live="off">20</div> <button onclick="starttimer('clock')">start</button> /* basic javascript to update a timer */ function starttimer(timername) { // get the number of seconds let timer = document.getelementbyid(timername), seconds = parseint(timer.innertext); // remove a second // updated the content of timer timer.innertext = --seconds // if timer != 0, settimeout if (sec...
... <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> accessibility concerns improperly using the timer role can unintentionally xxx specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'timer' in that specification.

ARIA: Complementary role - Accessibility
labeling landmarks multiple landmarks if there is more than one complementary landmark role or <aside> element in a document, provide a label for each landmark using the aria-label attribute, or, if the aside has an appropriately descriptive title, point to it with the aria-labelledby attribute.
... <aside aria-label="note about usage"> <!-- content --> </aside> ...
... <aside id="sidebar" aria-label="sponsors"> <!-- content --> </aside> redundant descriptions screen readers will announce the type of role the landmark is.
...for example, a declaration of role="complementary" with an of aria-label="sidebar" may be announced redundantly as, "complementary sidebar".

ARIA: row role - Accessibility
<div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell...
... a row can contain a number of attributes clarifying the row's role, including aria-colindex, aria-level, aria-rowindex, and aria-selected.
... examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> ...
... <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</caption> <thead role="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="none">aria role</th> <th role="columnheader" aria-sort="none">semantic element</th> ...

ARIA: tab role - Accessibility
required javascript features while there are ways to build tab-like functionality without javascript, there are no substitute combination of html and css only that will provide the same set of functionality that's required above for accessible tabs with content.
...here we are enclosing our group of content in a div, with our tablist having an aria-label to label it for assistive technology.
... <div class="tabs"> <div role="tablist" aria-label="sample tabs"> <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0"> first tab </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> second tab </button> <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1"> third tab ...
... </button> </div> <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>content for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px so...

ARIA: table role - Accessibility
<div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="r...
... the table caption can be defined via aria-labelledby or aria-label.
... aria-label attribute the aria-label provides an accessible name for the table.
... examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> ...

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
flexbox containers using the display property's flex value causes an element to generate a block-level flex container box.
... the inline-flex value causes an element to generate an inline-level flex container box.
... -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; } -webkit-flex-direction: $value; -ms-flex-direction: $value; flex-direction: $value; } // shorter version: @mixin flex-dir($args...) { @include flex-direction($args...); } flexbox wrap the flex-wrap property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.
... -webkit-align-content: $value; @if $value == flex-start { -ms-flex-line-pack: start; } @else if $value == flex-end { -ms-flex-line-pack: end; } @else { -ms-flex-line-pack: $value; } align-content: $value; } ...

Block and inline layout in normal flow - CSS: Cascading Style Sheets
we describe block-level boxes as participating in a block formatting context, and inline-level boxes as participating in an inline formatting context.
...vertical margins between adjacent block-level boxes in a block formatting context collapse.
... in a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1 for elements with an inline formatting context: “in an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
... see also css basic box model normal flow - learn layout inline elements block-level elements ...

Pseudo-classes - CSS: Cascading Style Sheets
index of standard pseudo-classes :active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :...
...nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :state() :target :target-within :user-invalid :valid :visited :where() specifications specification status comment fullscreen api living standard defined :fullscreen.
... selectors level 4 working draft defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where().
... selectors level 3 recommendation defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().

direction - CSS: Cascading Style Sheets
the property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property.
... it also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.
... for the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be embed or override.
... formal definition initial valueltrapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification.

font-size - CSS: Cascading Style Sheets
syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or ...
...relative-size keywords as a <length> or a <percentage>, relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absolute-size keywords, based on the user's default font size (which is medium).
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the parent element's font sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <absolute-size> | <relative-size> | <length-percentage>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large<relative-size> = larger | smaller<l...
... working draft adds xxx-large keyword.

grid-column - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: grid-column-end grid-column-start syntax this property is specified as one or two <grid-line> values.
... if two <grid-line> values are given they are separated by "/".
... each <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both.
... formal definition initial valueas each of the properties of the shorthand:grid-column-start: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-column-start: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

margin-right - CSS: Cascading Style Sheets
if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed.
...es the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
..., block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications ...

repeating-radial-gradient() - CSS: Cascading Style Sheets
it is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient() .
..., | at <position> , <color-stop-list> ) \---------------------------------------------------------------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>?
...]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]?
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples black and white gradient <div class="radial-gradient"></div> .radial-gradient { width: 120px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } farthest-corner <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red, black 5%, blue 5%, green 10%); background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red 0 5%, green 5% 10%); } the elliptical gradient will be centered 20% from the top left, and will repeat 10 times...

text-decoration-color - CSS: Cascading Style Sheets
the text-decoration-color css property sets the color of decorations added to text by text-decoration-line.
...this effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the text-decoration-line property), and specifying the line color (with text-decoration-color) on a per-element basis.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples <p>this paragraph has <s>some erroneous text</s> inside it that i want to call attention to.</p> p { text-decoration-line: underline; text-decoration-color: cyan; } s { text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; } specifications specification status comment css text decoration module level 3the definition of 'text-decoration-color' in that specification.

text-decoration-style - CSS: Cascading Style Sheets
the text-decoration-style css property sets the style of the lines specified by text-decoration-line.
... the style applies to all lines that are set with text-decoration-line.
...use text-decoration-line: none instead.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax solid | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment c...

vertical-align - CSS: Cascading Style Sheets
b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a table: <table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p>there is a theory which states that if ever anyone d...
...iscovers exactly what the universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> <p>there is another theory which states that this has already happened.</p> </td> </tr> </table> table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { padding: 0.5em; font-family: monospace; } note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
... formal definition initial valuebaselineapplies toinline-level and table-cell elements.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>an <img class="top" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="li...

white-space - CSS: Cascading Style Sheets
syntax /* keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* global values */ white-space: inherit; white-space: initial; white-space: unset; the white-space property is specified as a single keyword chosen from the list of values below.
... pre-line sequences of white space are collapsed.
... the following table summarizes the behavior of the various white-space values: new lines spaces and tabs text wrapping end-of-line spaces normal collapse collapse wrap remove nowrap collapse collapse no wrap remove pre preserve preserve no wrap preserve pre-wrap preserve preserve wrap hang pre-line preserve collapse wrap remove break-spaces preserve preserve wrap wrap formal definition ...
...initial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ma...

Video player styling basics - Developer guides
te attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a number of properties that also need to be set for all elements within the video controls: .controls > * { float:left; width:3.90625%; height:100%; margin-left:0.1953125%; display:block; } .controls > *:first-child { margin-left:0; } all elements are floated left, as they are to be aligned next to one another, and each element is set to have a width of nearly 4% (again the actual value was calculated based on the required dimensions of the buttons), and a height of 100%.
... a value for margin-left is also set, but the first element (in this case the play/pause button) has this property overridden by the value 0.
...in this case, the margins and padding on the <figure> element need to be removed so that all the available space is taken advantage of, and the buttons are a bit too small so this needs to be altered by setting a new height on the element that has the .controls class set on it: @media screen and (max-width:64em) { figure { padding-left:0; padding-right:0; height:auto; } .controls { height:1.876rem; } } this works well enough until it is viewed on a smaller screen (680px/42.5em), so another breakpoint is made here.
...the definitions for the elements within the .controls element now also need to changed: @media screen and (max-width:42.5em) { .controls { height:auto; } .controls > * { display:block; width:16.6667%; margin-left:0; height:2.5rem; margin-top:2.5rem; } .controls .progress { position:absolute; top:0; width:100%; float:none; margin-top:0; } .controls .progress progress { width:98%; margin:0 auto; } .controls button { background-position:center center; } } the .progress container is now moved to the top of the control set via position:absolute, s...

Date and time formats used in HTML - HTML: Hypertext Markup Language
for <input>, the values of type that return a value which contains a string representing a date and/or time are: date datetime datetime-local month time week examples before getting into the intricacies of how date and time strings are written and parsed in html, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like.
... examples of valid time strings time string time 00:00:30.75 12:00:30.75 am (30.75 seconds after midnight) 12:15 12:15 pm 13:44:25 1:44:25 pm (25 seconds after 1:44 pm) local date and time strings a valid datetime-local string consists of a date string and a time string concatenated together with either the letter "t" or a space character separating them.
... when you set the value of a datetime-local input, the string is normalized into a standard form.
... examples of valid datetime-local strings date/time string normalized date/time string actual date and time 1986-01-28t11:38:00.01 1986-01-28t11:38:00.01 january 28, 1986 at 11:38:00.01 am 1986-01-28 11:38:00.010 1986-01-28t11:38:00.011 january 28, 1986 at 11:38:00.01 am 0170-07-31t22:00:00 0170-07-31t22:002 july 31, 170 at 10:00 pm notice that after normalization, this is the same string as the previous datetime-local string.

<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
having a single top-level title is also arguably better for screenreader users, and seo.
... sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section.
... example <header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- page content --> <footer> <nav aria-labelledby="footer-navigation"> <h2 id="footer-navigation">footer navigation</h2> <!-- navigation items --> </nav> </footer> in this example, screen reading technology would announce that there are two <nav> sections, one called "primary navigation" and one called "footer navigation".
... using the aria-labelledby attribute labeling regions • page structure • w3c wai web accessibility tutorials specifications specification status comment html living standardthe definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.

<hgroup> - HTML: Hypertext Markup Language
the html <hgroup> element represents a multi-level heading for a section of a document.
... the <hgroup> element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a multi-level heading.
... so in the abstract outline produced by the html outline algorithm defined in the html specification, the <hgroup> as a whole forms a single logical heading, with the entire set of <h1>–<h6> children of the <hgroup> going into the outline as one multi-level unit, to comprise that single logical heading in the abstract outline.
... to produce any (non-abstract) rendered view of such an outline, some choice must be made in the design of the rendering tool about how to render <hgroup> headings in such a way as to convey their multi-level nature.

Compression in HTTP - HTTP
compression algorithms used for files can be grouped into two broad categories: loss-less compression, where the compression-uncompression cycle doesn't alter the data that is recovered.
... for images, gif or png are using loss-less compression.
... some formats can be used for both loss-less or lossy compression, like webp, and usually lossy algorithm can be configured to compress more or less, which then of course leads to less or more quality.
... lossy compression algorithms are usually more efficient than loss-less ones.

CSP: sandbox - HTTP
allow-orientation-lock allows the page to disable the ability to lock the screen orientation.
... allow-pointer-lock allows the page to use the pointer lock api.
... allow-top-navigation allows the page to navigate (load) content to the top-level browsing context.
... allow-top-navigation-by-user-activation lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.

Feature-Policy: accelerometer - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: autoplay - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: battery - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: camera - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: display-capture - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: document-domain - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: encrypted-media - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: gyroscope - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: layout-animations - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: legacy-image-formats - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: magnetometer - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: microphone - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: midi - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: oversized-images - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: payment - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: picture-in-picture - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: publickey-credentials-get - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: sync-xhr - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: unoptimized-images - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: unsized-media - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: usb - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: vibrate - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

web-share - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

Feature-Policy: xr-spatial-tracking - HTTP
'none': the feature is disabled in top-level and nested browsing contexts.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing contexts.

JavaScript modules - JavaScript
they need to be top-level items; you can't use export inside a function, for example.
...to import the main.js script, we use this: <script type="module" src="main.js"></script> you can also embed the module's script directly into the html file by placing the javascript code within the body of the <script> element: <script type="module"> /* javascript module code here */ </script> the script into which you import the module features basically acts as the top-level module.
...too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors.
... renaming imports and exports inside your import and export statement's curly braces, you can use the keyword as along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.

Warning: unreachable code after return statement - JavaScript
the javascript warning "unreachable code after return statement" occurs when using an expression after a return statement, or when using a semicolon-less return statement but including an expression directly after.
... unreachable code after a return statement might occur in these situations: when using an expression after a return statement, or when using a semicolon-less return statement but including an expression directly after.
...in the case of semicolon-less return statements, it can be unclear whether the developer intended to return the statement on the following line, or to stop execution and return.
... warnings will not be shown for semicolon-less returns if these statements follow it: throw break var function examples invalid cases function f() { var x = 3; x += 4; return x; // return exits the function immediately x -= 3; // so this line will never run; it is unreachable } function f() { return // this is treated like `return;` 3 + 4; // so the function returns, and this line is never reached } valid cases function f() { var x = 3; x += 4; x -= 3; return x; // ok: return after all other statements } function f() { return 3 + 4 // ok: semicolon-less return with expression on the same line } ...

Functions - JavaScript
arguments: an array-like object containing the arguments passed to the currently executing function.
...not a source element } } examples // function declaration function foo() {} // function expression (function bar() {}) // function expression x = function hello() {} if (x) { // function expression function world() {} } // function declaration function a() { // function declaration function b() {} if (0) { // function expression function c() {} } } block-level functions in strict mode, starting with es2015, functions inside blocks are now scoped to that block.
... prior to es2015, block-level functions were forbidden in strict mode.
... 'use strict'; function f() { return 1; } { function f() { return 2; } } f() === 1; // true // f() === 2 in non-strict mode block-level functions in non-strict code in a word: don't.

Array - JavaScript
the javascript array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
... description arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.
... static methods array.from() creates a new array instance from an array-like or iterable object.
... array.prototype.reduceright() apply a funciton against an accumulator> and each value of the array (from right-to-left) as to reduce it to a single value.

Object.create() - JavaScript
for example: a simple common debugging function: // display top-level property name:value pairs of given object function showproperties(obj){ for(var prop in obj){ console.log(prop + ": " + obj[prop] + "\n" ); } } not such simple results: (especially if silent error-trapping had hidden the error messages) ob={}; ob.po=oco; ob.pn=ocn; // create a compound object using the test objects from above as property values > showproperties( ob ) // display top...
...-level properties - po: [object object] - error: cannot convert object to primitive value note that only first property gets shown.
... (but if the same object is created simply in a different order -- at least in some implementations...) ob={}; ob.pn=ocn; ob.po=oco; // create same compound object again, but create same properties in different order > showproperties( ob ) // display top-level properties - error: cannot convert object to primitive value note that neither property gets shown.
...rectly, does: ocn = object.create( null ); // create "null" object (same as before) ocn.tostring = tostring; // since new object lacks method then assign it directly from generic version > ocn.tostring() // shows "[object object]" > "ocn is: " + ocn // shows "ocn is: [object object]" ob={}; ob.pn=ocn; ob.po=oco; // create a compound object (same as before) > showproperties(ob) // display top-level properties - po: [object object] - pn: [object object] however, setting the generic prototype as the new object's prototype works even better: ocn = object.create( null ); // create "null" object (same as before) object.setprototypeof(ocn, object.prototype); // set new object's prototype to the "generic" object (not standard-object) (in addition to all the string-related...

TypedArray.from() - JavaScript
the typedarray.from() method creates a new typed array from an array-like or iterable object.
... syntax typedarray.from(source[, mapfn[, thisarg]]) where typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a typed array.
... description typedarray.from() lets you create typed arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects where you can get its elements, such as map and set).
... when array.from() gets an array-like which isn't an iterator, it respects holes.

Authoring MathML - MathML
jqmath is another script to parse a simple latex-like syntax but which also accepts non-ascii characters like √{∑↙{n=1}↖{+∞} 6/n^2} = π to write ∑ n = 1 + ∞ 6 n 2 = π .
... command-line programs an alternative way is to parse the simple syntax before publishing your web pages.
... that is, you use command-line programs to generate them and publish these static pages on your server.
...finally, bluegriffon has an add-on to insert mathml formulas in your document, using ascii/latex-like syntax.

Media container formats (file types) - Web media technologies
audio codecs supported by 3gp codec browser support chrome edge firefox safari amr-nb yes1 amr-wb yes1 amr-wb+ yes1 aac-lc yes1,2 he-aac v1 yes1,2 he-aac v2 yes1,2 mp3 yes1 [1] firefox only supports 3gp on openmax-based devices, which currently means the boot to gecko (b2g) platform.
... no audio codecs supported by quicktime codec browser support chrome edge firefox safari aac no alaw 2:1 no apple lossless (alac) no he-aac no mpeg-1 audio layer iii (mp3) no microsoft adpcm no µ-law 2:1 (u-law) no wave (wav) the waveform audio file format (wave), usually referred to simply as wav due to its filename extension being .wav, is a format developed by microsoft and ibm to store audio bitstream data.
... audio codecs supported by wave codec browser support chrome edge firefox safari adpcm (adaptive differential pulse code modulation) no gsm 06.10 no lpcm (linear pulse code modulation) yes mpeg-1 audio layer iii (mp3) no µ-law (u-law) no webm webm (web media) is a format based on matroska which is designed specifically for use in modern web environments.
...you could even choose to offer a retro-like quicktime or avi fallback for good measure.

Codecs used by WebRTC - Web media technologies
profile-level-id all webrtc implementations are required to specify and interpret this parameter in their sdp, identifying the sub-profile used by the codec.
...this is useful to note, since in rfc 6184 ("rtp payload format for h.264 video"), profile-level-id is entirely optional.
... mandatory audio codecs codec name browser compatibility opus chrome, edge, firefox, safari g.711 pcm (a-law) chrome, firefox, safari g.711 pcm (µ-law) chrome, firefox, safari see below for more details about any webrtc-specific considerations that exist for each codec listed above.
...both µ-law and a-law encodings are allowed.

text-decoration - SVG: Scalable Vector Graphics
it is a shorthand for the text-decoration-line and text-decoration-style properties.
...ect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties animatable yes for a description of the values, please refer to the css text-decoration property.
... candidate recommendation defines the property as a shorthand for text-decoration-line, text-decoration-style, and text-decoration-color.
... candidate recommendation mainly refers to the definition in css text decoration 3 turning the property into a shorthand for text-decoration-line and text-decoration-style.

writing-mode - SVG: Scalable Vector Graphics
the writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes default value horizontal-tb value horizontal-tb | vertical-rl | vertical-lr animatable yes horizontal-tb this value defines a top-to-bottom block flow direction.
... vertical-rl this value defines a right-to-left block flow direction.
... vertical-lr this value defines a left-to-right block flow direction.

Index - XSLT: Extensible Stylesheet Language Transformations
19 xslt elements reference element, overview, reference, xslt there are two types of elements discussed here: top-level elements and instructions.
... a top-level element must appear as the child of either <xsl:stylesheet> or <xsl:transform>.
... 34 <xsl:import> element, reference, xslt, import the <xsl:import> element is a top-level element that serves to import the contents of one stylesheet into another stylesheet.
...when used as a top-level element, the parameter is global .

Using the WebAssembly JavaScript API - WebAssembly
now, to help us understand what is going on here, let’s look at the text representation of our wasm module (which we also meet in converting webassembly format to wasm): (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
... we need to reflect this two-level namespace in javascript when writing the object to be imported into the wasm module.
... memory in the low-level memory model of webassembly, memory is represented as a contiguous range of untyped bytes called linear memory that are read and written by load and store instructions inside the module.
... thus, tables are currently a rather low-level primitive used to compile low-level programming language features safely and portably.

Module structure of the SDK - Archive of obsolete content
sdk modules the modules supplied by the sdk are divided into two sorts: high-level modules like panel and page-mod provide relatively simple, stable apis for the most common add-on development tasks.
... low-level modules like heritage and namespace provide more powerful functionality, and are typically less stable and more complex.
...for high-level modules this is just sdk/<module_name>, and for low-level modules it is sdk/<path_to_module>/<module_name>: // load the high-level "tabs" module var tabs = require("sdk/tabs"); // load the low-level "uuid" module var uuid = require('sdk/util/uuid'); the path to specify for a low-level module is given along with the module name itself in the title of the module's documentation page (for example, system/environment).

jpm - Archive of obsolete content
jpm is a command-line tool that enables you to test, run, and package add-ons.
...for example, in an ubuntu or debian terminal window, enter sudo apt-get install nodejs nodejs-legacy npm.
...on debian and ubuntu, this can be remedied by ensuring you installed the compatibility package, nodejs-legacy: sudo apt-get install nodejs-legacy on other distributions, you may have to create a local symlink to nodejs manually: sudo ln -s "$(which nodejs)" /usr/local/bin/node installing jpm after you have npm installed and node on your path, install jpm just as you would any other npm package.

package.json - Archive of obsolete content
lib string representing the top-level module directory provided in this add-on.
... main a string representing the name of a program module that is located in one of the top-level module directories specified by lib.
...previously was --update-link in cfx.

Localization - Archive of obsolete content
to reference localized strings from html, add a data-l10n-id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./ic...
...nction() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the data-l10n-id attribute set.
...o_id= <blink>hello!</blink> localizing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
so here's your basic, plain-vanilla top-level makefile (makefile.in in the main extension directory): depth = ../..
...you also need to remove the dist_files variable since that's going to be in the top-level makefile.
... as for the top-level makefile, it will now look like this: depth = ../..

Enhanced Extension Installation - Archive of obsolete content
to this end, we scan the category extension-install-locations as the extension system is started (after profile initialization) and add these to our internal set.
...there three kinds of item installation: installation from a file installation by a folder or folder-link "appearing" in an install location, and a hybrid of the two - an xpi file "appearing" into a directory based install location.
... we drop support for the -lock-item/-unlock-item flags, as well as the -list-global-items flag.

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
however, you should keep in mind that odd-looking toolbars are likely to confuse and annoy users.
...*/ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar-large.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 24px, 24px, 0px); } toolbar[iconsize="small"] #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } several css rules apply by default to all toolbar buttons.
... these add the button-like look you want.

Appendix D: Loading Scripts - Archive of obsolete content
although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session.
...// the following may be used instead at the top-level: // // let context = this if (components.utils.getglobalforobject) // gecko 2.x var context = components.utils.getglobalforobject({}); else // gecko 1.x context = {}.__parent__; loadscript("script.js", context); the sub-script loader the mozijssubscriptloader can be used to load local scripts from the chrome:, resource:, and file: protocols into any javascript object.
...although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session.

JXON - Archive of obsolete content
, "encoding": "ascii" } numbers are recognized (integers and decimals): <root><age>12</age><height>1.73</height></root> becomes { "age": 12, "height": 1.73 } booleans are recognized case insensitive: <root><checked>true</checked><answer>false</answer></root> becomes { "checked": true, "answer": false } strings are escaped: <root>quote: &quot; new-line: </root> becomes "quote: \" new-line:\n" empty elements will become null: <root><nil/><empty></empty></root> becomes { "nil": null, "empty": null } if all sibling elements have the same name, they become an array <root><item>1</item><item>2</item><item>three</item></root> becomes [1, 2, "three"] mixed mode text-nodes, comments and attributes ge...
...tml document instead of an xml document: /* the structure of my document */ var omyhtmlstruct = { "html": { "head": { "meta": { "@http-equiv": "content-type", "@content": "text/html; charset=utf-8" }, "title": "my html document", "script": { "@type": "text/javascript", "keyvalue": "alert(\"welcome!\");" }, "style": "p:first-letter {\n font: italic bold 30px georgia, serif;\n}" }, "body": { "h1": "my html document", "p": "hello world!!" } } }; /* create the document */ var omyhtmldoc = jxon.unbuild(omyhtmlstruct, "http://www.w3.org/1999/xhtml"); …and here is the output of alert((new xmlserializer()).serializetostring(omyhtmldoc)): <html> <head> <meta http-equiv="content-type" content=...
..."text/html; charset=utf-8" /> <title>my html document</title> <script type="text/javascript"> alert("welcome!"); </script> <style> p:first-letter { font: italic bold 30px georgia, serif; } </style> </head> <body> <h1>my html document</h1> <p>hello world!!</p> </body> </html> note: as we already said in the note within code considerations, despite the bidirectional conversion between xml and json is lossless regarding the whole content and the structure of an xml document, it is not lossless regarding the ordering of elements, which for some xml dialects (like xhtml) is part of the information.

Documentation for BiDi Mozilla - Archive of obsolete content
ibmbidi), written by simon montagu and posted to the mozilla-layout mailing list.
...note that we are not affected by buggy bidi implementations on specific platforms, since the platform never sees a text fragment with mixed directionality, and is not expected to do anything more complicated than displaying left-to-right text from left to right or right-to-left text from right to left.
...it is created when resolving text containing a unicode bidi control character, a bdo tag, or right-to-left alignment caused by a dir tag or css.

Layout System Overview - Archive of obsolete content
layout is used to implement both a full-blown wysiwyg html editor, and a single and multi-line text entry control.
...here are the high-level classes that make up the layout system.
...for this overview, the frames, style set, and reflow queue are the most important high-level parts of the presentation shell.

Message Summary Database - Archive of obsolete content
mdb is a schema-less db interface, so it's trivial to add new attributes without regenerating the db, and it's trivial for older code to read newer databases, because the code can ignore but maintain the attributes it doesn't know about.
...but i believe sql-lite has the same problem.
... mork is schema-less.

Mozilla Application Framework in Detail - Archive of obsolete content
where speed is the foremost consideration, we provide c++ libraries with multi-language interfaces for comprehensive, performant access to networking, filesystem, content, rendering, and much more.
...necko also provides an abstract "file descriptor" interface for low-level data access.
...the xpinstall api makes the following functionality available as high-level javascript objects: an install trigger that initiates installations windows registry access mozilla registration interfaces for registering new mozilla software facilities for detecting and maintaining application versions high-level objects for manipulating local directories and files complete reference documentation, including useful example installations the following snippet from ...

Mozilla Application Framework - Archive of obsolete content
framework xul a comprehensive, cross-platform ui toolkit with an easy-to-learn xml language for defining ui structure, a schema for localization, and support for both native and cross-platform (using css) look and feel to make writing uis quick and painless.
... gecko a performant web content rendering/editing engine with world-leading support for standards that you can drop into your application with a single line of xul.
... lxr a web interface to the mozilla codebase that shows you every file in the repository as well as a line-by-line breakdown of who changed which line when in each file bonsai a web interface to the checkin log that you can query for checkins between certain dates, of certain files, or by certain developers.

Mozilla Crypto FAQ - Archive of obsolete content
the released source code is dual-licensed under the mpl and the gpl.
...specific questions about licensing of the psm and nss source code should be directed to the netscape.public.mozilla.license newsgroup or the associated mozilla-license mailing list.
... as noted above, the psm code implements ssl and (in the future) s/mime support for mozilla by taking advantage of generic high-level mozilla public apis used to add new protocols and message formats.

PyDOM - Archive of obsolete content
for example, when a top-level window has something like: <window ...
...for example, let's say you have xul similar to pyxultest: top-level script code says something like: button = document.getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are the window itself.
... the event handler could also have used getelementbyid - the point is that both the event handler and top-level script share the same namespace.

Merging TraceMonkey Repo - Archive of obsolete content
conflicting files can be listed via hg resolve -l.
... exercise caution, because leaving off the -l will re-merge and lose all of the resolutions you've already performed.
...once you've resolved all the files, all the entries in hg resolve -l will have rs next to them.

Table Layout Regression Tests - Archive of obsolete content
start the layout debugger via mozilla -layoutdebug - p foo where foo is just another profile than your main profile.
... execute the baseline test shutdown the layoutdebugger execute mozilla -layoutdebug - p foo >selftest.txt execute the verify test make a note which tests have failed grep 'failed' selftest.txt (these are false positives, quite frequently they indicate reflow problems, pages showing differently when loaded from cache) make your changes to the source, recompile.
... execute mozilla -layoutdebug - p foo >outputfile.txt execute the verify test make a note which tests have failed grep 'failed' outputfile.txt check how many tests have failed and analyze your results: if the regression tests have failed at the same place as the previous diagnosed false positives => ignore try to figure out what the other regressions are: are they improving the picture or are they regressions?

Running Tamarin performance tests - Archive of obsolete content
tion of builtin.abc -s --shellabc location of shell_toplevel.abc -x --exclude comma separated list of directories to skip -h --help display help and exit -t --notime do not generate timestamps (cleaner diffs) -f --forcerebuild force rebuild all test files -c --config sets the config string [default os-tvm] -q --quiet display minimum output during testrun -l --log also log all output to given logfile --summaryonly only display final summary --rebuildtests rebuild the tests only - do not run against vm --showtimes shows the time for each test --ascargs args to pass to asc on rebuild of test files --vmargs args to pass to vm --timeout max time to run all tests --testtimeout max time to l...
...om order --seed explicitly specify random seed for --random -s --avm2 second avmplus command to use --avmname nickname for avm to use as column header --avm2name nickname for avm2 to use as column header --detail display results in 'old-style' format --raw output all raw test values -i --iterations number of times to repeat test -l --log logs results to a file -k --socketlog logs results to a socket server -r --runtime name of the runtime vm used, including switch info eg.
...adb supports ssh-like commands to an android device.

Tamarin build documentation - Archive of obsolete content
note that additional command-line arguments are only available in the debug configuration.
... build tamarin release shell - get tamarin-redux - export the following variables into the environment $ export android_toolchain=<full path to your android sdk/ndk top folder> $ export android_ndk=$android_toolchain/android-ndk $ export android_ndk_bin=$android_ndk/toolchains/arm-linux-androideabi-4.4.3/prebuilt/darwin-x86/bin $ export android_sdk=$android_toolchain/android-sdk-mac_86 $ export path=$path:$android_sdk/platform-tools:$android_ndk_bin - example commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux $ cd tamarin-redux $ mkdir objdir-release $ cd objdir-release $ ../configure.py --arm-arch=armv7-a --target=arm-android $ make to make a debu...
... importing the project into eclipse file >> import >> general >> existing projects into workspace click next the root directory should be the full path to your top-level tamarin-redux directory ensure the 'avmshell-project' project is checked in the 'projects' list uncheck 'copy projects into workspace' click finish building in eclipse 8 build configurations are included for macos with the gcc 4.0 toolchain: mac-32-release mac-64-release mac-32-debug mac-64-debug mac-32-release-debugger mac-64-release-debugger mac-32-debug-debugger mac-64-debu...

Index - Archive of obsolete content
890 providing command-line options add-ons, command line, extensions, guide, xulrunner extensions and xul applications can modify the way command line parameters are handled by writing a component that implements the nsicommandlinehandler interface and registering it in a category.
... 914 text-link xul reference, xul_style_classes no summary!
... 1216 window xul elements, xul reference describes the structure of a top-level window.

Creating a Window - Archive of obsolete content
you can use the command-line parameter '-chrome' to specify the xul file to open when mozilla starts.
...(usually the browser window.) for example, we could open the find files dialog with either of the following: mozilla -chrome chrome://findfile/content/findfile.xul mozilla -chrome resource:/chrome/findfile/content/findfile.xul if you run this command from a command-line (assuming you have one on your platform), the find files dialog will open by default instead of the mozilla browser window.
...instead, it causes the specified file to open as a top-level window without any browser chrome, such as the address field or menu.

Templates - Archive of obsolete content
let's take a simple example where we want to create a button for each top-level bookmark.
...this example will only get the top-level bookmarks (or bookmark folders) as we're going to create buttons.
... example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark.

How to enable locale switching in a XULRunner application - Archive of obsolete content
here is a code snippet showing how this is done: the definition of the xul control: <listbox id="locale-listbox"> <!-- generated list items go in here --> </listbox> <button label="&switchlocale.button;" oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.ns...
...ry); var selectedlocale = xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?
... var localelistbox = document.getelementbyid("locale-listbox"); var newlocale = localelistbox.selecteditem.value; // write preferred locale to local user config var prefs = components.classes["@mozilla.org/preferences-service;1"].

application/http-index-format specification - Archive of obsolete content
content-length base 10 digits representing the size of the file in bytes.
... file-type one of the following keywords to represent a special status for a file: file directory symbolic-link sym-file (a symbolic link to a file) sym-directory (a symbolic link to a directory) permissions unix type file permission syntax.
...100: 300: ftp://test.netscape.com/u/montulli 100: 200: filename content-length content-type file-type last-modified 201: foo.txt 512 text/plain file tue,%2015%20nov%201994%2008:12:31%20gmt 201: bar.html 9683 text/html file tue,%2025%20oct%201994%2008:12:31%20gmt 201: foobar 0 application/http-index-format directory tue,%2025%20oct%201994%2008:12:31%20gmt original document information author(s): christian biesinger last updated date: may 10, 2004 ...

Theme changes in Firefox 3 - Archive of obsolete content
browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left no longer has a margin-left.
... instead .tabs-left now displayed and given the same width as the former margin-left.
... mac os x mac os x themes for firefox 3 should add these two rules to the end of chrome://global/skin/wizard.css: .wizard-buttons-btm { padding:xpx; } .wizard-label-box { display: none; } the numeric value ofx, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2.

-ms-content-zoom-snap-points - Archive of obsolete content
initial valuesnapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values snapinterval( <percentage>, <percentage> ) specifies where the snap-points will be placed.
... if any value specified is less than that specified by the -ms-content-zoom-limit-min property, the value of -ms-content-zoom-limit-min is used.
... if any value specified is greater than that specified by the -ms-content-zoom-limit-max property, the value of -ms-content-zoom-limit-max is used.

-ms-content-zooming - Archive of obsolete content
initial valuezoom for the top level element, none for all other elementsapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none the initial value of all elements except the top-level element.
... zoom the initial value of the top-level element.
...the top-level element can also be zoomed via double-tap when it is zoom-enabled.

::-ms-fill-upper - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face f...
...ont-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.
... see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

::-ms-thumb - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face f...
...ont-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
... see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

Packages - Archive of obsolete content
summary a top-level object used to access java classes from within javascript code.
... created by the packages object is a top-level, predefined javascript object.
...for example, you can access a constructor of the frame class as follows: var theframe = new packages.java.awt.frame(); for convenience, javascript provides the top-level netscape, sun, and java objects that are synonyms for the packages properties with the same names.

XForms Custom Controls - Archive of obsolete content
this will also allow you to be up to date with our current approaches (often the result of hard-learned lessons) and that will hopefully help you to more easily write your own controls.
...the other is the implementation binding that adds the host-language specific representation of the xforms control.
... this control --> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> </bindings> <xf:model> <xf:instance xmlns=""> <data> <curimg></curimg> <img label="firefox">http://www.mozilla.com/images/firefox-logo-64x64.png</img> <img label="thunderbird">http://www.mozilla.com/images/thunderbird-logo-64x64.png</img> <img label="bugzilla">http://www.mozilla.org/images/p-bugz.gif</img> <img label="mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img> </data> </xf:instance> </xf:model> <style type="text/css"> @namespace xf url(http://www.w3.org/2002/xforms); x...

Common causes of memory leaks in extensions - Extensions
if your add-on makes use of long-lived timeouts or uses window.setinterval(), you need to take special care to ensure your code won't accidentally leak content windows.
...if you put a reference to anything within this compartment into a long-lived window object (such as browser.xul), javascript module or xpcom component, the bootstrap.js compartment will become a zombie.
...if the window in question is browser.xul or some long-lived web app such as gmail, the leaked compartment might survive for quite some time.

Audio for Web games - Game development
to see this in action, let's lay out some separate tracks: <section id="tracks"> <ul> <li data-loading="true"> <a href="leadguitar.mp3" class="track">lead guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-decribedby="guitar-play-label"> <span id="guitar-play-label">play</span> </button> </li> <li data-loading="true"> <a href="bassguitar.mp3" class="track">bass guitar</a> <p class="loading-text">loading...</...
...p> <button data-playing="false" aria-describedby="bass-play-label"> <span id="bass-play-label">play</span> </button> </li> <li data-loading="true"> <a href="drums.mp3" class="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <span id="drums-play-label">play</span> </button> </li> <li data-loading="true"> <a href="horns.mp3" class="track">horns</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="horns-play-label"> <span id="horns-play-label">play</span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...
......</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://jplayer.org/">jplayer.org</a></p> </section> all of these tracks are the same tempo and are designed to be synchronized with each other, so we need to make sure they are loaded and available to the api before we are able to play them.

Visual typescript game engine - Game development
this is high-level programming in this software.
... ├── package.json ├── package-lock.json ├── webpack.config.js ├── tsconfig.json ├── tslint.json ├── launch.json ├── workplace.code-workspace logo.png license ├── build/ (this is auto generated) | ├── externals/ | ├── templates/ | ├── imgs/ | ├── styles/ | | └── favicon.ico | ├── visualjs2.js | ├── app.html ├── src/ | ├──...
...| ├── examples/ | | ├── platformer/ | ├── html-components/ | | ├── register.html | | ├── login.html | | ├── games-list.html | | ├── user-profile.html | | ├── store.html | | ├── broadcaster.html | ├── index.html | ├── app-icon.ts | └── app.ts └── server/ | ├── package.json | ├── package-lock.json | ├── server-config.js | ├── database/ | | ├── database.js | | ├── common/ | | ├── email/ | | ...

Domain - MDN Web Docs Glossary: Definitions of Web-related terms
for example, in "developer.mozilla.org": "org" is called a top-level domain.
...here, "org" means "organization" which is defined in a top-level domain registry.
...if you like to own a domain you have to register it with one of the many registrars who are allowed to do so with a top-level domain registry.

Request header - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the content-length appearing in a post request is actually an entity header referring to the size of the body of the request message.
... a few request headers after a get request: get /home.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, b...
...ut an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...

XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
te('parse'); var xpointer = xinclude.getattribute('xpointer'); var encoding = xinclude.getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uniformity in testing below if (parse ===...
.../, '') || href.match(/^#/, '')) { alert('fragment identifiers are disallowed in an xinclude "href" attribute'); return false; } var j; var xincludeparent = xinclude.parentnode; try { netscape.security.privilegemanager.enableprivilege('universalxpconnect universalbrowserread'); // necessary with file:///-located files trying to reach external sites if (href !== null) { var response, responsetype; var request = new xmlhttprequest(); request.open('get', href, false); request.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); request.setrequestheader('cache-control', ...
...'no-cache'); if (accept) { request.setrequestheader('accept', accept); } if (acceptlanguage) { request.setrequestheader('accept-language', acceptlanguage); } switch (parse) { case 'text': // priority should be on media type: var contenttype = request.getresponseheader('content-type'); //text/xml; charset="utf-8" // send to get headers first?

CSS selectors - Learn web development
for example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected.
... p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our documents.
... 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 selectors type, class, and id selectors attribut...

Styling tables - Learn web development
to do this, add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on y...
...with table-layout: fixed, you can size your columns according to the width of their headings, and then deal with their content as appropriate.
... use table-layout: fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (<th>).

Styling lists - Learn web development
sual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
... the <dd> elements have margin-left of 40px (2.5em.) the <p> elements we've included for reference have a top and bottom margin of 16px (1em), the same as the different list types.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.

Example 1 - Learn web development
inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height...
... inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height...
...} .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; ...

Other form controls - Learn web development
previous overview: forms next we now look at the functionality of non-<input> form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the <output> element (which we saw in action in the previous article), and progress bars.
... multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element.
... controlling multi-line rendering <textarea> accepts three attributes to control its rendering across several lines: cols specifies the visible width (columns) of the text control, measured in average character widths.

CSS basics - Learn web development
let's go through these line-by-line: width: 600px; this forces the body to always be 600 pixels wide.
...a larger value produces a more fuzzy-looking shadow.
...so to apply margins to the image, we must give the image block-level behavior using display: block;.

The web and web standards - Learn web development
in 1980, tim berners-lee (often referred to as timbl) wrote a notebook program called enquire, which featured the concept of links between different nodes.
...simple html looks like this: <h1>this is a top-level heading</h1> <p>this is a paragraph of text.</p> <img src="cat.jpg" alt="a picture of my cat"> if we adopted a house-building analogy, html would be like the foundations and walls of the house, which give it structure and hold it together.
...there are technical considerations here (such as altering your layout so that it still works ok for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).

Introduction to web APIs - Learn web development
in the same way, if you want to say, program some 3d graphics, it is a lot easier to do it using an api written in a higher-level language such as javascript or python, rather than try to directly write low level code (say c or c++) that directly controls the computer's gpu or other graphics functions.
...in the background, the browser is actually using some complex lower-level code (e.g.
...let's recap this to make it clearer, and also mention where other javascript tools fit in: javascript — a high-level scripting language built into browsers that allows you to implement functionality on web pages/apps.

Framework main features - Learn web development
jsx jsx, which stands for javascript and xml, is an extension of javascript that brings html-like syntax to a javascript environment.
...testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.
... here’s a quick test for our counterbutton written with the help of react testing library — it tests a number of things, such as the button's existance, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times: import react from "react"; import { render, fireevent } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; import counterbutton from "./counterbutton"; it("renders a semantic with an initial state of 0", () => { const { getbyrole } = render(<counterbutton />); const btn = getbyrole("button"); expect(btn).tobeinthedocument(); expect(btn).tohavetextcontent("clicked 0 times"); }); it("increments the count when clicked", () => { ...

Working with Svelte stores - Learn web development
script> import { alert } from '../stores.js' import { ondestroy } from 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </st...
...remember that we can access top-level variables from the markup, and whenever they are modified the dom will update accordingly.
... we can declare a region that contains dynamic content that should be announced by assistive technologies with the aria-live property followed by the politeness setting, which is used to set the priority with which screen readers should handle updates to that regions.

Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save ...
... required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form ...
... <template> <div class="stack-small"> <div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> <button type="button" class="btn btn__danger" @click="deletetodo"> delete <span class="visually-hidden">{{label}}</span> </button> </div> </div> </template> we’...

Handling common JavaScript problems - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing.
... incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through 10 iterations, each time creating a paragraph and adding an onclick event handler to it.
...see good-for-loop.html (see the source code also) for a version that works.

Accessibility API cross-reference
in tagged pdf n/a n/a expressed with aria-labelledby if visible on screen or aria-label otherwise <caption> (for tables), <figcaption> (for figures), and <label> with a for attribute (for input elements) a <toc> or <l> may contain a <caption> as its first item <caption> or <lbl> a cell in a table cell n/a table_cell cell <td> td not what you think - this is for the damn papercl...
...in aria, the heading level is expressed with the aria-level attribute.
... n/a accessible_active_descendant_property aria-activedescendant critical info to convey immediately alert_high n/a n/a aria-live=assertive info that's important, but does not require immediacy alert_medium n/a n/a aria-live=polite low-priority info such as a tip or hint alert_low n/a n/a n/a this object is changing or moving rapidly animated n/a n/a n/a indicates that the user input is curr...

Mozilla’s UAAG evaluation report
(p1) g provides sequential access to links and input form controls cannot navigate to non-links and non-input form controls with event handlers cannot configure mozilla to only allow focus changes on explicit user request 9.4 restore history.
...(p2) g provides sequential access to links and input form controls cannot navigate to non-links and non-input form controls with event handlers no directional navigation, or navigation to links by name 9.8 text search.
...(p2) g use system colors by default (classic theme) underlines links by default does not have ui to highlight non-link and non-form elements that have event handlers can have user css for user styling of elements with event handlers 10.5 outline view.

Creating a Language Pack
pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code).
...issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir rm -f -rf mergedir macosx_deployment_target= compare-locales -m mergedir /users/your_id/mozilla/vc/mozilla-aurora/browser/locales/l10n.ini /users/your_id/mozilla/vc/l10n-central x-testing x-testing: browser chrome browser aboutcerterror.dtd // add and localize this file ...
... $ cd ../../dist/ $ ls -l total 100216 drwxr-xr-x 5 your_id your_status 170 27 lis 13:33 branding -rw-r--r--@ 1 your_id your_status 25248119 26 lis 14:34 firefox-3.6b5pre.en-us.mac.dmg -rw-r--r--@ 1 your_id your_status 26056973 27 lis 13:40 firefox-3.6b5pre.x-testing.mac.dmg drwxr-xr-x 3 your_id your_status 102 27 lis 13:38 install drwxr-xr-x 3 your_id your_status 102 27 lis 13:40 l10n-stage dr...

ESLint
setting up eslint ./mach eslint --setup running eslint eslint can be run via: ./mach lint -l eslint you can limit running it to a specific directory with: ./mach lint -l eslint browser/components or work directory changes: ./mach lint -l eslint -w or outgoing commits only: ./mach lint -l eslint -o see ./mach eslint --help for more options when running eslint.
... prior to firefox 55 the location for the eslint binary used to be tools/lint/eslint/node_modules/.bin, since bug 1305023, node_modules is now located in the top-level directory, and should need no special set-up.
... do something like: // eslint-disable-next-line no-undef it.does.not.exist(); need more help?

mach
mach (german for to make) is a program via the "command-line interface" to help developers perform installation tasks such as installing firefox from its c++ source code.
... if it works, you can look at compiler warnings: $ ./mach warnings-list try running the program: $ ./mach run try running your program in a debugger: $ ./mach run --debug try running some tests: $ ./mach xpcshell-test services/common/tests/unit/ or run an individual test: $ ./mach mochitest browser/base/content/test/general/browser_pinnedtabs.js you run mach from the source directory, so you should be able to use your shell's tab completion to tab-comple...
... mach will colorize terminal output (on terminals that support it - typically most terminals except on windows) mach will scan build output for compiler warnings and will automatically record them to a database which can be queried with mach warnings-list and mach warnings-summary.

Experimental features in Firefox
nightly 43 yes developer edition 43 no beta 43 no release 43 no preference name layout.css.control-characters.enabled or layout.css.control-characters.visible property: initial-letter the initial-letter css property is part of the css inline layout specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
... nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it.
... webgpu api this new api provides low-level support for performing computation and graphics rendering using the graphics processing unit (gpu) of the user's device or computer.

PBackground
the root of the tree is known as the top-level actor, an instance of one of a small number of top-level protocols.
...the top-level actor for most things is pcontent, which connects the main thread of the chrome process to the main thread of a child process.
...instead we can go directly to the compositor thread in the parent process by creating a new top-level protocol that connects the compositor thread in the parent process to the main thread of a child process.

IPDL Tutorial
a protocol hierarchy begins with a single top-level protocol from which all subprotocol actors are eventually created.
... in mozilla there are two main top-level protocols: ppluginmodule for remote plugins, and pcontent for remote tabs.
... accessing the protocol tree from c++ the ipdl compiler generates methods that allow actors to access their manager (if the actor isn't top-level) and their managees (if any) from c++.

Localizing XLIFF files for iOS
enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/ you should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it.
... in the <file> tag, add the target-language attribute with your locale code as the value (e.g., target-language="xx-xx").
...each <file> tag requires the target-language attribute with your locale code as the value (e.g., target-language="xx-xx").

Localizing with Koala
in a real-life situation, that would become for example "de" (for german) or "es-es" (for spanish in spain).
...koala features a very handy tool called compare-locales, which compares the files from en-us with your files in x-testing and gives you statistics about new, changed, missing and obsolete files and strings.
... re-running the comparison a common scheme of working with the compare-locales tools (included in koala) is to incrementally translate and commit the files and then re-run comparison to see what is left to be translated.

Localizing with Mozilla Translator
besides that, you will need to create one tiny product for other-licenses/branding/firefox.
... ; assuming we are in a directory containing mozilla-central/ $ mkdir locale-only $ cd locale-only $ mkdir -p browser extensions/reporter other-licenses/branding/firefox/ $ cd browser; ln -s ../../mozilla-central/browser/locales/; cd ..
... $ cd other-licenses/branding/firefox/; ln -s ../../../../mozilla-central/other-licenses/branding/firefox/locales/; cd ../../..

Initial setup
if a community doesn't exist, send an email to the new-locales newsgroup for additional guidance.
... compare-locales compare-locales is a python script that helps you check your work without needing to run firefox or another application.
... wget wget is a command-line utility that allows you to retrieve files using internet protocols.

Mozilla Web Developer FAQ
a block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block.
... in the standards mode mozilla does not generate implicit top-level javascript variable bindings for elements with the id or name attribute.
...the past practice of displaying non-latin text by assigning non-latin glyphs to latin code points breaks copying and pasting, breaks searching on the page, breaks indexing by search engines and breaks readability in browsers that do not support downloadable fonts (e.g.

Activity Monitor, Battery Status Menu and top
task_power_info::task_platform_idle_wakeups obtained from the task_info function.) in mac os 10.10 it appears to have been changed to measure interrupt-level wakeups (a superset of idle wakeups), which are less interesting.
... ioreg -l | grep board-id in contrast, on mac os 10.9 it is computed via a simpler machine model-independent formula that only factors in cpu usage and wakeup frequency.
... top top is similar to activity monitor, but is a command-line utility.

Leak-hunting strategies and tips
(by most of the leaks, i mean the leaks of large numbers of different types of objects or leaks of objects that are known to entrain many non-logged objects such as js objects.
...ments, and docshells only all platforms any build gc and cc logs js objects, dom objects, many other kinds of objects all platforms any build leak tools for medium-size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports or use moz_count_{ctor,dtor} all tier 1 platforms debug build (or build opt with --enable-logrefcnt) leaksoup (part of tracemalloc) all objects?
... tips disabling arena allocation with many lower-level leak tools (particularly trace-malloc based ones, like leaksoup) it can be helpful to disable arena allocation of objects that you're interested in, when possible, so that each object is allocated with a separate call to malloc.

Memory reporting
making measurements nsimemoryreporter provides the high-level interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount".
...avoiding double measurement is easy in tree-like structures.
... in graph-like structures (where an object might be pointed to by more than one other object) it gets more difficult, and might even require some way to mark objects that have been counted (and then a way to unmark them once the measurement is complete).

NSS_3.12_release_notes.html
rmation new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
...bug 403680: cert_pkixverifycert fails if crls are missing, implement cert_pi_revocationflags bug 427706: nss_3_12_rc1 crashes in passwordmgr tests bug 426245: assertion failure went undetected by tinderbox bug 158242: pk11_putcrl is very memory inefficient bug 287563: please make cert_comparenamewithconstraints a non-static function bug 301496: nss_shutdown failure in p7sign bug 324878: crlutil -l outputs false crl names bug 337010: oom crash [[@ nsc_digestkey] dereferencing possibly null att bug 343231: certutil issues certs for invalid requests bug 353371: klocwork 91117 - null pointer dereference in cert_certchainfromcert bug 353374: klocwork 76494 - null ptr derefs in cert_formatname bug 353375: klocwork 76513 - null ptr deref in nsscertificatelist_docallback bug 353413: klocwork 76541...
...ecitem_allocitem loser bug 288730: compiler warnings in certutil bug 337251: warning: /* within comment bug 362967: export secmod_deletemoduleex bug 389248: nss build failure when nss_enable_ecc is not defined bug 390451: remembered passwords lost when changing master password bug 418546: reference leak in cert_pkixverifycert bug 390074: os/2 sign.cmd doesn't find sqlite3.dll bug 417392: certutil -l -n reports bogus trust flags documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.

NSS Config Options
flags: turn on the following flags: ssl-lock: turn off the ability for applications to change policy with the ssl_setcipherpolicy (or ssl_setpolicy).
... policy-lock: turn off the ability for applications to change policy with the call nss_setalgorithmpolicy.
... ssl-default-lock: turn off the ability for applications to change cipher suite states with ssl_enablecipher, ssl_disablecipher.

NSS Tools pk12util
synopsis pk12util -i p12file [-h tokenname] [-v] [common-options] or pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m | --key_len keylen] [-n | --cert_key_len certkeylen] [common-options] or pk12util -l p12file [-h tokenname] [-r] [common-options] where [common-options] = [-d dir] [-p dbprefix] [-k slotpasswordfile | -k slotpassword] [-w p12filepasswordfile | -w p12filepassword] syntax to run the pkcs #12 tool, type ther command pk12util option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
... three of the options, -i, -o, and -l, should be considered commands of the pk12util invocation.
... -l p12file list certificate and private key from from the p12file file.

Pork Tool Development
then any post-location variables refer to "foo" and pre-location variables refer to "my_foo".
...cppsourceloc will change the previously provided location information (in variable cpp_source_loc._loc) from post-location to pre-location.
... all values from the ast refer to the post-location.

Rhino serialization
simple serialization example the rhino shell has two new top-level functions, serialize and deserialize.
...writing an object to a file can be done in a few lines of java code: fileoutputstream fos = new fileoutputstream(filename); scriptableoutputstream out = new scriptableoutputstream(fos, scope); out.writeobject(obj); out.close(); here filename is the file to write to, obj is the object or function to write, and scope is the top-level scope containing obj.
...default serialization would serialize the object or function we desired but would also serialize object.prototype or even possibly the entire top-level scope and everything it refers to!

Getting SpiderMonkey source code
downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
... once you've logged in, cd into the root of your cvs tree and enter the following command: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm this checks out all the files needed in order to build the javascript shell.
...o want the regression tests, add this command: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/js/tests getting older branch versions of spidermonkey if you want to experiment with a specific branch's version of spidermonkey, you need to check out js/src from branch but check out editline and config from trunk: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l -r branch_name mozilla/js/src mozilla/js/src/fdlibm cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src/config mozilla/js/src/editline change branch_name to the name of the branch you want to check out.